Skip to content

U
uni-pdtravel
Commit a3fa36ef authored by 潘永坪's avatar 潘永坪
Browse files
Options

联票电子门票开发

parent 6be75965
Show whitespace changes
Inline Side-by-side
Showing with 435 additions and 85 deletions
pages/my/order/jointElectronicTicket/jointElectronicTicket.vue
View file @ a3fa36ef
......@@ -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{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment