<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>