Merge branch 'cedev' into dev

# Conflicts:
#	high-unionPay/App.vue
#	high-unionPay/pages/goods/goods.vue
1.解决冲突
master
杨杰 3 years ago
commit 07fef7a563
  1. 117
      high-unionPay/App.vue
  2. 18
      high-unionPay/Utils/Api.js
  3. 146
      high-unionPay/pages/goods/coupon-details/coupon-details.vue
  4. 458
      high-unionPay/pages/goods/coupons-info-details/coupons-info-details.vue
  5. 883
      high-unionPay/pages/goods/goods.vue
  6. 228
      high-unionPay/pages/pay/success/success.vue

@ -1,59 +1,60 @@
<script> <script>
export default { export default {
globalData: { globalData: {
// url: 'http://192.168.3.4:9301/crest', // url: 'http://192.168.3.4:9301/crest',
// brestUrl: 'http://192.168.3.4:9302/brest', // brestUrl: 'http://192.168.3.4:9302/brest',
// imgUrl: 'https://192.168.3.4:9301/filesystem/', // imgUrl: 'https://192.168.3.4:9301/filesystem/',
// //
// url: 'https://hsg.dctpay.com/crest', // url: 'https://hsg.dctpay.com/crest',
// imgUrl: 'https://hsg.dctpay.com/filesystem/', // v1url:'https://hsg.dctpay.com/v1',
// brestUrl : 'https://hsg.dctpay.com/brest', // imgUrl: 'https://hsg.dctpay.com/filesystem/',
// imageWxImg:'https://hsg.dctpay.com/filesystem/wxApplets/', // brestUrl: 'https://hsg.dctpay.com/brest',
// // imageWxImg: 'https://hsg.dctpay.com/filesystem/wxApplets/',
url: 'https://hsgcs.dctpay.com/crest', // imageqrImg: 'https://hsg.dctpay.com/filesystem/temporary/',
brestUrl : 'https://hsgcs.dctpay.com/brest', //
imgUrl: 'https://hsgcs.dctpay.com/filesystem/', url: 'https://hsgcs.dctpay.com/crest',
imageWxImg:'https://hsgcs.dctpay.com/filesystem/wxApplets/', v1url: 'https://hsgcs.dctpay.com/v1',
userInfo: "", brestUrl: 'https://hsgcs.dctpay.com/brest',
brestUserInfo : '', imgUrl: 'https://hsgcs.dctpay.com/filesystem/',
openId: '', imageWxImg: 'https://hsgcs.dctpay.com/filesystem/wxApplets/',
code: '', imageqrImg: 'https://hsgcs.dctpay.com/filesystem/temporary/',
token: '', userInfo: "",
brestToken:'', brestUserInfo: '',
cityId: '', openId: '',
cityName:'', code: '',
longitude : '', token: '',
latitude : '', brestToken: '',
balancePrice : '', cityId: '',
balanceCardNo:'', cityName: '',
identificationCode:'', longitude: '',
//id latitude: '',
companyId:'', balancePrice: '',
//ID balanceCardNo: '',
storeid:'', identificationCode: '',
// //id
storename:'', companyId: '',
// //ID
qianzhuCityName: '', storeid: '',
// //
distinguishid: '', storename: '',
// //
qianzhulist: '', qianzhuCityName: '',
// //
salesTallPrice: '', distinguishid: '',
// //
pelletoilList:'' qianzhulist: '',
}, //
onLaunch: function() { salesTallPrice: '',
}, //
onShow: function() { pelletoilList: ''
}, },
onHide: function() { onLaunch: function() {},
} onShow: function() {},
} onHide: function() {}
</script> }
</script>
<style lang="scss">
/*每个页面公共css */ <style lang="scss">
@import "/static/iconfont/font.scss"; /*每个页面公共css */
@import "/static/iconfont/font.scss";
</style> </style>

@ -5,7 +5,19 @@ import {
POSTBREST} from "./bRequest.js"; POSTBREST} from "./bRequest.js";
let app = getApp(); let app = getApp();
let base = app.globalData.url; let base = app.globalData.url;
let v1base = app.globalData.v1url;
let brestBase = app.globalData.brestUrl; let brestBase = app.globalData.brestUrl;
//公众号获取跳小程序参数
export const verifyWx = params => {
return POST('GET', `${v1base}/wxMsg/verifyWx`, params).then(res => res.data);
}
//公众号获取跳转小程序地址
export const getScheme = params => {
return POST('GET', `${v1base}/wxMsg/getScheme`, params).then(res => res.data);
}
//根据code获取openId //根据code获取openId
export const HandleCode = params => { export const HandleCode = params => {
return POST('GET', `${base}/wechat/handleCode`, params).then(res => res.data); return POST('GET', `${base}/wechat/handleCode`, params).then(res => res.data);
@ -417,6 +429,12 @@ export const cancelOrderByOrderNo = params => {
return POST('GET', `${base}/highOrder/cancelOrderByOrderNo`, params).then(res => res.data); return POST('GET', `${base}/highOrder/cancelOrderByOrderNo`, params).then(res => res.data);
} }
//中石油生成二维码
export const getVerifyQRCode = params => {
return POST('GET', `${base}/coupon/getVerifyQRCode`, params).then(res => res.data);
}
//分销统计数据 //分销统计数据
export const userDistributionStatistics = params => { export const userDistributionStatistics = params => {
return POST('GET', `${base}/highUser/userDistributionStatistics`, params).then(res => res.data); return POST('GET', `${base}/highUser/userDistributionStatistics`, params).then(res => res.data);

@ -2,7 +2,9 @@
<view> <view>
<view class="backcorf06 height100p"></view> <view class="backcorf06 height100p"></view>
<view class="backcorfff backgrd width90 couhead"> <view class="backcorfff backgrd width90 couhead">
<image class="couimg flleft" mode="widthFix" :src="imageUrl+couponDesInfo.couponInfo.couponImg"></image> <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="couhedcout">
<view class="height40 width100"> <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 == 2">已使用</view>
@ -13,19 +15,31 @@
<view class="fontwig6 font13 fcor999 mart5" v-if="oneTime">领取时间:{{oneTime | formatDate('-')}}</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="twoTime">使用有效期:{{twoTime | formatDate('-')}}</view>
<view class="fontwig6 font13 fcor999 mart5" v-if="threeTime">消费时间:{{threeTime | 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"> <view class="fontwig6 font13 fcor999 mart5" v-if="couponDesInfo.couponCodeInfo">
加油站点:{{couponDesInfo.couponCodeInfo.storeName}}</view> 加油站点:{{couponDesInfo.couponCodeInfo.storeName}}</view>
</view> </view>
</view> </view>
<view class="width90 backcorfff mart80 qrcs"> <view class="width90 backcorfff mart80 qrcs">
<view class="relybtn font12 fcorfff fotct mart10" 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="width100 fotct" v-if="couponDesInfo.couponInfo.couponSource == 4"> <view class="width100 fotct" v-if="couponDesInfo.couponInfo.couponSource == 4">
<view class="font28 fontlet mart5 marb10" style="color: #1593c3;">视频教程</view> <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 :auto-play="false" :url="imagewxUrl+imgadres3" :poster="poster" :show-back-btn="true">
</yy-video-player> </yy-video-player>
<image :src="imagewxUrl+imgadres2" mode="widthFix" class="mart10"></image> <image :src="imagewxUrl+imgadres2" mode="widthFix" class="mart10"></image>
</view> </view>
<view class="width100 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" <view class="mart20 fotct fcorred font15 marb20 height20"
v-if="couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0"> v-if="couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0">
预约订单已成功 门店会在24小时内联系您</view> 预约订单已成功 门店会在24小时内联系您</view>
@ -33,17 +47,20 @@
v-if="!couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0 && couponDesInfo.couponInfo.couponSource == 3"> v-if="!couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0 && couponDesInfo.couponInfo.couponSource == 3">
请出示核销码(商户扫客户)</view> 请出示核销码(商户扫客户)</view>
<view class="mart20 fotct fcorred font15 marb20 height20" <view class="mart20 fotct fcorred font15 marb20 height20"
v-if="!couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0 && couponDesInfo.couponInfo.couponSource != 3"> v-if="!couponDesInfo.couponInfo.reserveStatus && couponDesInfo.highUserCoupon.status != 0 && couponDesInfo.couponInfo.couponSource != 3 && couponDesInfo.couponInfo.couponSource != 5">
请告知加油员用码商支付</view> 请告知加油员用码商支付</view>
<view class="width90 mart20 fotct" v-if="!couponDesInfo.couponInfo.reserveStatus"> <view class="width90 mart20 fotct" v-if="couponDesInfo.couponInfo.reserveStatus">
<image class="coupon-qr" :src="imageUrl+'couponCode/'+couponDesInfo.highUserCoupon.qrCodeImg"></image> <image class="coupon-qr" :src="imageUrl+'couponCode/'+couponDesInfo.highUserCoupon.qrCodeImg"></image>
</view> </view>
<view class="fotct fcor333 font15 marb10 mart10" <view class="fotct fcor333 font15 marb10 mart10"
v-if="couponDesInfo.couponInfo.couponSource != 4 && couponDesInfo.couponCodeInfo.codeKey"> v-if="couponDesInfo.couponInfo.couponSource != 4 && couponDesInfo.couponInfo.couponSource != 5">
{{couponDesInfo.couponCodeInfo.codeKey}} {{couponDesInfo.couponCodeInfo.codeKey}}
</view> </view>
</view> </view>
<view class="width90 mart10 googscs backcorfff" v-if="couponDesInfo.couponInfo.couponSource != 4"> <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="width90 height45l font18 fcor666 aliitem" v-if="storeList">
<view class="width50 alijusstart"> <view class="width50 alijusstart">
<image mode="widthFix" style="width: 50rpx; max-height: 50rpx;margin-right: 10px;" <image mode="widthFix" style="width: 50rpx; max-height: 50rpx;margin-right: 10px;"
@ -69,8 +86,7 @@
</view> </view>
</view> </view>
<view class="height60"></view> <view class="height60"></view>
<!-- <button class="czlq width100" v-if="couponDesInfo.highUserCoupon.status == 0" <!-- <button class="coupne-btn font14 width100" @click="jumpzyhk">前往"中油好客e站小程序"</button> -->
@click="againReceiveCoupon">重新领取</button> -->
</view> </view>
</template> </template>
@ -78,7 +94,9 @@
import { import {
getUserCouponDetail, getUserCouponDetail,
getStoreListByCoupon, getStoreListByCoupon,
againReceiveCoupon getVerifyQRCode,
verifyWx,
getScheme
} from "../../../Utils/Api.js" } from "../../../Utils/Api.js"
import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue' import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue'
let app = getApp() let app = getApp()
@ -91,10 +109,13 @@
couDesId: '', couDesId: '',
imageUrl: app.globalData.imgUrl, imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imageqrUrl: app.globalData.imageqrImg,
imgadres1: 'dhl.png', imgadres1: 'dhl.png',
imgadres2: 'video.jpg', imgadres2: 'video.jpg',
imgadres3: 'playVideo.mp4', imgadres3: 'playVideo.mp4',
imgadres: 'noorder.png', imgadres: 'noorder.png',
imgadres5: 'petrovideo.jpg', //
imgadres6: 'petroplayVideo.mp4', //
couponDesInfo: [], couponDesInfo: [],
storeList: [], storeList: [],
oneTime: '', oneTime: '',
@ -103,7 +124,8 @@
menddesId: '', menddesId: '',
pageNum: 1, pageNum: 1,
pageSize: 1, pageSize: 1,
isNoMoreData: false isNoMoreData: false,
qrimageurl: '' //
} }
}, },
onLoad(option) { onLoad(option) {
@ -129,10 +151,33 @@
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
} }
}, },
onReachBottom() { onReachBottom() {},
// this.getStoreListByCoupon();
},
methods: { methods: {
onUnload() {
clearInterval(this.Timer);
},
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)
},
// //
getUserCouponDetail() { getUserCouponDetail() {
uni.showLoading({ uni.showLoading({
@ -145,7 +190,11 @@
if (res.return_code == '000000') { if (res.return_code == '000000') {
this.couponDesInfo = res.return_data; this.couponDesInfo = res.return_data;
uni.hideLoading(); uni.hideLoading();
if (res.return_data.couponInfo.couponSource == 4) { 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.oneTime = res.return_data.highUserCoupon.createTime;
this.twoTime = res.return_data.highUserCoupon.useEndTime; this.twoTime = res.return_data.highUserCoupon.useEndTime;
this.threeTime = res.return_data.highUserCoupon.consumeTime; this.threeTime = res.return_data.highUserCoupon.consumeTime;
@ -160,6 +209,19 @@
} }
}) })
}, },
//
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) { seeloaction(e) {
uni.openLocation({ uni.openLocation({
@ -209,33 +271,11 @@
} }
}) })
}, },
// //
againReceiveCoupon() { jumpzyhk() {
uni.showLoading({ getScheme().then(res => {
title: '领取中...'
})
let params = {
couponId: this.couponDesInfo.couponInfo.id
}
againReceiveCoupon(params).then(res => {
if (res.return_code == '000000') { if (res.return_code == '000000') {
uni.hideLoading(); location.href = res.return_data.url_link;
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
})
} }
}) })
}, },
@ -256,6 +296,16 @@
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.relybtn {
background-color: #0083f5;
width: 110px;
margin-left: auto;
margin-right: auto;
height: 30px;
border-radius: 5px;
line-height: 30px;
}
.couhead { .couhead {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -277,6 +327,7 @@
background-color: #dceefe; background-color: #dceefe;
color: #0076dd; color: #0076dd;
height: 60rpx; height: 60rpx;
font-size: 12px;
line-height: 60rpx; line-height: 60rpx;
width: 60px; width: 60px;
border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px;
@ -358,7 +409,7 @@
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
background-color: red; background-color: red;
color: #FFFFFF; color: #FFFFFF;
border-radius: 0px; border-radius: 0px;
} }
@ -368,4 +419,15 @@
background-color: red; background-color: red;
color: #FFFFFF; color: #FFFFFF;
} }
.coupne-btn {
position: fixed;
bottom: 0px;
background-color: #0083f5;
color: #FFFFFF;
height: 45px;
line-height: 45px;
border-radius: 0px;
z-index: 9999;
}
</style> </style>

File diff suppressed because one or more lines are too long

@ -1,7 +1,7 @@
<template> <template>
<view> <view>
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<!-- <view class="header"> <!-- <view class="header">
<view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }"> <view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }">
<view class="back"> <view class="back">
<view class="icon xiangqian" @tap="back" v-if="showBack"></view> <view class="icon xiangqian" @tap="back" v-if="showBack"></view>
@ -52,9 +52,8 @@
{{goodsData[0].couponName}} {{goodsData[0].couponName}}
</view> </view>
<view class="width96 mart10 alijusstart"> <view class="width96 mart10 alijusstart">
<view class="fcorfff font12 height20" <view class="fcorfff font12 height20" style="background-color: #3da7e7;border-radius: 20px;padding: 0px 5px;">嗨森逛
style="background-color: #3da7e7;border-radius: 20px;padding: 0px 5px;">嗨森逛 </view>
</view>
<view class="width70 fotrt font14 fcor666">月销 500</view> <view class="width70 fotrt font14 fcor666">月销 500</view>
</view> </view>
</view> </view>
@ -121,7 +120,6 @@
<script> <script>
import { import {
getCouponById, getCouponById,
GetPhoneNumber,
getUserInfo getUserInfo
} from "../../Utils/Api.js"; } from "../../Utils/Api.js";
// import authorize from '../../components/Authorize.vue' // import authorize from '../../components/Authorize.vue'
@ -191,6 +189,18 @@
this.storeId = app.globalData.storeid; this.storeId = app.globalData.storeid;
this.storeName = app.globalData.storename; this.storeName = app.globalData.storename;
}, },
onReady() {
// this.calcAnchor(); //ajax
},
onPageScroll(e) {},
//page.json"onReachBottomDistance"
onReachBottom() {
// uni.showToast({ title: '' });
},
mounted() {
},
methods: { methods: {
// //
getCouponById() { getCouponById() {
@ -235,7 +245,6 @@
swiperChange(event) { swiperChange(event) {
this.currentSwiper = event.detail.current; this.currentSwiper = event.detail.current;
}, },
// //
getuserinfo() { getuserinfo() {
let that = this; let that = this;
@ -292,7 +301,7 @@
}, },
buy() { buy() {
let that = this; let that = this;
if (this.goodsData[0].stockCount == 0 && this.goodsData[0].couponSource != 4) { if (this.goodsData[0].stockCount == 0 && this.goodsData[0].couponSource != 4 && this.goodsData[0].couponSource != 5) {
uni.showToast({ uni.showToast({
title: '库存不足', title: '库存不足',
icon: "none" icon: "none"
@ -312,13 +321,12 @@
duration: 2000, duration: 2000,
success() { success() {
uni.navigateTo({ uni.navigateTo({
url: '../order/confirmation?id=' + that.goodsData[0].id + '&typeid=1' url: '../order/confirmation?id=' + that.goodsData[0].id
}) })
} }
}) })
}, },
// //
back() { back() {
uni.navigateBack(); uni.navigateBack();
@ -328,433 +336,434 @@
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
button::after { button::after {
border: none border: none
} }
.jtcs { .jtcs {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin-top: 40rpx; margin-top: 40rpx;
} }
.tccs { .tccs {
box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2); box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2);
border: 1px solid #f6f6f6; border: 1px solid #f6f6f6;
border-radius: 8px; border-radius: 8px;
align-items: center; align-items: center;
display: flex; display: flex;
image { image {
width: 170rpx; width: 170rpx;
max-height: 170rpx; max-height: 170rpx;
} }
} }
.tcrig { .tcrig {
margin-left: 20rpx; margin-left: 20rpx;
} }
.info { .info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
width: 92%; width: 92%;
.price { .price {
color: #e65339; color: #e65339;
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.slogan { .slogan {
color: #807c87; color: #807c87;
font-size: 24upx; font-size: 24upx;
text-decoration: line-through; text-decoration: line-through;
} }
} }
.xgnum { .xgnum {
background-color: #FFFFFF; background-color: #FFFFFF;
color: #6fbdee; color: #6fbdee;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
font-size: 13px; font-size: 13px;
width: 60%; width: 60%;
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
border-radius: 15px; border-radius: 15px;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
} }
@keyframes showPopup { @keyframes showPopup {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
@keyframes hidePopup { @keyframes hidePopup {
0% { 0% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0; opacity: 0;
} }
} }
@keyframes showLayer { @keyframes showLayer {
0% { 0% {
transform: translateY(0); transform: translateY(0);
} }
100% { 100% {
transform: translateY(-100%); transform: translateY(-100%);
} }
} }
@keyframes hideLayer { @keyframes hideLayer {
0% { 0% {
transform: translateY(-100%); transform: translateY(-100%);
} }
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
} }
.icon { .icon {
font-size: 26upx; font-size: 26upx;
} }
.status { .status {
width: 100%; width: 100%;
height: 0; height: 0;
position: fixed; position: fixed;
z-index: 10; z-index: 10;
top: 0; top: 0;
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
height: var(--status-bar-height); // height: var(--status-bar-height); //
/* #endif */ /* #endif */
background-color: #f1f1f1; background-color: #f1f1f1;
transition: opacity 0.05s linear; transition: opacity 0.05s linear;
} }
.header { .header {
width: 100%; width: 100%;
height: 100upx; height: 100upx;
display: flex; display: flex;
align-items: center; align-items: center;
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 10; z-index: 10;
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
top: var(--status-bar-height); top: var(--status-bar-height);
/* #endif */ /* #endif */
.before, .before,
.after { .after {
width: 92%; width: 92%;
padding: 0 4%; padding: 0 4%;
height: 100upx; height: 100upx;
display: flex; display: flex;
align-items: center; align-items: center;
position: fixed; position: fixed;
top: 0; top: 0;
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
top: var(--status-bar-height); top: var(--status-bar-height);
/* #endif */ /* #endif */
transition: opacity 0.05s linear; transition: opacity 0.05s linear;
.back { .back {
width: 125upx; width: 125upx;
height: 60upx; height: 60upx;
flex-shrink: 0; flex-shrink: 0;
.icon { .icon {
margin-left: -10%; margin-left: -10%;
width: 60upx; width: 60upx;
height: 60upx; height: 60upx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 42upx; font-size: 42upx;
} }
} }
.middle { .middle {
width: 100%; width: 100%;
} }
.icon-btn { .icon-btn {
width: 125upx; width: 125upx;
height: 60upx; height: 60upx;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
.icon { .icon {
&:first-child { &:first-child {
margin-right: 5upx; margin-right: 5upx;
} }
width: 60upx; width: 60upx;
height: 60upx; height: 60upx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 42upx; font-size: 42upx;
} }
} }
} }
.before { .before {
.back { .back {
.icon { .icon {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
border-radius: 100%; border-radius: 100%;
} }
} }
.icon-btn { .icon-btn {
.icon { .icon {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
border-radius: 100%; border-radius: 100%;
} }
} }
} }
.after { .after {
background-color: #f1f1f1; background-color: #f1f1f1;
.back { .back {
.icon { .icon {
color: #666; color: #666;
} }
} }
.icon-btn { .icon-btn {
.icon { .icon {
color: #666; color: #666;
} }
} }
.middle { .middle {
font-size: 32upx; font-size: 32upx;
height: 90upx; height: 90upx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 7%; padding: 0 7%;
view { view {
width: (100%/3); width: (100%/3);
padding: 0 3%; padding: 0 3%;
margin: 0 3%; margin: 0 3%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&.on { &.on {
margin-bottom: -4upx; margin-bottom: -4upx;
color: #f47952; color: #f47952;
border-bottom: solid 4upx #f47952; border-bottom: solid 4upx #f47952;
} }
} }
} }
} }
} }
.swiper-box { .swiper-box {
position: relative; position: relative;
width: 100%; width: 100%;
swiper { swiper {
width: 100%; width: 100%;
swiper-item { swiper-item {
image { image {
width: 100%; width: 100%;
} }
} }
} }
.indicator { .indicator {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 25upx; padding: 0 25upx;
height: 40upx; height: 40upx;
border-radius: 40upx; border-radius: 40upx;
font-size: 22upx; font-size: 22upx;
position: absolute; position: absolute;
bottom: 20upx; bottom: 20upx;
right: 20upx; right: 20upx;
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
} }
.info-box { .info-box {
width: 92%; width: 92%;
padding: 4%; padding: 4%;
background-color: #fff; background-color: #fff;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.spec { .spec {
.row { .row {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 5px 0 5px 0; margin: 5px 0 5px 0;
.text { .text {
font-size: 24upx; font-size: 24upx;
color: #a2a2a2; color: #a2a2a2;
margin-right: 20upx; margin-right: 20upx;
} }
.content { .content {
font-size: 28upx; font-size: 28upx;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.serviceitem { .serviceitem {
margin-right: 10upx; margin-right: 10upx;
} }
.sp { .sp {
width: 100%; width: 100%;
display: flex; display: flex;
view { view {
background-color: #f6f6f6; background-color: #f6f6f6;
padding: 5upx 10upx; padding: 5upx 10upx;
color: #999; color: #999;
margin-right: 10upx; margin-right: 10upx;
font-size: 20upx; font-size: 20upx;
border-radius: 5upx; border-radius: 5upx;
&.on { &.on {
border: solid 1upx #f47952; border: solid 1upx #f47952;
padding: 4upx 8upx; padding: 4upx 8upx;
} }
} }
} }
} }
.arrow { .arrow {
position: absolute; position: absolute;
right: 4%; right: 4%;
.icon { .icon {
color: #ccc; color: #ccc;
} }
} }
} }
} }
.description { .description {
.title { .title {
width: 100%; width: 100%;
height: 80upx; height: 80upx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 26upx; font-size: 26upx;
color: #999; color: #999;
} }
} }
.footer { .footer {
position: fixed; position: fixed;
bottom: 0upx; bottom: 0upx;
width: 100%; width: 100%;
height: 99upx; height: 99upx;
color: #FFFFFF; color: #FFFFFF;
border-top: solid 1upx #eee; border-top: solid 1upx #eee;
background-color: #0083f5; background-color: #0083f5;
z-index: 2; z-index: 2;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.btnfot { .btnfot {
text-align: center; text-align: center;
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
height: 48px; height: 48px;
background-color: #0083f5; background-color: #0083f5;
color: #ffffff; color: #ffffff;
} }
.icons { .icons {
display: flex; display: flex;
height: 80upx; height: 80upx;
margin-left: -4%; margin-left: -4%;
.box { .box {
width: 80upx; width: 80upx;
height: 80upx; height: 80upx;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
.icon { .icon {
font-size: 40upx; font-size: 40upx;
color: #828282; color: #828282;
} }
.text { .text {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
font-size: 22upx; font-size: 22upx;
color: #666; color: #666;
} }
} }
} }
.btn { .btn {
height: 80upx; height: 80upx;
border-radius: 40upx; border-radius: 40upx;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
margin-right: -2%; margin-right: -2%;
.joinCart, .joinCart,
.buy { .buy {
height: 80upx; height: 80upx;
padding: 0 40upx; padding: 0 40upx;
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 28upx; font-size: 28upx;
} }
.joinCart { .joinCart {
background-color: #f0b46c; background-color: #f0b46c;
} }
.buy { .buy {
background-color: #0083f5; background-color: #0083f5;
} }
} }
} }
</style> </style>

@ -1,16 +1,17 @@
<template> <template>
<view> <view>
<view class="width100" v-if="couponDesInfo"> <view class="width100" v-if="couponDesInfo">
<view class="width100 fotct coupon-status font20 fcorred" v-if="couponDesInfo.couponCodeInfo.status == 3"> <!-- <view class="width100 fotct coupon-status font20 fcorred" v-if="couponDesInfo.couponCodeInfo.status == 3">
已使用 已使用
</view> </view>
<view class="width100 fotct coupon-status font20 fcor41c" v-if="couponDesInfo.couponCodeInfo.status == 2"> <view class="width100 fotct coupon-status font20 fcor41c" v-if="couponDesInfo.couponCodeInfo.status == 2">
未使用 未使用
</view> </view> -->
<view class="line1"></view> <view class="line1"></view>
<view class="width90"> <view class="width90">
<view class="flright fotct"> <view class="flright fotct">
<image mode="widthFix" class="coupon-img" :src="imageUrl+couponDesInfo.couponInfo.couponImg"></image> <image mode="widthFix" class="coupon-img" :src="imageUrl+couponDesInfo.couponInfo.couponImg">
</image>
</view> </view>
<view class="coupon-mes mart10"> <view class="coupon-mes mart10">
<view class="fcor333 fontwig6 font24 width100 text2">{{couponDesInfo.couponInfo.couponName}}</view> <view class="fcor333 fontwig6 font24 width100 text2">{{couponDesInfo.couponInfo.couponName}}</view>
@ -23,46 +24,48 @@
</view> </view>
</view> </view>
<view class="line1 mart15"></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="width100 fotct" v-if="couponDesInfo.couponInfo.couponSource == 4"> <view class="width100 fotct" v-if="couponDesInfo.couponInfo.couponSource == 4">
<view class="font28 fontlet mart5 marb10" style="color: #1593c3;">视频教程</view> <view class="font28 fontlet mart5 marb10" style="color: #1593c3;">视频教程</view>
<yy-video-player <yy-video-player :auto-play="false" :url="imagewxUrl+imgadres3" :poster="poster" :show-back-btn="true">
:auto-play="false" </yy-video-player>
:url="imagewxUrl+imgadres3"
:poster="poster"
:show-back-btn="true"
></yy-video-player>
<image :src="imagewxUrl+imgadres2" mode="widthFix" class="mart10"></image> <image :src="imagewxUrl+imgadres2" mode="widthFix" class="mart10"></image>
</view> </view>
<!-- <view class="width100 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="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.couponInfo.reserveStatus">
<image class="coupon-qr" :src="imageUrl+'couponCode/'+couponDesInfo.highUserCoupon.qrCodeImg">
</image>
</view>
<view class="width100">
<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">
请告知加油员用码商支付</view>
<view class="width90 mart20 fotct" v-if="!couponDesInfo.couponInfo.reserveStatus">
<image class="coupon-qr" :src="imageUrl+'couponCode/'+couponDesInfo.highUserCoupon.qrCodeImg">
</image>
</view>
</view> </view>
<view class="width90 mart30 font20 fcor333 fotct marb40" v-if="!couponDesInfo">二维码生效中,前往个人中心查看</view> <view class="width90 mart30 font20 fcor333 fotct marb40" v-if="!couponDesInfo">二维码生效中,前往个人中心查看</view>
<view class="width90 height45l font18 fcor666 aliitem" v-if="storeList"> <!-- <view class="width90 mart20" style="height: 80px;" v-for="(store,i) in storeList" :key="i">
<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="width90 mart20" style="height: 80px;" v-for="(store,i) in storeList" :key="i">
<view class="coupon-des flleft"> <view class="coupon-des flleft">
<image mode="widthFix" :src="imageUrl+store.ext1"></image> <image mode="widthFix" :src="imageUrl+store.ext1"></image>
</view> </view>
@ -72,18 +75,42 @@
<view class="font14 fcor999 width100 text2 mart5">{{store.address}}</view> <view class="font14 fcor999 width100 text2 mart5">{{store.address}}</view>
</view> </view>
<view class="coupon-map flright width30 fotct" @click="seeloaction(store)"> <view class="coupon-map flright width30 fotct" @click="seeloaction(store)">
<!-- 地图logo -->
<image :src="imagewxUrl+imgadres1"> <image :src="imagewxUrl+imgadres1">
</image> </image>
<view class="mart5 fcor999 font13">{{store.distance}}km</view> <view class="mart5 fcor999 font13">{{store.distance}}km</view>
</view> </view>
</view> </view>
</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>
</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> <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> <view class="height60"></view>
<button class="coupne-btn width100" @click="toUser">个人中心</button> <button class="coupne-btn width100" @click="toUser">个人中心</button>
</view> </view>
</template> </template>
@ -91,7 +118,8 @@
import { import {
getUserNewCouponDetail, getUserNewCouponDetail,
getStoreListByCoupon, getStoreListByCoupon,
getActivityByCoupon getActivityByCoupon,
getVerifyQRCode
} from "../../../Utils/Api.js"; } from "../../../Utils/Api.js";
import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue'; import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue';
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'; import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
@ -106,8 +134,11 @@
couDesId: '', couDesId: '',
imageUrl: app.globalData.imgUrl, imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres2: 'video.jpg', imageqrUrl: app.globalData.imageqrImg,
imgadres3: 'playVideo.mp4', imgadres2: 'video.jpg', //
imgadres3: 'playVideo.mp4', //
imgadres5: 'petrovideo.jpg', //
imgadres6: 'petroplayVideo.mp4', //
imgadres4: 'activityimg.png', imgadres4: 'activityimg.png',
imgadres1: 'dhl.png', imgadres1: 'dhl.png',
couponDesInfo: [], couponDesInfo: [],
@ -117,7 +148,9 @@
threeTime: '', threeTime: '',
pageNum: 1, pageNum: 1,
pageSize: 1, pageSize: 1,
isNoMoreData: false isNoMoreData: false,
qrimageurl: '' ,//
coupstus:0
} }
}, },
onLoad(option) { onLoad(option) {
@ -144,7 +177,7 @@
} }
}, },
onReachBottom() { onReachBottom() {
this.getStoreListByCoupon(); // this.getStoreListByCoupon();
}, },
methods: { methods: {
// //
@ -158,8 +191,13 @@
getUserNewCouponDetail(params).then(res => { getUserNewCouponDetail(params).then(res => {
if (res.return_code == '000000') { if (res.return_code == '000000') {
uni.hideLoading(); uni.hideLoading();
this.couponDesInfo = res.return_data; this.couponDesInfo = res.return_data;
if(res.return_data.couponInfo.couponSource == 4){ 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.oneTime = res.return_data.highUserCoupon.createTime;
this.twoTime = res.return_data.highUserCoupon.useEndTime; this.twoTime = res.return_data.highUserCoupon.useEndTime;
this.threeTime = res.return_data.highUserCoupon.consumeTime; this.threeTime = res.return_data.highUserCoupon.consumeTime;
@ -174,6 +212,41 @@
} }
}) })
}, },
//
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() { showPopup() {
this.$refs.popup.show(); this.$refs.popup.show();
@ -194,17 +267,17 @@
}); });
}, },
// //
jumpcjhuod(){ jumpcjhuod() {
this.closePopup(); this.closePopup();
uni.reLaunch({ uni.reLaunch({
url:'../../../subPages/lottery/lottery?id='+this.couDesId url: '../../../subPages/lottery/lottery?id=' + this.couDesId
})
},
//
jumpstorelist() {
uni.navigateTo({
url: '../../../subPages/sotre-details-list/sotre-details-list?id=' + this.couDesId
}) })
},
//
jumpstorelist() {
uni.navigateTo({
url: '../../../subPages/sotre-details-list/sotre-details-list?id=' + this.couDesId
})
}, },
// //
seeloaction(e) { seeloaction(e) {
@ -251,12 +324,9 @@
}) })
}, },
toUser() { toUser() {
// uni.switchTab({ uni.switchTab({
// url: '/pages/tabBar/user/user'
// });
uni.reLaunch({
url: '/pages/tabBar/user/user' url: '/pages/tabBar/user/user'
}) });
}, },
scan() { scan() {
uni.scanCode({ uni.scanCode({
@ -270,8 +340,28 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.popImg { width: 300px; height: 440px; } .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 { .loading-text {
width: 100%; width: 100%;
display: flex; display: flex;
@ -282,6 +372,11 @@
font-size: 24upx; font-size: 24upx;
} }
.stoCont {
border-bottom: 1px solid #f6f6f6;
height: 140rpx;
}
.coupon-status { .coupon-status {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
@ -308,7 +403,8 @@
color: white; color: white;
font-size: 28px; font-size: 28px;
border-radius: 10px; border-radius: 10px;
image{
image {
width: 80px; width: 80px;
max-height: 80px; max-height: 80px;
} }
@ -333,14 +429,8 @@
.coupne-btn { .coupne-btn {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
background-color: red; background-color: #0083f5;
color: #FFFFFF;
}
.coupne-btn {
position: fixed;
bottom: 0px;
background-color: red;
color: #FFFFFF; color: #FFFFFF;
border-radius: 0px;
} }
</style> </style>

Loading…
Cancel
Save