You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
488 lines
14 KiB
488 lines
14 KiB
<template>
|
|
<view>
|
|
<view class="width100" v-if="couponDesInfo">
|
|
<view class="line1"></view>
|
|
<view class="width90">
|
|
<view class="flright fotct">
|
|
<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>
|
|
<view class="fcor666 font13 width100 mart5" v-if="oneTime">
|
|
领取时间:{{oneTime | formatDate('-')}}</view>
|
|
<view class="fcor666 font13 width100 mart5" v-if="twoTime">
|
|
使用有效期:{{twoTime | formatDate('-')}}</view>
|
|
<view class="fcorred font15 width100 mart5" v-if="threeTime">
|
|
消费时间:{{threeTime | formatDate('-')}}</view>
|
|
</view>
|
|
</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="fotct">
|
|
<!-- #ifdef MP -->
|
|
<button class="coupnejump-btn font14 width80" v-if="couponDesInfo.couponInfo.couponSource == 5"
|
|
@click="jumpzyhk">前往"中油好客e站小程序"</button>
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<wx-open-launch-weapp style="width: 270px;" v-if="couponDesInfo.couponInfo.couponSource == 5"
|
|
id="launch-btn" username="gh_5fb54244cdbb">
|
|
<script type="text/wxtag-template">
|
|
<style>
|
|
.btn {
|
|
padding: 12px;
|
|
}
|
|
.download {
|
|
color: #ffffff;
|
|
background: #0083f5;
|
|
width:100%;
|
|
height:100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
<button class="download btn" style="height:50px;width:100%;border:none;">前往"中油好客e站小程序"</button>
|
|
</script>
|
|
</wx-open-launch-weapp>
|
|
<!-- #endif -->
|
|
</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>
|
|
<image :src="imagewxUrl+imgadres2" mode="widthFix" class="mart10"></image>
|
|
</view>
|
|
<view class="width100">
|
|
|
|
<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"
|
|
v-if="!couponDesInfo.couponInfo.reserveStatus && coupstus != 0 && couponDesInfo.couponInfo.couponSource != 3 && couponDesInfo.couponInfo.couponSource != 5">
|
|
请告知加油员用码商支付</view>
|
|
<view class="width90 mart20 fotct" v-if="couponDesInfo.highUserCoupon.qrCodeImg">
|
|
<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>
|
|
<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="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>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getUserNewCouponDetail,
|
|
getStoreListByCoupon,
|
|
getActivityByCoupon,
|
|
getVerifyQRCode,
|
|
verifyWx
|
|
} from "../../../Utils/Api.js";
|
|
import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue';
|
|
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
|
|
// #ifdef H5
|
|
var wx = require('jweixin-module');
|
|
// #endif
|
|
let app = getApp()
|
|
export default {
|
|
components: {
|
|
xiaoVideoElement,
|
|
wybPopup
|
|
},
|
|
data() {
|
|
return {
|
|
couDesId: '',
|
|
imageUrl: app.globalData.imgUrl,
|
|
imagewxUrl: app.globalData.imageWxImg,
|
|
imageqrUrl: app.globalData.imageqrImg,
|
|
imgadres2: 'video.jpg', //贵州中石化
|
|
imgadres3: 'playVideo.mp4', //贵州中石化
|
|
imgadres5: 'petrovideo.jpg', //重庆中石油
|
|
imgadres6: 'petroplayVideo.mp4', //重庆中石油
|
|
imgadres4: 'activityimg.png',
|
|
imgadres1: 'dhl.png',
|
|
couponDesInfo: [],
|
|
storeList: [],
|
|
oneTime: '',
|
|
twoTime: '',
|
|
threeTime: '',
|
|
pageNum: 1,
|
|
pageSize: 1,
|
|
isNoMoreData: false,
|
|
qrimageurl: '', //中石油二维码
|
|
coupstus: 0
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.couDesId = option.id;
|
|
this.getUserNewCouponDetail();
|
|
this.getActivityByCoupon();
|
|
},
|
|
created() {
|
|
// #ifdef H5
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
let url = window.location.href.split('#')[0];
|
|
let datas = {
|
|
url: url
|
|
}
|
|
verifyWx(datas).then(res => {
|
|
uni.hideLoading();
|
|
if (res.return_code == '000000') {
|
|
wx.config({
|
|
debug: false, // 开启调试模式,返回值会在客户端alert出来。
|
|
appId: res.return_data.appId, // 必填，公众号的唯一标识
|
|
timestamp: res.return_data.timestamp, // 必填，生成签名的时间戳
|
|
nonceStr: res.return_data.nonceStr, // 必填，生成签名的随机串
|
|
signature: res.return_data.signature, // 必填，签名
|
|
jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表
|
|
openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表
|
|
});
|
|
wx.ready(function(res) {});
|
|
wx.error(function(err) {});
|
|
}
|
|
|
|
});
|
|
// #endif
|
|
},
|
|
filters: {
|
|
//过滤器 用于格式化时间
|
|
formatDate: function(value, spe = '/') {
|
|
let data = new Date(value);
|
|
let year = data.getFullYear();
|
|
let month = data.getMonth() + 1;
|
|
let day = data.getDate();
|
|
let h = data.getHours();
|
|
let mm = data.getMinutes();
|
|
let s = data.getSeconds();
|
|
month = month >= 10 ? month : "0" + month;
|
|
day = day >= 10 ? day : "0" + day;
|
|
h = h >= 10 ? h : "0" + h;
|
|
mm = mm >= 10 ? mm : "0" + mm;
|
|
s = s >= 10 ? s : "0" + s;
|
|
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
// this.getStoreListByCoupon();
|
|
},
|
|
methods: {
|
|
//我的卡券详情
|
|
getUserNewCouponDetail() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
let params = {
|
|
couponId: this.couDesId
|
|
}
|
|
getUserNewCouponDetail(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
uni.hideLoading();
|
|
this.couponDesInfo = res.return_data;
|
|
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;
|
|
return;
|
|
}
|
|
this.getStoreListByCoupon();
|
|
this.oneTime = res.return_data.couponCodeInfo.receiveTime;
|
|
this.twoTime = res.return_data.couponCodeInfo.salesEndTime;
|
|
this.threeTime = res.return_data.couponCodeInfo.consumeTime;
|
|
} else {
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
},
|
|
//生成二维码
|
|
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();
|
|
},
|
|
//关闭弹窗
|
|
closePopup() {
|
|
this.$refs.popup.hide();
|
|
},
|
|
// 获取奖品列表
|
|
getActivityByCoupon() {
|
|
let params = {
|
|
couponId: this.couDesId
|
|
}
|
|
getActivityByCoupon(params).then(res => {
|
|
if (res.return_code == '000000' && res.return_data) {
|
|
this.showPopup();
|
|
}
|
|
});
|
|
},
|
|
//跳转抽奖活动
|
|
jumpcjhuod() {
|
|
this.closePopup();
|
|
uni.reLaunch({
|
|
url: '../../../subPages/lottery/lottery?id=' + this.couDesId
|
|
})
|
|
},
|
|
//跳转中油好客
|
|
jumpzyhk() {
|
|
uni.navigateToMiniProgram({
|
|
appId: 'wx7cd1712834749dcb',
|
|
extraData: {
|
|
'data1': 'release'
|
|
},
|
|
success(res) {
|
|
// 打开成功
|
|
}
|
|
})
|
|
},
|
|
//跳转门店
|
|
jumpstorelist() {
|
|
uni.navigateTo({
|
|
url: '../../../subPages/sotre-details-list/sotre-details-list?id=' + this.couDesId
|
|
})
|
|
},
|
|
//导航
|
|
seeloaction(e) {
|
|
uni.openLocation({
|
|
latitude: Number(e.latitude), //目的地的定位
|
|
longitude: Number(e.longitude), //目的地的定位
|
|
name: e.storeName,
|
|
address: e.address
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 查询门店列表
|
|
*/
|
|
getStoreListByCoupon() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
if (this.isNoMoreData) {
|
|
uni.hideLoading()
|
|
return false;
|
|
}
|
|
let pagenum = this.pageNum;
|
|
let params = {
|
|
couponId: this.couDesId,
|
|
longitude: app.globalData.longitude,
|
|
latitude: app.globalData.latitude,
|
|
pageNum: pagenum,
|
|
pageSize: this.pageSize
|
|
}
|
|
getStoreListByCoupon(params).then(res => {
|
|
if (res.return_code == '000000' && res.return_data.list != '') {
|
|
uni.hideLoading();
|
|
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
|
|
this.storeList = this.storeList.concat(res.return_data.list);
|
|
if (res.return_data.total == (this.pageNum * this.pageSize)) {
|
|
this.isNoMoreData = true;
|
|
}
|
|
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
|
|
} else {
|
|
this.storeList = [];
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
},
|
|
toUser() {
|
|
uni.switchTab({
|
|
url: '/pages/tabBar/user/user'
|
|
});
|
|
},
|
|
scan() {
|
|
uni.scanCode({
|
|
success: function(res) {
|
|
console.log('条码类型：' + res.scanType);
|
|
console.log('条码内容：' + res.result);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.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%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60upx;
|
|
color: #979797;
|
|
font-size: 24upx;
|
|
}
|
|
|
|
.stoCont {
|
|
border-bottom: 1px solid #f6f6f6;
|
|
height: 140rpx;
|
|
}
|
|
|
|
.coupon-status {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
}
|
|
|
|
.coupon-mes {
|
|
margin-right: 90px;
|
|
}
|
|
|
|
.coupon-img {
|
|
width: 80px;
|
|
max-height: 80px;
|
|
}
|
|
|
|
.coupon-qr {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
|
|
.coupon-des {
|
|
width: 80px;
|
|
max-height: 80px;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 28px;
|
|
border-radius: 10px;
|
|
|
|
image {
|
|
width: 80px;
|
|
max-height: 80px;
|
|
}
|
|
}
|
|
|
|
.coupon-cont-dh {
|
|
margin-left: 90px;
|
|
}
|
|
|
|
.coupon-map image {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.coupon-no {
|
|
height: 80px;
|
|
line-height: 80px;
|
|
border: 1px solid #b2b2b2;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.coupnejump-btn {
|
|
background-color: #0083f5;
|
|
color: #FFFFFF;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.coupne-btn {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
background-color: #0083f5;
|
|
color: #FFFFFF;
|
|
border-radius: 0px;
|
|
}
|
|
</style>
|
|
|