vist_go_uniApp/packageOrder/pages/list/index.vue

<template>
	<view class="bg">
		<u-sticky>
			<view class="pad-t-10 ">
				<view class="flex-items bg-white pad-16" @tap="goSearch">
					<uni-icons type="search" color="#a8a8a8" size="28"></uni-icons>

					<view v-if="params.orderCode" class="font28">
						{{params.orderCode}}
					</view>
					<view class="font-gray font28" v-else>
						请输入订单号或商品名称
					</view>
				</view>
			</view>
			<view class="bg-white">
				<u-tabs :current="current" lineWidth="30" :list="tabList" @click="tabClick"></u-tabs>
			</view>
		</u-sticky>
		<view v-if="orderList.length>0">
			<view v-for="(item,index) in orderList" :key="index">
				<view class="info-region">
					<view @tap="goDetail(item)">
						<view class="flex-items flex-sp-between mar-b-20 mar-lr-12">
							<view>
								订单号:{{item.orderCode}}
							</view>
							<view v-if="item.isAfter==0||item.isAfter==3">
								<text class="fukuan" v-if="item.status==1">
									待付款
								</text>
								<text class="daifahuo" v-if="item.status==2">
									待发货
								</text>
								<text class="shouhuo" v-if="item.status==3">
									待收货
								</text>
								<text class="pingjia mar-r-10" v-if="item.status==4&&item.isEvaluate==0">
									待评价
								</text>
								<text class="wancheng" v-if="item.status==4">
									已完成
								</text>
							</view>


						</view>
						<view class="flex">
							<view>
								<image class=" mar-l-20 img" :src="item.images" mode="aspectFit"></image>
							</view>
							<view class="mar-l-20 mar-r-20">
								<view class="font32 pad-b-10 ">
									{{item.productName}}
								</view>
								<view class="pad-t-10 font-gray font26"
									v-if="item.productCount && item.productCount > 1">
									共{{item.productCount}}件商品
								</view>
								<view class="pad-t-20 font-gray">
									规格: {{item.skuName}}
								</view>
							</view>
						</view>
						<text class="flex-end font-red font28 font-bold mar-r-10">
							实付款 ￥{{item.paymentPrice}}
						</text>
					</view>
					<view>
						<view v-if="item.isAfter===0||item.isAfter===0">
							<!-- 待付款状态 -->
							<view v-if="item.status === 1" class="flex-items flex-end">
								<view class=" mar-t-20 mar-r-10">
									<view class="buyBtn" @click="payOrder(item)">
										去付款
									</view>
								</view>
								<view class=" mar-t-20 mar-r-10">
									<view class="cancelBtn" @click="cancelOrder(item)">
										取消订单
									</view>
								</view>
							</view>
							<!-- 待发货状态 -->
							<view v-if="item.status === 2" class="flex-items flex-end">

								<view class=" mar-t-20 mar-r-10" v-if="item.status === 2">
									<view class="buyBtn" @click="onceOrder(item)">
										再来一单
									</view>
								</view>
							</view>

							<!-- 待收货状态 -->
							<view v-if="item.status === 3" class="flex-items flex-end">
								<view class=" mar-t-20 mar-r-10">
									<view class="cancelBtn" @click="logistics(item)">
										查看物流
									</view>
								</view>

								<view class=" mar-t-20 mar-r-10">
									<view class="buyBtn" @click="confirmReceiptDialog(item)">
										确认收货
									</view>
								</view>
							</view>

							<!-- 已完成状态 -->
							<view v-if="item.status === 4" class="flex-items flex-end">
								<view class=" mar-t-20 mar-r-10">
									<view class="cancelBtn" @click="goScore(item)" v-if="item.isEvaluate==0">
										评价
									</view>
								</view>

								<view class=" mar-t-20 mar-r-10">
									<view class="buyBtn" @click="onceOrder(item)">
										再来一单
									</view>
								</view>
							</view>

						</view>

						<!-- 售后中状态 -->
						<view class=" flex-items flex-end mar-t-20 mar-r-10" v-if="item.isAfter === 1">
							<view class="cancelBtn" @click="checkAfterSaleStatus(item)">
								售后进度
							</view>
						</view>
						<!-- 售后完成状态 -->
						<view class=" flex-items flex-end mar-t-20 mar-r-10" v-if="item.isAfter === 2">
							<view class="cancelBtn" @click="checkAfterSaleStatus(item)">
								售后详情
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="flex-items-plus">
				<image src="@/static/images/empty.png" class="empty "></image>
			</view>
			<view class="font28 font-gray flex-items-plus">
				数据为空
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<uni-popup ref="dialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确认" title="提示" content="确认收货?"
				@confirm="confirmReceipt()"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import CustomToast from '@/uni_modules/custom-components/components/custom-toast/custom-toast.vue';
	import {
		getOrderList,
		confirmReceipt,
		cancelOrder
	} from '@/config/api.js';

	export default {
		components: {
			CustomToast
		},
		data() {
			return {
				current: 0,
				searchKey: "",
				tabList: [{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					},
					{
						name: '已完成'
					},

					{
						name: '待评价'
					}
				],
				orderList: [],
				isFirstLoad: true,
				params: {
					current: 1,
					size: 10,
					status: "",
					isAfter: "",
					isEvaluate: "",
					type: "",
					orderCode: ""
				},
				form: {},
			};
		},
		onLoad(op) {
			if (op.serachKey) {
				this.params.orderCode = op.serachKey;
			}
			console.log(op);
			if (op.status && op.status != 0) {
				this.params.status = op.status;
				this.current = op.status;
			}
			if (op.isAfter) {
				this.params.isAfter = op.isAfter;
				this.current = 5;
			}
			if (op.isEvaluate) {
				this.params.isEvaluate = op.isEvaluate;
				this.current = 6;
			}
			this.getList();
			setTimeout(() => {
				this.isFirstLoad = false;
			}, 1000)
		},
		onPullDownRefresh() {
			this.reset()
			uni.stopPullDownRefresh();
		},
		onShow() {
			console.log(this.isFirstLoad, "11")
			if (!this.isFirstLoad) {

				this.getList();
			}
		},
		methods: {

			goScore(item) {
				this.isFirstLoad = false
				this.$route('/packageOrder/pages/score/index?orderId=' + item.id)
			},
			reset() {
				this.orderList = [];
				this.params.current = 1;
				this.getList();
			},
			after(item) {
				this.$route('/packageOrder/pages/after-sale/index?id=' + item.id);
			},
			logistics(item) {
				this.$route('/packageOrder/pages/logistics/index?expressCode=' + item.expressCode);
			},
			onceOrder(item) {
				this.$route('/packageShop/pages/detail/index?skuId=' + item.skuId + '&id=' + item.productId);
			},
			goSearch() {
				this.$route('/packageShop/pages/search/index?type=2');
			},
			goDetail(item) {
				this.$route('/packageOrder/pages/detail/index?id=' + item.id);
			},
			tabClick(item) {
				console.log(item);
				if (item.index == 5) {
					this.params.isEvaluate = 0;
					this.params.isAfter = ""
					this.params.status = ""
				} else {
					this.params.status = item.index;
					this.params.isAfter = ""
					this.params.isEvaluate = ""
				}
				this.getList();
			},
			getList() {
				getOrderList(this.params).then((res) => {
					this.orderList = res.data.records;
				});
			},
			payOrder(item) {
				this.$route('/packageOrder/pages/payment/index?orderId=' + item.id);
			},
			async cancelOrder(item) {
				try {
					// 确认对话框
					const result = await new Promise((resolve) => {
						uni.showModal({
							title: '提示',
							content: '确定要取消订单：' + item.orderCode + ' 吗？',
							confirmText: '确定',
							cancelText: '取消',
							success: (res) => {
								resolve(res.confirm);
							}
						});
					});

					if (!result) {
						return;
					}

					// 调用取消订单接口
					const response = await cancelOrder({
						id: item.id
					});

					if (response.code === 200) {
						this.showToast('取消订单成功');
						// 重新获取订单列表
						this.reset();
					} else {
						this.showToast(response.msg || '取消订单失败');
					}
				} catch (e) {
					console.error('取消订单失败:', e);
					this.showToast('取消订单失败');
				}
			},
			confirmReceiptDialog(item) {
				this.$refs.dialog.open()
				this.form = item
			},
			showToast(text) {
				this.$refs.uToast.show({
					type: 'success',
					message: text
				})
			},
			confirmReceipt() {
				confirmReceipt(this.form).then((res) => {
					if (res.code == 200) {
						this.$refs.dialog.close()
						this.showToast('操作成功')
						this.reset()
					}
				})
			},
			checkAfterSaleStatus(item) {
				this.$route('/packageOrder/pages/after-sale/index?orderId=' + item.id);
			}
		}
	};
</script>

<style lang="scss">
	.bg {
		min-height: 100vh;
		padding-bottom: 20rpx;
	}

	.info-region {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;
		width: 720rpx;
		height: auto;
		padding: 15rpx;
		background-color: white;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		margin-left: 15rpx;
	}

	.img {
		border-radius: 20rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.daifahuo {
		color: #ffffff;
		background-color: #e2c696;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.fukuan {
		color: #ffffff;
		background-color: #e29c6d;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.shouhuo {
		color: #ffffff;
		background-color: #e2d972;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.wancheng {
		color: #ffffff;
		background-color: #83e25a;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.pingjia {
		color: #ffffff;
		background-color: #e0e2d9;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.shouhou {
		color: #ffffff;
		background-color: #e23e3e;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.buyBtn {
		font-size: 30rpx;
		width: 160rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 36rpx;
		color: #fff;
		background: #E2A28A;
	}

	.cancelBtn {
		font-size: 30rpx;
		width: 160rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 36rpx;
		color: #666666;
		background: #f5f5f5;
	}

	.empty {
		width: 400rpx;
		height: 400rpx;
		margin-top: 200rpx;
	}

	.nav-back {
		position: fixed;
		left: 30rpx;
		top: calc(var(--status-bar-height) + 20rpx);
		z-index: 100;

		.back-btn {
			width: 80rpx;
			height: 80rpx;
			background: rgba(255, 255, 255, 0.8);
			border: 1rpx solid rgba(0, 0, 0, 0.1);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

			&:active {
				transform: scale(0.95);
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
			}
		}

		.back-icon {
			font-family: "iconfont";
			font-size: 36rpx;
			color: #333;
		}
	}
</style>