vist_go_uniApp/pages/order/list.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>
							<text class="shouhou" v-if="item.isAfter==1">
								售后中
							</text>
							<text class="pingjia" v-if="item.isAfter==2">
								售后完成
							</text>

						</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-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">
									<view class="cancelBtn" @click="after(item)">
										申请售后
									</view>
								</view>
								<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="cancelBtn" @click="after(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="cancelBtn" @click="after(item)">
										申请售后
									</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>
		<CustomToast ref="customToast" />
		<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 '../../components/CustomToast.vue';
	import {
		getOrderList,
		confirmReceipt
	} from '../../config/api.js';

	export default {
		components: {
			CustomToast,
		},
		data() {
			return {
				current: 0,
				searchKey: "",
				tabList: [{
						name: '全部'
					},
					{
						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; // 首次加载完成，将标志位设为 false
			}, 1000)
		},
		onPullDownRefresh() {
			this.reset()
			uni.stopPullDownRefresh();
		},
		onShow() {
			if (!this.isFirstLoad) {
				// 如果不是首次加载，再调用 getList 方法
				this.getList();
			}
		},
		methods: {
			goScore(item) {
				this.$route('/pages/order/score?orderId=' + item.id)
			},
			reset() {
				this.orderList = [];
				this.params.current = 1;
				this.getList();
			},
			after(item) {
				this.$route('/pages/order/after?id=' + item.id);
			},
			logistics(item) {
				this.$route('/pages/order/logistics?expressCode=' + item.expressCode);
			},
			onceOrder(item) {
				console.log(item, "item");
				this.$route('/packageShop/pages/detail/index?skuId=' + item.skuId + '&id=' + item.productId);
			},
			goSearch() {
				this.$route('/pages/order/search?type=2');
			},
			goDetail(item) {
				this.$route('/pages/order/detail?id=' + item.id);
			},
			tabClick(item) {
				console.log(item);
				if (item.index == 6) {
					this.params.isEvaluate = 0;
					this.params.isAfter = ""
					this.params.status = ""
				} else if (item.index == 5) {
					this.params.isAfter = 1
					this.params.status = ""
					this.params.isEvaluate = ""
				} 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('/pages/order/payment?orderId=' + item.id);
			},
			cancelOrder(item) {
				// 实现取消订单逻辑
				console.log('取消订单，订单号：', item.orderCode);
			},
			confirmReceiptDialog(item) {
				this.$refs.dialog.open()
				this.form = item
			},
			confirmReceipt() {
				confirmReceipt(this.form).then((res) => {
					if (res.code == 200) {
						this.$refs.dialog.close()
						this.$refs.customToast.showToast('操作成功');
						this.reset()
					}
				})
			},
			checkAfterSaleStatus(item) {
				// 实现查看售后进度逻辑
				this.$route('/pages/order/after-progress?orderId=' + item.id);
			}
		}
	};
</script>

<style lang="scss">
	.bg {
		min-height: 100vh;
		padding-bottom: 20rpx;
		// background: linear-gradient(135deg, #f8ffee 0%, #fffff6 100%);
	}

	.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: #6a6a6a;
		background: #e2e2e2;
	}

	.custom-easyinput {
		border: none;
		/* 取消边框 */
		outline: none;
		/* 取消聚焦时的轮廓线 */
	}
</style>