Skip to content

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

优化券显示

parent 605bb145
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 13 deletions
pages/my/order/electronicTicket/electronicTicket.vue
View file @ d022c6eb
......@@ -317,14 +317,42 @@
</view>
</view>
<!--抵消券 对应的遮罩-->
<image class="coupon" src="../../../../static/img/my/coupon.png" @click="showUseRule = true"></image>
<image class="coupon" src="../../../../static/img/my/coupon.png" @click="showUseRule = true" v-if="couponType"></image>
<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> -->
<div v-if="showtip" class="tips-vouchers">
<view class="vouchers-title">恭喜您！</view>
<view class="vouchers-title2">获得摄影抵用<text>20</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>
</div>
<div v-if="showUseRule" class="tips-useRule">
<view class="useRule-title">使用规则</view>
<view class="useRule-list">
<view class="list-title">规则说明</view>
<view class="list-text">· 任意金额皆可抵扣，最高抵扣20</view>
<view class="list-text">· 指定地点可用，提交订单时自动抵扣</view>
<view class="list-text">· 优惠券只可使用一次，不找零不折现</view>
<view class="list-text">· 仅支持下载电子照片至手机</view>
<view class="list-text">· 如需打印，需额外支付打印费用</view>
</view>
<view class="useRule-list">
<view class="list-title">补充说明</view>
<view class="list-text">· 使用地址：重庆市渝中区新华路151号长江索道 南站观景台旁</view>
<view class="list-text">· 咨询电话：023-68567748</view>
</view>
</div>
<image class="coupon-backgruondImg" src="../../../../static/img/my/backgroundIcon01.png" ></image>
<u-icon class="close" name="close-circle" @click="closeMask"></u-icon>
<view class="use-rule" @click="useRuleClick" v-if="showtip"></view>
</view>
<u-button type="primary" shape="circle" @click="showtip = false" v-if="showtip">知道了</u-button>
</view>
......@@ -533,6 +561,7 @@ export default {
visitorIndex:'',//短信特殊字段
showtip: false,//领取提示
showUseRule: false,//使用规则提示
couponType:false,//是否拥有相册优惠券
findPageMarketList:[],//券信息
}
},
......@@ -591,6 +620,10 @@ export default {
})
},
methods: {
showtipFun(){//点击使用规则
this.showtip= false//领取提示
this.showUseRule=true//使用规则提示
},
closeMask(){//遮罩关闭
this.showtip= false//领取提示
this.showUseRule= false//使用规则提示
......@@ -611,6 +644,7 @@ export default {
if(this.findPageMarketList.length>0){
this.showtip = true
}
this.getUserCouponListFun()
}else{
uni.showToast({
title: res.message,
......@@ -619,6 +653,25 @@ export default {
}
})
},
getUserCouponListFun(){//判定券是否使用
var data = {
openid:this.openId,//用户Id
}
this.$request('wechatUser/myPage/getUserCouponList',data).then((res)=>{
if(res.code=='00'){
res.data.forEach((item,index)=>{
if(item.useRange==11){
this.couponType=true
}
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
orderTypeNumFun(){
if(this.orderTypeNum==0){
this.orderTypeNum=1
......@@ -679,7 +732,7 @@ export default {
// clearInterval(timer)
// })
}
//this.findPageMarketFun()
this.findPageMarketFun()
}else{
uni.showToast({
title: res.message,
......@@ -1462,6 +1515,7 @@ export default {
align-items: center;
}
.mask {
position: relative;
.img-box {
position: relative;
margin-bottom: 32rpx;
......@@ -1481,25 +1535,101 @@ export default {
border-left: 1px dashed #fff;
}
}
.use-rule {
position: absolute;
left: 50%;
bottom: 40px;
transform: translateX(-50%);
width: 66px;
height: 16px;
}
}
image {
.coupon-backgruondImg {
width: 504rpx;
height: 720rpx;
}
/deep/.u-btn {
width: 304rpx;
}
.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{
text-align: center;
font-size: 36rpx;
color: #191919;
text{
color: #EE520E;
font-size: 64rpx;
font-weight: bold;
margin: 0 10rpx 0 10rpx;
}
}
.vouchers-img{
display: block;
width: 420rpx;
height: 335rpx;
margin: 42rpx auto 42rpx auto;
}
.vouchers-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;
}
}
.tips-useRule{
width: 100%;
padding: 50rpx 40rpx 0 32rpx;
position: absolute;
top: 0;
left: 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;
}
}
}
}
.coupon {
display:none;
position: fixed;
right: -30rpx;
bottom: 200rpx;
......
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