Skip to content

U
uni-pdtravel
Commit 32794fac authored by qipeng's avatar qipeng
Browse files
Options

副本2为 weapp-code 代码

parent 869ba920
Show whitespace changes
Inline Side-by-side
Showing with 1670 additions and 66 deletions
pages/my/order/electronicTicket/electronicTicket - 副本2.vue 0 → 100644
View file @ 32794fac
<template>
<view class="page-box">
<view class="order-status">
<view class="status-box">
<template v-if="orderInfo.channelType==8">
<view class="status-type">
{{orderInfo.channelName}}<text style="font-size: 28rpx;margin-left: 10rpx;">{{orderInfo.merchantName}}（{{orderInfo.productName}}）</text>
</view>
</template>
<template v-else>
<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> -->
{{orderInfo.orderStatus|orderStatus1}}
</view>
<!-- {{orderInfo.merchantName}}（{{orderInfo.productName}}） -->
<view class="status-product" v-if="orderInfo.orderStatus==6">款项预计1-7个工作日退回原支付账户</view>
</template>
</view>
</view>
<template v-if="orderInfo.orderType==1&&ticketCode!=null&&orderInfo.orderStatus==2||orderInfo.orderType==1&&ticketCode!=null&&orderInfo.orderStatus==4||orderInfo.orderType==3&&ticketCode!=null&&orderInfo.orderStatus==4||orderInfo.orderType==3&&ticketCode!=null&&orderInfo.orderStatus==2">
<view class="order-certificate order-allType order-positionTop" :class="orderInfo.orderStatus==6?'order-positionTopAct':''" >
<!-- <view class="alltype-title">
<view class="title-line">
<view></view>
</view>
<view class="title-label">入园凭证</view>
</view> -->
<view class="certificate-box" v-if="ifyukuaiCode!=''&&ifyukuaiCode!='undefined'">
<view class="box-prompt2">温馨提示</view>
<!-- <view class="box-prompt2">验证码用于入园游玩时核验使用</view>
<view class="box-prompt2">注：验证码信息已自动同步至订单所有游玩人渝快码，游玩人直接使用本人渝快码即可入园核验</view> -->
<view class="box-prompt2">购票用户直接使用本人渝快码即可入园核验</view>
<view class="box-promptBtn" @click="returnMini()">我知道了</view>
</view>
<view class="certificate-box" v-else-if="orderInfo.exchangeMode==1||orderInfo.exchangeMode==4||orderInfo.exchangeMode==5">
<view class="box-verificationCode">验证码：{{ticketCode}}</view>
<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" size="200" class="box-QRcode" :value="uqrcodeVal" :options="{ margin: 10 }" ></uqrcode> -->
<!--后端生成-->
<!-- <image :src="imgUrlList" style="width: 180px;height: 180px;margin: 0 auto;display: block;" v-if="imgUrlListType"></image> -->
<!--显示图片用的标签-->
<image class="code_view" :src="imagePath" v-if="imgTypeShow"></image>
<view class="progress-box" v-if="qrCodeType==true">
<progress :percent="percentage" activeColor="#3688FF" stroke-width="3" />
</view>
<!-- <view class="box-prompt">自动更新，截屏无效</view> -->
<view class="box-prompt2">{{qrCodeType==true?'二维码自动更新，截屏无法验证':''}}</view>
</view>
<view class="certificate-box" v-else-if="orderInfo.exchangeMode==2">
<view class="box-verificationCode">验证码：{{ticketCode}}</view>
<view class="box-verificationCode">请使用身份证过闸</view>
</view>
<view class="certificate-box" v-else-if="orderInfo.exchangeMode==3">
<view class="box-verificationCode">兑换码：{{ticketCode}}</view>
</view>
</view>
</template>
<view class="order-queueUp order-allType order-positionTop" v-if="orderInfo.isFetch==1&&sortsInfo&&sortData[0].config.sceneSortStatus==1&&orderInfo.orderStatus==4||orderInfo.isFetch==1&&sortsInfo&&sortData[0].config.sceneSortStatus==1&&orderInfo.orderStatus==2">
<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">{{item.config.paRowNumHint}}</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&&item.config.paReturnTripNumEnable==1" @click="sortAgain(item)">取号</view>
<view class="rowNumber-takeTimer" v-if="returnTripType==false&&item.config.paReturnTripNumEnable==1">{{m}}分{{s}}秒后可取号</view>
<view class="rowNumber-takeTimer" v-if="item.config.paReturnTripNumEnable==0">{{item.config.paReturnTripHint}}</view>
</view>
</template>
<!-- 可进入 -->
<template v-else-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">{{item.config.paRowNumHint}}</text>
</view>
<view class="rowNumber-list">
<text class="list-name">&nbsp;</text>
<text class="list-value2">{{item.config.paArrivalNumHint}}</text>
</view>
</view>
</template>
<!-- 过号 -->
<template v-else-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" v-if="item.config.paPassedNumEnable==1">
<view class="rowNumber-signOver">我的排号：</view>
<view class="list-value">{{item.sortNo}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;flex-shrink: 0;">({{item.projectName}})</text></view>
</view>
<view class="rowNumber-list rowNumber-list2" v-if="item.config.paPassedNumEnable==1">
<view class="rowNumber-signOver">您排队号已过</view>
<view class="rowNumber-takeNum2" v-if="item.sortFair===3" @click="signOverFun(item)">取号</view>
</view>
<view class="rowNumber-list rowNumber-list2" v-else>
<view class="rowNumber-signOver">{{item.config.paPassedNumHint}}</view>
</view>
</view>
</template>
<!-- 可进入 -->
<template v-else-if="sortData[0].sortFair===6">
<view class="queueUp-rowNumber queueUp-rowNumber2" v-for="(item,index) in sortData" :key="index">
<view class="rowNumber-list">
<text class="list-name">排号温馨提示：</text>
<text class="list-value2">您已过闸</text>
</view>
</view>
</template>
<!-- 提前通知 -->
<template v-else-if="sortData[0].sortFair===7">
<view class="queueUp-rowNumber" v-for="(item,index) in sortData" :key="index">
<view class="rowNumber-list" v-if="item.config.paHideNum==0||item.config.paHideNum==undefined">
<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" v-if="item.config.paHideEstimatedTime==0||item.config.paHideEstimatedTime==undefined">
<text class="list-name">预计进入时间：</text>
<text class="list-value">{{item.sortNoTime}}</text>
</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" style="margin-bottom: 0;">
<text class="list-name">排号温馨提示：</text>
<text class="list-value2">
{{item.config.paRowNumHint}}
</text>
</view>
<view class="rowNumber-list">
<text class="list-name">&nbsp;</text>
<text class="list-value2" style="color: #3688FF;" v-if="item.config.paAdvanceNoticeDisplay!=undefined">
{{item.config.paAdvanceNoticeDisplay}}
</text>
<text class="list-value2" style="color: #3688FF;" v-else>
请尽快赶到现场等候，避免错过游玩时间。
</text>
</view>
</view>
</template>
<!-- 未过号 -->
<template v-else>
<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">{{item.config.paRowNumHint}}</text>
</view>
</view>
</template>
<!-- 历史排号 未过号 -->
<view class="queueUp-historyNum">
历史排号：
<template v-for="(item,index) in sortsAll">
<text v-if="index!==0||item.sortFair==6" :key="index">{{item.sortNo}}({{item.projectName}})</text>
</template>
</view>
</view>
<view class="order-vouchers" v-if="photoType==true">
<image class="vouchers-img" src="../../../../static/img/my/bookmark.png"></image>
<view class="vouchers-title">恭喜您！获得摄影抵用券{{findCouponPhoto.couponPrice}}元</view>
<view class="vouchers-address">使用地址：长江索道南站观景台旁</view>
<view class="vouchers-btn">
<view class="btn-click" @click="immediateClaim()" v-if="claimStatus==0">立即领取</view>
<view class="btn-click" v-else>已领取</view>
<view class="btn-to" @click="toMyCoupon()">
使用规则
<u-icon name="arrow-right" color="#333333"></u-icon>
</view>
</view>
</view>
<view class="order-mes order-allType order-positionTop">
<view class="alltype-title" @click="orderTypeNumFun()">
<!-- <view class="title-line">
<view></view>
</view> -->
<view class="title-label">订单信息</view>
<u-icon name="arrow-down" v-if="orderTypeNum==0" style="color: #999999 !important;"></u-icon>
<u-icon name="arrow-up" v-if="orderTypeNum==1" style="color: #999999 !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/orderList/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 list-text3">
<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>
<template v-if="ticketStatus">
<view class="list-btnRefund" v-if="orderInfo.orderStatus==2&&orderInfo.isRefund!=0&&ticketStatus==0" @click="refundJump(orderInfo.id)">退款/售后</view>
</template>
<template v-else>
<view class="list-btnRefund" v-if="orderInfo.orderStatus==2&&orderInfo.isRefund!=0" @click="refundJump(orderInfo.id)">退款/售后</view>
</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">
{{overSignedData.config.paPassedNumTakeTypeHint}}
</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/uqrcode4.js'
import QRCode from '@/common/weapp-qrcode.js'
import UMask from '@/uview-ui/components/u-mask/u-mask.vue'
export default {
components: {
UMask
},
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 {
uqrcodeVal:'',
orderDataType:false,
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,
timer3:null,
maskType :false,
d:'',//倒计时 天
h: '',//倒计时 时
m: '',//倒计时 分
s: '',//倒计时 秒
sum_h: '',//倒计时
timerType:null,//清除标记
returnTripType:false,//返程取号设置
Brightness:'',//屏幕亮度
qrCodeType:false,//是否是多个二维码
btnRefundType:false,//是否可退款
ifyukuaiCode:'',
visitorIndex:'',//短信特殊字段
photoType:false,//是否显示优惠券
claimStatus:1,//领取状态 0未领取 1已领取
findCouponPhoto:{},//相册优惠券
imgUrlList:'',
imgUrlListType:false,
imagePath:'',//图片接受地址
imgTypeShow:true,//是否展示图片
}
},
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) {
console.log(option.orderId)
console.log('-----------------------')
if(option.orderId!=undefined){
this.id = option.orderId
this.orderDataType = true
}else{
this.id = option.thirdOrderId
this.visitorIndex = option.visitorIndex
this.orderDataType = false
}
this.ifyukuaiCode = option.ifyukuaiCode||''
//this.id = "z00167956572219584dc15634b62cf75"
this.openId = uni.getStorageSync('openid') //openid oroHZ5FaUQ_SOOC_uQQP92fJpBRE oh2UV1lyYABHMZ1rMlgjhVHyyYDQ
//this.openId = 'oh2UV1lyYABHMZ1rMlgjhVHyyYDQ'
this.getDetail()
},
onUnload() {
if(this.timer1) {
clearTimeout(this.timer1)
this.timer1 = null
}
if(this.timer2) {
clearTimeout(this.timer2)
this.timer2 = null
}
if(this.timer3) {
clearTimeout(this.timer3)
this.timer3 = null
}
uni.setScreenBrightness({// 恢复之前屏幕亮度
value: this.Brightness
})
},
methods: {
toMyCoupon(){//跳转我的优惠券
uni.navigateTo({
url:'/pages/my/couponCenter/myCouponList/myCouponList'
})
},
immediateClaim(){//立即领取
let data={
openid:this.openId,
createSource:this.findCouponPhoto.isMerchant,
couponId:this.findCouponPhoto.couponId,
comeFrom:'相册领券',
couponType:this.findCouponPhoto.couponType,
deductPrice:this.findCouponPhoto.couponPrice,
useStartDate:this.findCouponPhoto.useStartDate,
useEndDate:this.findCouponPhoto.useEndDate,
couponRule:this.findCouponPhoto.couponRule,
couponRuleRemind:this.findCouponPhoto.couponRuleRemind,
couponName:this.findCouponPhoto.couponName,
createSource:this.findCouponPhoto.isMerchant,
slaveList:this.findCouponPhoto.slaveList
}
this.$request('wechatUser/myPage/saveCoupon',data).then((res)=>{
if(res.code=='00'){
uni.showToast({
title: '领取成功',
icon: 'none'
})
this.claimStatus=1
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
findCouponListFun(){//券查询
let data={
openid:this.openId,
useRange:11,
}
this.$request('scenic/user/product/findCouponList',data).then((res)=>{
if(res.code=='00'){
res.data.forEach((item,index)=>{
if(item.useRange==11){
this.findCouponPhoto = item
this.claimStatus = 0
if(item.alreadyReceive==undefined||item.alreadyReceive==0){
this.claimStatus=0
}else{
this.claimStatus = 1
}
this.photoType = true
}
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
orderTypeNumFun(){
if(this.orderTypeNum==0){
this.orderTypeNum=1
}else{
this.orderTypeNum=0
}
},
getDetail(){//*-----------------加载订单
var postHttpUrl = ''
let data = {}
if(this.orderDataType == true){//为小程序
data={
orderId:this.id,//订单ID
userId:this.openId,//用户Id
}
postHttpUrl = 'order/userOrder/findOrderDetail'
}else{//为短信
data={
thirdOrderId:this.id,//订单ID
}
postHttpUrl = 'order/userOrder/findOrderDetailByThirdOrderId'
}
this.$request(postHttpUrl,data).then((res)=>{
if(res.code=='00'){
this.orderInfo = res.data
this.orderExtendList = res.data.orderExtendList
if(this.orderInfo.orderType==1){
this.orderTypeNum =1
}
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.ifyukuaiCode==''||typeof this.ifyukuaiCode=='undefined'){
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()
this.qrCodeType=true
}else if(this.orderInfo.exchangeMode==1){
this.qecode()
this.qrCodeType=false
}
})
}
}
}
if(this.orderInfo.isFetch==1){//isFetch==1需要排队
this.getSortInfo()
this.timer2=setInterval(()=>{
this.getSortInfo()
},1000*120)
// this.$once('hook:beforeDestroy',()=>{
// clearInterval(timer)
// })
}
this.findCouponListFun()
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
.catch((err) => {
this.timer3 = setTimeout(() => {
this.getDetail()
}, 2000)
})
},
getSortInfo(){//-------------------------排号信息加载
var areaCode = this.orderInfo.areaCode
var orderNum = this.orderInfo.orderNum
var userId = this.openId
var orderId = this.orderInfo.id
// var verifyCode = this.ticketCode
var thirdId = this.orderInfo.thirdOrderId
let data={areaCode,orderNum,userId,orderId,thirdId,'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
// })
let verifyCode=''
if(this.visitorIndex!=''&&typeof this.visitorIndex!=undefined){
verifyCode=this.verifyCode+':'+this.visitorIndex
}else{
verifyCode=this.verifyCode
}
// uQRCode.make({
// canvasId: 'qrcode',
// componentInstance: this,
// text: verifyCode,
// size: 180,
// margin: 10,
// backgroundColor: '#ffffff',
// foregroundColor: '#000000',
// fileType: 'jpg',
// errorCorrectLevel: uQRCode.errorCorrectLevel.H
// })
// this.uqrcodeVal=verifyCode
//后端生成
// var verifyCodeURL = encodeURI(verifyCode)
// this.imgUrlList = 'http://pay.tuyoyoo.com/distribution/c/'+verifyCodeURL+'?width=180&height=180&frontColor=0&backColor=16777215'
// this.imgUrlListType = true
this.createCode(verifyCode)
}
},
createCode(showCode) {//创建二维码
var imgData = QRCode.drawImg(showCode, {
typeNumber: 3,//码点大小 1-40，数字越大，码点越小，二维码会显得越密集
errorCorrectLevel: 'H',//纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来 详见qrcode.js
size: 180
})
console.log(imgData)
this.imgTypeShow = false
this.imagePath = imgData
this.imgTypeShow = true
},
signOverFun(item){//过号遮罩显示
this.overSignedData = {}
this.overSignedData = item
if(item.config.paPassedNumTakeType==1){
this.maskType = true
}else{
this.sortAgain(item)
}
},
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.uqrcodeVal=this.codeNo
//后端生成
// this.imgUrlListType = false
// var verifyCodeURL = 'http://pay.tuyoyoo.com/distribution/c/'+this.codeNo+'?width=180&height=180&frontColor=0&backColor=16777215'
// this.imgUrlList = encodeURI(verifyCodeURL)
// this.imgUrlListType = true
this.createCode(this.codeNo)
}
this.percentage+=1
if(this.percentage>=100){
this.percentage=0
}
},
dynamicCode(){//动态码
let data={
codeNo:this.ticketCode,//二维码编号
orderId:this.id,//订单号
userId:this.openId//openid
}
let verifyCode=''
if(this.visitorIndex!=''&&this.visitorIndex!=undefined){
data.codeNo=this.ticketCode+':'+this.visitorIndex
}else{
data.codeNo=this.ticketCode
}
clearInterval(this.codeFlag)
this.$request('distribution/distribution/getAutoCode',data).then((res)=>{
if(res.code == '00'){
this.codes = res.data.codes
if(this.codes.length==0){
uni.showToast({
title: '网络异常，请退出重试',
icon: 'none'
})
}
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)
},
refundJump(id){//-------------------景区跳转
uni.reLaunch({
url: '/pages/my/order/afterSale/applyAfterSale/applyAfterSale?orderId='+id+'&ifyukuaiCode='+this.ifyukuaiCode
})
},
returnMini(){
//#ifdef MP-WEIXIN
wx.navigateBackMiniProgram({
extraData: {
cqQRCode:1
},
fail(res){
uni.showToast({
title:'获取失败，请退出后重新进入渝快码小程序获取验证码',
icon:'none',
duration:3000
})
}
})
//#endif
//#ifdef MP-ALIPAY
my.navigateBackMiniProgram({
extraData:{
cqQRCode:1
},
fail: (res) => {
uni.showToast({
title:'获取失败，请退出后重新进入渝快码小程序获取验证码',
icon:'none',
duration:3000
})
}
})
//#endif
},
}
}
</script>
<style scoped="scoped" lang="scss">
.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;
flex-wrap: wrap;
color: #fff;
overflow: hidden;
}
.order-status .status-type {
width: 100%;
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: 65rpx;
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 6rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin: 0 auto 16rpx auto;
overflow: hidden;
position: relative;
z-index: 10;
}
.order-allType .alltype-title {
display: flex;
justify-content: space-between;
align-items: center;
height: 92rpx;
padding: 24rpx 24rpx 24rpx 24rpx;
box-shadow: 0rpx 2rpx 0rpx 2rpx rgba(0, 0, 0, 0.04);
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: -322rpx;
position: relative;
z-index: 2;
}
.order-positionTopAct{
margin-top: -262rpx;
}
/*排队详情*/
.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: 200px;
height: 200px;
margin: 0 auto;
}
.order-certificate .certificate-box .box-QRcode2{
position: fixed;
top: -500rpx;
}
.order-certificate .certificate-box .progress-box {
width: 180px;
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;
padding: 0 24rpx
}
.order-certificate .certificate-box .box-promptBtn{
width: 152rpx;
height: 64rpx;
border: solid 1px #ccc;
border-radius: 8rpx;
line-height: 64rpx;
color: #333333;
text-align: center;
box-sizing: content-box;
margin: 24rpx auto 0 auto;
}
/*订单信息*/
.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-text3{
padding-right: 170rpx;
}
.order-mes .mes-box .box-case .case-list .list-btnRefund{
width: 152rpx;
height: 64rpx;
border: solid 1px #ccc;
border-radius: 8rpx;
line-height: 64rpx;
color: #333333;
text-align: center;
display: inline-block;
box-sizing: content-box;
position: absolute;
top: -12rpx;
right: 0;
}
.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;
}
.order-vouchers{
width: 710rpx;
height: 184rpx;
margin: 0 auto 16rpx auto;
box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0,0,0,0.08);
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 24rpx 32rpx 0 32rpx;
background-image: url("../../static/orderList/iconBackground.png");
position: relative;
overflow: hidden;
.vouchers-img{
width: 200rpx;
height: 160rpx;
position: absolute;
bottom: -15rpx;
right: 28rpx;
}
.vouchers-title{
font-size: 32rpx;
color: #EE0E0E;
font-weight: bold;
line-height: 44rpx;
margin-bottom: 8rpx;
}
.vouchers-address{
font-size: 24rpx;
color: #25434D;
line-height: 34rpx;
margin-bottom: 16rpx;
}
.vouchers-btn{
display: flex;
.btn-click{
width: 144rpx;
height: 42rpx;
background: #EE0E0E;
border-radius: 22rpx 22rpx 22rpx 22rpx;
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
line-height: 42rpx;
margin-right: 24rpx;
}
.btn-to{
display: flex;
color: #333333;
font-size: 20rpx;
line-height: 42rpx;
}
}
}
.code_view{
display: block;
width: 180px;
height: 180px;
margin: 0 auto;
}
</style>
pages/my/order/electronicTicket/electronicTicket.vue
View file @ 32794fac
......@@ -47,11 +47,12 @@
</view>
<view class="certificate-box" v-else-if="orderInfo.exchangeMode==1||orderInfo.exchangeMode==4||orderInfo.exchangeMode==5">
<view class="box-verificationCode">验证码：{{ticketCode}}</view>
<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" size="200" class="box-QRcode" :value="uqrcodeVal" :options="{ margin: 10 }" ></uqrcode> -->
<!--后端生成-->
<!-- <image :src="imgUrlList" style="width: 180px;height: 180px;margin: 0 auto;display: block;" v-if="imgUrlListType"></image> -->
<!--显示图片用的标签-->
<image class="code_view" :src="imagePath" v-if="imgTypeShow"></image>
<!--#ifdef MP-WEIXIN-->
<canvas class="box-QRcode" canvas-id="qrcode"/>
<!--#endif-->
<!--#ifdef MP-ALIPAY-->
<uqrcode ref="uqrcode" canvas-id="qrcode" class="box-QRcode" :class="showtip==false&&showUseRule==false?'':'box-QRcode2'" :value="uqrcodeVal" :options="{ margin: 10 }" ></uqrcode>
<!--#endif-->
<view class="progress-box" v-if="qrCodeType==true">
<progress :percent="percentage" activeColor="#3688FF" stroke-width="3" />
</view>
......@@ -144,7 +145,7 @@
</view>
<view class="rowNumber-list rowNumber-list2" v-if="item.config.paPassedNumEnable==1">
<view class="rowNumber-signOver">我的排号：</view>
<view class="list-value">{{item.sortNo}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;flex-shrink: 0;">({{item.projectName}})</text></view>
<view class="list-value">{{item.sortNo}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;flex-shrink:0;">({{item.projectName}})</text></view>
</view>
<view class="rowNumber-list rowNumber-list2" v-if="item.config.paPassedNumEnable==1">
<view class="rowNumber-signOver">您排队号已过</view>
......@@ -347,8 +348,13 @@
</template>
<script>
// import uQRCode from '@/common/uqrcode4.js'
import QRCode from '@/common/weapp-qrcode.js'
//#ifdef MP-WEIXIN
import uQRCodeS from '@/common/js/uqrcode.js'
//#endif
//#ifdef MP-ALIPAY
import uQRCode from '@/common/uqrcode4.js'
//#endif
import UMask from '@/uview-ui/components/u-mask/u-mask.vue'
export default {
components: {
......@@ -550,10 +556,6 @@ export default {
photoType:false,//是否显示优惠券
claimStatus:1,//领取状态 0未领取 1已领取
findCouponPhoto:{},//相册优惠券
imgUrlList:'',
imgUrlListType:false,
imagePath:'',//图片接受地址
imgTypeShow:true,//是否展示图片
}
},
onShow() {
......@@ -853,35 +855,24 @@ export default {
}else{
verifyCode=this.verifyCode
}
// uQRCode.make({
// canvasId: 'qrcode',
// componentInstance: this,
// text: verifyCode,
// size: 180,
// margin: 10,
// backgroundColor: '#ffffff',
// foregroundColor: '#000000',
// fileType: 'jpg',
// errorCorrectLevel: uQRCode.errorCorrectLevel.H
// })
// this.uqrcodeVal=verifyCode
//后端生成
// var verifyCodeURL = encodeURI(verifyCode)
// this.imgUrlList = 'http://pay.tuyoyoo.com/distribution/c/'+verifyCodeURL+'?width=180&height=180&frontColor=0&backColor=16777215'
// this.imgUrlListType = true
this.createCode(verifyCode)
}
},
createCode(showCode) {//创建二维码
var imgData = QRCode.drawImg(showCode, {
typeNumber: 3,//码点大小 1-40，数字越大，码点越小，二维码会显得越密集
errorCorrectLevel: 'H',//纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来 详见qrcode.js
size: 180
//#ifdef MP-WEIXIN
uQRCodeS.make({
canvasId: 'qrcode',
componentInstance: this,
text: verifyCode,
size: 180,
margin: 10,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uQRCodeS.errorCorrectLevel.H
})
console.log(imgData)
this.imgTypeShow = false
this.imagePath = imgData
this.imgTypeShow = true
//#endif
//#ifdef MP-ALIPAY
this.uqrcodeVal=verifyCode
//#endif
}
},
signOverFun(item){//过号遮罩显示
this.overSignedData = {}
......@@ -921,24 +912,24 @@ export default {
// 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.uqrcodeVal=this.codeNo
//后端生成
// this.imgUrlListType = false
// var verifyCodeURL = 'http://pay.tuyoyoo.com/distribution/c/'+this.codeNo+'?width=180&height=180&frontColor=0&backColor=16777215'
// this.imgUrlList = encodeURI(verifyCodeURL)
// this.imgUrlListType = true
this.createCode(this.codeNo)
//#ifdef MP-WEIXIN
uQRCodeS.make({
canvasId: 'qrcode',
componentInstance: this,
text: this.codeNo,
size: 180,
margin: 10,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uQRCodeS.errorCorrectLevel.H
})
//#endif
//#ifdef MP-ALIPAY
this.uqrcodeVal=this.codeNo
//#endif
}
this.percentage+=1
if(this.percentage>=100){
......@@ -1334,6 +1325,7 @@ export default {
line-height: 56rpx;
font-weight: bold;
margin-right: 40rpx;
flex-shrink:0;
}
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value,
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value2,
......@@ -1341,6 +1333,9 @@ export default {
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value3{
color:#fff;
}
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value{
flex-shrink:0;
}
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum,
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum2{
background-color: #fff;
......@@ -1362,10 +1357,19 @@ export default {
.order-certificate .certificate-box .box-QRcode {
display: block;
width: 200px;
height: 200px;
width: 180px;
height: 180px;
margin: 0 auto;
}
//#ifdef MP-ALIPAY
/deep/ .uqrcode-canvas-wrapper,/deep/ .uqrcode{
margin: 0 auto;
position: relative;
}
/deep/ .uqrcode-canvas{
transform:(1,1)
}
//#endif
.order-certificate .certificate-box .box-QRcode2{
position: fixed;
top: -500rpx;
......@@ -1597,10 +1601,4 @@ export default {
}
}
}
.code_view{
display: block;
width: 180px;
height: 180px;
margin: 0 auto;
}
</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