|
|
|
|
@ -1,16 +1,17 @@ |
|
|
|
|
<template> |
|
|
|
|
<view> |
|
|
|
|
<view class="width100" v-if="couponDesInfo"> |
|
|
|
|
<view class="width100 fotct coupon-status font20 fcorred" v-if="couponDesInfo.couponCodeInfo.status == 3"> |
|
|
|
|
<!-- <view class="width100 fotct coupon-status font20 fcorred" v-if="couponDesInfo.couponCodeInfo.status == 3"> |
|
|
|
|
已使用 |
|
|
|
|
</view> |
|
|
|
|
<view class="width100 fotct coupon-status font20 fcor41c" v-if="couponDesInfo.couponCodeInfo.status == 2"> |
|
|
|
|
未使用 |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
<view class="line1"></view> |
|
|
|
|
<view class="width90"> |
|
|
|
|
<view class="flright fotct"> |
|
|
|
|
<image mode="widthFix" class="coupon-img" :src="imageUrl+couponDesInfo.couponInfo.couponImg"></image> |
|
|
|
|
<image mode="widthFix" class="coupon-img" :src="imageUrl+couponDesInfo.couponInfo.couponImg"> |
|
|
|
|
</image> |
|
|
|
|
</view> |
|
|
|
|
<view class="coupon-mes mart10"> |
|
|
|
|
<view class="fcor333 fontwig6 font24 width100 text2">{{couponDesInfo.couponInfo.couponName}}</view> |
|
|
|
|
@ -24,45 +25,47 @@ |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="line1 mart15"></view> |
|
|
|
|
<view class="relybtn font13 fcorfff fotct mart20 marb10" |
|
|
|
|
v-if="couponDesInfo.couponInfo.couponSource == 5" |
|
|
|
|
@click="getVerifyQRCode(couponDesInfo.highUserCoupon.id)">刷新二维码</view> |
|
|
|
|
<view class="width90 mart20 fotct" v-if="couponDesInfo.couponInfo.couponSource == 5"> |
|
|
|
|
<image class="coupon-qr" :src="imageqrUrl+qrimageurl"> |
|
|
|
|
</image> |
|
|
|
|
</view> |
|
|
|
|
<view class="width100 fotct" v-if="couponDesInfo.couponInfo.couponSource == 4"> |
|
|
|
|
<view class="font28 fontlet mart5 marb10" style="color: #1593c3;">视频教程</view> |
|
|
|
|
<yy-video-player |
|
|
|
|
:auto-play="false" |
|
|
|
|
:url="imagewxUrl+imgadres3" |
|
|
|
|
:poster="poster" |
|
|
|
|
:show-back-btn="true" |
|
|
|
|
></yy-video-player> |
|
|
|
|
<yy-video-player :auto-play="false" :url="imagewxUrl+imgadres3" :poster="poster" :show-back-btn="true"> |
|
|
|
|
</yy-video-player> |
|
|
|
|
<image :src="imagewxUrl+imgadres2" mode="widthFix" class="mart10"></image> |
|
|
|
|
</view> |
|
|
|
|
<!-- <view class="width100 fotct" v-if="couponDesInfo.couponInfo.couponSource == 5"> |
|
|
|
|
<view class="font28 fontlet mart5 marb10" style="color: #1593c3;">视频教程</view> |
|
|
|
|
<yy-video-player :auto-play="false" :url="imagewxUrl+imgadres6" :poster="poster" :show-back-btn="true"> |
|
|
|
|
</yy-video-player> |
|
|
|
|
<image :src="imagewxUrl+imgadres5" mode="widthFix" class="mart10"></image> |
|
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="width100"> |
|
|
|
|
<view class="mart20 fotct fcorred font15 marb20 height20" |
|
|
|
|
v-if="couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0"> |
|
|
|
|
预约订单已成功 门店会在24小时内联系您</view> |
|
|
|
|
<view class="mart20 fotct fcorred font15 marb20 height20" |
|
|
|
|
v-if="!couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0 && couponDesInfo.couponInfo.couponSource == 3"> |
|
|
|
|
|
|
|
|
|
<view class="mart20 fotct fcorred font15 marb20" |
|
|
|
|
v-if="couponDesInfo.couponInfo.reserveStatus && coupstus != 0">预约订单已成功 |
|
|
|
|
门店会在24小时内联系您</view> |
|
|
|
|
<view class="mart20 fotct fcorred font15 marb20" |
|
|
|
|
v-if="!couponDesInfo.couponInfo.reserveStatus && coupstus != 0 && couponDesInfo.couponInfo.couponSource == 3"> |
|
|
|
|
请出示核销码(商户扫客户)</view> |
|
|
|
|
<view class="mart20 fotct fcorred font15 marb20 height20" |
|
|
|
|
v-if="!couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0 && couponDesInfo.couponInfo.couponSource != 3"> |
|
|
|
|
<view class="mart20 fotct fcorred font15 marb20" |
|
|
|
|
v-if="!couponDesInfo.couponInfo.reserveStatus && coupstus != 0 && couponDesInfo.couponInfo.couponSource != 3 && couponDesInfo.couponInfo.couponSource != 5"> |
|
|
|
|
请告知加油员用码商支付</view> |
|
|
|
|
<view class="width90 mart20 fotct" v-if="!couponDesInfo.couponInfo.reserveStatus"> |
|
|
|
|
<view class="width90 mart20 fotct" v-if="couponDesInfo.couponInfo.reserveStatus"> |
|
|
|
|
<image class="coupon-qr" :src="imageUrl+'couponCode/'+couponDesInfo.highUserCoupon.qrCodeImg"> |
|
|
|
|
</image> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
<view class="width90 mart30 font20 fcor333 fotct marb40" v-if="!couponDesInfo">二维码生效中,前往个人中心查看</view> |
|
|
|
|
<view class="width90 height45l font18 fcor666 aliitem" v-if="storeList"> |
|
|
|
|
<view class="width50 alijusstart"> |
|
|
|
|
<image mode="widthFix" style="width: 50rpx; max-height: 50rpx;margin-right: 10px;" |
|
|
|
|
src="../../../static/img/adresw.png"></image> 门店信息 |
|
|
|
|
</view> |
|
|
|
|
<view class="width50 alijusend font15" @click="jumpstorelist">查看更多<image style="width: 18px; height: 17px;" |
|
|
|
|
src="../../../static/img/jt.png"> |
|
|
|
|
</images> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="width90 mart20" style="height: 80px;" v-for="(store,i) in storeList" :key="i"> |
|
|
|
|
<!-- <view class="width90 mart20" style="height: 80px;" v-for="(store,i) in storeList" :key="i"> |
|
|
|
|
<view class="coupon-des flleft"> |
|
|
|
|
<image mode="widthFix" :src="imageUrl+store.ext1"></image> |
|
|
|
|
</view> |
|
|
|
|
@ -72,15 +75,39 @@ |
|
|
|
|
<view class="font14 fcor999 width100 text2 mart5">{{store.address}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="coupon-map flright width30 fotct" @click="seeloaction(store)"> |
|
|
|
|
<!-- 地图logo --> |
|
|
|
|
<image :src="imagewxUrl+imgadres1"> |
|
|
|
|
</image> |
|
|
|
|
<view class="mart5 fcor999 font13">{{store.distance}}km</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
</view> |
|
|
|
|
<view class="width90 height45l font18 fcor666 aliitem" v-if="storeList != ''"> |
|
|
|
|
<view class="width50 alijusstart"> |
|
|
|
|
<image mode="widthFix" style="width: 50rpx; max-height: 50rpx;margin-right: 10px;" |
|
|
|
|
src="../../../static/img/adresw.png"></image> 门店信息 |
|
|
|
|
</view> |
|
|
|
|
<view class="width50 alijusend font15" @click="jumpstorelist">查看更多<image style="width: 18px; height: 17px;" |
|
|
|
|
src="../../../static/img/jt.png"> |
|
|
|
|
</images> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<wybPopup ref="popup" class="fotct" type="center" height="850" width="600" radius="6" bgColor="" :showCloseIcon="true" >
<image class="popImg" mode="widthFix" :src="imagewxUrl+imgadres4" @click="jumpcjhuod"></image>
</wybPopup> |
|
|
|
|
<view class="line1 width100"></view> |
|
|
|
|
<view class="width90 stoCont" v-for="(store,i) in storeList" :key="i"> |
|
|
|
|
<view class="width80p flleft mart10"> |
|
|
|
|
<view class="font16 fcor333 fontwig6 text1">{{store.storeName}}</view> |
|
|
|
|
<view class="font13 fcor666 mart10 text1">{{store.address}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="width20 flright mart10 fotrt" @click="seeloaction(store)"> |
|
|
|
|
<image mode="widthFix" style="width: 25px;height: 25px;" :src="imagewxUrl+imgadres1"> |
|
|
|
|
</image> |
|
|
|
|
<view class="mart5 fcor999 font13">{{store.distance}}km</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<wybPopup ref="popup" class="fotct" type="center" height="850" width="600" radius="6" bgColor="" |
|
|
|
|
:showCloseIcon="true"> |
|
|
|
|
<image class="popImg" mode="widthFix" :src="imagewxUrl+imgadres4" @click="jumpcjhuod"></image> |
|
|
|
|
</wybPopup> |
|
|
|
|
<view class="height60"></view> |
|
|
|
|
<button class="coupne-btn width100" @click="toUser">个人中心</button> |
|
|
|
|
|
|
|
|
|
@ -91,7 +118,8 @@ |
|
|
|
|
import { |
|
|
|
|
getUserNewCouponDetail, |
|
|
|
|
getStoreListByCoupon, |
|
|
|
|
getActivityByCoupon |
|
|
|
|
getActivityByCoupon, |
|
|
|
|
getVerifyQRCode |
|
|
|
|
} from "../../../Utils/Api.js"; |
|
|
|
|
import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue'; |
|
|
|
|
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'; |
|
|
|
|
@ -106,8 +134,11 @@ |
|
|
|
|
couDesId: '', |
|
|
|
|
imageUrl: app.globalData.imgUrl, |
|
|
|
|
imagewxUrl: app.globalData.imageWxImg, |
|
|
|
|
imgadres2: 'video.jpg', |
|
|
|
|
imgadres3: 'playVideo.mp4', |
|
|
|
|
imageqrUrl: app.globalData.imageqrImg, |
|
|
|
|
imgadres2: 'video.jpg', //贵州中石化 |
|
|
|
|
imgadres3: 'playVideo.mp4', //贵州中石化 |
|
|
|
|
imgadres5: 'petrovideo.jpg', //重庆中石油 |
|
|
|
|
imgadres6: 'petroplayVideo.mp4', //重庆中石油 |
|
|
|
|
imgadres4: 'activityimg.png', |
|
|
|
|
imgadres1: 'dhl.png', |
|
|
|
|
couponDesInfo: [], |
|
|
|
|
@ -117,7 +148,9 @@ |
|
|
|
|
threeTime: '', |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 1, |
|
|
|
|
isNoMoreData: false |
|
|
|
|
isNoMoreData: false, |
|
|
|
|
qrimageurl: '' ,//中石油二维码 |
|
|
|
|
coupstus:0 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad(option) { |
|
|
|
|
@ -144,7 +177,7 @@ |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onReachBottom() { |
|
|
|
|
this.getStoreListByCoupon(); |
|
|
|
|
// this.getStoreListByCoupon(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
//我的卡券详情 |
|
|
|
|
@ -159,7 +192,12 @@ |
|
|
|
|
if (res.return_code == '000000') { |
|
|
|
|
uni.hideLoading(); |
|
|
|
|
this.couponDesInfo = res.return_data; |
|
|
|
|
if(res.return_data.couponInfo.couponSource == 4){ |
|
|
|
|
this.coupstus = res.return_data.highUserCoupon.status; |
|
|
|
|
if (res.return_data.couponInfo.couponSource == 5) { |
|
|
|
|
this.getVerifyQRCode(res.return_data.highUserCoupon.id); |
|
|
|
|
} |
|
|
|
|
if (res.return_data.couponInfo.couponSource == 4 || res.return_data.couponInfo |
|
|
|
|
.couponSource == 5) { |
|
|
|
|
this.oneTime = res.return_data.highUserCoupon.createTime; |
|
|
|
|
this.twoTime = res.return_data.highUserCoupon.useEndTime; |
|
|
|
|
this.threeTime = res.return_data.highUserCoupon.consumeTime; |
|
|
|
|
@ -174,6 +212,41 @@ |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
//生成二维码 |
|
|
|
|
getVerifyQRCode(item) { |
|
|
|
|
let params = { |
|
|
|
|
userCouponId: item |
|
|
|
|
} |
|
|
|
|
getVerifyQRCode(params).then(res => { |
|
|
|
|
if (res.return_code == '000000') { |
|
|
|
|
this.qrimageurl = res.return_data; |
|
|
|
|
clearInterval(this.Timer); |
|
|
|
|
this.setTimer(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
Timer() {}, |
|
|
|
|
//倒计时一分钟 |
|
|
|
|
setTimer() { |
|
|
|
|
let that = this; |
|
|
|
|
let holdTime = 60; |
|
|
|
|
that.Timer = setInterval(() => { |
|
|
|
|
if (holdTime <= 0) { |
|
|
|
|
uni.showModal({ |
|
|
|
|
title: '提示', |
|
|
|
|
content: '当前二维码已失效,请刷新后展示', |
|
|
|
|
success: function(res) { |
|
|
|
|
if (res.confirm) { |
|
|
|
|
that.getVerifyQRCode(that.couponDesInfo.highUserCoupon.id); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
clearInterval(that.Timer); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
holdTime--; |
|
|
|
|
}, 1000) |
|
|
|
|
}, |
|
|
|
|
//显示弹出 |
|
|
|
|
showPopup() { |
|
|
|
|
this.$refs.popup.show(); |
|
|
|
|
@ -194,10 +267,10 @@ |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
//跳转抽奖活动 |
|
|
|
|
jumpcjhuod(){ |
|
|
|
|
jumpcjhuod() { |
|
|
|
|
this.closePopup(); |
|
|
|
|
uni.reLaunch({ |
|
|
|
|
url:'../../../subPages/lottery/lottery?id='+this.couDesId |
|
|
|
|
url: '../../../subPages/lottery/lottery?id=' + this.couDesId |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
//跳转门店 |
|
|
|
|
@ -251,12 +324,9 @@ |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
toUser() { |
|
|
|
|
// uni.switchTab({ |
|
|
|
|
// url: '/pages/tabBar/user/user' |
|
|
|
|
// }); |
|
|
|
|
uni.reLaunch({ |
|
|
|
|
uni.switchTab({ |
|
|
|
|
url: '/pages/tabBar/user/user' |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
scan() { |
|
|
|
|
uni.scanCode({ |
|
|
|
|
@ -270,7 +340,27 @@ |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
.popImg {
width: 300px;
height: 440px;
} |
|
|
|
|
.popImg { |
|
|
|
|
width: 300px; |
|
|
|
|
height: 440px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.relybtn { |
|
|
|
|
background-color: #0083f5; |
|
|
|
|
width: 110px; |
|
|
|
|
margin-left: auto; |
|
|
|
|
margin-right: auto; |
|
|
|
|
height: 30px; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
line-height: 30px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.jumpbtn{ |
|
|
|
|
background-color: #0083f5; |
|
|
|
|
height: 40px; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
line-height: 40px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.loading-text { |
|
|
|
|
width: 100%; |
|
|
|
|
@ -282,6 +372,11 @@ |
|
|
|
|
font-size: 24upx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.stoCont { |
|
|
|
|
border-bottom: 1px solid #f6f6f6; |
|
|
|
|
height: 140rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.coupon-status { |
|
|
|
|
height: 35px; |
|
|
|
|
line-height: 35px; |
|
|
|
|
@ -308,7 +403,8 @@ |
|
|
|
|
color: white; |
|
|
|
|
font-size: 28px; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
image{ |
|
|
|
|
|
|
|
|
|
image { |
|
|
|
|
width: 80px; |
|
|
|
|
max-height: 80px; |
|
|
|
|
} |
|
|
|
|
@ -333,14 +429,8 @@ |
|
|
|
|
.coupne-btn { |
|
|
|
|
position: fixed; |
|
|
|
|
bottom: 0px; |
|
|
|
|
background-color: red; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.coupne-btn { |
|
|
|
|
position: fixed; |
|
|
|
|
bottom: 0px; |
|
|
|
|
background-color: red; |
|
|
|
|
background-color: #0083f5; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
border-radius: 0px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
