vist_go_uniApp/pages/order/detail.vue

<template>
	<view>
		<CustomToast ref="customToast" />
		<view class="region  pad-24 mar-t-10" v-if="order.isAfter==3">
			<view @tap="checkAfterSaleStatus" class="flex-items-between">
				<view>
					<view class="font-red">
						售后已关闭
					</view>
					<view v-if="orderAfter.status==4">
						<view class="font38 font-bold ">
							商家审核不通过
						</view>
						<view class="font28">
							原因:{{orderAfter.approveRemark}}
						</view>
					</view>
					<view v-if="orderAfter.status==5">
						<view class="font38 font-bold ">
							商家不同意退款
						</view>
						<view class="font28">
							原因:{{orderAfter.approveRemark}}
						</view>
					</view>
					<view v-if="orderAfter.status==6">
						<view class="font38 font-bold ">
							您已取消售后
						</view>

					</view>
				</view>
				<uni-icons color="#a8aeb4" type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="region pad-24 mar-t-10">
			<view v-if="order.isAfter==0||order.isAfter==3">
				<!-- 待付款状态 -->
				<view v-if="order.status==1">
					<view class="font38 font-bold ">
						订单待付款,点击立即付款
					</view>
				</view>
				<!-- 待发货状态 -->
				<view v-if="order.status==2" class="flex-items-plus ">
					<uni-icons color="#63b43d" type="checkbox-filled" size="30"></uni-icons>
					<view class="font34 font-bold">
						买家已付款
					</view>
				</view>
				<!-- 待收货状态 -->
				<view v-if="order.status==3" class="flex-items-between" @tap="checkLogistics">
					<view class="font34 font-bold ">
						订单已发货,点击查看物流
					</view>
					<uni-icons color="#a8aeb4" type="right" size="20"></uni-icons>
				</view>
				<!-- 已完成状态 -->
				<view v-if="order.status==4">
					<!-- 是否已评价  0否,1是-->
					<view class="flex-items-between ">
						<view class="flex-items">
							<uni-icons color="#63b43d" type="checkbox-filled" size="30"></uni-icons>
							<view class="font34 font-bold">
								订单已完成
							</view>
						</view>
						<view class="flex-items font-blue font28" @tap="goScore" v-if="order.isEvaluate==0">
							去评价
							<uni-icons color="#646464" type="right" size="20"></uni-icons>
						</view>
					</view>

				</view>

			</view>
			<view v-if="order.isAfter==1">
				<!-- 售后状态 -->
				<view class="flex-items-between mar-t-10" @tap="checkAfterSaleStatus">
					<view class="font38 font-bold " v-if="orderAfter.status==0">
						售后已提交,请等待商家审核
					</view>
					<view class="font38 font-bold " v-if="orderAfter.status==1">
						商家已审核通过,请寄回商品
					</view>
					<view class="font38 font-bold " v-if="orderAfter.status==2">
						商品已寄出,等待商家退款
					</view>
					<view>
						<uni-icons color="#7f8388" type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view v-if="order.isAfter==2">
				<view v-if="orderAfter.status==3">
					<view class="flex-items-plus">
						<uni-icons color="#63b43d" type="checkbox-filled" size="30"></uni-icons>
						<view class="font38 font-bold ">
							售后完成
						</view>
					</view>
					<view class="text-align mar-t-10">
						钱款{{orderAfter.afterPrice}}元已退回到你**账户
					</view>
				</view>
			</view>
		</view>
		<view class="region pad-24 mar-t-10">
			<view class="flex-items-between">
				<view class="flex-items">
					<uni-icons type="location" size="30"></uni-icons>
					<view class="font-bold">
						{{order.province}}{{order.city}}{{order.area}}{{order.address}}
					</view>
				</view>
				<view class="font-blue" @tap="updateAddress"
					v-if="(order.isAfter==0||order.isAfter==3)&&order.status==2">
					修改>
				</view>
			</view>

			<view class="mar-t-10 mar-l-40">
				{{order.name}} {{order.mobile}}
			</view>
		</view>
		<view class="gray-line"></view>
		<view class="pad-24 region">
			<view class="flex-items " @tap="goProduct">
				<view>
					<image class=" mar-l-20 productImg" :src="order.images" mode="cover"></image>
				</view>
				<view class="mar-l-20 mar-r-20">
					<view class="font28 pad-b-10 ">
						{{order.productName}}
					</view>
					<view class="pad-tb-16 font-gray">
						<text>
							规格: {{order.skuName}}
						</text>
						<text class="mar-l-20">
							x{{order.count}}
						</text>
					</view>
					<view class="pad-t-10  ">
						<text class=" font-red font32 font-bold">
							￥{{order.paymentPrice}}
						</text>
					</view>
					<view class="mar-r-16">
					</view>
				</view>
			</view>
			<view class="gray-line"></view>
			<view class="pad-24">
				<view class="flex-items-between">
					<text>
						商品总价
					</text>
					<text>
						{{order.paymentPrice}}
					</text>
				</view>
				<view class="flex-items-between mar-t-40">
					<text>
						运费
					</text>
					<text>
						0
					</text>
				</view>
				<view class="flex-items-between mar-t-40">
					<text>
						实付款
					</text>
					<text>
						{{order.paymentPrice}}
					</text>
				</view>
				<view class="flex-items-between mar-t-40">
					<text>
						订单编号
					</text>
					<text>
						{{order.orderCode}}
					</text>
				</view>
				<!-- <view class="flex-items-between mar-t-40">
					<text>
						收货信息
					</text>
					<view>
						<view>
							{{order.province}}{{order.city}}{{order.area}}{{order.address}}
						</view>
						<view class="mar-t-10">
							{{order.mobile}} {{order.name}}
						</view>

					</view>
				</view> -->
				<view class="flex-items-between mar-t-40">
					<text>
						创建时间
					</text>
					<text>
						{{order.createTime}}
					</text>
				</view>
				<view class="flex-items-between mar-t-40">
					<text>
						付款时间
					</text>
					<text>
						{{order.payTime}}
					</text>
				</view>
				<view class="flex-items-between mar-t-40" v-if="order.status==3||order.status==4">
					<text>
						发货时间
					</text>
					<text>
						{{order.shipTime}}
					</text>
				</view>
				<view class="flex-items-between mar-t-40" v-if="order.status==4">
					<text>
						成交时间
					</text>
					<text>
						{{order.confirmTime}}
					</text>
				</view>
			</view>
		</view>
		<view class="navigation">
			<view class="flex-items-between">
				<view class="mar-l-20" @click="$Router.pushTab({name: 'index'})">
					<u-icon name="chat" color="#F95B5B" size="22"></u-icon>
					<view>客服</view>
				</view>
				<view>
					<view v-if="order.isAfter==0||order.isAfter==3">
						<!-- 待付款状态 -->
						<view class="flex-items" v-if="order.status === 1">
							<button class="grayBut mar-r-20" @click="cancelOrder">取消订单</button>
							<button class="orgBut mar-r-20" @click="payOrder">去付款</button>
						</view>

						<!-- 待发货状态 -->
						<view class="flex-items" v-if="order.status === 2">
							<button class="grayBut mar-r-20" @click="submitAfterSale">申请售后</button>
							<button class="orgBut mar-r-20" @click="onceAgainOrder">再来一单</button>
						</view>

						<!-- 待收货状态 -->
						<view class="flex-items" v-if="order.status === 3">
							<button class="grayBut mar-r-20" @click="submitAfterSale">申请售后</button>
							<button class="grayBut mar-r-20" @click="checkLogistics">查看物流</button>
							<button class="orgBut mar-r-20" @click="confirmReceiptDialog">确认收货</button>
						</view>

						<!-- 已完成状态 -->
						<view class="flex-items" v-if="order.status === 4">
							<button class="grayBut mar-r-20" @click="deleteOrder">删除订单</button>
							<button class="grayBut mar-r-20" @click="submitAfterSale">申请售后</button>
							<button class="orgBut mar-r-20" @click="onceAgainOrder">再来一单</button>
						</view>
					</view>

					<!-- 售后中状态 -->
					<view v-if="order.isAfter === 1" class="flex-items">
						<button class="grayBut mar-r-20" @click="onCancelAfter">取消售后</button>
						<button class="orgBut mar-r-20" @click="checkAfterSaleStatus">查看售后进度</button>
					</view>

					<!-- 售后完成状态 -->
					<view v-if="order.isAfter === 2" class="flex-items">
						<button class="grayBut mar-r-20" @click="checkAfterSaleStatus">售后详情</button>
						<button class="orgBut mar-r-20" @click="onceAgainOrder">再来一单</button>
					</view>

				</view>
			</view>
		</view>
		<uni-popup ref="dialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确认" title="提示" content="确认要取消售后?"
				@confirm="cancel()"></uni-popup-dialog>
		</uni-popup>
		<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 {
		orderDetail,
		cancelAfter,
		orderAfterDetail,
		confirmReceipt
	} from '../../config/api.js';
	import CustomToast from '../../components/CustomToast.vue';
	export default {
		components: {
			CustomToast,
		},
		data() {
			return {
				orderAfter: {},
				orderId: "",
				order: {},
				form: {},
				isFirstLoad: true, // 新增标志位，用于判断是否是首次加载
			};
		},
		methods: {
			goScore() {
				this.$route('/pages/order/score?orderId=' + this.order.id)
			},
			updateAddress() {
				this.$route('/pages/order/update-address?orderId=' + this.order.id)
			},
			cancel() {
				cancelAfter({
					id: this.orderAfter.id
				}).then((res) => {
					if (res.code == 200) {
						this.$refs.customToast.showToast('操作成功');
						this.$refs.dialog.close()
						this.getOrderDetail();
					}
				})
			},
			onCancelAfter() {
				this.$refs.dialog.open()
			},
			goProduct() {
				this.$route('/packageShop/pages/detail/index?id=' + this.order.productId)
			},
			getOrderDetail() {
				orderDetail({
					id: this.orderId
				}).then((res) => {
					this.order = res.data;
					this.getAfterDetail()
				});
			},
			getAfterDetail() {
				orderAfterDetail({
					orderId: this.orderId
				}).then((res) => {
					this.orderAfter = res.data
				})
			},
			cancelOrder() {
				console.log('取消订单，订单号：', this.order.orderCode);
			},
			payOrder() {
				// 跳转到支付页面
				this.$route('/pages/order/payment?orderId=' + this.order.id);
			},
			submitAfterSale() {
				this.$route('/pages/order/after?id=' + this.order.id);
			},

			checkLogistics() {
				this.$route('/pages/order/logistics?expressCode=' + this.order.expressCode);
			},
			confirmReceiptDialog() {
				this.$refs.dialog.open()
				this.form = this.order
			},
			confirmReceipt() {
				confirmReceipt(this.form).then((res) => {
					if (res.code == 200) {
						this.$refs.dialog.close()
						this.$refs.customToast.showToast('操作成功');
						this.getOrderDetail()
					}
				})
			},
			deleteOrder() {
				console.log('删除订单，订单号：', this.order.orderCode);
			},
			addToCart() {
				console.log('加入购物车，订单号：', this.order.orderCode);
			},
			onceAgainOrder() {
				console.log('再来一单，订单号：', this.order.orderCode);
			},
			checkAfterSaleStatus() {
				this.$route('/pages/order/after-progress?id=' + this.orderAfter.id);
			}
		},
		onLoad(op) {
			this.orderId = op.id;
			this.getOrderDetail();
			setTimeout(() => {
				this.isFirstLoad = false; // 首次加载完成，将标志位设为 false
			}, 1000)
		},
		onShow() {
			if (!this.isFirstLoad) {
				// 如果不是首次加载，再调用  方法
				this.getOrderDetail();
			}
		}
	};
</script>

<style>
	.navigation {
		position: fixed;
		bottom: 0;
		width: 100%;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
	}

	.grayBut {
		background-color: #f2f2f2;
		padding: 5rpx 30rpx 5rpx 30rpx;
		font-size: 26rpx;
		color: #1b1b1b;
	}

	.orgBut {
		background-color: #F95B5B;
		padding: 5rpx 30rpx 5rpx 30rpx;
		font-size: 26rpx;
		color: #ffffff;
	}

	button::after {
		border: none;
	}
</style>