purchase-let/pagesOrder/order/order.vue

<template>
	<view class="wrap">
		<up-navbar placeholder style="z-index: 100800;" @leftClick="navBack">
			<template #center>
				<view>订单</view>
			</template>
		</up-navbar>
		<up-sticky bgColor="#fff">
			<view style="padding: 10rpx 20rpx 0 20rpx;">
				<up-search shape="round" v-model="keyword" @custom="searchOn" @search="searchOn" @clear="searchOn"
					:actionStyle="{color: '#20b128'}"></up-search>
			</view>
			<up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false"
				:activeStyle="	{ color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs>
		</up-sticky>

		<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(list, k) in orderList" :key="k">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMoreGood">
					<view class="page-box">
						<view v-if="list.length>0" class="list">
							<good v-for="(item, index) in list" :datas="item" :key="index" :type="k"
								@cancleOrder="cancleOrder" @takeOrder="takeOrder" @rePay="rePay"
								@purchaseAgain="purchaseAgain"></good>
						</view>
						<view v-if="!where[k].loading&&list.length==0" style="padding-top: 100rpx;">
							<up-empty text="订单空空如也"
								icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
							</up-empty>
						</view>
						<view v-else-if="where[k].loadend" style="padding-top: 100rpx;">
							<view style="text-align: center;color: #999;">没有更多了</view>
						</view>
						<view v-if="where[k].loading"
							style="padding-top: 100rpx;display: flex;flex-direction: column;align-items: center;">
							<up-loading-icon mode="circle"></up-loading-icon>
							<view style="margin-top: 20rpx;color: #999;">加载中</view>
						</view>
						<view style="width: 100%;height: 300rpx;"></view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<orderCanclePopup :show="showCancel" @close="showCancel=false" @change="submitCancel" />
		<modal :show="showTake" title="确认收货" content="请确认您已收到货" @close="showTake=false" @change="confirmReceipt">
		</modal>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue';
	import good from "./component/good.vue";
	import orderCanclePopup from "@/components/orderCanclePopup.vue"
	import modal from "@/components/modal.vue"
	import {
		cancelOrderApi,
		rePaymentApi,
		confirmReceiptApi,
		orderListApi,
		purchaseAgainApi
	} from "@/api/order.js"

	const tabsActive = ref(0)
	const changeTab = ({
		index
	}) => {
		tabsActive.value = index;
		swiperCurrent.value = index;
	}
	const tablist = ref([{
			name: '全部'
		},
		{
			name: '待付款'
		},
		{
			name: '待收货'
		},
		// { name: '退款/售后' },
	]);

	const swiperCurrent = ref(0);
	const animationfinish = ({
		detail: {
			current
		}
	}) => {
		swiperCurrent.value = current;
		tabsActive.value = current;
		if (swiperCurrent.value == 0 && orderList.value[0].length == 0) getOrderList(0);
		if (swiperCurrent.value == 1 && orderList.value[1].length == 0) getOrderList(1, '', 0);
		if (swiperCurrent.value == 2 && orderList.value[2].length == 0) getOrderList(2, 1);
	}

	// 取消订单
	const showCancel = ref(false);
	let cancelId = '';
	const submitCancel = (e) => {
		showCancel.value = false;
		cancelOrderApi({
			order_id: cancelId,
			value: e.value
		}).then(res => {
			uni.showToast({
				title: '取消成功',
				icon: 'none'
			})
			orderList.value[1] = orderList.value[1].filter(item => item.id !== cancelId)
		})
	}
	const cancleOrder = (e) => {
		cancelId = e.id;
		showCancel.value = true;
	}

	// 确认收货
	const showTake = ref(false);
	let takeId = "";
	const takeOrder = (e) => {
		takeId = e.id;
		showTake.value = true;
	}
	const confirmReceipt = () => {
		confirmReceiptApi({
			order_id: takeId
		}).then(res => {
			showTake.value = false;
			uni.$u.toast('确认收货成功');
			reloadAll();
		})
	}

	// 再次购买
	const purchaseAgain = (e) => {
		purchaseAgainApi({
			order_id: e.id
		}).then(res => {
			uni.$u.toast('已加入购物车');
		})
	}

	const rePay = (e) => {
		rePaymentApi({
			order_id: e.id,
			address_id: e.address_id,
			mer_id: e.merchant,
			pay_type: 1
		}).then(res => {
			if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: res.data.timeStamp,
				nonceStr: res.data.nonceStr,
				package: res.data.package,
				signType: res.data.signType,
				paySign: res.data.paySign,
				success: (e) => {
					if (e.errMsg == 'requestPayment:ok') {
						uni.showToast({
							title: '订单支付成功',
							icon: 'success'
						})
						reloadAll();
					} else uni.$u.toast('支付失败')
				},
				fail: (e) => {
					uni.$u.toast('用户取消支付')
				}
			})
		}).catch(err => {
			uni.$u.toast('网络错误')
		})
	}

	// 订单
	const where = ref([{
			page_no: 1,
			page_size: 25,
			loading: false,
			loadend: false
		}, {
			page_no: 1,
			page_size: 25,
			loading: false,
			loadend: false
		},
		{
			page_no: 1,
			page_size: 25,
			loading: false,
			loadend: false
		}
	])
	const keyword = ref('')
	const orderList = ref([
		[],
		[],
		[],
	])
	const getOrderList = (type = 0, status = '', paid = 1) => {
		if (where.value[type].loadend) return;
		where.value[type].loading = true;
		orderListApi({
			page_no: where.value[type].page_no,
			page_size: where.value[type].page_size,
			number: keyword.value,
			status: status,
			paid: paid
		}).then(res => {
			if (where.value[type].page_no == 1) orderList.value[type] = [];
			orderList.value[type] = [...orderList.value[type], ...res.data.lists];
			if (res.data.lists.length < where.value[type].page_size) where.value[type].loadend = true;
			where.value[type].page_no++;
			where.value[type].loading = false;
		}).catch(err => {
			where.value[type].loading = false;
		})
	}

	const loadMoreGood = () => {
		if (swiperCurrent.value == 0) getOrderList(0);
		if (swiperCurrent.value == 1) getOrderList(1, '', 0);
		if (swiperCurrent.value == 2) getOrderList(2, 1);
	}

	// 搜索
	const searchOn = () => {
		orderList.value[+swiperCurrent.value] = [];
		where.value[+swiperCurrent.value].page_no = 1;
		where.value[+swiperCurrent.value].loadend = false;
		if (swiperCurrent.value == 0) getOrderList(0);
		if (swiperCurrent.value == 1) getOrderList(1, '', 0);
		if (swiperCurrent.value == 2) getOrderList(2, 1);
	}

	let back = 0;
	const navBack = () => {
		uni.navigateBack({
			delta: back ? +back : 0
		})
	}

	const reloadAll = () => { //对订单进行操作时刷新页面
		where.value.forEach(item => {
			item.page_no = 1;
			item.loadend = false;
		});
		getOrderList(1, '', 0);
		getOrderList(0);
		getOrderList(2, 1);
	}

	onLoad((options) => {
		if (options.type) {
			tabsActive.value = +options.type;
			swiperCurrent.value = +options.type;
			searchOn();
		}
		if (options.back) back = options.back;
		// getOrderList(0);
		// getOrderList(1, '', 0);
		// getOrderList(2, 1);

		uni.$on('reLoadOrderList', reloadAll);
	})

	onUnload(() => {
		uni.$off('reLoadOrderList', reloadAll)
	})
</script>

<style lang="scss">
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.page-box {
		margin: 20rpx;

		// .list {}
	}
</style>