fanxing-shop/pages/order/orderDetail.vue

<template>
	<view class="success" :style="{ background: `url(${bgImg}) #F4F5F9` }">
		<view class="success_status">
			<view class="status flex aic">
				<view class="status_text">{{ orderInfo.paymentStatus | orderStatus }}</view>
			</view>
		</view>
		<view class="success_content">
			<view class="success_info">
				<view class="">
					<view class="success_item flex jcsb aic">
						<view class="flex aic">
							<view class="label">收件地址</view>
							<text class="bold">{{ orderInfo.email }}</text>
						</view>
						<!--            <view class="success_btn" @click="copyText()">复制</view>-->
					</view>
					<view class="success_item flex aic">
						<view class="label">收件人</view>
						<text>{{ orderInfo.recipientName }}({{ orderInfo.contactPhone }})</text>
					</view>
					<view v-if="orderInfo.completedLink" class="success_item flex aic">
						<view class="label">拍摄视频地址</view>
						<u-link :href="baiduLink" text="百度云盘链接" @click="click"></u-link>
						<view class="copy" @click="copyText(orderInfo.completedLink)">复制</view>
					</view>
				</view>
			</view>
			<view class="line" :style="{ background: `url(${successImg}) no-repeat` }">
				<view class="line-circle"></view>
			</view>
			<view class="detail">
				<view class="detail_item flex aic jcsb">
					<text>订单金额</text>
					<view class="datas flex">
						<text>{{ orderInfo.totalAmount }}元</text>
					</view>
				</view>
				<view class="detail_item flex aic jcsb" @click="goCase">
					<text>套餐名称</text>
					<view class="datas flex">
						<text>{{ orderInfo.packageName }}</text>
						<view class="copy">详情</view>
					</view>
				</view>
				<view class="detail_item flex aic jcsb">
					<text>套餐内容</text>
					<view class="datas flex">
						<text>{{ orderInfo.quantity }}条 (每条15-20s)</text>
					</view>
				</view>
				<view class="detail_item flex aic jcsb" v-if="orderInfo.paymentStatus!=='WAIT_PAYMENT'">
					<text>支付方式</text>
					<view class="datas flex">
						<text>微信支付</text>
					</view>
				</view>
				<view class="detail_item flex aic jcsb">
					<text>订单编号</text>
					<view class="datas flex">
						<text>{{ orderInfo.orderNumber }}</text>
						<view class="copy" @click="copyText(orderInfo.orderNumber)">复制</view>
					</view>
				</view>
				<view class="detail_item flex aic jcsb">
					<text>订单时间</text>
					<view class="datas flex">
						<text>{{ orderInfo.createDate }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<view v-if="orderInfo.paymentStatus==='WAIT_PAYMENT'" class="order-bottom-right flex">
				<view class="btn btn1 p2" @click.stop="handleCancelOrder(orderInfo.orderId)">取消</view>
				<view class="btn btn2 p1" @click.stop="submitOrder(orderInfo)">支付</view>
			</view>
			<view v-else class="order-bottom-right flex">
				<view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='WAIT_SEND'"
					@click.stop="handleCancelOrder(orderInfo.orderId)">
					取消
				</view>
				<view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='WAIT_ORDER'"
					@click.stop="handleCancelOrder(orderInfo.orderId)">
					取消
				</view>
				<view v-if="orderInfo.paymentStatus==='WAIT_SEND'" class="btn btn1 p2 ml-6 btn-theme">寄样</view>
				<view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='SHOOTING'"
					@click.stop="handleAftermarketOrder(orderInfo.orderId)">申请售后
				</view>
				<view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='DELIVERED'"
					@click.stop="handleAftermarketOrder(orderInfo.orderId)">申请售后
				</view>
				<view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='WAIT_CHECK'"
					@click.stop="handleAftermarketOrder(orderInfo.orderId)">申请售后
				</view>
				<view class="btn btn1 p2" v-if="orderInfo.paymentStatus==='AFTER_SALE'"
					@click.stop="handleCancelAftermarketOrder(orderInfo.orderId)">撤回申请
				</view>
				<view class="btn btn1 p2 ml-6 btn-theme" v-if="orderInfo.paymentStatus==='WAIT_CHECK'"
					@click.stop="handleCheckOrder(orderInfo.orderId)">确认验收
				</view>
			</view>


			<view class="back" @click="goHome">返回首页</view>
		</view>
	</view>
</template>

<script>
	import {
		copy
	} from "@/utils/utils";
	import {
		aftermarketOrder,
		cancelAftermarketOrder,
		cancelOrder,
		checkOrder,
		getOrderDetail,
		updateOrder
	} from "../../apis/order";
	import {
		goHome
	} from "../../utils/utils";
	import {
		submitOrder
	} from "../../apis";

	export default {
		components: {},
		data() {
			return {
				orderId: '',
				orderInfo: {
					completedLink: '',
					paymentStatus: '',
					packageName: "",
					createDate: "",
					orderNumber: '',
					shootingRequirements: '',
					email: '',
				},
				bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
				payImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_paysuccess.png",
				successImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_quekou.png'
			};
		},
		onLoad(options) {
			if (options.orderId) {
				this.orderId = options.orderId;
			}
			this.getData();
		},
		computed: {
			baiduLink() {

				const linkRegex = /链接:\s*(https:\/\/pan.baidu.com\/s\/\S+)/;
				const codeRegex = /提取码:\s*(\w+)/;

				const linkMatch = this.orderInfo.completedLink.match(linkRegex);
				const codeMatch = this.orderInfo.completedLink.match(codeRegex);

				let link = "";
				let accessCode = "";

				if (linkMatch && linkMatch.length > 1) {
					link = linkMatch[1];
				}

				if (codeMatch && codeMatch.length > 1) {
					accessCode = codeMatch[1];
				}
				
				return link +'?pwd='+ accessCode
			}

		},
		watch: {
			// 可以在这里添加监听器，例如监听订单状态变化后更新页面显示
		},
		methods: {

			getData() {
				getOrderDetail({
					orderId: this.orderId
				}).then(res => {
					this.orderInfo = res;
				});
			},
			goCase() {
				uni.navigateTo({
					url: '/pages/index/detail?type=1'
				});
			},
			goHome() {
				goHome();
			},
			// 复制
			copyText(text) {
				copy(text);
			},
			// 处理取消订单逻辑
			handleCancelOrder(orderId) {
				this.showConfirmModal('你确定要取消订单吗？', () => {
					cancelOrder({
						orderId: Number(orderId)
					}).then(() => {
						uni.navigateBack();
					});
				});
			},
			// 处理更新订单逻辑
			handleUpdateOrder(orderId) {
				this.showConfirmModal('你确定要取消订单吗？', () => {
					updateOrder({
						orderId: Number(orderId),
					}).then(() => {
						uni.navigateBack();
					});
				});
			},
			// 处理确认验收逻辑
			handleCheckOrder(orderId) {
				this.showConfirmModal('你确定要验收该订单吗？', () => {
					checkOrder({
						orderId: Number(orderId),
					}).then(() => {
						uni.navigateBack();
					});
				});
			},
			// 处理申请售后逻辑
			handleAftermarketOrder(orderId) {
				this.showConfirmModal('你确定要申请售后吗？', () => {
					aftermarketOrder({
						orderId: Number(orderId)
					}).then(() => {
						uni.navigateBack();
					});
				});
			},
			// 处理撤销售后逻辑
			handleCancelAftermarketOrder(orderId) {
				this.showConfirmModal('你确定要撤销售后吗？', () => {
					cancelAftermarketOrder({
						orderId: Number(orderId)
					}).then(() => {
						uni.navigateBack();
					});
				});
			},
			// 显示确认模态框的通用函数
			showConfirmModal(content, confirmCallback) {
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							confirmCallback();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			submitOrder(params) {
				submitOrder({
					...params
				}).then((res) => {
					// 检查是否在微信浏览器中
					if (typeof WeixinJSBridge === 'undefined') {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', () => {
								this.invokePayment(res);
							}, false);
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', () => {
								this.invokePayment(res);
							});
							document.attachEvent('onWeixinJSBridgeReady', () => {
								this.invokePayment(res);
							});
						}
					} else {
						this.invokePayment(res);
					}
				});
			},
			invokePayment(rePayInfo) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: rePayInfo.appid,
						timeStamp: rePayInfo.timeStamp,
						nonceStr: rePayInfo.nonceStr,
						package: rePayInfo.packages,
						signType: rePayInfo.signType,
						paySign: rePayInfo.sign
					},
					(res) => {
						if (res.err_msg === 'get_brand_wcpay_request:ok') {
							this.getData();
						} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
							uni.showToast({
								title: '用户取消了支付'
							});
						} else {
							console.error('支付失败', res.err_msg);
							// 处理支付失败的逻辑
						}
					}
				);
			},
		},
		created() {
			// 可以在这里添加组件创建时的初始化逻辑
		},
		mounted() {
			// 可以在这里添加组件挂载后的逻辑，例如绑定一些事件监听器等
		},
	};
</script>

<style lang='scss' scoped>
	.success {
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: top;
		padding: 0 24rpx;

		.success_status {
			margin-top: 64rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.pay_img {
				width: 48rpx;
				height: 48rpx;
				margin-left: 16rpx;
			}

			.status_text {
				font-weight: 500;
				font-size: 40rpx;
				color: #0D121A;
			}

			.status_tip {
				font-weight: 400;
				font-size: 28rpx;
				color: #9EA3B1;
				margin-top: 20rpx;
			}
		}

		.success_content {
			border-radius: 32rpx;
			overflow: hidden;
			margin-top: 64rpx;

			.success_info {
				background-color: #fff;
				padding: 36rpx 32rpx 8rpx;

				.success_item {
					margin-bottom: 20rpx;

					.label {
						min-width: 120rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #9EA3B1;
						margin-right: 16rpx;
					}

					text {
						font-size: 32rpx;
						color: #0D121A;
					}
				}
			}

			.success_btn {
				width: 80rpx;
				height: 40rpx;
				font-weight: 500;
				background: #F4F5F9;
				border-radius: 48rpx;
				font-size: 24rpx;
				color: #0D121A;
				text-align: center;
				line-height: 40rpx;
			}

			.line {
				width: 100%;
				height: 40rpx;
				background-size: cover !important;
				padding: 0 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.line-circle {
					width: 100%;
					border: 2rpx dashed #EDEDED;
					height: 2rpx;
				}
			}

			.detail {
				background-color: #fff;
				padding: 32rpx 32rpx 40rpx;

				.detail_item {
					margin-bottom: 36rpx;

					text {
						white-space: nowrap;
						font-weight: 400;
						font-size: 28rpx;
						color: #0D121A;
					}

					.datas {
						.copy {
							width: 80rpx;
							height: 40rpx;
							background: #F4F5F9;
							border-radius: 48rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #061714;
							text-align: center;
							line-height: 40rpx;
							margin-left: 16rpx;
						}
					}
				}

				.detail_item:nth-last-child(1) {
					margin-bottom: 0;
				}
			}

			.success_title {
				color: #9DA3A2;
			}
		}

		.btns {
			padding: 96rpx 32rpx;

			view {
				width: 100%;
				height: 84rpx;
				// border-radius: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
			}

			.bind {
				color: #061714;
				margin-bottom: 32rpx;
				font-weight: 500rpx;
				background: linear-gradient(140deg, #246AF1 0%, #2F98EF 100%);
			}

			.back {
				font-weight: bold;
				background: #FFFFFF;
				// border: 4rpx solid #E7EAEA;
				color: #061714;
			}
		}

		.ml16 {
			margin-left: 16rpx;
		}
	}

	.order-bottom-right {
		margin-bottom: 36rpx;
	}
	.copy {
		width: 80rpx;
		height: 40rpx;
		background: #F4F5F9;
		border-radius: 48rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #061714;
		text-align: center;
		line-height: 40rpx;
		margin-left: 16rpx;
	}
</style>