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.
496 lines
15 KiB
496 lines
15 KiB
<template>
|
|
<view>
|
|
<view class="backcorf06 height100p"></view>
|
|
<view class="backcorfff backgrd width90 couhead">
|
|
<image class="couimg flleft" mode="widthFix"
|
|
v-if="couponDesInfo.couponInfo.couponImg && couponDesInfo.couponInfo.couponImg !=undefined"
|
|
:src="imageUrl+couponDesInfo.couponInfo.couponImg"></image>
|
|
<view class="couhedcout">
|
|
<view class="height40 width100">
|
|
<view class="couStu flright fotct mart10" v-if="couponDesInfo.highUserCoupon.status == 2">已使用</view>
|
|
<view class="couStu flright fotct mart10" v-if="couponDesInfo.highUserCoupon.status == 1">未使用</view>
|
|
<view class="couStu flright fotct mart10" v-if="couponDesInfo.highUserCoupon.status == 0">已过期</view>
|
|
</view>
|
|
<view class="fontwig6 font16 fcor333 mart5">{{couponDesInfo.couponInfo.couponName}}</view>
|
|
<view class="fontwig6 font13 fcor999 mart5" v-if="oneTime">领取时间:{{oneTime | formatDate('-')}}</view>
|
|
<view class="fontwig6 font13 fcor999 mart5" v-if="twoTime">使用有效期:{{twoTime | formatDate('-')}}</view>
|
|
<view class="fontwig6 font13 fcor999 mart5" v-if="threeTime">消费时间:{{threeTime | formatDate('-')}}</view>
|
|
<view class="fontwig6 font13 fcor999 mart5" v-if="couponDesInfo.couponCodeInfo">
|
|
加油站点:{{couponDesInfo.couponCodeInfo.storeName}}</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="width90 backcorfff mart80 qrcs">
|
|
<view class="relybtn font13 fcorfff fotct mart15" v-if="couponDesInfo.couponInfo.couponSource == 5"
|
|
@click="getVerifyQRCode(couponDesInfo.highUserCoupon.id)">刷新二维码</view>
|
|
<view class="width90 mart10 marb10 fotct" v-if="couponDesInfo.couponInfo.couponSource == 5">
|
|
<image class="coupon-qr" :src="imageqrUrl+qrimageurl"></image>
|
|
</view>
|
|
|
|
<!-- #ifdef MP -->
|
|
<button class="coupne-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 class="width100 mart10 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 mart10 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="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>
|
|
<view class="mart20 fotct fcorred font15 marb20 height20"
|
|
v-if="!couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0 && couponDesInfo.couponInfo.couponSource != 3 && couponDesInfo.couponInfo.couponSource != 5">
|
|
请告知加油员用码商支付</view>
|
|
<view class="width90 mart20 fotct" v-if="couponDesInfo.couponInfo.reserveStatus">
|
|
<image class="coupon-qr" :src="imageUrl+'couponCode/'+couponDesInfo.highUserCoupon.qrCodeImg"></image>
|
|
</view>
|
|
|
|
<view class="fotct fcor333 font15 marb10 mart10"
|
|
v-if="couponDesInfo.couponInfo.couponSource != 4 && couponDesInfo.couponInfo.couponSource != 5">
|
|
{{couponDesInfo.couponCodeInfo.codeKey}}
|
|
</view>
|
|
|
|
</view>
|
|
<view class="width90 mart10 googscs backcorfff"
|
|
v-if="couponDesInfo.couponInfo.couponSource != 4 && couponDesInfo.couponInfo.couponSource != 5">
|
|
<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 text2">{{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>
|
|
</view>
|
|
<view class="height60"></view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getUserCouponDetail,
|
|
getStoreListByCoupon,
|
|
getVerifyQRCode,
|
|
verifyWx
|
|
} from "../../../Utils/Api.js";
|
|
// #ifdef H5
|
|
var wx = require('jweixin-module');
|
|
// #endif
|
|
import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue'
|
|
let app = getApp()
|
|
export default {
|
|
components: {
|
|
xiaoVideoElement
|
|
},
|
|
data() {
|
|
return {
|
|
couDesId: '',
|
|
imageUrl: app.globalData.imgUrl,
|
|
imagewxUrl: app.globalData.imageWxImg,
|
|
imageqrUrl: app.globalData.imageqrImg,
|
|
imgadres1: 'dhl.png',
|
|
imgadres2: 'video.jpg',
|
|
imgadres3: 'playVideo.mp4',
|
|
imgadres: 'noorder.png',
|
|
imgadres5: 'petrovideo.jpg', //重庆中石油
|
|
imgadres6: 'petroplayVideo.mp4', //重庆中石油
|
|
couponDesInfo: [],
|
|
storeList: [],
|
|
oneTime: '',
|
|
twoTime: '',
|
|
threeTime: '',
|
|
menddesId: '',
|
|
pageNum: 1,
|
|
pageSize: 1,
|
|
isNoMoreData: false,
|
|
qrimageurl: '', //中石油二维码
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.couDesId = option.id;
|
|
this.menddesId = option.mendId;
|
|
this.getUserCouponDetail();
|
|
|
|
},
|
|
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
|
|
},
|
|
onUnload() {
|
|
clearInterval(this.Timer);
|
|
},
|
|
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() {},
|
|
methods: {
|
|
//我的卡券详情
|
|
getUserCouponDetail() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
let params = {
|
|
userCouponId: this.couDesId
|
|
}
|
|
getUserCouponDetail(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.couponDesInfo = res.return_data;
|
|
uni.hideLoading();
|
|
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.highUserCoupon.createTime;
|
|
this.twoTime = res.return_data.highUserCoupon.useEndTime;
|
|
this.threeTime = res.return_data.highUserCoupon.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();
|
|
}
|
|
});
|
|
},
|
|
//导航
|
|
seeloaction(e) {
|
|
uni.openLocation({
|
|
latitude: Number(e.latitude), //目的地的定位
|
|
longitude: Number(e.longitude), //目的地的定位
|
|
name: e.storeName,
|
|
address: e.address
|
|
})
|
|
},
|
|
//跳转门店
|
|
jumpstorelist() {
|
|
uni.navigateTo({
|
|
url: '../../../subPages/sotre-details-list/sotre-details-list?id=' + this.menddesId
|
|
})
|
|
},
|
|
/**
|
|
* 查询门店列表
|
|
*/
|
|
getStoreListByCoupon() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
if (this.isNoMoreData) {
|
|
uni.hideLoading()
|
|
return false;
|
|
}
|
|
let pagenum = this.pageNum;
|
|
let params = {
|
|
couponId: this.menddesId,
|
|
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()
|
|
}
|
|
})
|
|
},
|
|
//跳转中油好客
|
|
jumpzyhk() {
|
|
// #ifdef MP
|
|
uni.navigateToMiniProgram({
|
|
appId: 'wx7cd1712834749dcb',
|
|
extraData: {
|
|
'data1': 'release'
|
|
},
|
|
success(res) {
|
|
// 打开成功
|
|
}
|
|
})
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
// location.href = 'weixin://dl/business/?t=khJZppojuyo';
|
|
// #endif
|
|
|
|
},
|
|
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)
|
|
},
|
|
scan() {
|
|
uni.scanCode({
|
|
success: function(res) {
|
|
console.log('条码类型：' + res.scanType);
|
|
console.log('条码内容：' + res.result);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.relybtn {
|
|
background-color: #0083f5;
|
|
width: 110px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 30px;
|
|
border-radius: 5px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.couhead {
|
|
position: absolute;
|
|
top: 20px;
|
|
height: 320rpx;
|
|
border-radius: 10rpx;
|
|
|
|
.couimg {
|
|
width: 180rpx;
|
|
max-height: 180rpx;
|
|
margin-top: 70rpx;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.couhedcout {
|
|
margin-left: 210rpx;
|
|
}
|
|
|
|
.couStu {
|
|
background-color: #dceefe;
|
|
color: #0076dd;
|
|
font-size: 12px;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
width: 60px;
|
|
border-radius: 5px 0px 0px 5px;
|
|
}
|
|
}
|
|
|
|
.qrcs {
|
|
border-top-style: dotted;
|
|
border-top-color: #f6f6f6;
|
|
padding-bottom: 20px;
|
|
text-align: center;
|
|
border-radius: 0px 0px 5px 5px;
|
|
}
|
|
|
|
.googscs {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.stoCont {
|
|
border-bottom: 1px solid #f6f6f6;
|
|
height: 160rpx;
|
|
}
|
|
|
|
.loading-text {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60upx;
|
|
color: #979797;
|
|
font-size: 24upx;
|
|
}
|
|
|
|
.coupon-status {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
}
|
|
|
|
.coupon-mes {
|
|
margin-right: 90px;
|
|
}
|
|
|
|
.coupon-img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.coupon-qr {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
|
|
.coupon-des {
|
|
width: 80px;
|
|
height: 80px;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 28px;
|
|
border-radius: 10px;
|
|
background-color: red;
|
|
}
|
|
|
|
.coupon-cont-dh {
|
|
margin-left: 90px;
|
|
}
|
|
|
|
.coupon-map image {
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
|
|
.coupon-no {
|
|
height: 80px;
|
|
line-height: 80px;
|
|
border: 1px solid #b2b2b2;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.czlq {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background-color: red;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.coupne-btn {
|
|
background-color: #0083f5;
|
|
color: #FFFFFF;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
border-radius: 0px;
|
|
}
|
|
</style>
|
|
|