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