vist_go_uniApp/pages/order/after-progress.vue

<template>
	<view>
		<view class="mar-t-10">

		</view>
		<CustomToast ref="customToast" />
		<view class="region mar-t-20" v-if="order.isAfter!=3">
			<view>
				<uni-steps active-color="#e29c6d" :options="list1" :active="active" :key="activeKey"
					v-if="orderAfter.type==1" />
				<uni-steps active-color="#e29c6d" :options="list2" :active="active" :key="activeKey"
					v-if="orderAfter.type==2" />
			</view>
		</view>

		<view class="region pad-24">
			<view v-if="orderAfter.status==1">
				<view class="font38 font-bold ">
					请寄回商品
				</view>
				<view class="mar-tb-20 font28">
					商家已同意退款,请您在
					<text class="font-red font28 pad-lr-10">
						{{remainingTime}}
					</text>
					内寄回商品
				</view>
				<view class="flex  flex-sp-between mar-t-20 ">
					<view class="nowrap mar-r-20 ">
						商家地址信息
					</view>
					<view>
						<view class="flex-end">
							<text>
								{{merchantAddress.name}}
							</text>
							<text>
								{{merchantAddress.mobile}}
							</text>
						</view>
						<view>
							{{merchantAddress.address}}
						</view>
					</view>
				</view>
				<view class="flex-end mar-t-20">
					<text class="font-blue " @tap="copyContent">复制</text>
				</view>
				<view class="gray-line mar-tb-8"></view>
			</view>
			<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 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 @tap="checkAfterSaleStatus" class="flex-items-between">
				<view>

					<view v-if="orderAfter.status==4">
						<view class="font-red">
							售后已关闭
						</view>
						<view class="font38 font-bold ">
							商家审核不通过
						</view>
						<view class="font28">
							原因:{{orderAfter.approveRemark}}
						</view>
					</view>
					<view v-if="orderAfter.status==5">
						<view class="font-red">
							售后已关闭
						</view>
						<view class="font38 font-bold ">
							商家不同意退款
						</view>
						<view class="font28">
							原因:{{orderAfter.approveRemark}}
						</view>
					</view>
					<view v-if="orderAfter.status==6">
						<view class="font-red">
							售后已关闭
						</view>
						<view class="font38 font-bold ">
							您已取消售后
						</view>

					</view>
				</view>

			</view>

			<view class="flex-items-between mar-t-20">
				<view>
					<view class="font28" v-if="order.isAfter==1&&(orderAfter.status==1||orderAfter.status==2)">
						我已寄出
					</view>
					<view class="font-gray" v-if="order.isAfter==1&&(orderAfter.status==1)">
						填写物流单号
					</view>
				</view>
				<view>
					<text class="copy-btn " @tap="logistics"
						v-if="orderAfter.status==2||orderAfter.status==3">查询物流</text>
					<text class="copy-btn " @tap="showExpressNumberPopup" v-if="orderAfter.status==1">填写单号</text>
				</view>
			</view>
		</view>

		<view class="region2">
			<view class="font32 pad-16 ">
				退货信息
			</view>
			<view class="flex-items">
				<view>
					<image class=" mar-l-20 productImg" :src="orderAfter.productImg" mode="cover"></image>
				</view>
				<view class="mar-l-20 mar-r-20">
					<view class="font28 pad-b-10 ">
						{{orderAfter.productName}}
					</view>
					<view class="pad-tb-16 font-gray">
						<text class="font28">
							规格: {{orderAfter.skuName}}
						</text>
					</view>
				</view>
			</view>

			<view class="flex-items-between pad-24">
				<view>
					退货件数
				</view>
				<view>
					{{orderAfter.count}}件
				</view>
			</view>
			<view class="flex-items-between pad-24">
				<view>
					退款金额
				</view>
				<view>
					{{orderAfter.afterPrice}}
				</view>
			</view>
			<view class="flex-items-between pad-24">
				<view>
					退货类型
				</view>
				<view>
					{{orderAfter.type==1?'退货退款':'仅退款'}}
				</view>
			</view>
			<view class="flex-items-between pad-24">
				<view>
					退货原因
				</view>
				<view>
					{{reasonRange[orderAfter.reason].text}}
				</view>
			</view>
			<view class="flex-items-between pad-24">
				<view>
					申请时间
				</view>
				<view>
					{{orderAfter.createTime}}
				</view>
			</view>
			<view class="flex-items-between pad-24">
				<view>
					订单编号
				</view>
				<view>
					{{orderAfter.orderCode}}
				</view>
			</view>
			<view class="pad-24">
				<view>
					凭证
				</view>
				<view class="image-item mar-tb-16">
					<view v-for="(image, imageIndex) in imagesList" :key="imageIndex" class="mar-r-20 "
						v-if="imagesList.length>0">
						<image @tap="detailPreviewImage(imageIndex)" :src="image" class="images">
						</image>
					</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="expressNumberPopup" borderRadius="20rpx 20rpx 0 0 " background-color="#fff">
			<view class="popup-content">
				<view class="popup-title">填写物流单号</view>
				<input v-model="orderAfter.expressCode" focus class="popup-input" placeholder="请输入物流单号" />
				<view class="popup-buttons">
					<button class="popup-cancel" @click="hideExpressNumberPopup">取消</button>
					<button class="popup-confirm" @click="submitExpressNumber">确定</button>
				</view>
			</view>
		</uni-popup>
		<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 class="flex-items">
					<button class="grayBut mar-r-20 " @click="onCancelAfter" v-if="order.isAfter==1">取消售后</button>
					<button class="grayBut mar-r-20 " @click="submitAfterSale " v-if="order.isAfter==3">再次申请售后</button>
					<button class="grayBut mar-r-20" @click="afterRecord" v-if="historyDetail!=1">售后记录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		merchantAddressDetail,
		orderDetail,
		orderAfterDetail,
		orderAfterDetailById,
		updateExpressCode,
		cancelAfter
	} from '../../config/api.js';
	import CustomToast from '../../components/CustomToast.vue';

	export default {
		components: {
			CustomToast,
		},
		data() {
			return {
				activeKey: 0,
				remainingTime: "", // 剩余时间
				merchantAddress: {},
				active: 0,
				imagesList: [],
				order: {},
				orderAfter: {
					reason: 0,
					expressCode: ""
				},
				list1: [{
					title: '商家审核'
				}, {
					title: '寄回商品'
				}, {
					title: '商家退款'
				}, {
					title: '退款完成'
				}],
				list2: [{
					title: '商家审核'
				}, {
					title: '退款完成'
				}],
				orderId: "",
				historyDetail: "",
				reasonRange: [{
						value: 1,
						text: "不喜欢,效果不好"
					},
					{
						value: 2,
						text: "不想要了"
					},
					{
						value: 3,
						text: "材质与商品描述不符"
					},
					{
						value: 4,
						text: "大小尺寸与商品描述不符"
					},
					{
						value: 5,
						text: "安装质量问题"
					},
					{
						value: 6,
						text: "做工瑕疵"
					},
					{
						value: 7,
						text: "颜色、款式、图案与描述不符"
					},
					{
						value: 8,
						text: "商品破损或污渍"
					},
					{
						value: 9,
						text: "其他原因"
					},
				],
			}
		},
		onLoad(op) {
			if (op.orderId) {
				this.orderId = op.orderId
				this.getDetail()
				this.getOrderDetail()
			}
			if (op.id) {
				this.getDetailById(op.id)
			}
			if (op.historyDetail) {
				this.historyDetail = op.historyDetail
			}
			this.getAddress()
		},
		methods: {
			getOrderDetail() {
				orderDetail({
					id: this.orderId
				}).then((res) => {
					this.order = res.data
				})
			},
			afterRecord() {
				this.$route('/pages/order/history-after?orderId=' + this.orderId);
			},
			submitAfterSale() {
				this.$route('/pages/order/after?id=' + this.orderId);
			},
			detailPreviewImage(currentIndex) {
				uni.previewImage({
					current: this.imagesList[currentIndex], // 当前显示图片的链接
					urls: this.imagesList // 需要预览的图片链接列表
				});
			},
			// 计算并格式化倒计时
			formatRemainingTime() {
				const currentTime = new Date(); // 当前时间
				const createTime = new Date(this.orderAfter.createTime.replace(/-/g, '/')); // 转换为 Date 对象
				const deadline = new Date(createTime.getTime() + 7 * 24 * 60 * 60 * 1000); // 7天后的截止时间
				console.log("currentTime", currentTime);
				console.log("createTime", createTime);
				console.log("deadline", deadline);

				let remainingTime = deadline - currentTime; // 剩余时间（毫秒）

				if (remainingTime <= 0) {
					this.remainingTime = "已超过退货期限";
					clearInterval(this.timer); // 清除定时器
					return;
				}

				// 计算剩余天、小时和分钟
				const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
				const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
				this.remainingTime = `${days}天${hours}小时${minutes}分钟`;
			},
			onCancelAfter() {
				this.$refs.dialog.open()
			},
			cancel() {
				cancelAfter({
					id: this.orderAfter.id
				}).then((res) => {
					if (res.code == 200) {
						this.$refs.customToast.showToast('操作成功');
						this.$refs.dialog.close()
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)

					}
				})
			},
			// 启动倒计时
			startCountdown() {
				this.formatRemainingTime(); // 初始化倒计时

				// 每分钟更新一次倒计时
				this.timer = setInterval(() => {
					this.formatRemainingTime();
				}, 60000); // 每分钟更新一次
			},

			logistics() {
				this.$route('/pages/order/logistics?expressCode=' + this.orderAfter.expressCode);
			},
			showExpressNumberPopup() {
				this.$refs.expressNumberPopup.open("bottom");
			},
			hideExpressNumberPopup() {
				this.$refs.expressNumberPopup.close();
			},
			submitExpressNumber() {
				if (this.orderAfter.expressCode) {
					updateExpressCode(this.orderAfter).then((res) => {
						if (res.code == 200) {
							this.$refs.customToast.showToast('提交成功');
							this.getDetail();
							this.hideExpressNumberPopup();
						}
					});
				} else {
					uni.showToast({
						title: '请输入物流单号',
						icon: 'none'
					});
				}
			},
			copyContent() {
				uni.setClipboardData({
					data: this.merchantAddress.address + " " + this.merchantAddress.mobile + " " + this
						.merchantAddress.name,
					success() {
						// 复制成功的提示
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
				});
			},
			getDetail() {
				orderAfterDetail({
					orderId: this.orderId
				}).then((res) => {
					this.orderAfter = res.data
					this.imagesList = this.orderAfter.images.split(',');
					this.active = this.orderAfter.status
					this.activeKey = Date.now(); // 更新 activeKey
					this.$set(this, "active", this.orderAfter.status)
					if (this.orderAfter.status == 1) {
						this.startCountdown(); // 启动倒计时
					}
				})
			},
			getDetailById(id) {
				orderAfterDetailById({
					id: id
				}).then((res) => {
					this.orderAfter = res.data
					this.orderId = this.orderAfter.orderId
					this.getOrderDetail()
					this.imagesList = this.orderAfter.images.split(',');
					this.active = this.orderAfter.status
					this.activeKey = Date.now(); // 更新 activeKey
					this.$set(this, "active", this.orderAfter.status)
					if (this.orderAfter.status == 1) {
						this.startCountdown(); // 启动倒计时
					}
				})
			},
			getAddress() {
				merchantAddressDetail().then((res) => {
					this.merchantAddress = res.data
				})
			}
		}
	}
</script>
<style>
	.navigation {
		position: fixed;
		bottom: 0;
		width: 100%;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
	}

	button::after {
		border: none;
	}

	.copy-btn {
		background-color: #ffffff;
		border: 1px solid #999999;
		color: #333333;
		padding: 5rpx 10rpx;
		/* 减少按钮的内边距 */
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.productImg {
		border-radius: 20rpx;
		width: 120rpx;
		height: 120rpx;
	}

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

	.popup-content {
		padding: 20rpx;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.popup-input {
		border: 1px solid #ccc;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		height: 80rpx;
	}

	.popup-buttons {
		display: flex;
		justify-content: space-around;
	}

	.popup-cancel,
	.popup-confirm {
		padding: 10rpx 30rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.popup-cancel {
		background-color: #f2f2f2;
		color: #333;
		width: 40%;
	}

	.popup-confirm {
		background-color: #e29c6d;
		color: #fff;
		width: 40%;
	}

	.image-item {
		margin-bottom: 10rpx;
		display: flex;
		/* 设置子元素垂直排列 */
		align-items: center;
		/* 水平居中对齐子元素 */
	}

	.images {
		width: 100rpx;
		height: 100rpx;
	}
</style>