<template> <view> <view class="backcorf06 height100p"></view> <view class="backcorfff backgrd width90 couhead"> <image class="couimg flleft" mode="widthFix" :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.storeName">加油站点:{{couponDesInfo.couponCodeInfo.storeName}}</view> </view> </view> <view class="width90 backcorfff mart80 qrcs"> <view class="width100" v-if="couponDesInfo.couponInfo.couponSource == 4"> <view class="mart20 width90 font18 fcor333 fontwig6"> 使用流程: </view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> <view style="width: 5%;" class="flleft">1:</view> <view style="margin-left: 5%;">客户使用积分兑换或者工会卡购买。</view> </view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> <view style="width: 5%;" class="flleft">2:</view> <view style="margin-left: 5%;">兑换成功后中石化给客户发送一张同等面额的码商券,保存在”加油中石化“APP中。</view> </view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> <view style="width: 5%;" class="flleft">3:</view> <view style="margin-left: 5%;">客户登录”加油中石化“APP,查看码商券详情。</view> </view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> <view style="width: 5%;" class="flleft">4:</view> <view style="margin-left: 5%;">客户选择中石化任意加油站加油,加完油后,在加油中石化“APP中查看订单,选择支付,支付时选择码商券抵用。支付完成即可。</view> </view> </view> <view class="mart20 fotct fcorred font15 marb20 height20" v-if="couponDesInfo.highUserCoupon.status != 0 && couponDesInfo.couponInfo.couponSource != 4"> 请出示核销码(商户扫客户)</view> <view class="width90 mart20 fotct" v-if="couponDesInfo.highUserCoupon.status != 0 && couponDesInfo.couponInfo.couponSource != 4"> <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.couponCodeInfo.codeKey}}</view> </view> <view class="width90 mart10 googscs backcorfff" v-if="couponDesInfo.couponInfo.couponSource != 4"> <view class="width90 height45l font18 fcor666 aliitem"> <image mode="widthFix" style="width: 50rpx; max-height: 50rpx;margin-right: 10px;" src="../../../static/img/adresw.png"></image> 门店信息 </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 ">{{store.storeName}}</view> <view class="font13 fcor666 mart10">{{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> <!-- <button class="czlq width100" v-if="couponDesInfo.highUserCoupon.status == 0" @click="againReceiveCoupon">重新领取</button> --> </view> </template> <script> import { getUserCouponDetail, getStoreListByCoupon, againReceiveCoupon } from "../../../Utils/Api.js" let app = getApp() export default { data() { return { couDesId: '', imageUrl: app.globalData.imgUrl, imagewxUrl: app.globalData.imageWxImg, imgadres1: 'dhl.png', imgadres: 'noorder.png', couponDesInfo: [], storeList: [], oneTime: '', twoTime: '', threeTime: '', menddesId: '', pageNum: 1, pageSize: 10, isNoMoreData: false } }, onLoad(option) { this.couDesId = option.id; this.menddesId = option.mendId; this.getUserCouponDetail(); }, 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: { //我的卡券详情 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 == 4) { 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() } }) }, //导航 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.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() } }) }, //领取 againReceiveCoupon() { uni.showLoading({ title: '领取中...' }) let params = { couponId: this.couponDesInfo.couponInfo.id } againReceiveCoupon(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); uni.showToast({ icon: 'none', title: '领取成功', duration: 2000 }) this.couponDesInfo = res.return_data; this.oneTime = res.return_data.highUserCoupon.createTime; this.twoTime = res.return_data.highUserCoupon.useEndTime; this.threeTime = res.return_data.highUserCoupon.consumeTime; } else { uni.hideLoading(); uni.showToast({ icon: 'none', title: res.return_msg, duration: 2000 }) } }) }, scan() { uni.scanCode({ success: function(res) { console.log('条码类型:' + res.scanType); console.log('条码内容:' + res.result); } }); } } } </script> <style lang="scss"> page { background-color: #f5f5f5; } .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; 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; 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; } .coupne-btn { position: fixed; bottom: 0px; background-color: red; color: #FFFFFF; } .czlq { position: absolute; bottom: 0; background-color: red; color: #FFFFFF; } </style>