联票电子门票开发

pages/my/order/jointElectronicTicket/jointElectronicTicket.vue

@@ -3,74 +3,185 @@
 		<!-- 联票电子门票 -->
 		<view class="top">
 			<text class="one-txt-cut">
-				索道北单程+杜莎夫人蜡像馆x1份
+				{{orderInfo.productName}}
 			</text>
 			<text>
-				¥80
+				¥{{orderInfo.totalMoney}}
 			</text>
 		</view>
 		
 		<view class="middle">
-			<view class="productInfo">
+			<view class="productInfo" v-for="(item,index) in orderInfo.childs" :key="index">
 				<view class="product-top">
 					<view class="product-name">
-						<text class="one-txt-cut">索道北单程</text>
-						<text>预订成功</text>
+						<text class="one-txt-cut">{{item.productName}}</text>
+						<text>{{item.orderStatus|orderStatus}}</text>
 					</view>
 					<view class="product-datetime">
 						<view>
 							<text>使用日期</text>
-							<text style="color: #FE6600;">2024-06-25</text>
+							<text style="color: #FE6600;">{{item.playDate}}</text>
 						</view>
 						<view>
 							<text>入园时间</text>
-							<text>08:00-21:00</text>
+							<text>{{item.startPlayTime?item.startPlayTime.substr(0,5):''}}-{{item.endPlayTime?item.endPlayTime.substr(0,5):''}}</text>
 						</view>
 					</view>
 				</view>
-				
-				<view class="product-number">
-					<view class="my-number">
+				<!-- 等于1为需要排号的景区 -->
+				<view class="product-number" v-if="item.isFetch=='1'" v-for="(item2,a) in item.sorts" :key='a'>
+					<!-- 1可进入等候区 -->
+					<template v-if="item2.sortFair==1">
+						<view class="my-number" >
 							<view>
 								<view>我的排队号</view>
-							<view>1004</view>
+								<view>{{item2.sortNo}}</view>
 							</view>
 							<view>
 								<view>预计进入时间</view>
-							<view>16:11:53</view>
+								<view>{{item2.sortNoTime}}</view>
 							</view>
 						</view>
 						<view class="current-number">
-						当前排队区间<text>1-303</text>号
+							当前排队区间<text>{{item2.showStart}}-{{item2.showEnd}}</text>号
 						</view>
 						<view class="number-notice">
-						请注意排队情况,系统30s自动刷新,空号较多时,预计进入时间可能提前或延后,如过号需重新取号
+							<view>
+								温馨提示：{{item2.config.paRowNumHint}}
 							</view>
+							<!-- 可以进入排队区提示 -->
+							<view style="color: #FE6600;">
+								{{item2.config.paArrivalNumHint}}
 							</view>
-				
-				<view class="product-code">
+						</view>
+					</template>
+					<!-- 2已过号不可重排，3已过号可重排 -->
+					<template v-else-if="item2.sortFair==2||item2.sortFair==3">
+						<view class="my-number" >
+							<!-- 等于1为过号允许排号 -->
+							<view v-if="item2.config.paPassedNumEnable==1">
+								<text>我的排队号</text>
+								<text>{{item2.sortNo}}</text>
+							</view>
+							<view  v-if="item2.config.paPassedNumEnable==1">
+								<text>您排队号已过</text>
+								<text v-if="item2.sortFair==3" @click="signOverFun(item2)">取号</text>
+							</view> 
+							<!-- 等于0过号不允许排号，只进行提示 -->
+							<view v-if="item2.config.paPassedNumEnable==0">>
+								<text>{{item2.config.paPassedNumHint}}</text>
+							</view>
+						</view>
+						<view class="current-number">
+							当前排队区间<text>{{item2.showStart}}-{{item2.showEnd}}</text>号
+						</view>
+						<view class="number-notice">
+							温馨提示：{{item2.config.paRowNumHint}}
+						</view>
+					</template>
+					<!-- 4-可返程取号(仅胖丁显示),5-第一次取号(仅胖丁显示)-->
+					<template v-else-if="item2.sortFair==4||item2.sortFair==5">
+						<view class="my-number" >
+							<view>
+								<view>我的排队号</view>
+								<view>{{item2.sortNo}}</view>
+							</view>
+							<view>
+								<view>预计进入时间</view>
+								<view>{{item2.sortNoTime}}</view>
+							</view>
+						</view>
+						<view class="current-number">
+							当前排队区间<text>{{item2.showStart}}-{{item2.showEnd}}</text>号
+						</view>
+						<view class="number-notice">
+							温馨提示：{{item2.config.paRowNumHint}}
+						</view>
+					</template>
+					<!-- 6已过闸 -->
+					<view v-else-if="item2.sortFair==6">
+						温馨提示：您已过闸
+					</view>
+					<!-- 7提前通知-->
+					<template v-else-if="item2.sortFair==7">
+						<view class="my-number" >
+							<!-- 0隐藏排队号，1显示排队号 -->
+							<view v-if="item2.config.paHideNum==1">
+								<view>我的排队号</view>
+								<view>{{item2.sortNo}}</view>
+							</view>
+							<!-- 0隐藏预计时间，1显示预计时间 -->
+							<view v-if="item2.config.paHideEstimatedTime==1">
+								<view >预计进入时间</view>
+								<view>{{item2.sortNoTime}}</view>
+							</view>
+						</view>
+						<view class="current-number">
+							当前排队区间<text>{{item2.showStart}}-{{item2.showEnd}}</text>号
+						</view>
+						<view class="number-notice">
+							<view>
+								温馨提示：{{item2.config.paRowNumHint}}
+							</view>
+							<view style="color: #FE6600;">
+								<text v-if="item2.config.paAdvanceNoticeDisplay">
+										{{item2.config.paAdvanceNoticeDisplay}}
+								</text>
+								<text v-else>
+									请尽快赶到现场等候，避免错过游玩时间。
+								</text>
+							</view>
+						</view>
+					</template>
+					<!-- 未到号 -->
+					<template v-else>
+						<view class="my-number" >
+							<view>
+								<view>我的排队号</view>
+								<view>{{item2.sortNo}}</view>
+							</view>
+							<view>
+								<view>预计进入时间</view>
+								<view>{{item2.sortNoTime}}</view>
+							</view>
+						</view>
+						<view class="current-number">
+							当前排队区间<text>{{item2.showStart}}-{{item2.showEnd}}</text>号
+						</view>
+						<view class="number-notice">
+							温馨提示：{{item2.config.paRowNumHint}}
+						</view>
+					</template>
+				</view>
+				<!-- 后端返回了二维码才显示下面内容 -->
+				<view class="product-code" v-if="item.orderTicketDetailList.length>0&&item.orderTicketDetailList[0].verifyCode">
 					<view class="code-title">
 						凭「身份证」或「入园码」直接入园
 					</view>
 					<view class="code-image">
-						<image src="../../static/takeNumber/sdMap.jpg"></image>
+						<image :src="item.codeImage"></image>
 					</view>
 					<view class="code-number">
 						<text>
-							数字码:7072202693477
+							数字码:{{item.orderTicketDetailList[0].verifyCode}}
 						</text>
-						<text>
+						<text @click="copyText(item.orderTicketDetailList[0].verifyCode)">
 							复制
 						</text>
 					</view>
-					<view class="code-tip">
+					<view class="code-tip" v-if="item.exchangeMode==4||item.exchangeMode==5">
 						二维码自动更新,截屏无效
 					</view>
 				</view>
-				<view class="product-buyknow">
-					<view class="buyKnow-title">
+				<view class="product-useknow">
+					<view class="useknow-list" v-if="item.showUseknow" v-for="(item2,a) in item.orderExtendList" :key="a">
+					  <text>{{item2.title}}</text>
+					  <text>{{item2.content}}</text>
+					</view>
+					<view class="useknow-bottom" v-if="item.orderExtendList.length>0" @click="useknowChange(item)">
 						使用须知
-						<u-icon name='arrow-down'></u-icon>
+						<u-icon name='arrow-down' v-if="item.showUseknow==false"></u-icon>
+						<u-icon name='arrow-up' v-else></u-icon>
 					</view>
 				</view>
 			</view>
@@ -111,26 +222,20 @@
 					<view>
 						<text style="flex-shrink: 0;">订单编号</text>
 						<text class="order-id">
-							<text class="one-txt-cut">z1321321321321321321321sdafeads</text>
+							<text class="one-txt-cut">{{orderInfo.id}}</text>
 							<text class="order-btn">复制</text>
 						</text>
 					</view>
 					
 					<view>
 						<text>支付时间</text>
-						<text>2024-07-24</text>
-					</view>
-					
-					<view>
-						<text>支付方式</text>
-						<text>在线支付</text>
+						<text>{{orderInfo.paymentTime}}</text>
 					</view>
 					
 					<view>
 						<text>联系信息</text>
 						<text>
-							<text style="margin-right: 10rpx;">潘永坪</text>
-							<text>15808046328</text>
+							<text>{{orderInfo.ticketPhone}}</text>
 						</text>
 					</view>
 				</view>
@@ -149,25 +254,258 @@
 </template>
 
 <script>
+import QRCode from '@/common/weapp-qrcode.js'
 export default {
+  filters:{
+    orderStatus(i){//订单状态
+      switch(i){
+      case 0:return '待支付'
+        break
+      case 1:return '出票中'
+        break
+      case 2:return '出票成功'
+        break
+      case 3:return '出票失败'
+        break
+      case 4:return '核销中'
+        break
+      case 5:return '核销完成'
+        break
+      case 6:return '退款中'
+        break
+      case 7:return '部分退退货退款'
+        break
+      case 8:return '全部退退货退款'
+        break
+      case 9:return '取消'
+        break
+      case 10:return '已完成 '
+        break
+      case 11:return '已过期 '
+        break
+      case 12:return '退票审核中 '
+        break
+      }
+    }
+  },
   data() {
     return {
       Brightness:'',//屏幕亮度
       openid:uni.getStorageSync('openid')||'',//openid
       companyId:'',//公司Id
+      orderId:'',//订单Id
+      detailTimer:null,//详情时间函数
+      orderInfo:'',//订单信息
+      codeFlag:'',//动态二维码函数
+      codeTimer:'',//动态二维码时间函数
+      nowCodeNo:'',//当前动态二维码编号
+    }
+  },
+  onLoad(option) {
+    this.orderId = 'z0017195376076258fc68582d6fc78be'// option.orderId
+  },
+  onShow() {
+    this.getDetail()
+	  uni.getScreenBrightness({
+	    success:(res)=>{
+	      // 这里是把获取到的手机屏幕亮度，存储到data里面，方便给到页面生命周期隐藏和卸载方法里面用
+				 this.Brightness = res.value
+				 if(res.value != 1){
+	        uni.setScreenBrightness({
+	          value: 1
+	        })
+	      }
+	    }
+	  })
+  },
+  onHide() {
+	  uni.setScreenBrightness({// 恢复之前屏幕亮度
+	    value: this.Brightness
+	  })
+  },
+  onUnload() {
+    //清除详情函数
+    if(this.detailTimer) {
+		  clearTimeout(this.detailTimer)
+		  this.detailTimer = null
     } 
+    //清除动态二维码函数
+    if(this.codeTimer) {
+		  clearTimeout(this.codeTimer)
+		  this.codeTimer = null
+    } 
+	  uni.setScreenBrightness({// 恢复之前屏幕亮度
+	    value: this.Brightness
+	  })
   },
   methods: {
-    //---复制内容
-    copyText(value){
-		  uni.setClipboardData({
-		    data:value,
-		    success:function(){
+    //---加载订单详情
+    getDetail(){
+      let data={
+			  orderId:this.orderId,//订单ID
+			  userId:this.openid,//用户Id
+      }
+		  this.$request('order/userOrder/findOrderDetail',data).then((res)=>{
+		    if(res.code=='00'){
+          this.orderInfo=res.data
+          let arr=this.orderInfo.childs||[]
+          arr.forEach(item=>{
+            //默认不显示使用须知
+            item.showUseknow=false
+            if(item.isFetch=='1'){
+              //获取排号信息
+              this.getSortInfo(item)
+            }
+            //subOrderType 子订单类型(0-胖丁分销，1-扫码购，2-自助机，3-组合，4-扫码牌，5-预订，6-反扫，7-收银机，8-码同步，9-押金，94-公众号,96-胖丁分销,99-酒店自营)
+            //exchangeMode 验证方式：1胖丁二维码,2第三方二维码,3短信,4身份证
+            if(item.subOrderType!=4&&item.subOrderType!=5){
+              // if(item.playDate.substr(0,10)==this.$commonjs.today()){
+              if(item.exchangeMode==4||item.exchangeMode==5){
+                //多个二维码
+                this.getCodeList(item)
+              }
+              // }
+              if(item.exchangeMode==1){
+                //一个二维码
+                this.getCode(item)
+              }
+            }
+          })
+		    }else{
 		      uni.showToast({
-		        title: '复制成功',
+		        title: res.message,
+		        icon: 'none'
+		      })
+		    }
+		  }).catch((err) => {
+		      this.detailTimer = setTimeout(() => {
+		        this.getDetail()
+		      }, 2000)
+		  })
+    },
+    //---二维码刷新
+    dynamicCodeRefresh(item){
+      let codeList=item.codeList
+      let codeStart=item.codeStart
+		  // 获取当前显示第几个二维码
+		  let nowTime = (new Date().getTime() - codeStart)/1000
+		  let code = null
+		  // 寻找到当前时间的二维码
+		  for(let i = 0 ; i < codeList.length ; i++ ){
+		    let item2 = codeList[i]
+		    nowTime -= item2.timeout
+		    if(nowTime <= 0 ){
+		      code = item2
+		      break
+		    }
+		  }
+		  // 全部遍历完成后，需要重新获取新的二维码
+		  if(code == null){
+		    this.getCodeList(item)
+		  } else {
+        if(code.code != this.nowCodeNo){
+          this.nowCodeNo=code.code||''
+          if(this.nowCodeNo){
+            item.codeImage= QRCode.drawImg(this.nowCodeNo, {
+						  typeNumber: 3,//码点大小 1-40，数字越大，码点越小，二维码会显得越密集
+						  errorCorrectLevel: 'H',//纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来 详见qrcode.js
+						  size: 180
+            })
+          }
+          this.$forceUpdate()
+        }
+		  }
+    },
+    //---获取动态二维码列表
+    getCodeList(item){
+      let codeNo=''
+      if(item.orderTicketDetailList.length>0){
+        codeNo=item.orderTicketDetailList[0].ticketCode
+      }
+		  let data={
+		    codeNo,//二维码编号
+		    orderId:item.id,//订单号
+		    userId:this.openid//openid
+		  }
+		  clearInterval(this.codeFlag)
+		  this.$request('distribution/distribution/getAutoCode',data).then((res)=>{
+		    if(res.code == '00'){
+		      item.codeList = res.data.codes
+		      if(item.codeList.length==0){
+		        uni.showToast({
+						  title: '网络异常，请退出重试',
 						  icon: 'none'
 		        })
+            return
+		      }
+		      item.codeStart = new Date().getTime()
+		      this.codeFlag = setInterval(()=>{
+		        this.dynamicCodeRefresh(item)
+		      },300)
+		    }else{
+		      uni.showToast({
+		        title: res.message,
+		        icon: 'none'
+		      })
+		    }
+		  }).catch((err)=>{
+		    this.codeTimer=setTimeout(()=>{
+		      this.getCodeList(item)
+		    },2000)
+		  })
+    },
+    //---生成二维码
+    getCode(item){
+      let verifyCode=''
+      if(item.orderTicketDetailList.length>0){
+        verifyCode=item.orderTicketDetailList[0].verifyCode||''
       }
+      if(verifyCode){
+        item.codeImage= QRCode.drawImg(verifyCode, {
+          typeNumber: 3,//码点大小 1-40，数字越大，码点越小，二维码会显得越密集
+          errorCorrectLevel: 'H',//纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来 详见qrcode.js
+          size: 180
+        })
+      }
+    },
+    //---获取排号信息
+    getSortInfo(item){
+      let data={
+        areaCode:item.areaCode,//站点编号
+        orderNum:item.orderNum,//订单数量
+        userId:this.openid,//openid
+        orderId:item.id,//订单id
+        thirdId:item.thirdOrderId,//三方订单id
+        againNumber:0//首次排号
+      }
+		  this.$request('distribution/distribution/getNewFetchInfo',data).then((res)=>{
+		    if(res.code=='00'){
+		      if(res.data.length>0){
+            item.sorts=res.data[0].sorts
+            this.$forceUpdate()
+            return
+		        //时间判断，用于返程多久可以取号
+		        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({
+		        title: res.message,
+		        icon: 'none'
+		      })
+		    }
+		  }).catch((err)=>{
+		    this.timer1=setTimeout(()=>{
+		      this.getSortInfo()
+		    },1000)
 		  })
     },
     //---重新排队
@@ -182,7 +520,6 @@ export default {
 		  this.$request('distribution/distribution/newFetchNumber',data).then((res)=>{
 		    if(res.code=='00'){
 		      this.getSortInfo()
-          this.maskType = false
 		    }else{
 		      uni.showToast({
 		        title: res.message,
@@ -191,30 +528,26 @@ export default {
 		    }
 		  })
     },
+    //使用须知切换
+    useknowChange(item){
+      item.showUseknow=!item.showUseknow
+      this.$forceUpdate()
     },
-  onShow() {
-    uni.getScreenBrightness({
-      success:(res)=>{
-        // 这里是把获取到的手机屏幕亮度，存储到data里面，方便给到页面生命周期隐藏和卸载方法里面用
-				 this.Brightness = res.value
-				 if(res.value != 1){
-          uni.setScreenBrightness({
-            value: 1
+    //---复制内容
+    copyText(value){
+		  uni.setClipboardData({
+		    data:value,
+		    success:function(){
+		      uni.showToast({
+		        title: '复制成功',
+		        icon: 'none'
 		      })
 		    }
-      }
 		  })
     },
-  onHide() {
-    uni.setScreenBrightness({// 恢复之前屏幕亮度
-      value: this.Brightness
-    })
-  },
-  onUnload() {
-	  uni.setScreenBrightness({// 恢复之前屏幕亮度
-	    value: this.Brightness
-	  })
+    
   },
+  
 }
 </script>
 
@@ -239,6 +572,7 @@ export default {
 }
 // 产品部分
 .productInfo{
+	margin-top: 20rpx;
 	background: #ffffff;
 	border-radius: 16rpx;
 	padding: 40rpx 32rpx 32rpx 32rpx;
@@ -303,6 +637,7 @@ export default {
 .product-code{
 	text-align: center;
 	border-top: 1px solid #f5f5f5;
+	margin-top: 40rpx;
 }
 .code-title{
 	margin-top: 40rpx;
@@ -320,13 +655,28 @@ export default {
 }
 .code-image{
 	margin-top: 20rpx;
+	image{
+		width: 180px;
+		height: 180px;
+	}
 }
 .code-tip{
 	margin-top: 20rpx;
 	color: $red;
 }
-.product-buyknow{
+.useknow-list{
 	display: flex;
+	margin-top: 28rpx;
+	text:first-child{
+		color: #777777;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+	}
+}
+.useknow-bottom{
+	display: flex;
+	justify-content: center;
+	padding-top: 32rpx;
 }
 // 退票规则
 .rufundRule{