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.
371 lines
11 KiB
371 lines
11 KiB
<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 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 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"
|
|
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,
|
|
imgadres1: 'dhl.png',
|
|
imgadres2: 'video.jpg',
|
|
imgadres3: 'playVideo.mp4',
|
|
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>
|
|
|