Skip to content

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

优惠券显示修改

parent e07e2db3
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 255 deletions
pages/my/order/electronicTicket/electronicTicket.vue
View file @ a9aa5d94
......@@ -2,23 +2,32 @@
<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> -->
{{orderInfo.orderStatus|orderStatus1}}
</view>
<!-- {{orderInfo.merchantName}}（{{orderInfo.productName}}） -->
<view class="status-product" v-if="orderInfo.orderStatus==6">款项预计1-7个工作日退回原支付账户</view>
<template v-if="channelType==1">
<view class="status-type">
携程<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">
......@@ -38,8 +47,7 @@
</view>
<view class="certificate-box" v-else-if="orderInfo.exchangeMode==1||orderInfo.exchangeMode==4||orderInfo.exchangeMode==5">
<view class="box-verificationCode">验证码：{{ticketCode}}</view>
<canvas class="box-QRcode" :class="showtip==false&&showUseRule==false?'':'box-QRcode2'" canvas-id="qrcode"/>
<view v-if="howtip==true||showUseRule==true" style="width: 180px; height: 180px;"></view>
<canvas class="box-QRcode" canvas-id="qrcode"/>
<view class="progress-box" v-if="qrCodeType==true">
<progress :percent="percentage" activeColor="#3688FF" stroke-width="3" />
</view>
......@@ -216,6 +224,19 @@
</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">
......@@ -230,7 +251,7 @@
<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>
<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">
......@@ -317,49 +338,7 @@
</view>
</view>
</view>
<!--抵消券 对应的遮罩-->
<view class="couponBox" @click="showUseRule = true" v-if="couponType">
<image class="coupon" src="../../../../static/img/my/coupon.png"></image>
<text class="coupon-price">
<text class="r-symbol">￥</text>
{{couponPrice}}
</text>
</view>
<u-mask :show="showtip || showUseRule">
<view class="mask">
<view class="img-box">
<!-- <image src="../../../../static/img/my/postcardTip.png" v-if="showtip"></image>
<image src="../../../../static/img/my/useRule.png" v-if="showUseRule"></image> -->
<view v-if="showtip" class="tips-vouchers">
<view class="vouchers-title">恭喜您！</view>
<view class="vouchers-title2">获得摄影抵用<text>{{couponPrice}}</text>券</view>
<image class="vouchers-img" src="../../../../static/img/my/bookmark.png"></image>
<view class="vouchers-to" @click="showtipFun()">
使用规则
<u-icon class="to-url" name="arrow-right"></u-icon>
</view>
<view class="vouchers-text">
（使用地址：长江索道南站观景台旁）
</view>
</view>
<view v-if="showUseRule" class="tips-useRule">
<view class="useRule-title">使用规则</view>
<view class="useRule-list">
<view class="list-title">规则说明</view>
<view class="list-text" v-for="(item,index) in couponRule" :key="index">· {{item}}</view>
</view>
<view class="useRule-list">
<view class="list-title">补充说明</view>
<view class="list-text" v-for="(item,index) in couponRuleRemind" :key="index">· {{item}}</view>
</view>
</view>
<image class="coupon-backgruondImg" src="../../../../static/img/my/backgroundIcon01.png" ></image>
<u-icon class="close" name="close-circle" @click="closeMask"></u-icon>
</view>
<u-button type="primary" shape="circle" @click="showtipCloseFun()">知道了</u-button>
</view>
</u-mask>
</view>
</template>
......@@ -562,13 +541,10 @@ export default {
btnRefundType:false,//是否可退款
ifyukuaiCode:'',
visitorIndex:'',//短信特殊字段
showtip: false,//领取提示
showUseRule: false,//使用规则提示
couponType:false,//是否拥有相册优惠券
findPageMarketList:[],//券信息
couponPrice:0,//优惠价格
couponRule:[],//规则说明
couponRuleRemind:[],//补充说明
channelType:0,//渠道状态channelType==0 订单列表跳转 ==1 OTA取票跳转
photoType:false,//是否显示优惠券
claimStatus:1,//领取状态 0未领取 1已领取
findCouponPhoto:{},//相册优惠券
}
},
onShow() {
......@@ -601,10 +577,11 @@ export default {
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.channelType = option.channelType||0
//this.openId = 'oh2UV1lyYABHMZ1rMlgjhVHyyYDQ'
this.getDetail()
},
......@@ -626,62 +603,67 @@ export default {
})
},
methods: {
showtipFun(){//点击使用规则
this.showtip= false//领取提示
this.showUseRule=true//使用规则提示
},
showtipCloseFun(){//点击使用规则
this.showtip= false//领取提示
this.showUseRule=false//使用规则提示
},
closeMask(){//遮罩关闭
this.showtip= false//领取提示
this.showUseRule= false//使用规则提示
toMyCoupon(){//跳转我的优惠券
uni.navigateTo({
url:'/pages/my/couponCenter/myCouponList/myCouponList'
})
},
findPageMarketFun(){//优惠券
var userId = uni.getStorageSync('userId')
var data = {
pageCode:'orderInfo',
marketingStatus:1,
openid:this.openId,//用户Id
userId:userId,
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('scenic/market/findPageMarket',data).then((res)=>{
this.$request('wechatUser/myPage/saveCoupon',data).then((res)=>{
if(res.code=='00'){
this.findPageMarketList = res.data
// showtip: false,//领取提示
// showUseRule: false,//使用规则提示
if(this.findPageMarketList.length>0){
this.showtip = true
}
this.getUserCouponListFun()
}else{
// uni.showToast({
// title: res.message,
// icon: 'none'
// })
uni.showToast({
title: '领取成功',
icon: 'none'
})
this.claimStatus=1
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(() => {
})
},
getUserCouponListFun(){//判定券是否使用
var data = {
openid:this.openId,//用户Id
findCouponListFun(){//券查询
let data={
openid:this.openId,
useRange:11,
}
this.$request('wechatUser/myPage/getUserCouponList',data).then((res)=>{
this.$request('scenic/user/product/findCouponList',data).then((res)=>{
if(res.code=='00'){
res.data.forEach((item,index)=>{
if(item.useRange==11&&item.couponStatus==1){
this.couponType=true
this.couponPrice = item.deductPrice
this.couponRule = item.couponRule.split(';')//规则说明
this.couponRuleRemind = item.couponRuleRemind.split(';')//补充说明
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'
})
}
}).catch(() => {
})
},
orderTypeNumFun(){
......@@ -744,7 +726,7 @@ export default {
// clearInterval(timer)
// })
}
this.findPageMarketFun()
this.findCouponListFun()
}else{
uni.showToast({
title: res.message,
......@@ -1531,154 +1513,55 @@ export default {
color: #999999;
margin-right: 56rpx;
}
/deep/.u-mask {
display: flex;
justify-content: center;
align-items: center;
}
.mask {
.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;
.img-box {
position: relative;
margin-bottom: 32rpx;
.close {
position: absolute;
top: -54rpx;
right: 24rpx;
color: #fff;
&::after {
position: absolute;
content: '';
top: 24rpx;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 32rpx;
border-left: 1px dashed #fff;
}
}
overflow: hidden;
.vouchers-img{
width: 200rpx;
height: 160rpx;
position: absolute;
bottom: -15rpx;
right: 28rpx;
}
.coupon-backgruondImg {
width: 504rpx;
height: 720rpx;
.vouchers-title{
font-size: 32rpx;
color: #EE0E0E;
font-weight: bold;
line-height: 44rpx;
margin-bottom: 8rpx;
}
/deep/.u-btn {
width: 304rpx;
.vouchers-address{
font-size: 24rpx;
color: #25434D;
line-height: 34rpx;
margin-bottom: 16rpx;
}
.tips-vouchers{
width: 100%;
position: absolute;
top: 0;
left: 0;
.vouchers-title{
text-align: center;
font-size: 36rpx;
color: #191919;
font-weight: bold;
margin-top: 66rpx;
}
.vouchers-title2{
.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;
font-size: 36rpx;
color: #191919;
text{
color: #EE520E;
font-size: 64rpx;
font-weight: bold;
margin: 0 10rpx 0 10rpx;
}
line-height: 42rpx;
margin-right: 24rpx;
}
.vouchers-img{
display: block;
width: 420rpx;
height: 335rpx;
margin: 42rpx auto 42rpx auto;
}
.vouchers-to{
.btn-to{
display: flex;
justify-content:center;
font-size: 24rpx;
color: 333333;
line-height: 34rpx;
.to-url{
margin-left: 16rpx;
}
}
.vouchers-text{
text-align: center;
font-size: 24rpx;
color: #333333;
line-height: 34rpx;
font-weight: bold;
margin-top: 16rpx;
font-size: 20rpx;
line-height: 42rpx;
}
}
.tips-useRule{
width: 100%;
padding: 50rpx 40rpx 32rpx 32rpx;
margin: auto;
overflow: auto;
position: absolute;
top: 0;
left: 0;
right:0;
bottom: 0;
.useRule-title{
font-size: 36rpx;
color: #191919;
font-weight: bold;
text-align: center;
margin-bottom: 48rpx;
}
.useRule-list{
margin-bottom: 32rpx;
.list-title{
width: 128rpx;
height: 42rpx;
background: #000000;
border-radius: 4rpx 4rpx 4rpx 4rpx;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 42rpx;
margin-bottom: 24rpx
}
.list-text{
font-size: 20rpx;
line-height: 28rpx;
color: #333333;
margin-bottom: 16rpx;
}
.list-text:nth-last-child(1){
margin-bottom: 0;
}
}
}
}
.couponBox{
position: fixed;
right: -30rpx;
bottom: 200rpx;
width: 140rpx;
height: 140rpx;
z-index: 20;
.coupon {
width: 140rpx;
height: 140rpx;
}
.coupon-price {
position: absolute;
bottom: 46rpx;
left: 50%;
transform: translateX(-50%);
font-size: 40rpx;
font-weight: 700;
color: #fff;
}
.r-symbol {
font-size: 10rpx;
}
}
</style>
pages/my/order/orderList/orderList.vue
View file @ a9aa5d94
......@@ -672,7 +672,7 @@ export default {
})
}else{
uni.navigateTo({
url: '/pages/my/order/electronicTicket/electronicTicket?orderId='+orderId
url: '/pages/my/order/electronicTicket/electronicTicket?orderId='+orderId+'&channelType=0'
})
}
......
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