Skip to content

U
uni-pdtravel
Commit 29cbeb56 authored by qipeng's avatar qipeng
Browse files
Options

名称修改

parent f0ffa5f7
Show whitespace changes
Inline Side-by-side
Showing with 1216 additions and 1196 deletions
pages.json
View file @ 29cbeb56
......@@ -293,7 +293,7 @@
}
,{
"path" : "pages/my/order/electronicTicketNew/electronicTicketNew",
"path" : "pages/my/order/electronicTicketold/electronicTicketold",
"style" :
{
"navigationBarTitleText": "",
......
pages/my/order/electronicTicket/electronicTicket.vue
View file @ 29cbeb56
<template>
<view>
<web-view :src="outUrl"></web-view>
<view class="page-box">
<view class="order-status">
<view class="status-box">
<view class="status-type" v-if="orderInfo.orderStatus==2">
<template v-if="orderInfo.orderType==1">
出票成功
</template>
<template v-else-if="orderInfo.orderType==2">
预订成功
</template>
<template v-else-if="orderInfo.orderType==3">
预订成功
</template>
<template v-else-if="orderInfo.orderType==4">
购买成功
</template>
</view>
<view class="status-product">{{orderInfo.merchantName}}（{{orderInfo.productName}}）</view>
</view>
</view>
<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">
<view></view>
</view>
<view class="title-label">入园凭证</view>
</view> -->
<view class="certificate-box">
<view class="box-verificationCode">验证码：{{ticketCode}}</view>
<canvas class="box-QRcode" canvas-id="qrcode"/>
<view class="progress-box">
<progress :percent="percentage" activeColor="#3688FF" stroke-width="3" />
</view>
<!-- <view class="box-prompt">自动更新，截屏无效</view> -->
<view class="box-prompt2">{{orderInfo.orderType==1?'二维码自动更新，截屏无法验证':'二维码自动更新，截屏无法验证'}}</view>
</view>
</view>
</template>
<view class="order-queueUp order-allType order-positionTop" v-if="orderInfo.isFetch==1&&sortsInfo">
<view class="alltype-title">
<!-- <view class="title-line">
<view></view>
</view> -->
<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>
<view class="list-value">{{item.showStart}} ~ {{item.showEnd}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;">({{item.projectName}})</text></view>
</view>
<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>
</view>
<view class="rowNumber-list">
<text class="list-name">预计进入时间：</text>
<text class="list-value">{{item.sortNoTime}}</text>
</view>
<view class="rowNumber-list">
<text class="list-name">排号温馨提示：</text>
<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" 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>
<view class="list-value">{{item.showStart}} ~ {{item.showEnd}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;">({{item.projectName}})</text></view>
</view>
<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>
</view>
<view class="rowNumber-list">
<text class="list-name">预计进入时间：</text>
<text class="list-value">{{item.sortNoTime}}</text>
</view>
<view class="rowNumber-list">
<text class="list-name">排号温馨提示：</text>
<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>
<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-list rowNumber-list2">
<view class="rowNumber-signOver">您排队号已过</view>
<view class="rowNumber-takeNum2" v-if="item.sortFair===3" @click="signOverFun(item)">取号</view>
</view>
</view>
</template>
<!-- 历史排号 -->
<view class="queueUp-historyNum">
历史排号：
<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">
<view class="alltype-title">
<!-- <view class="title-line">
<view></view>
</view> -->
<view class="title-label">订单信息</view>
<u-icon name="arrow-down" v-if="orderTypeNum==0" @click="orderTypeNum=1" style="line-height: 44rpx !important;
color: #999999 !important;
position: absolute !important;
right: 24rpx !important;
top: 24rpx !important;"></u-icon>
<u-icon name="arrow-up" v-if="orderTypeNum==1" @click="orderTypeNum=0" style="line-height: 44rpx !important;
color: #999999 !important;
position: absolute !important;
right: 24rpx !important;
top: 24rpx !important;"></u-icon>
</view>
<view class="mes-box" v-if="orderTypeNum==1">
<view class="box-case">
<view class="case-list">
<view class="list-name">订单编号</view>
<view class="list-text list-text2">{{orderInfo.id}}</view>
<image class="list-btn" @click="copyText(orderInfo.id)" src="../../../../static/img/my/icon01.png"></image>
<!-- <view class="list-btn" @click="copyText(orderInfo.id)">复制</view> -->
</view>
<view class="case-list">
<view class="list-name">产品名称</view>
<view class="list-text">{{orderInfo.merchantName}}（{{orderInfo.productName}}）</view>
</view>
<view class="case-list">
<view class="list-name">购买数量</view>
<view class="list-text">{{orderInfo.orderNum}}</view>
</view>
<view class="case-list">
<view class="list-name">购买时间</view>
<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):""}}</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>
<view class="list-text">{{item.content}}</view>
</view>
</view>
<view class="box-case" v-if="touristInfo.length>0">
<view class="case-list">
<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 style="margin-right: 24rpx;">{{list.name}}</view>
</view>
</view>
</view>
</view>
<view class="box-case">
<view class="case-list">
<view class="list-name">退票规则</view>
<view class="list-text">
<template v-if="orderInfo.isRefund==0">不支持退票</template>
<template v-else-if="orderInfo.isRefund==1">
<!-- <div>
规定时间可退
</div> -->
<text v-if="orderInfo.orderRefundRuleList[0]&&orderInfo.orderRefundRuleList[0].refundDay!=0">使用日期截止前{{orderInfo.orderRefundRuleList[0].refundDay}}天</text>
<text v-else>游玩当天</text>
<text v-if="orderInfo.orderRefundRuleList[0]">{{orderInfo.orderRefundRuleList[0].refundTime.substr(0,5)}}之前可退</text>
</template>
<template v-else-if="orderInfo.isRefund==2">随时可退</template>
</view>
</view>
</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>
<script>
export default {
import uQRCode from '@/common/js/uqrcode.js'
export default {
filters:{
orderStatus1(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
}
},
orderStatus2(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
}
},
orderStatus3(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
}
},
orderStatus4(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
}
}
},
data() {
return {
outUrl:'',//跳出地址
openId:'',//用户信息
id:'',//订单ID
companyId:'',//公司ID
orderInfo:{},//订单信息
sortsInfo:'',//取号数据
sortData:[],//排队号信息
sortsAll:[],//所有排号信息
overSignedData:{},//过号数据
ticketCode:null,//订单编码
verifyCode:null,//二维码
ticketStatus:null,//票状态 0未使用，1已核销，2退票，3过期
codeStart:'',//开始时间
codes:[],//我二维码数组
percentage:0,//进度条百分比
orderExtendList:[],//订单拓展信息
touristInfo:[],//游客信息
orderTypeNum:1,//订单是否展开
timer1:null,
timer2:null,
maskType :false,
d:'',//倒计时 天
h: '',//倒计时 时
m: '',//倒计时 分
s: '',//倒计时 秒
sum_h: '',//倒计时
timerType:null,//清除标记
returnTripType:false,//返程取号设置
Brightness:'',//屏幕亮度
}
},
......@@ -32,19 +438,738 @@ export default {
})
},
onLoad(option) {
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let ifyukuaiCode=option.ifyukuaiCode||''//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
this.outUrl='https://wx.pangdly.com/#/unusedDetail?id='+option.orderId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId+'&ifyukuaiCode='+ifyukuaiCode
this.id = option.orderId
//this.id = "z00167956572219584dc15634b62cf75"
this.openId = uni.getStorageSync("openid") //openid
//this.openId = "oh2UV1lyYABHMZ1rMlgjhVHyyYDQ"
this.getDetail();
},
onUnload() {
if(this.timer1) {
clearTimeout(this.timer1)
this.timer1 = null
}
if(this.timer2) {
clearTimeout(this.timer2)
this.timer2 = null
}
},
methods: {
getDetail(){//*-----------------加载订单
let data={
orderId:this.id,//订单ID
userId:this.openId,//用户Id
}
this.$request('order/userOrder/findOrderDetail',data).then((res)=>{
if(res.code=="00"){
this.orderInfo = res.data
this.orderExtendList = res.data.orderExtendList
if(this.orderInfo.orderTicketDetailList&&this.orderInfo.orderTicketDetailList.length>0){
this.verifyCode = this.orderInfo.orderTicketDetailList[0].verifyCode
this.ticketStatus = this.orderInfo.orderTicketDetailList[0].ticketStatus
this.ticketCode = this.orderInfo.orderTicketDetailList[0].ticketCode
}
this.touristInfo = res.data.orderTouristList
if(this.orderInfo.orderType==1||this.orderInfo.orderType==3){
if(this.orderInfo.subOrderType!=4&&this.orderInfo.subOrderType!=5){
this.$nextTick(() => {
if(this.orderInfo.playDate.substr(0,10)==this.$commonjs.today()&&this.orderInfo.exchangeMode==4||this.orderInfo.playDate.substr(0,10)==this.$commonjs.today()&&this.orderInfo.exchangeMode==5){
this.dynamicCode()
}else{
this.qecode()
}
})
}
}
if(this.orderInfo.isFetch==1){//isFetch==1需要排队
this.getSortInfo()
this.timer2=setInterval(()=>{
this.getSortInfo()
},1000*120)
// this.$once('hook:beforeDestroy',()=>{
// clearInterval(timer)
// })
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
getSortInfo(){//-------------------------排号信息加载
var areaCode = this.orderInfo.areaCode
var orderNum = this.orderInfo.orderNum
var userId = this.openId
var orderId = this.orderInfo.id
var verifyCode = this.ticketCode
let data={areaCode,orderNum,userId,orderId,verifyCode,'againNumber':0}
this.$request('distribution/distribution/getNewFetchInfo',data).then((res)=>{
if(res.code=="00"){
if(res.data.length>0){
this.sortsInfo = res.data[0]
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)=>{
if(item.projectId=='cjsd_project_0002'){//北站
if(northArr){
if(item.sortNo>northArr.sortNo){
northArr = item
}
}else{
northArr = item
}
}else{//南站
if(southArr){
if(item.sortNo>southArr.sortNo){
southArr = item
}
}else{
southArr = item
}
}
})
var arr = []
if(northArr){
arr.push(northArr)
}
if(southArr){
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({
title: res.message,
icon: 'none'
})
}
}).catch((err)=>{
this.timer1=setTimeout(()=>{
this.getSortInfo()
},10000)
// this.$once('hook:beforeDestroy',()=>{
// clearTimeout(timer)
// })
})
},
sortAgain(item){//--------------------------------------重新排队
let data={
againNumber:1,
thirdId:this.sortsInfo.order.orderId,
areaCode:item.projectId,
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,
icon: 'none'
})
}
})
},
qecode(){//生成二维码
if(this.verifyCode){
// let qrcode = new QRCode('qrcode',{
// width: 180,
// height: 180,
// text:this.verifyCode
// })
uQRCode.make({
canvasId: 'qrcode',
componentInstance: this,
text: this.verifyCode,
size: 180,
margin: 10,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uQRCode.errorCorrectLevel.H
})
}
},
signOverFun(item){//过号遮罩显示
this.overSignedData = {};
this.overSignedData = item
this.maskType = true
},
dynamicCodeRefresh(){
// 获取当前显示第几个二维码
let codes=this.codes
let now = new Date().getTime()
let nowTime = (now - this.codeStart)/1000
let code = null
// 寻找到当前时间的二维码
for(let i = 0 ; i < codes.length ; i++ ){
let item = codes[i]
nowTime -= item.timeout
if(nowTime <= 0 ){
code = item
break
}
}
// 全部遍历完成后，需要重新获取新的二维码
if(code == null){
this.dynamicCode()
} else if( code.code!=this.codeNo ){
this.codeNo = code.code
// if(document.querySelector('#qrcode img')){//移除子元素
// document.querySelector('#qrcode img').remove()
// document.querySelector('#qrcode canvas').remove()
// }
// let qrcode = new QRCode('qrcode',{//进入先获取二维码
// width: 180,
// height: 180,
// text:this.codeNo
// })
uQRCode.make({
canvasId: 'qrcode',
componentInstance: this,
text: this.codeNo,
size: 180,
margin: 10,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uQRCode.errorCorrectLevel.H
})
}
this.percentage+=1
if(this.percentage>=100){
this.percentage=0
}
},
dynamicCode(){//动态码
let data={
codeNo:this.ticketCode,//二维码编号
orderId:this.id,//订单号
userId:this.openId//openid
}
clearInterval(this.codeFlag)
this.$request('distribution/distribution/getAutoCode',data).then((res)=>{
if(res.code == '00'){
this.codes = res.data.codes
this.codeStart = new Date().getTime()
this.codeFlag = setInterval(()=>{
this.dynamicCodeRefresh()
},300)
this.$once('hook:beforeDestroy', () => {
clearInterval(this.codeFlag)
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch((err)=>{
let timer=setTimeout(()=>{
this.dynamicCode()
},2000)
this.$once('hook:beforeDestroy', () => {
clearTimeout(timer)
})
})
},
copyText(value){//-------------------------复制内容
uni.setClipboardData({
data:value,
success:function(){
uni.showToast({
title: "复制成功",
icon: 'none'
})
}
})
},
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>
<style>
<style scoped="scoped">
.page-box{
background-color: #ECF3FE;
min-height: 100vh;
padding-bottom: 80rpx;
}
.order-status {
width: 750rpx;
height: 464rpx;
background: linear-gradient(180deg, #3688FF 0%, #3688FF 37%, #ECF3FE 100%);
padding: 48rpx 32rpx 32rpx 40rpx;
box-sizing: border-box;
position: relative;
}
.order-status .status-box {
display: flex;
color: #fff;
overflow: hidden;
}
.order-status .status-type {
font-size: 48rpx;
line-height: 66rpx;
font-weight: bold;
margin-bottom: 8rpx;
flex-shrink:0
}
.order-status .status-product,
.order-status .status-prompt {
font-size: 28rpx;
line-height: 85rpx;
margin-left: 16rpx;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.order-status .status-icon {
width: 106rpx;
height: 104rpx;
position: absolute;
right: 64rpx;
top: 58rpx;
}
/*排队信息*/
.order-allType {
width: 710rpx;
background-color: #fff;
box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin: 0 auto 16rpx auto;
}
.order-allType .alltype-title {
display: flex;
height: 92rpx;
padding: 24rpx 24rpx 0 24rpx;
box-shadow: 0rpx 2rpx 0rpx 2rpx rgba(0, 0, 0, 0.08);
position: relative;
}
.order-allType .alltype-title .title-line {
width: 20rpx;
height: 44rpx;
overflow: hidden;
position: relative;
}
.order-allType .alltype-title .title-line view {
width: 4rpx;
height: 24rpx;
background-color: var(--main-color);
margin: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.order-allType .alltype-title .title-label {
font-size: 32rpx;
color: var(--title-color);
font-weight: bold;
line-height: 44rpx;
}
.order-allType .alltype-title .uicon-reload {
line-height: 44rpx !important;
color: var(--title-color) !important;
margin-left: 22rpx !important;
}
.order-allType .alltype-title .uicon-arrow-down,
.order-allType .alltype-title .uicon-arrow-up{
line-height: 44rpx !important;
color: #999999 !important;
position: absolute !important;
right: 24rpx !important;
top: 24rpx !important;
}
.order-positionTop:nth-child(2){
margin-top: -302rpx;
position: relative;
z-index: 2;
}
/*排队详情*/
.order-queueUp {
}
.order-queueUp .queueUp-rowNumber {
padding: 24rpx 24rpx 24rpx 24rpx;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list {
display: flex;
font-size: 28rpx;
line-height: 56rpx;
margin-bottom: 24rpx;
position: relative;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list2{
justify-content:center;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-name {
width: 220rpx;
color: var(--title-color);
flex-shrink: 0;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-value {
flex: 1;
display: flex;
color: #FC771D;
font-size: 40rpx;
font-weight: bold;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-value2 {
color: #333333;
font-size: 24rpx;
line-height: 35rpx;
padding-top: 8rpx;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-value3 {
display: flex;
color: #FC771D;
font-size: 40rpx;
font-weight: bold;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list2 .list-value{
flex: 0;
}
.order-queueUp .queueUp-rowNumber2{
color: #fff;
background-color: #1EA838;
}
.order-queueUp .queueUp-rowNumber2 .rowNumber-list .list-value,
.order-queueUp .queueUp-rowNumber2 .rowNumber-list .list-value2{
color:#fff;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-right48 {
margin-right: 48rpx;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-right24 {
margin-right: 24rpx;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-btnNew{
width: 140rpx;
height: 40rpx;
border-radius: 26rpx 26rpx 26rpx 26rpx;
text-align: center;
line-height: 40rpx;
color: var(--main-color);
border: 1rpx solid var(--main-color);
position: absolute;
top: 0;
right: 0;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list:nth-last-child(1) {
margin-bottom: 0;
}
.order-queueUp .queueUp-rowNumber .rowNumber-takeNum{
width: 136rpx;
height: 56rpx;
background: #3688FF;
border-radius: 32rpx 32rpx 32rpx 32rpx;
font-size: 28rpx;
color: #FFFFFF;
line-height: 56rpx;
text-align: center;
margin: 0 auto;
}
.order-queueUp .queueUp-rowNumber .rowNumber-takeNum2{
width: 136rpx;
height: 56rpx;
background: #3688FF;
border-radius: 32rpx 32rpx 32rpx 32rpx;
font-size: 28rpx;
color: #FFFFFF;
line-height: 56rpx;
text-align: center;
}
.order-queueUp .queueUp-rowNumber .rowNumber-takeTimer{
font-size: 28rpx;
color: #FC771D;
line-height: 40rpx;
font-weight: bold;
margin-top: 16rpx;
text-align: center;
}
.order-queueUp .queueUp-historyNum{
font-size: 24rpx;
color: #333333;
line-height: 34rpx;
border-top: 2rpx solid #ECECEC;
padding: 24rpx 24rpx 24rpx 24rpx;
}
.order-queueUp .queueUp-rowNumber3{
color: #fff;
background-color: #DA3844;
}
.order-queueUp .queueUp-rowNumber .rowNumber-signOver{
font-size: 32rpx;
color: #fff;
line-height: 56rpx;
font-weight: bold;
margin-right: 40rpx;
}
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value,
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value2,
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeTimer,
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value3{
color:#fff;
}
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum,
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum2{
background-color: #fff;
color: #3688FF;
}
/*入园凭证*/
.order-certificate .certificate-box {
padding: 16rpx 0 24rpx 0;
overflow: hidden;
}
.order-certificate .certificate-box .box-verificationCode {
margin: 8rpx 0 8rpx 0;
font-size: 24rpx;
color: #333333;
line-height: 40rpx;
text-align: center;
}
.order-certificate .certificate-box .box-QRcode {
display: block;
width: 320rpx;
height: 320rpx;
margin: 0 auto;
}
.order-certificate .certificate-box .progress-box {
width: 304rpx;
margin: 6rpx auto 0 auto;
}
.order-certificate .certificate-box .box-prompt {
font-size: 28rpx;
color: var(--main-color);
line-height: 40rpx;
text-align: center;
margin: 16rpx 0 8rpx 0;
}
.order-certificate .certificate-box .box-prompt2 {
font-size: 28rpx;
font-weight: bold;
color: #FC771D;
line-height: 40rpx;
text-align: center;
margin: 24rpx 0 0 0;
}
/*订单信息*/
.order-mes .mes-box {
padding: 44rpx 24rpx 24rpx 24rpx;
overflow: hidden;
}
.order-mes .mes-box .box-case {
width: 638rpx;
border-bottom: 2rpx solid #ECECEC;
margin-bottom: 40rpx;
}
.order-mes .mes-box .box-case:nth-last-child(1) {
border-bottom: none;
margin-bottom: 0rpx;
}
.order-mes .mes-box .box-case .case-list {
display: flex;
width: 638rpx;
font-size: 28rpx;
line-height: 40rpx;
margin-bottom: 28rpx;
position: relative;
}
.order-mes .mes-box .box-case .case-list .list-name {
flex-shrink: 0;
width: 144rpx;
color: #AAAAAA;
}
.order-mes .mes-box .box-case .case-list .list-text {
flex: 1;
word-wrap: break-word;
color: #333333;
}
.order-mes .mes-box .box-case .case-list .list-text2 {
flex: 0;
width: 430rpx;
/* height: 40rpx;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; */
}
.order-mes .mes-box .box-case .case-list .list-btn {
/* flex-shrink: 0;
width: 104rpx;
height: 40rpx;
border-radius: 26rpx 26rpx 26rpx 26rpx;
text-align: center;
line-height: 38rpx;
color: #333333;
border: 1rpx solid #999999; */
width: 32rpx;
height: 32rpx;
margin: auto;
position: absolute;
top:0;
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>
pages/my/order/electronicTicketNew/electronicTicketNew.vue deleted 100644 → 0
View file @ f0ffa5f7
<template>
<view class="page-box">
<view class="order-status">
<view class="status-box">
<view class="status-type" v-if="orderInfo.orderStatus==2">
<template v-if="orderInfo.orderType==1">
出票成功
</template>
<template v-else-if="orderInfo.orderType==2">
预订成功
</template>
<template v-else-if="orderInfo.orderType==3">
预订成功
</template>
<template v-else-if="orderInfo.orderType==4">
购买成功
</template>
</view>
<view class="status-product">{{orderInfo.merchantName}}（{{orderInfo.productName}}）</view>
</view>
</view>
<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">
<view></view>
</view>
<view class="title-label">入园凭证</view>
</view> -->
<view class="certificate-box">
<view class="box-verificationCode">验证码：{{ticketCode}}</view>
<canvas class="box-QRcode" canvas-id="qrcode"/>
<view class="progress-box">
<progress :percent="percentage" activeColor="#3688FF" stroke-width="3" />
</view>
<!-- <view class="box-prompt">自动更新，截屏无效</view> -->
<view class="box-prompt2">{{orderInfo.orderType==1?'二维码自动更新，截屏无法验证':'二维码自动更新，截屏无法验证'}}</view>
</view>
</view>
</template>
<view class="order-queueUp order-allType order-positionTop" v-if="orderInfo.isFetch==1&&sortsInfo">
<view class="alltype-title">
<!-- <view class="title-line">
<view></view>
</view> -->
<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>
<view class="list-value">{{item.showStart}} ~ {{item.showEnd}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;">({{item.projectName}})</text></view>
</view>
<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>
</view>
<view class="rowNumber-list">
<text class="list-name">预计进入时间：</text>
<text class="list-value">{{item.sortNoTime}}</text>
</view>
<view class="rowNumber-list">
<text class="list-name">排号温馨提示：</text>
<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" 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>
<view class="list-value">{{item.showStart}} ~ {{item.showEnd}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;">({{item.projectName}})</text></view>
</view>
<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>
</view>
<view class="rowNumber-list">
<text class="list-name">预计进入时间：</text>
<text class="list-value">{{item.sortNoTime}}</text>
</view>
<view class="rowNumber-list">
<text class="list-name">排号温馨提示：</text>
<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>
<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-list rowNumber-list2">
<view class="rowNumber-signOver">您排队号已过</view>
<view class="rowNumber-takeNum2" v-if="item.sortFair===3" @click="signOverFun(item)">取号</view>
</view>
</view>
</template>
<!-- 历史排号 -->
<view class="queueUp-historyNum">
历史排号：
<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">
<view class="alltype-title">
<!-- <view class="title-line">
<view></view>
</view> -->
<view class="title-label">订单信息</view>
<u-icon name="arrow-down" v-if="orderTypeNum==0" @click="orderTypeNum=1" style="line-height: 44rpx !important;
color: #999999 !important;
position: absolute !important;
right: 24rpx !important;
top: 24rpx !important;"></u-icon>
<u-icon name="arrow-up" v-if="orderTypeNum==1" @click="orderTypeNum=0" style="line-height: 44rpx !important;
color: #999999 !important;
position: absolute !important;
right: 24rpx !important;
top: 24rpx !important;"></u-icon>
</view>
<view class="mes-box" v-if="orderTypeNum==1">
<view class="box-case">
<view class="case-list">
<view class="list-name">订单编号</view>
<view class="list-text list-text2">{{orderInfo.id}}</view>
<image class="list-btn" @click="copyText(orderInfo.id)" src="../../../../static/img/my/icon01.png"></image>
<!-- <view class="list-btn" @click="copyText(orderInfo.id)">复制</view> -->
</view>
<view class="case-list">
<view class="list-name">产品名称</view>
<view class="list-text">{{orderInfo.merchantName}}（{{orderInfo.productName}}）</view>
</view>
<view class="case-list">
<view class="list-name">购买数量</view>
<view class="list-text">{{orderInfo.orderNum}}</view>
</view>
<view class="case-list">
<view class="list-name">购买时间</view>
<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):""}}</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>
<view class="list-text">{{item.content}}</view>
</view>
</view>
<view class="box-case" v-if="touristInfo.length>0">
<view class="case-list">
<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 style="margin-right: 24rpx;">{{list.name}}</view>
</view>
</view>
</view>
</view>
<view class="box-case">
<view class="case-list">
<view class="list-name">退票规则</view>
<view class="list-text">
<template v-if="orderInfo.isRefund==0">不支持退票</template>
<template v-else-if="orderInfo.isRefund==1">
<!-- <div>
规定时间可退
</div> -->
<text v-if="orderInfo.orderRefundRuleList[0]&&orderInfo.orderRefundRuleList[0].refundDay!=0">使用日期截止前{{orderInfo.orderRefundRuleList[0].refundDay}}天</text>
<text v-else>游玩当天</text>
<text v-if="orderInfo.orderRefundRuleList[0]">{{orderInfo.orderRefundRuleList[0].refundTime.substr(0,5)}}之前可退</text>
</template>
<template v-else-if="orderInfo.isRefund==2">随时可退</template>
</view>
</view>
</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>
<script>
import uQRCode from '@/common/js/uqrcode.js'
export default {
filters:{
orderStatus1(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
}
},
orderStatus2(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
}
},
orderStatus3(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
}
},
orderStatus4(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
}
}
},
data() {
return {
openId:'',//用户信息
id:'',//订单ID
companyId:'',//公司ID
orderInfo:{},//订单信息
sortsInfo:'',//取号数据
sortData:[],//排队号信息
sortsAll:[],//所有排号信息
overSignedData:{},//过号数据
ticketCode:null,//订单编码
verifyCode:null,//二维码
ticketStatus:null,//票状态 0未使用，1已核销，2退票，3过期
codeStart:'',//开始时间
codes:[],//我二维码数组
percentage:0,//进度条百分比
orderExtendList:[],//订单拓展信息
touristInfo:[],//游客信息
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 = "z00167956572219584dc15634b62cf75"
this.openId = uni.getStorageSync("openid") //openid
//this.openId = "oh2UV1lyYABHMZ1rMlgjhVHyyYDQ"
this.getDetail();
},
onUnload() {
if(this.timer1) {
clearTimeout(this.timer1)
this.timer1 = null
}
if(this.timer2) {
clearTimeout(this.timer2)
this.timer2 = null
}
},
methods: {
getDetail(){//*-----------------加载订单
let data={
orderId:this.id,//订单ID
userId:this.openId,//用户Id
}
this.$request('order/userOrder/findOrderDetail',data).then((res)=>{
if(res.code=="00"){
this.orderInfo = res.data
this.orderExtendList = res.data.orderExtendList
if(this.orderInfo.orderTicketDetailList&&this.orderInfo.orderTicketDetailList.length>0){
this.verifyCode = this.orderInfo.orderTicketDetailList[0].verifyCode
this.ticketStatus = this.orderInfo.orderTicketDetailList[0].ticketStatus
this.ticketCode = this.orderInfo.orderTicketDetailList[0].ticketCode
}
this.touristInfo = res.data.orderTouristList
if(this.orderInfo.orderType==1||this.orderInfo.orderType==3){
if(this.orderInfo.subOrderType!=4&&this.orderInfo.subOrderType!=5){
this.$nextTick(() => {
if(this.orderInfo.playDate.substr(0,10)==this.$commonjs.today()&&this.orderInfo.exchangeMode==4||this.orderInfo.playDate.substr(0,10)==this.$commonjs.today()&&this.orderInfo.exchangeMode==5){
this.dynamicCode()
}else{
this.qecode()
}
})
}
}
if(this.orderInfo.isFetch==1){//isFetch==1需要排队
this.getSortInfo()
this.timer2=setInterval(()=>{
this.getSortInfo()
},1000*120)
// this.$once('hook:beforeDestroy',()=>{
// clearInterval(timer)
// })
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
getSortInfo(){//-------------------------排号信息加载
var areaCode = this.orderInfo.areaCode
var orderNum = this.orderInfo.orderNum
var userId = this.openId
var orderId = this.orderInfo.id
var verifyCode = this.ticketCode
let data={areaCode,orderNum,userId,orderId,verifyCode,'againNumber':0}
this.$request('distribution/distribution/getNewFetchInfo',data).then((res)=>{
if(res.code=="00"){
if(res.data.length>0){
this.sortsInfo = res.data[0]
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)=>{
if(item.projectId=='cjsd_project_0002'){//北站
if(northArr){
if(item.sortNo>northArr.sortNo){
northArr = item
}
}else{
northArr = item
}
}else{//南站
if(southArr){
if(item.sortNo>southArr.sortNo){
southArr = item
}
}else{
southArr = item
}
}
})
var arr = []
if(northArr){
arr.push(northArr)
}
if(southArr){
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({
title: res.message,
icon: 'none'
})
}
}).catch((err)=>{
this.timer1=setTimeout(()=>{
this.getSortInfo()
},10000)
// this.$once('hook:beforeDestroy',()=>{
// clearTimeout(timer)
// })
})
},
sortAgain(item){//--------------------------------------重新排队
let data={
againNumber:1,
thirdId:this.sortsInfo.order.orderId,
areaCode:item.projectId,
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,
icon: 'none'
})
}
})
},
qecode(){//生成二维码
if(this.verifyCode){
// let qrcode = new QRCode('qrcode',{
// width: 180,
// height: 180,
// text:this.verifyCode
// })
uQRCode.make({
canvasId: 'qrcode',
componentInstance: this,
text: this.verifyCode,
size: 180,
margin: 10,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uQRCode.errorCorrectLevel.H
})
}
},
signOverFun(item){//过号遮罩显示
this.overSignedData = {};
this.overSignedData = item
this.maskType = true
},
dynamicCodeRefresh(){
// 获取当前显示第几个二维码
let codes=this.codes
let now = new Date().getTime()
let nowTime = (now - this.codeStart)/1000
let code = null
// 寻找到当前时间的二维码
for(let i = 0 ; i < codes.length ; i++ ){
let item = codes[i]
nowTime -= item.timeout
if(nowTime <= 0 ){
code = item
break
}
}
// 全部遍历完成后，需要重新获取新的二维码
if(code == null){
this.dynamicCode()
} else if( code.code!=this.codeNo ){
this.codeNo = code.code
// if(document.querySelector('#qrcode img')){//移除子元素
// document.querySelector('#qrcode img').remove()
// document.querySelector('#qrcode canvas').remove()
// }
// let qrcode = new QRCode('qrcode',{//进入先获取二维码
// width: 180,
// height: 180,
// text:this.codeNo
// })
uQRCode.make({
canvasId: 'qrcode',
componentInstance: this,
text: this.codeNo,
size: 180,
margin: 10,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uQRCode.errorCorrectLevel.H
})
}
this.percentage+=1
if(this.percentage>=100){
this.percentage=0
}
},
dynamicCode(){//动态码
let data={
codeNo:this.ticketCode,//二维码编号
orderId:this.id,//订单号
userId:this.openId//openid
}
clearInterval(this.codeFlag)
this.$request('distribution/distribution/getAutoCode',data).then((res)=>{
if(res.code == '00'){
this.codes = res.data.codes
this.codeStart = new Date().getTime()
this.codeFlag = setInterval(()=>{
this.dynamicCodeRefresh()
},300)
this.$once('hook:beforeDestroy', () => {
clearInterval(this.codeFlag)
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch((err)=>{
let timer=setTimeout(()=>{
this.dynamicCode()
},2000)
this.$once('hook:beforeDestroy', () => {
clearTimeout(timer)
})
})
},
copyText(value){//-------------------------复制内容
uni.setClipboardData({
data:value,
success:function(){
uni.showToast({
title: "复制成功",
icon: 'none'
})
}
})
},
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>
<style scoped="scoped">
.page-box{
background-color: #ECF3FE;
min-height: 100vh;
padding-bottom: 80rpx;
}
.order-status {
width: 750rpx;
height: 464rpx;
background: linear-gradient(180deg, #3688FF 0%, #3688FF 37%, #ECF3FE 100%);
padding: 48rpx 32rpx 32rpx 40rpx;
box-sizing: border-box;
position: relative;
}
.order-status .status-box {
display: flex;
color: #fff;
overflow: hidden;
}
.order-status .status-type {
font-size: 48rpx;
line-height: 66rpx;
font-weight: bold;
margin-bottom: 8rpx;
flex-shrink:0
}
.order-status .status-product,
.order-status .status-prompt {
font-size: 28rpx;
line-height: 85rpx;
margin-left: 16rpx;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.order-status .status-icon {
width: 106rpx;
height: 104rpx;
position: absolute;
right: 64rpx;
top: 58rpx;
}
/*排队信息*/
.order-allType {
width: 710rpx;
background-color: #fff;
box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin: 0 auto 16rpx auto;
}
.order-allType .alltype-title {
display: flex;
height: 92rpx;
padding: 24rpx 24rpx 0 24rpx;
box-shadow: 0rpx 2rpx 0rpx 2rpx rgba(0, 0, 0, 0.08);
position: relative;
}
.order-allType .alltype-title .title-line {
width: 20rpx;
height: 44rpx;
overflow: hidden;
position: relative;
}
.order-allType .alltype-title .title-line view {
width: 4rpx;
height: 24rpx;
background-color: var(--main-color);
margin: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.order-allType .alltype-title .title-label {
font-size: 32rpx;
color: var(--title-color);
font-weight: bold;
line-height: 44rpx;
}
.order-allType .alltype-title .uicon-reload {
line-height: 44rpx !important;
color: var(--title-color) !important;
margin-left: 22rpx !important;
}
.order-allType .alltype-title .uicon-arrow-down,
.order-allType .alltype-title .uicon-arrow-up{
line-height: 44rpx !important;
color: #999999 !important;
position: absolute !important;
right: 24rpx !important;
top: 24rpx !important;
}
.order-positionTop:nth-child(2){
margin-top: -302rpx;
position: relative;
z-index: 2;
}
/*排队详情*/
.order-queueUp {
}
.order-queueUp .queueUp-rowNumber {
padding: 24rpx 24rpx 24rpx 24rpx;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list {
display: flex;
font-size: 28rpx;
line-height: 56rpx;
margin-bottom: 24rpx;
position: relative;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list2{
justify-content:center;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-name {
width: 220rpx;
color: var(--title-color);
flex-shrink: 0;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-value {
flex: 1;
display: flex;
color: #FC771D;
font-size: 40rpx;
font-weight: bold;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-value2 {
color: #333333;
font-size: 24rpx;
line-height: 35rpx;
padding-top: 8rpx;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-value3 {
display: flex;
color: #FC771D;
font-size: 40rpx;
font-weight: bold;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list2 .list-value{
flex: 0;
}
.order-queueUp .queueUp-rowNumber2{
color: #fff;
background-color: #1EA838;
}
.order-queueUp .queueUp-rowNumber2 .rowNumber-list .list-value,
.order-queueUp .queueUp-rowNumber2 .rowNumber-list .list-value2{
color:#fff;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-right48 {
margin-right: 48rpx;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-right24 {
margin-right: 24rpx;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list .list-btnNew{
width: 140rpx;
height: 40rpx;
border-radius: 26rpx 26rpx 26rpx 26rpx;
text-align: center;
line-height: 40rpx;
color: var(--main-color);
border: 1rpx solid var(--main-color);
position: absolute;
top: 0;
right: 0;
}
.order-queueUp .queueUp-rowNumber .rowNumber-list:nth-last-child(1) {
margin-bottom: 0;
}
.order-queueUp .queueUp-rowNumber .rowNumber-takeNum{
width: 136rpx;
height: 56rpx;
background: #3688FF;
border-radius: 32rpx 32rpx 32rpx 32rpx;
font-size: 28rpx;
color: #FFFFFF;
line-height: 56rpx;
text-align: center;
margin: 0 auto;
}
.order-queueUp .queueUp-rowNumber .rowNumber-takeNum2{
width: 136rpx;
height: 56rpx;
background: #3688FF;
border-radius: 32rpx 32rpx 32rpx 32rpx;
font-size: 28rpx;
color: #FFFFFF;
line-height: 56rpx;
text-align: center;
}
.order-queueUp .queueUp-rowNumber .rowNumber-takeTimer{
font-size: 28rpx;
color: #FC771D;
line-height: 40rpx;
font-weight: bold;
margin-top: 16rpx;
text-align: center;
}
.order-queueUp .queueUp-historyNum{
font-size: 24rpx;
color: #333333;
line-height: 34rpx;
border-top: 2rpx solid #ECECEC;
padding: 24rpx 24rpx 24rpx 24rpx;
}
.order-queueUp .queueUp-rowNumber3{
color: #fff;
background-color: #DA3844;
}
.order-queueUp .queueUp-rowNumber .rowNumber-signOver{
font-size: 32rpx;
color: #fff;
line-height: 56rpx;
font-weight: bold;
margin-right: 40rpx;
}
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value,
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value2,
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeTimer,
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value3{
color:#fff;
}
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum,
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum2{
background-color: #fff;
color: #3688FF;
}
/*入园凭证*/
.order-certificate .certificate-box {
padding: 16rpx 0 24rpx 0;
overflow: hidden;
}
.order-certificate .certificate-box .box-verificationCode {
margin: 8rpx 0 8rpx 0;
font-size: 24rpx;
color: #333333;
line-height: 40rpx;
text-align: center;
}
.order-certificate .certificate-box .box-QRcode {
display: block;
width: 320rpx;
height: 320rpx;
margin: 0 auto;
}
.order-certificate .certificate-box .progress-box {
width: 304rpx;
margin: 6rpx auto 0 auto;
}
.order-certificate .certificate-box .box-prompt {
font-size: 28rpx;
color: var(--main-color);
line-height: 40rpx;
text-align: center;
margin: 16rpx 0 8rpx 0;
}
.order-certificate .certificate-box .box-prompt2 {
font-size: 28rpx;
font-weight: bold;
color: #FC771D;
line-height: 40rpx;
text-align: center;
margin: 24rpx 0 0 0;
}
/*订单信息*/
.order-mes .mes-box {
padding: 44rpx 24rpx 24rpx 24rpx;
overflow: hidden;
}
.order-mes .mes-box .box-case {
width: 638rpx;
border-bottom: 2rpx solid #ECECEC;
margin-bottom: 40rpx;
}
.order-mes .mes-box .box-case:nth-last-child(1) {
border-bottom: none;
margin-bottom: 0rpx;
}
.order-mes .mes-box .box-case .case-list {
display: flex;
width: 638rpx;
font-size: 28rpx;
line-height: 40rpx;
margin-bottom: 28rpx;
position: relative;
}
.order-mes .mes-box .box-case .case-list .list-name {
flex-shrink: 0;
width: 144rpx;
color: #AAAAAA;
}
.order-mes .mes-box .box-case .case-list .list-text {
flex: 1;
word-wrap: break-word;
color: #333333;
}
.order-mes .mes-box .box-case .case-list .list-text2 {
flex: 0;
width: 430rpx;
/* height: 40rpx;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; */
}
.order-mes .mes-box .box-case .case-list .list-btn {
/* flex-shrink: 0;
width: 104rpx;
height: 40rpx;
border-radius: 26rpx 26rpx 26rpx 26rpx;
text-align: center;
line-height: 38rpx;
color: #333333;
border: 1rpx solid #999999; */
width: 32rpx;
height: 32rpx;
margin: auto;
position: absolute;
top:0;
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>
pages/my/order/electronicTicketold/electronicTicketold.vue 0 → 100644
View file @ 29cbeb56
<template>
<view>
<web-view :src="outUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
outUrl:'',//跳出地址
Brightness:'',//屏幕亮度
}
},
onShow() {
let _this=this
uni.getScreenBrightness({
success: function(res){
// 这里是把获取到的手机屏幕亮度，存储到data里面，方便给到页面生命周期隐藏和卸载方法里面用
_this.Brightness = res.value
if(res.value != 1){
uni.setScreenBrightness({
value: 1
})
}
}
})
},
onHide: function () {
uni.setScreenBrightness({// 恢复之前屏幕亮度
value: this.Brightness
})
},
onLoad(option) {
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let ifyukuaiCode=option.ifyukuaiCode||''//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
this.outUrl='https://wx.pangdly.com/#/unusedDetail?id='+option.orderId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId+'&ifyukuaiCode='+ifyukuaiCode
},
methods: {
}
}
</script>
<style>
</style>
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