new-dianxiaorui-uniapp/pageInvest/shop/order.vue

<template>
	<view class="order">
		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<up-dropdown>
				<!-- <up-dropdown-item @change="upChange" v-model="dataFrom.sourceType" title="商品类型" :options="options1"></up-dropdown-item> -->
				<up-dropdown-item @change="upChange" v-model="dataFrom.businessPayType" title="支付类型" :options="options2"></up-dropdown-item>
				<up-dropdown-item @change="upChange" v-model="dataFrom.status" title="状态" :options="options3"></up-dropdown-item>
			</up-dropdown>
			<view class="p30">
				<view class="order_view" v-for="i in dataList" :key="i" @click="navTo(`/pages/order/details?id=${i.id}`)">
					<view class="order_view_dd">
						<view>
							<text style="font-weight: 500">订单号</text>
							:{{ i.orderNo }}
						</view>
						<view>
							<up-tag size="mini" v-if="i.status == 0" text="待支付" plain></up-tag>
							<up-tag size="mini" v-if="i.status == -1" text="已取消" type="warning" plain></up-tag>
							<up-tag size="mini" v-if="i.status == 1" text="支付成功" type="success" plain></up-tag>
							<up-tag size="mini" v-if="i.status == -2" text="退款" type="error" plain></up-tag>
						</view>
					</view>
					<view class="order_view_info">
						<image class="order_view_info_img" :src="JSON.parse(i.picture)[0]" mode="aspectFit"></image>
						<view class="order_view_info_right">
							<view class="order_view_info_right_tit">
								<view style="display: flex; align-items: center">
									<up-tag size="mini" :text="i.sourceType == 1 ? '商品' : '套餐'" bgColor="#4874e5" borderColor="#4874e5"></up-tag>
									<view style="margin-left: 15rpx">
										{{ i.goodName }}
									</view>
								</view>
							</view>
							<view class="order_view_info_right_num" style="display: flex; align-items: center; justify-content: space-between">数量:{{ i.num }}</view>
							<view class="order_view_info_right_mon">
								订单金额:
								<text style="color: crimson">￥{{ i.amount }}</text>
							</view>
						</view>
					</view>
					<view
						style="
							display: flex;
							align-items: center;
							justify-content: space-between;
							border-top: 1rpx solid rgba(153, 153, 153, 0.5);
							margin-top: 15rpx;
							padding-top: 15rpx;
						"
					>
						<view style="font-size: 28rpx">{{ timeFormat(new Date(i.createTime).getTime(), 'yyyy-mm-dd hh:MM') }}</view>
						<view>
							<up-tag size="mini" v-if="i.orderPlatform == 3" text="支付宝" plain></up-tag>
							<up-tag size="mini" v-if="i.orderPlatform == 2" text="微信" type="success" plain></up-tag>
							<up-tag size="mini" v-if="i.orderPlatform == 1" text="钱包" type="warning" plain></up-tag>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useNav } from '@/hooks/useNav.js';
import { onPullDownRefresh, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { orderPage } from '@/api/api.js';
import { timeFormat } from '@/uni_modules/uview-plus';
const { navTo } = useNav();

const paging = ref(null);
let dataList = ref([]);

let dataFrom = reactive({
	status: '',
	businessPayType: '',
	sourceType: ''
});

let options1 = ref([
	{
		label: '商品',
		value: 1
	},
	{
		label: '套餐',
		value: 2
	}
]);

let options2 = ref([
	{
		label: '微信',
		value: 1
	},
	{
		label: '支付宝',
		value: 2
	},
	{
		label: '钱包',
		value: 3
	}
]);

let options3 = ref([
	{
		label: '待支付',
		value: 0
	},
	{
		label: '支付成功',
		value: 1
	},
	{
		label: '取消',
		value: -1
	},
	{
		label: '退款',
		value: -2
	}
]);

let isPagingRefNotFound = () => {
	return !paging.value;
};

onPullDownRefresh(() => {
	if (isPagingRefNotFound()) return;
	paging.value.reload().catch(() => {});
});

onPageScroll((e) => {
	if (isPagingRefNotFound()) return;
	paging.value.updatePageScrollTop(e.scrollTop);
	e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
});

onReachBottom(() => {
	if (isPagingRefNotFound()) return;
	paging.value.pageReachBottom();
});

const upChange = (e) => {
	console.log(dataFrom);
	paging.value.reload();
};

const queryList = (pageNo, pageSize) => {
	let { id } = uni.getStorageSync('user');
	const params = {
		current: pageNo,
		pageSize: pageSize,
		...dataFrom
	};

	orderPage(params)
		.then((res) => {
			paging.value.complete(res.records);
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};
</script>

<style scoped lang="scss">
.order {
	&_view {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 25rpx;
		margin-bottom: 30rpx;
		&_info {
			@include flex;
			&_img {
				width: 208rpx;
				height: 208rpx;
				margin-right: 15rpx;
				border-radius: 10rpx;
			}
			&_right {
				flex: 1;
				font-size: 28rpx;
				color: #232323;
				&_tit {
					@include flex($space: space-between);
					margin-bottom: 15rpx;
				}
				&_num {
					margin-bottom: 15rpx;
				}
				&_mon {
					margin-bottom: 15rpx;
					text {
						color: #ff2e24;
					}
				}
				&_time {
				}
			}
		}
		&_dd {
			@include flex($space: space-between);
			font-weight: bold;
			font-size: 28rpx;
			color: #232323;
			margin-bottom: 15rpx;
		}
	}
}
</style>