great_mobileui/center/orderdetails.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="navbar-box">
			<u-navbar title="订单详情" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="transparent"></u-navbar>
		</view>
		<u-loading-page :loading="loadingPage"></u-loading-page>
		<view class="page-wrap">
			<view class="status-content">
				<view class="status-item" v-if="orderDetails.status==0">
					<view class="text"><text v-if="countdown!='支付超期'"> 请尽快完成付款，还剩 </text>{{countdown}}</view>
					<view class="btn-wrap u-flex u-row-center" v-if="countdown!='支付超期'">
						<view class="btn cancel" @click="cancelOrder">取消订单</view>
						<view class="btn" @click="gotoPay(orderDetails.id)">立即支付</view>
					</view>
				</view>
				<view class="status-item" v-else-if="orderDetails.status==3">
					<view class="text"><text v-if="countdown!='已超期'">距离演出开始，还剩 </text>{{countdown}}</view>
				</view>
				<view class="status-item" v-else>
					<view class="text">{{orderDetails.status|filterOrderState}}</view>
				</view>
			</view>
			<view class="base-info">
				<view class="top u-flex u-row-between">
					<view class="name">{{orderDetails.theatreName}}</view>
					<!-- <view class="icon-wrap u-flex">
						<u-icon name="phone-fill" color="#999999" size="42rpx"></u-icon>
						<u-icon name="map-fill" color="#999999" size="42rpx"></u-icon>
					</view> -->
				</view>
				<view class="info u-flex u-row-between">
					<image class="img" :src="orderDetails.performImg"></image>
					<view class="text">
						<view class="name u-flex u-row-between">
							{{orderDetails.performName}}
							<!-- <text class="status">{{orderDetails.status|filterOrderState}}</text> -->
						</view>
						<view class="time">{{orderDetails.performDate}} {{orderDetails.performTimeStart}}</view>
						<view class="position u-flex u-row-between">
							<view class="">{{orderDetails.goodsName}}/{{orderDetails.seatTypeName}}</view>
							<view class="">X {{orderDetails.viewerNum}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box qr-wrap" v-if="orderDetails.status==3">
				<view class="title">二维码</view>
				<view class="qr-content">
					<view class="img-wrap">
						<!-- <image class="img" :src="orderDetails.performImg"></image> -->
						<view class="ayQrcode" @click="refreshCode">
							<ayQrcode ref="qrcode" :modal="modal_qr" :url="qrContent" @hideQrcode="hideQrcode" :height="180" :width="180" />
						</view>
						<image v-if="orderDetails.status==4" class="refund-ico" :src="staticUrl+'/img/refund-ico.png'"></image>
					</view>
					<!-- <view class="">{{orderDetails.viewersList.length}}张演出票</view> -->
					 <!-- order-num del-line -->
					<view class="order-num">取票号：{{orderDetails.parentQrcodeNo}}</view>
				</view>
			</view>
			<view class="box viewers-list">
				<view class="title">观影人员</view>
				<view class="item u-flex u-row-around" v-for="(item,index) in orderDetails.viewersList" :key="index">
					<text>观影人员{{index + 1}}</text>
					<text>{{item.name}}</text>
					<text>{{item.id}}</text>
					<text v-if="orderDetails.status==3" @click="singleQR(item,index)" class="qrbtn">查看二维码</text>
				</view>
			</view>
			<view class="box order-info">
				<view class="title u-flex u-row-between">
					订单信息
					<text class="btn" v-if="orderDetails.status==3" @click="refund">申请退款</text>
				</view>
				<view class="order-info-item" v-for="(item,index) in orderInfo[orderDetails.status]" :key="index">
					<text class="til">{{item.name}}</text>
					<text class="con">
						<text v-if="item.key=='payType'">{{orderDetails[item.key]|filterPayType}}</text>
						<text v-else-if="item.key=='realPrice'"> ￥ {{orderDetails[item.key]}}</text>
						<text v-else>{{orderDetails[item.key]}}</text>
						<text class="copy-btn" @click="copyOrderNum(orderDetails[item.key])" v-if="item.key=='orderNum'">复制</text>
					</text>
				</view>
			</view>
			<view class="box tips">
				<view class="title">观影须知</view>
				<u-parse :content="formerNotice"></u-parse>
				<!-- <view class="tips-item" v-for="(item,index) in tipsArr" :key="index">
					{{item}}
				</view> -->
			</view>
		</view>
		<u-popup :show="showSingleQR" @close="closeSingleQR" @open="openSingleQR" :round="10" mode="center">
			<view class="singleQR-wrap">
				<view class="title">
					二维码
					<!-- <u-icon class="close" @click="closeSingleQR" name="close" color="#333" size="36rpx"></u-icon> -->
				</view>
				<view class="single-info">
					<view class="item">姓名：{{singleInfo.name}}</view>
					<view class="item">身份证号码：{{singleInfo.idcard}}</view>
					<view class="item">座位：{{singleInfo.seatName}}</view>
					<view class="item">状态：{{singleInfo.status|filterSingleState}}</view>
				</view>
				<view class="singleQrcode">
					<ayQrcode ref="singleqrcode" :modal="singleModalQr" :url="singleQrContent" @hideQrcode="hideSingleQrcode" :height="180" :width="180" />
				</view>
				<view class="order-num">取票号：{{singleInfo.qrcodeNo}}</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
		mixins:[systemInfo],
		components:{
			ayQrcode
		},
		data() {
			return {
				timer: null,
				modal_qr: false,
				qrContent: {}, // 要生成的二维码值
				id:'',
				loadingPage:true,
				staticUrl:this.$commonConfig.staticUrl,
				orderDetails:{},
				deadline: null, // 设置截止时间为某个日期的时间戳
				countdown: '', // 用于显示倒计时时间
				// 状态(0待支付，2超时取消，3支付完成，待使用，4退款中，5己退款，6退款失败，7己使用，8己超期）
				orderInfo:{
					0:[{name:'需付金额',key:'realPrice'},{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'}],
					1:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payWay'},{name:'支付时间',key:'payTime'}],
					2:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payWay'},{name:'支付时间',key:'payTime'}],
					3:[{name:'订单金额',key:'realPrice'},{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payWay'},{name:'支付时间',key:'payTime'}],
					4:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payWay'},{name:'支付时间',key:'payTime'}],
					5:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payWay'},{name:'支付时间',key:'payTime'},{name:'备注信息',key:'remark'}],
					6:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payWay'},{name:'支付时间',key:'payTime'},{name:'备注信息',key:'remark'}],
					7:[{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'支付方式',key:'payWay'},{name:'支付时间',key:'payTime'}],
					8:[{name:'订单金额',key:'realPrice'},{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'备注信息',key:'remark'}],
					9:[{name:'订单金额',key:'realPrice'},{name:'订单编号',key:'orderNum'},{name:'下单时间',key:'createTime'},{name:'备注信息',key:'remark'}],
				},
				tipsArr:[
					'1.请提前到达影院现场，找到自助取票机，打印纸质电影票，完成取票',
					'2.如现场自助取票机无法打印电影票，请联系影院工作人员处理',
					'3.凭打印好的纸质电影票、检票入场观影',
					'4.如果订单使用了兑换券，或购买了特殊场次，暂不支持退票和改签'
				],
				params:{
					
				},
				singleInfo:{},//观影人信息
				showSingleQR:false,//显示单人二维码
				singleModalQr:false,
				singleQrContent:{},
				formerNotice:'',
				countdownTimer:null,//订单倒计时
				
			}
		},
		onShow() {
			this.getOrderDetails(this.id);
		},
		onLoad(page) {
			console.log('page',page);
			this.id = page.id;
			this.getSystemInfo();

		},
		onUnload() {
		    // 页面离开时停止计时器
		    // clearInterval(this.timer)
			clearInterval(this.countdownTimer)
		},
		mounted() {
			// 每秒更新倒计时时间
			this.countdownTimer = setInterval(() => {
			  const now = new Date().getTime();
			  const distance = this.deadline - now;
			  // console.log('distance',distance);
			  if(distance<0){
				  this.countdown = '支付超期';
				  return
			  }
		
			  // 计算倒计时时间，可以根据需求自定义显示方式
			  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
			  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
			  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
		
			  // 更新倒计时时间
			  this.countdown = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
			}, 1000);
		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			// 展示二维码
			showQrcode() {
				let _this = this;
				this.modal_qr = true;
				// uni.showLoading()
				setTimeout(function() {
					// uni.hideLoading()
					_this.$refs.qrcode.crtQrCode()
				}, 50)
			},
			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
			refreshCode(){
				this.qrContent = {};
				this.qrContent.qrcode = this.orderDetails.parentQrcodeNo;
				this.qrContent.time = Date.now();
				this.qrContent = JSON.stringify(this.qrContent);
				this.showQrcode()
			},
			hideSingleQrcode(){
				this.singleModalQr = false;
			},
			getOrderDetails(id){
				this.$u.api.orderDetails({id:id}).then(res=>{
					this.loadingPage = false;
					this.orderDetails = res.data
					if(res.data.status==0){//待支付
						this.deadline = new Date(`${res.data.cancelDateTime}`).getTime();
					}else if(res.data.status==3){//待使用
						this.deadline = new Date(`${res.data.performDateTime}`).getTime();
					}
					if(res.data.status==3){
						this.qrContent.qrcode = res.data.parentQrcodeNo;
						this.qrContent.time = Date.now();
						this.qrContent = JSON.stringify(this.qrContent);
						let that = this;
						that.showQrcode();//一加载生成二维码
						// this.refreshCode()
					}
					
					this.getPerformerNotice();
					// console.log('this.deadline',this.deadline);
					// console.log('orderDetails',JSON.parse(JSON.stringify(res.data)));
				}).catch(err=>{
					uni.$u.toast('获取数据失败,!请重试')
					uni.navigateBack();
					console.log('getOrderDetails',err);
				})
			},
			singleQR(item,index){
				let that = this;
				console.log('singleQR',item);
				this.showSingleQR = true;
				this.singleInfo = item;
				
				this.singleQrContent = {};
				this.singleQrContent.qrcode = item.qrcodeNo;
				this.singleQrContent.time = Date.now();
				this.singleQrContent = JSON.stringify(this.singleQrContent);
				that.showSingleQrcode();//一加载生成二维码
			},
			// 展示二维码
			showSingleQrcode() {
				let _this = this;
				this.singleModalQr = true;
				// uni.showLoading()
				setTimeout(function() {
					// uni.hideLoading()
					_this.$refs.singleqrcode.crtQrCode()
				}, 50)
			},
			closeSingleQR(){
				this.showSingleQR = false;
			},
			openSingleQR(){
				
			},
			clickEven(fun,item){
				// console.log('fun',fun);
				let funObj = {
				  pay: this.pay,
				  logistics:this.logistics,
				  evaluate:this.evaluate,
				  refund:this.refund,
				  cancelOrder:this.cancelOrder,
				  viewRefund:this.viewRefund,
				  confirmReceipt:this.confirmReceipt
				};
				// console.log('funObj[fun]',funObj[fun]);
				if (fun in funObj) {
				  funObj[fun](item);
				}
			},
			pay(item){
				this.gotoPay(this.orderDetails.id);
				// console.log('pay',item);
				// uni.$u.route('/center/pay', {
				// 	orderId: item.id,
				// 	// openid: that.vuex_wechatOpenid,
				// 	payAmount:item.orderPrice
				// });
			},
			logistics(item){
				// console.log('logistics',item);
				uni.$u.route('/center/distribution', {
					orderId: item.id
				});
			},
			evaluate(item){
				// console.log('logistics',item);
				uni.$u.route('/shopping/evaluate', {
					id: item.id
				});
			},
			refund(item){
				console.log('this.orderDetails',this.orderDetails);
				uni.$u.route('/center/refund', {
					id: this.orderDetails.id,
					realPrice:this.orderDetails.realPrice
				});
			},
			cancelOrder(item){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确认取消吗！',
				    success: res => {
				        if (res.confirm) {
				            this.$u.api.cancelOrder({orderId:that.orderDetails.id}).then(res=>{
				            	this.$refs.uToast.show({
				            		message:res.msg,
				            		complete() {
				            			that.getOrderDetails(that.orderDetails.id);
				            		}
				            	});
				            	// uni.$u.toast(res.msg);
				            	console.log('res',res.data);
				            }).catch(err=>{
				            	console.log('cancelOrder',err);
				            })
				        }
				    }
				});
				// console.log('logistics',item);
				
			},
			confirmReceipt(item){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确认收货吗！',
				    success: res => {
				        if (res.confirm) {
				            this.$u.api.confirmReceipt({orderId:item.id}).then(res=>{
								uni.showToast({
									title:res.msg,
									duration:2000,
									complete() {
										that.evaluate(item)
										that.getOrderDetails(that.id);
									}
								});
				            	console.log('res',res.data);
				            }).catch(err=>{
				            	console.log('confirmReceipt',err);
				            })
				        }
				    }
				})
			},
			goMap(){
				uni.openLocation({
				  latitude: Number(this.pickupInfo.pickupLatitude),	//维度
				  longitude: Number(this.pickupInfo.pickupLongitude), //经度
				  name: "商行地址",	//目的地定位名称
				  scale: 15,	//缩放比例
				  address: this.pickupInfo.pickupAddress	//导航详细地址
				})
			},
			copyOrderNum(orderNum){
				// console.log('copyOrderNum',orderNum);
				uni.setClipboardData({
				    data: orderNum,
				    success: function () {
				      uni.showToast({
				        title: '复制成功'
				      });
				    },
					fail(e) {
						// console.log('copyOrderNumfail',e);
						uni.showToast({
						  title: '复制失败',
						  icon:"error"
						});
					}
				});
			},
			gotoPay(orderId){
				this.$u.api.gotoPay({orderId:orderId,openid:''}).then(res=>{
					this.payResult = res.data.payInfo;
					this.payResult.package = res.data.payInfo.packageValue;
					this.wxPay()
					// if(this.params.paymentMode==1||this.params.paymentMode==4){
					// 	this.wxPay()
					// }else{
					// 	uni.$u.route('/shopping/paysuccess');
					// }
					console.log('gotoPayres',res.data);
				}).catch(err=>{
					this.paypass = '';
					this.checkPassShow = false;
					console.log('gotoPay',err);
				})				
			},
			wxPay(){
				let that = this;
				uni.requestPayment({
					... this.payResult,
				    "provider": "wxpay", 
				    "orderInfo": {
				        // "appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
				        // "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
				        // "package": "Sign=WXPay",        // 固定值
				        // "partnerid": "148*****52",      // 微信支付商户号
				        // "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
				        // "timestamp": 1597935292,        // 时间戳（单位：秒）
				        // "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
				    },
				    success(res) {
						that.payQuery();
					},
				    fail(e) {
						console.log('wxPayfail',e);
					}
				})				
			},
			payQuery(){
				let that = this;
				let retryCount = 0;
				let maxRetryCount = 5; // 设置最大重试次数
				let interval = 2000; // 设置间隔时间为2秒
				let timeout = 10000; // 设置超时时间为10秒
				let timer;
				uni.showLoading({
					title:'支付结果查询中'
				})
				timer = setInterval(() => {
					retryCount++;
					if (retryCount > maxRetryCount || retryCount * interval > timeout) {
						clearInterval(timer);
						  uni.hideLoading();
						console.log("支付查询超时或达到最大重试次数");
						// 在这里添加超时或达到最大重试次数的处理逻辑
						this.reloadList()
					} else {
						console.log("第" + retryCount + "次查询");
						// 调用查询支付状态的方法
						// 如果支付状态为成功，则清除定时器并处理成功的逻辑
						// 如果支付状态为失败，则清除定时器并处理失败的逻辑
						this.$u.api.payQuery({orderId:this.orderId}).then(res=>{
							// 0-未支付 1-已支付 2-支付中 3-支付失败 4-支付退款
							let payStatus = res.data.payStatus;
							if(payStatus===1){
								uni.$u.route('/center/paysuccess');
							}else if(payStatus===0||payStatus===2){
								this.payQuery()
							}else if(payStatus===3){
								uni.toast('支付失败')
							}
							clearInterval(timer);
						}).catch(err=>{
							console.log('payQuery',err);
						}).finally(()=>{
							uni.hideLoading()
						})
					}
				}, interval);
			},
			getPerformerNotice(){
				this.$u.api.performerNotice({performId:this.orderDetails.performId}).then(res=>{
					// console.log('getPerformerNotice',res.data);
					this.formerNotice =  res.data.performNotice;
				}).catch(err=>{
					console.log('getPerformerNotice',err);
				})
			},
			

		}
	}
</script>
<style>
	page{
		background: linear-gradient(180deg, #ED0000 0%, #F9FBFD 50%,#F9FBFD 100%);
		background-repeat: no-repeat;
	}
</style>
<style lang="scss" scoped>
.status-content{
	text-align: center;
	padding-top: 30rpx;
	margin-bottom: 52rpx;
	.text{
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-bottom: 52rpx;
	}
	.btn-wrap{
		margin-bottom: 40rpx;
		.btn{
			height: 64rpx;
			line-height: 64rpx;
			padding: 0 28rpx;
			border-radius: 8rpx;
			border: 2rpx solid #FFFFFF;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			&.cancel{
				border-color: #F9B4B4;
				color: #F9B4B4;
			}
			&:not(:last-of-type){
				margin-right: 100rpx;
			}
		}
	}
}
.base-info{
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221,221,221,0.5);
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
	.top{
		padding: 36rpx 24rpx;
		background: #F9FAFD;
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
	}
	.info{
		padding: 28rpx 20rpx 30rpx 24rpx;
		.img{
			width: 180rpx;
			height: 160rpx;
		}
		.text{
			font-size: 24rpx;
			font-weight: 400;
			color: #7F7F7F;
			padding-left: 26rpx;
			flex: 1;
			.name{
				font-size: 28rpx;
				font-weight: bold;
				color: #363636;
				margin-bottom: 20rpx;
			}
			.time{
				margin-bottom: 20rpx;
			}
			.position{
				margin-bottom: 20rpx;
			}
			.status{
				font-size: 24rpx;
				font-weight: 400;
				color: #EE0606;
			}
		}
	}
}
.box{
	margin-bottom: 24rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(221,221,221,0.5);
	border-radius: 20rpx;
	padding: 36rpx 24rpx;
	.title{
		font-size: 28rpx;
		font-weight: bold;
		color: #2D2D2D;
		padding-bottom: 20rpx;
		margin-bottom: 24rpx;
		border-bottom: 1px solid #F4F4F4;
		.btn{
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			border: 2rpx solid #606060;
			font-size: 24rpx;
			font-weight: 400;
			color: #606060;
			cursor: pointer;
		}
	}
}
.order-info{
	.order-info-item{
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		padding: 10rpx 0;
		// &:not(:last-child){
		// 	border-bottom: 0.5px solid #eee;
		// }
		.til{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-right: 40rpx;
		}
		.copy-btn{
			margin-left: 32rpx;
			height: 30rpx;
			line-height: 30rpx;
			padding: 0 14rpx;
			border-radius: 8rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
			background: #EDEDED;
		}
	}
}
.tips{
	.tips-item{
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 36rpx;
		margin-bottom: 20rpx;
	}
}
.qr-wrap{
	.qr-content{
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
	}
	.img-wrap{
		position: relative;
	}
	.ayQrcode,.img{
		width: 180px;
		height: 180px;
		display: block;
		margin: 0 auto 20rpx;
		
	}
	.refund-ico{
		width: 200rpx;
		height: 152rpx;
		position: absolute;
		bottom: -10rpx;
		right: 60rpx;
	}
	
}
.order-num{
		position: relative;
		margin: 30rpx auto 0;
		font-size: 24rpx;
		font-weight: 400;
		color: #363636;
		border: 1px solid #363636;
		padding: 5rpx 20rpx;
		border-radius: 8rpx;
		width: fit-content;
		&.del-line{
			color: #BCBCBC;
			border: 1px solid #BCBCBC;
		}
		&.del-line::after{
			content: '';
			width: 110%;
			height: 1px;
			background-color: #BCBCBC;
			position: absolute;
			top: 50%;
			left: -5%;
		}
	}
.viewers-list{
	.item{
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10px;
		.qrbtn{
			color: #EE0606;
		}
	}
}
.singleQR-wrap{
	padding: 0 24rpx 50rpx;
	box-sizing: border-box;
	min-width: 80vw;
	.title{
		text-align: center;
		height: 94rpx;
		line-height: 94rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #2D2D2D;
		border-bottom: 2rpx solid #F4F4F4;
		margin-bottom: 24rpx;
	}
	.single-info{
		margin-bottom: 24rpx;
		.item{
			font-size: 24rpx;
			font-weight: 400;
			color: #363636;
			margin-bottom: 10rpx;
		}
	}
	.singleQrcode{
		width: 160px;
		height: 160px;
		margin: 24rpx auto 54rpx;
	}
}
</style>