订单详情改造

center/orderdetails.vue

@@ -53,7 +53,7 @@
 				<view class="qr-content">
 					<view class="img-wrap">
 						<view class="ayQrcode">
-							<uv-qrcode :hide="showSingleQR" ref="qrcode" size="180px" :value="mainQR"></uv-qrcode>
+							<uv-qrcode :hide="hideMainQR" ref="qrcode" size="180px" :value="mainQR"></uv-qrcode>
 						</view>
 					</view>
 					<view class="order-num">取票号：{{orderDetails.parentQrcodeNo}}</view>
@@ -76,13 +76,19 @@
 			</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 style="width: 96rpx;">{{item.name}}</text>
-					 <!-- style="width: 130rpx;" -->
-					<text style="flex: 1;">{{orderDetails.status>2?item.seatName:"-"}}</text>
-					<!-- <text>{{item.idcard|maskID}}</text> -->
-					<text v-if="orderDetails.status==3||orderDetails.status==4||orderDetails.status==6||orderDetails.status==7" @click="singleQR(item,index)" class="qrbtn" :style="{opacity:item.qrcodeStatus===0?'1':'0.5'}">查看二维码</text>
+				<view class="item u-flex u-row-between" v-for="(item,index) in orderDetails.viewersList" :key="index">
+					<view class="viewers-wrap">
+						<view class="viewer" v-for="(p,i) in item.nameList" :key="i">
+							<!-- <text>观影人员{{index + 1}}</text> -->
+							<text style="width: 96rpx;margin-right: 10px;min-width: 4em;display: inline-block;">{{p}}</text>
+							<!-- style="width: 130rpx;" -->
+							<text style="flex: 1;">{{orderDetails.status>2?item.seatName[i]:"-"}}</text>
+						</view>
+					</view>
+					<view class="btn-box">
+						<text v-if="item.status==3||item.status==4||item.status==6||item.status==7" @click="singleQR(item,index)" class="qrbtn" :style="{opacity:item.qrcodeStatus===0?'1':'0.5'}">查看二维码</text>
+						<!--<text @click="showRefundInfoPopup(item)" v-if="item.status==4||item.status==5||item.status==6">退款信息</text>-->
+					</view>
 				</view>
 			</view>
 			<view class="box order-info">
@@ -104,39 +110,32 @@
 					</text>
 				</view>
 			</view>
-			<view class="box order-info refundInfo" v-if="orderDetails.status==4||orderDetails.status==5||orderDetails.status==6">
+			<view class="box order-info refund-list" v-if="orderDetails.refundList&&orderDetails.refundList.length>0">
 				<view class="title u-flex u-row-between">
 					退款信息
 				</view>
-				<view class="order-info-item">
-					<text class="til">退款单号</text>
-					<text class="con">{{refundInfo.id}}</text>
-					<text class="copy-btn" @click="copyOrderNum(refundInfo.id)" >复制</text>
-				</view>
-				<view class="order-info-item">
-					<text class="til">申请时间</text>
-					<text class="con">{{refundInfo.refundTime}}</text>
-				</view>
-				<view class="order-info-item">
-					<text class="til">订单金额</text>
-					<text class="con">￥ {{refundInfo.orderAmount}}</text>
-				</view>
-				<view class="order-info-item">
-					<text class="til">退款金额</text>
-					<text class="con">￥ {{refundInfo.refundAmount}}</text>
-				</view>
-				<view class="order-info-item">
-					<text class="til">退款原因</text>
-					<text class="con">{{refundInfo.refundReason}}</text>
-				</view>
-				<view class="order-info-item" v-if="orderDetails.status==6">
-					<text class="til">失败原因</text>
-					<text class="con">{{refundInfo.errReason}}</text>
-				</view>
-				<view class="order-info-item">
-					<text class="til">退款状态</text>
-					<text class="con">{{refundInfo.status|filterRefundState}}</text>
-				</view>
+					<view class="item" v-for="(item,index) in orderDetails.refundList" :key="index">
+						<view class="item-row u-flex u-row-between">
+							<view class="left">
+								<text class="til">退款单号</text>
+								<text class="con">{{item.id}}</text>
+								<image @click="copyOrderNum(item.id)" class="copy-icon" mode="widthFix" :src="staticUrl+'/img/copy-ico.svg'" ></image>
+								<!-- <text class="copy-btn" @click="copyOrderNum(item.id)">复制</text> -->
+							</view>
+							<view class="right">
+								<text class="con">{{item.status|filterRefundState}}</text>
+							</view>
+						</view>
+						<view class="item-row u-flex u-row-between">
+							<view class="left">
+								<text class="til">退款金额</text>
+								<text class="con">{{item.refundAmount}}</text>
+							</view>
+							<view class="right">
+								<text class="con">{{item.refundReason}}</text>
+							</view>
+						</view>
+					</view>
 			</view>
 			<view class="box tips parse-content">
 				<view class="title">观影须知</view>
@@ -172,6 +171,44 @@
 				<view class="order-num" :class="{'del-line':singleInfo.qrcodeStatus!==0}">取票号：{{singleInfo.qrcodeNo}}</view>
 			</view>
 		</u-popup>
+		<!-- 添加退款信息弹窗 -->
+		<u-popup :show="showRefundInfo" @close="closeRefundInfo" :round="10" mode="center">
+			<view class="refund-info-popup">
+				<view class="title u-flex u-row-between">
+					退款信息
+					<u-icon name="close" size="32" color="#333" @click="closeRefundInfo"></u-icon>
+				</view>
+				<view class="order-info-item">
+					<text class="til">退款单号</text>
+					<text class="con">{{refundInfo.id}}</text>
+					<text class="copy-btn" @click="copyOrderNum(refundInfo.id)">复制</text>
+				</view>
+				<view class="order-info-item">
+					<text class="til">申请时间</text>
+					<text class="con">{{refundInfo.refundTime}}</text>
+				</view>
+				<!-- <view class="order-info-item">
+					<text class="til">订单金额</text>
+					<text class="con">￥ {{refundInfo.orderAmount}}</text>
+				</view> -->
+				<view class="order-info-item">
+					<text class="til">退款金额</text>
+					<text class="con">￥ {{refundInfo.refundAmount}}</text>
+				</view>
+				<view class="order-info-item">
+					<text class="til">退款原因</text>
+					<text class="con">{{refundInfo.refundReason}}</text>
+				</view>
+				<view class="order-info-item" v-if="orderDetails.status==6">
+					<text class="til">失败原因</text>
+					<text class="con">{{refundInfo.errReason}}</text>
+				</view>
+				<view class="order-info-item">
+					<text class="til">退款状态</text>
+					<text class="con">{{refundInfo.status|filterRefundState}}</text>
+				</view>
+			</view>
+		</u-popup>
 		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
@@ -220,6 +257,7 @@
 				},
 				singleInfo:{idcard:''},//观影人信息
 				showSingleQR:false,//显示单人二维码
+				hideMainQR:false,
 				singleModalQr:false,
 				singleQrContent:'无效值',
 				singleQrOptions:{
@@ -229,6 +267,7 @@
 				countdownTimer:null,//订单倒计时
 				templateIdList:[],//微信小程序订阅消息
 				refundInfo:{status:null},//退款信息
+				showRefundInfo: false, // 控制退款信息弹窗显示
 				
 			}
 		},
@@ -305,6 +344,14 @@
 				this.$u.api.orderDetails({id:id}).then(res=>{
 					this.loadingPage = false;
 					this.orderDetails = res.data;
+					let viewersList  = res.data.viewersList.map(item=>{
+						return {
+							...item,
+							nameList:item.nameList.split(',')||[],
+							seatName:item.seatName.split(',')||[],
+						}
+					});
+					this.orderDetails.viewersList = viewersList;
 					this.refundInfo =  res.data.refundInfo||{};
 					if(res.data.status==0){//待支付
 						this.deadline = new Date(`${res.data.cancelDateTime}`).getTime();
@@ -326,6 +373,7 @@
 				let that = this;
 				// console.log('singleQR',item);
 				this.showSingleQR = true;
+				this.hideMainQR = true;
 				this.singleInfo = item;
 				if(item.qrcodeStatus!==0){
 					this.singleQrOptions.foregroundColor='#BCBCBC';
@@ -335,7 +383,6 @@
 				
 				// this.singleQrContent = {};
 				// this.singleQrContent.qrcode = item.qrcodeNo;
-				// this.singleQrContent.time = Date.now();
 				// this.singleQrContent = JSON.stringify(this.singleQrContent);
 				
 				this.singleQrContent = item.qrcodeNo
@@ -345,6 +392,7 @@
 			},
 			closeSingleQR(){
 				this.showSingleQR = false;
+				 this.hideMainQR = false;
 			},
 			clickEven(fun,item){
 				// console.log('fun',fun);
@@ -642,8 +690,17 @@
 			},
 			rebook(){
 				uni.$u.route('pages/ticketlist',{performId:this.orderDetails.performId,orderId:this.orderDetails.id,fromPage:'rebook'})
+			},
+			// 显示退款信息弹窗
+			showRefundInfoPopup(item) {
+				this.hideMainQR = true;
+				this.showRefundInfo = true;
+			},
+			// 关闭退款信息弹窗
+			closeRefundInfo() {
+				this.hideMainQR = false;
+				this.showRefundInfo = false;
 			}
-
 		}
 	}
 </script>
@@ -852,13 +909,23 @@
 		}
 	}
 .viewers-list{
+	padding-bottom: 16rpx;
 	.item{
+		.viewers-wrap{
+			.viewer:not(:first-of-type){
+				margin-top: 8px;
+			}
+		}
 		font-size: 28rpx;
 		color: #333;
 		margin-bottom: 10px;
 		.qrbtn{
 			color: #EE0606;
 		}
+		& + .item{
+			border-top: 1px dashed #EDEDED;
+			padding-top: 8px;
+		}
 	}
 }
 .singleQR-wrap{
@@ -907,4 +974,61 @@
 	font-weight: 400;
 	color: #7F7F7F;
 }
+.refund-info-popup {
+  padding: 30rpx;
+  min-width: 600rpx;
+  max-height: 80vh;
+  overflow-y: auto;
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    padding-bottom: 20rpx;
+    margin-bottom: 20rpx;
+    border-bottom: 1px solid #eee;
+  }
+  
+  .order-info-item {
+    padding: 16rpx 0;
+    font-size: 28rpx;
+    
+    .til {
+      color: #999;
+      margin-right: 20rpx;
+    }
+    
+    .con {
+      color: #333;
+    }
+  }
+}
+.refund-list{
+	.title{
+		margin-bottom: 0;
+	}
+	.item{
+		font-size: 28rpx;
+		padding: 8px 0;
+		.copy-icon{
+			width: 35rpx;
+			// margin-left: 5px;
+			padding-left: 5px;
+			position: relative;
+			top: 3px;
+		}
+		& + .item{
+			border-top: 1px solid #EDEDED;
+		}
+		.item-row{
+			& + .item-row{
+				margin-top: 8px;
+			}
+		}
+		.til{
+			 color: #999;
+			 margin-right: 5px;
+		}
+	}
+}
 </style>