详情页面

pages/my/order/electronicTicketNew/electronicTicketNew.vue

@@ -19,7 +19,7 @@
 		        <view class="status-product">{{orderInfo.merchantName}}（{{orderInfo.productName}}）</view>
 		    </view>
 		</view>
-		<template v-if="orderInfo.orderType==1||orderInfo.orderType==3">
+		<template v-if="orderInfo.orderType==1&&ticketCode!=nul||orderInfo.orderType==3&&ticketCode!=null">
 			<view class="order-certificate order-allType order-positionTop">
 					<!-- <view class="alltype-title">
 							<view class="title-line">
@@ -46,6 +46,8 @@
 		        <view class="title-label">排队详情</view>
 		        <!-- <u-icon name="reload"></u-icon> -->
 		    </view>
+				<!-- 未过号 -->
+				<template v-if="sortData[0].sortFair===0">
 					<view class="queueUp-rowNumber" v-for="(item,index) in sortData" :key="index">
 							<view class="rowNumber-list">
 									<text class="list-name">正排队号区间：</text>
@@ -54,7 +56,6 @@
 							<view class="rowNumber-list">
 									<text class="list-name">我的排队号：</text>
 									<view class="list-value">{{item.sortNo}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;">({{item.projectName}})</text></view>
-								<!-- <text class="list-btnNew"  @click="sortAgain(item)" v-if="item.resetSort">重新排号</text> -->
 							</view>
 							
 							<view class="rowNumber-list">
@@ -66,17 +67,20 @@
 									<text class="list-value2">请及时关注排号信息，系统30s自动刷新。空号较多时，预计进入时间可能提前或推后，感谢您的理解。</text>
 							</view>
 					</view>
-				
-				
+				</template>
+				<!-- 返程排号/第一次取号 -->
+				<template v-if="sortData[0].sortFair===4||sortData[0].sortFair===5">
 					<view class="queueUp-rowNumber" v-for="(item,index) in sortData" :key="index">
 							<view class="rowNumber-list rowNumber-list2">
 									<text class="list-name">正排队号区间：</text>
 									<view class="list-value3">{{item.showStart}} ~ {{item.showEnd}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;">({{item.projectName}})</text></view>
 							</view>
-				    <view class="rowNumber-takeNum">取号</view>
-						<view class="rowNumber-takeTimer">9分53秒后可取号</view>
+							<view class="rowNumber-takeNum" v-if="returnTripType==true" @click="sortAgain(item)">取号</view>
+							<view class="rowNumber-takeTimer" v-if="returnTripType==false">{{m}}分{{s}}秒后可取号</view>
 					</view>
-				
+				</template>
+				<!-- 可进入 -->
+				<template v-if="sortData[0].sortFair===1">
 					<view class="queueUp-rowNumber queueUp-rowNumber2" v-for="(item,index) in sortData" :key="index">
 							<view class="rowNumber-list">
 									<text class="list-name">正排队号区间：</text>
@@ -85,7 +89,6 @@
 							<view class="rowNumber-list">
 									<text class="list-name">我的排队号：</text>
 									<view class="list-value">{{item.sortNo}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;">({{item.projectName}})</text></view>
-								<!-- <text class="list-btnNew"  @click="sortAgain(item)" v-if="item.resetSort">重新排号</text> -->
 							</view>
 							
 							<view class="rowNumber-list">
@@ -97,7 +100,9 @@
 									<text class="list-value2">请及时关注排号信息，系统30s自动刷新。空号较多时，预计进入时间可能提前或推后，感谢您的理解。</text>
 							</view>
 					</view>
-				
+				</template>
+				<!-- 过号 -->
+				<template v-if="sortData[0].sortFair===2||sortData[0].sortFair===3">
 					<view class="queueUp-rowNumber queueUp-rowNumber3" v-for="(item,index) in sortData" :key="index">
 							<view class="rowNumber-list rowNumber-list2">
 									<text class="list-name">正排队号区间：</text>
@@ -105,13 +110,16 @@
 							</view>
 							<view class="rowNumber-list rowNumber-list2">
 								<view class="rowNumber-signOver">您排队号已过</view>
-							<view class="rowNumber-takeNum2">取号</view>
+								<view class="rowNumber-takeNum2" v-if="item.sortFair===3" @click="signOverFun(item)">取号</view>
 							</view>
-						<view class="rowNumber-takeTimer">9分53秒后可取号</view>
 					</view>
-				
+				</template>
+				<!-- 历史排号 -->
 				<view class="queueUp-historyNum">
-					历史排号：240（北站）/ 587（北站）
+					历史排号：
+					<template v-for="(item,index) in sortsAll">
+						<text v-if="index!==0" :key="index">{{item.sortNo}}({{item.projectName}})</text>
+					</template>
 				</view>
 		</view>
 		<view class="order-mes order-allType order-positionTop">
@@ -152,8 +160,12 @@
 		                <view class="list-text">{{orderInfo.orderTime}}</view>
 		            </view>
 		            <view class="case-list">
-		                <view class="list-name">游玩日期</view>
-		                <view class="list-text">{{orderInfo.playDate?orderInfo.playDate.substr(0,10):""}} {{orderInfo.startPlayTime?orderInfo.startPlayTime.substr(0,8):""}}</view>
+		                <view class="list-name">使用日期</view>
+		                <view class="list-text">{{orderInfo.playDate?orderInfo.playDate.substr(0,10):""}}</view>
+		            </view>
+		            <view class="case-list">
+		                <view class="list-name">游玩时间</view>
+		                <view class="list-text">{{orderInfo.startPlayTime?orderInfo.startPlayTime.substr(0,5):""}} ~ {{orderInfo.endPlayTime?orderInfo.endPlayTime.substr(0,5):""}}</view>
 		            </view>
 		            <view class="case-list" v-for="(item,index) in orderExtendList" :key="index">
 		                <view class="list-name">{{item.title}}</view>
@@ -162,11 +174,18 @@
 		        </view>
 		        <view class="box-case" v-if="touristInfo.length>0">
 		            <view class="case-list">
-		                <view class="list-name">游客信息</view>
+		                <view class="list-name">联系信息</view>
+		                <view class="list-text">
+		                    <view >
+													<view>{{touristInfo[0].name}} {{touristInfo[0].phone}}</view>
+												</view>
+		                </view>
+		            </view>
+								<view class="case-list">
+								    <view class="list-name">用户信息</view>
 								    <view class="list-text">
 								        <view v-for="(list,index) in touristInfo" :key="index">
-													<view>{{list.name}} {{orderInfo.ticketPhone}}</view>
-													{{list.credentialNumber.substr(0,4)+"****"+list.credentialNumber.substr(14,list.credentialNumber.length-1)}}
+													<view style="margin-right: 24rpx;">{{list.name}}</view>
 												</view>
 								    </view>
 								</view>
@@ -190,6 +209,21 @@
 		        </view>
 		    </view>
 		</view>
+		<!--遮罩-->
+		<view class="order-mask" v-if="maskType==true">
+			<view class="mask-case">
+				<view class="case-title">
+					温馨提示
+				</view>
+				<view class="case-body">
+					如您已通过查验进入排队区，则无需取号，取号将重排号
+				</view>
+				<view class="case-btn">
+					<view class="btn-typeAll btn-type1" @click="sortAgain(overSignedData)">取号</view>
+					<view class="btn-typeAll btn-type2" @click="maskType==false">返回</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -356,9 +390,12 @@
 			return {
 				openId:'',//用户信息
 				id:'',//订单ID
+				companyId:'',//公司ID
 				orderInfo:{},//订单信息
 				sortsInfo:'',//取号数据
 				sortData:[],//排队号信息
+				sortsAll:[],//所有排号信息
+				overSignedData:{},//过号数据
 				ticketCode:null,//订单编码
 				verifyCode:null,//二维码
 				ticketStatus:null,//票状态  0未使用，1已核销，2退票，3过期
@@ -370,11 +407,19 @@
 				orderTypeNum:1,//订单是否展开
 				timer1:null,
 				timer2:null,
+				maskType :false,
+				d:'',//倒计时 天
+				h: '',//倒计时 时
+				m: '',//倒计时 分
+				s: '',//倒计时 秒
+				sum_h: '',//倒计时
+				timerType:null,//清除标记
+				returnTripType:false,//返程取号设置
 			}
 		},
 		onLoad(option) {
 			//this.id = option.orderId
-			this.id = "z0016790198036828fdab58f248e3835"
+			this.id = "z00167956572219584dc15634b62cf75"
 			//this.openId = uni.getStorageSync("openid") //openid
 			this.openId = "oh2UV1lyYABHMZ1rMlgjhVHyyYDQ"
 			this.getDetail();
@@ -445,7 +490,10 @@
 					if(res.code=="00"){
 						if(res.data.length>0){
 							this.sortsInfo = res.data[0]
-						var sortArr = this.sortsInfo.sorts
+							this.companyId = this.sortsInfo.pays[0].companyId
+							var sortArr = [];
+							sortArr.push(this.sortsInfo.sorts[0])
+							this.sortsAll = this.sortsInfo.sorts
 							var northArr = null
 							var southArr = null
 							sortArr.forEach((item)=>{
@@ -475,6 +523,17 @@
 								arr.push(southArr)
 							}
 							this.sortData = arr
+							//时间判断，当前时间是否大于可领号时间
+							var presentTimer = this.dateFormat()
+							var takeNumberTimer = this.getAfterDate(this.sortsInfo.sorts[0].createDate,this.sortsInfo.sorts[0].config.paReturnTripTime); 
+							if(this.sortsInfo.sorts[0].sortFair==4||this.sortsInfo.sorts[0].sortFair==5){
+								clearTimeout(this.timerType)
+								if(presentTimer<takeNumberTimer){
+									this.countTime(takeNumberTimer) 
+								}else{
+									this.returnTripType =true;
+								}
+							}
 						}
 					}else{
 						uni.showToast({
@@ -485,7 +544,7 @@
 				}).catch((err)=>{
           this.timer1=setTimeout(()=>{
             this.getSortInfo()
-          },2000)
+          },10000)
           // this.$once('hook:beforeDestroy',()=>{
           //   clearTimeout(timer)
           // })
@@ -496,11 +555,13 @@
 					againNumber:1,
 					thirdId:this.sortsInfo.order.orderId,
 					areaCode:item.projectId,
-					userId:this.openId
+					userId:this.openId,
+					merchantCode:this.companyId,
 				}
 				this.$request('distribution/distribution/newFetchNumber',data).then((res)=>{
 					if(res.code=="00"){
 						this.getSortInfo()
+						this.maskType = false
 					}else{
 						uni.showToast({
 							title: res.message,
@@ -529,6 +590,11 @@
 					})
 				}
 			},
+			signOverFun(item){//过号遮罩显示
+				this.overSignedData = {};
+				this.overSignedData = item
+				this.maskType = true
+			},
 			dynamicCodeRefresh(){
 				// 获取当前显示第几个二维码
 				let codes=this.codes
@@ -618,7 +684,57 @@
 					}
 				})
 			},
-		
+			dateFormat() {//时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
+				var date=new Date();
+				var year=date.getFullYear();
+				/* 在日期格式中，月份是从0开始的，因此要加0
+				 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
+				 * */
+				var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
+				var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
+				var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
+				var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
+				var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
+				// 拼接
+				return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
+			},
+			getAfterDate(timer,n) {//当前时间后几分钟
+					var curTime = new Date(timer);
+					var d = new Date(curTime.setMinutes(curTime.getMinutes() + n)); //n是分钟，根据自己需求定义
+					var year = d.getFullYear();
+					var mon = d.getMonth() + 1;
+					var day = d.getDate();
+					var hour = d.getHours();
+					var minute = d.getMinutes();
+					var second = d.getSeconds();
+					var s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day) + ' ' + (hour < 10 ? ('0' + hour) : hour) + ':' + (minute < 10 ? ('0' + minute) : minute) + ':' + (second < 10 ? ('0' + second) : second);
+					return s;
+			},
+			countTime (timer) {//倒计时
+				// 获取当前时间
+				var date = new Date();
+				var now = date.getTime();
+				//设置截止时间
+				var endDate = new Date(timer);
+				var end = endDate.getTime();
+				//时间差
+				var leftTime = end - now;
+				//定义变量 d,h,m,s保存倒计时的时间
+				if (leftTime >= 0) {
+					this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
+					this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
+					this.m = Math.floor(leftTime / 1000 / 60 % 60);
+					this.s = Math.floor(leftTime / 1000 % 60);
+					this.sum_h = this.d * 24 + this.h
+				}
+				if(this.d==0&&this.h==0&&this.m==0&&this.s==0){
+					this.returnTripType = true
+				}
+				//递归每秒调用countTime方法，显示动态时间效果
+				this.timerType = setTimeout(()=>{
+				  this.countTime(timer)
+				},1000)
+			},
 		}
 	}
 </script>
@@ -741,8 +857,6 @@
 		padding: 24rpx 24rpx 24rpx 24rpx;
 	}
 	
-	
-	
 	.order-queueUp .queueUp-rowNumber .rowNumber-list {
 		display: flex;
 		font-size: 28rpx;
@@ -978,4 +1092,64 @@
 		right:0;
 		bottom: 0;
 	}
+	/*遮罩*/
+	.order-mask{
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 998;
+		background-color: rgba(0,0,0,.3);
+	}
+	.order-mask .mask-case{
+		width: 654rpx;
+		height: 418rpx;
+		background-color: #fff;
+		box-sizing: border-box;
+		padding: 64rpx 24rpx 0 24rpx;
+		margin: auto;
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+	.order-mask .mask-case .case-title{
+		font-size: 40rpx;
+		line-height: 56rpx;
+		color: #191919;
+		font-weight: bold;
+		text-align: center;
+		margin-bottom: 24rpx;
+	}
+	.order-mask .mask-case .case-body{
+		font-size: 32rpx;
+		line-height: 48rpx;
+		color: #191919;
+		text-align: center;
+		margin-bottom: 48rpx;
+	}
+	.order-mask .mask-case .case-btn{
+		display: flex;
+		justify-content: space-between;
+		font-size: 32rpx;
+		line-height: 80rpx;
+	}
+	.order-mask .mask-case .case-btn .btn-typeAll{
+		width: 212rpx;
+		height: 80rpx;
+		border-radius: 44rpx 44rpx 44rpx 44rpx;
+		text-align: center;
+	}
+	.order-mask .mask-case .case-btn .btn-type1{
+		background-color: #3688FF;
+		color: #fff;
+		margin-left: 56rpx;
+	}
+	.order-mask .mask-case .case-btn .btn-type2{
+		background-color: #ECF3FE;
+		color: #999999;
+		margin-right: 56rpx;
+	}
 </style>