parent
dec989a7ca
commit
d47dd73e5b
File diff suppressed because it is too large
Load Diff
@ -1,381 +1,371 @@ |
||||
<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="storeName">加油站点:{{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.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 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, |
||||
storeName : '' |
||||
} |
||||
}, |
||||
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; |
||||
} |
||||
if(res.return_data.couponCodeInfo.storeName && res.return_data.couponCodeInfo.storeName != undefined){ |
||||
this.storeName = res.return_data.couponCodeInfo.storeName; |
||||
} |
||||
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: 80px; |
||||
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; |
||||
<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> |
||||
<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 class="fotct fcor333 font15 marb10 mart10" |
||||
v-if="couponDesInfo.couponInfo.couponSource != 4 && couponDesInfo.couponCodeInfo.codeKey"> |
||||
{{couponDesInfo.couponCodeInfo.codeKey}} |
||||
</view> |
||||
</view> |
||||
<view class="width90 mart10 googscs backcorfff" v-if="couponDesInfo.couponInfo.couponSource != 4"> |
||||
<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> |
||||
<!-- <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: 1, |
||||
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 |
||||
}) |
||||
}, |
||||
//跳转门店 |
||||
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() |
||||
} |
||||
}) |
||||
}, |
||||
//领取 |
||||
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; |
||||
} |
||||
border-radius: 0px; |
||||
} |
||||
|
||||
.czlq { |
||||
position: absolute; |
||||
bottom: 0; |
||||
background-color: red; |
||||
color: #FFFFFF; |
||||
} |
||||
</style> |
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,363 +1,364 @@ |
||||
<template> |
||||
<view> |
||||
<view class="block"> |
||||
<view class="content"> |
||||
<view class="orderinfo"> |
||||
<view class="row"> |
||||
<view class="nominal">订单金额:</view> |
||||
<view class="text" v-if="pryType == 1">{{amount}} 元</view> |
||||
<view class="text" v-if="pryType == 2">{{amount*100}} 个积分</view> |
||||
<view class="text" v-if="pryType == 3">{{amount}}元</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="block"> |
||||
<view class="title"> |
||||
选择支付方式 |
||||
</view> |
||||
<view class="content"> |
||||
<view class="pay-list"> |
||||
<!-- <view class="row" @tap="paytype='jinbi'"> |
||||
<view class="left"> |
||||
<image src="../../../static/img/jfx.png"></image> |
||||
</view> |
||||
<view class="center"> |
||||
积分支付(积分:{{user.gold}}) |
||||
</view> |
||||
<view class="right"> |
||||
<radio :checked="paytype=='jinbi'" color="#0083f5" /> |
||||
</view> |
||||
</view> --> |
||||
<view class="row" @tap="paytype='gonghuika'"> |
||||
<view class="left"> |
||||
<image mode="widthFix" style="border-radius: 50%;" src="../../../static/img/unionpay.png"></image> |
||||
</view> |
||||
<view class="center"> |
||||
银联支付 |
||||
</view> |
||||
<view class="right"> |
||||
<radio :checked="paytype=='gonghuika'" color="#0083f5" /> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="row" @tap="paytype='wxpay'" v-if="pryType == 1 || pryType==3 "> |
||||
<view class="left"> |
||||
<image :src="imagewxUrl+imgadres"></image> |
||||
</view> |
||||
<view class="center"> |
||||
微信支付 |
||||
</view> |
||||
<view class="right"> |
||||
<radio :checked="paytype=='wxpay'" color="#0083f5" /> |
||||
</view> |
||||
</view> --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="pay"> |
||||
<view class="btn" @tap="orderToPay">立即支付</view> |
||||
<view class="tis"> |
||||
点击立即支付,即代表您同意<view class="terms"> |
||||
《条款协议》 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<ssPaymentPassword ref="paymentPassword" :mode="1" @submit="submitHandle" /> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
orderToPay, |
||||
orderToGoldPay, |
||||
hltUnionCardPay, |
||||
unionPay |
||||
} from '../../../Utils/Api.js' |
||||
import ssPaymentPassword from '../../../components/sanshui-payment-password' |
||||
let app = getApp(); |
||||
export default { |
||||
components: { |
||||
ssPaymentPassword |
||||
}, |
||||
data() { |
||||
return { |
||||
amount: 0, |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'wxpay.png', |
||||
pryType: '', |
||||
paytype: '', //支付类型 |
||||
orderNo: '', |
||||
user: '', |
||||
couponId: '', |
||||
jumpType: '', |
||||
PaymentPassword: '', |
||||
tongCardPrice: 0 |
||||
}; |
||||
}, |
||||
onLoad(e) { |
||||
this.pryType = e.paytype; |
||||
this.orderNo = e.orderId; |
||||
this.couponId = e.couponId; |
||||
this.jumpType = e.typeaout; |
||||
if (this.pryType == 1) { |
||||
this.paytype = 'wxpay'; |
||||
} else if (this.pryType == 2) { |
||||
this.paytype = 'jinbi' |
||||
} else { |
||||
this.paytype = '' |
||||
} |
||||
this.amount = parseFloat(e.amount).toFixed(2); |
||||
}, |
||||
onShow() { |
||||
let that = this; |
||||
that.user = app.globalData.userInfo; |
||||
}, |
||||
methods: { |
||||
|
||||
//获取订单数据 |
||||
orderToPay() { |
||||
let that = this; |
||||
if (that.paytype == 'jinbi') { |
||||
if (!that.user.isSetPayPwd) { |
||||
uni.navigateTo({ |
||||
url: '../../login/updatePas/updatePas' |
||||
}) |
||||
return; |
||||
} |
||||
that.$refs.paymentPassword.modalFun('show'); |
||||
} else if (that.paytype == 'gonghuika') { |
||||
that.unionPay(); |
||||
} else { |
||||
uni.showToast({ |
||||
title: '请选择支付方式', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}, |
||||
//银联获取信息 |
||||
unionPay() { |
||||
let goods = { |
||||
"orderId": this.orderNo |
||||
} |
||||
unionPay(goods).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.uniontopay(res.return_data.prepayid); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}); |
||||
} |
||||
}) |
||||
}, |
||||
//银联支付 |
||||
uniontopay(item) { |
||||
let that = this; |
||||
upsdk.pluginReady(function() { |
||||
upsdk.pay({ |
||||
tn: item, |
||||
success: function(res) { |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
uni.reLaunch({ |
||||
url: '../success/success?id=' + this.couponId |
||||
}); |
||||
}, |
||||
fail: function(err) { |
||||
uni.showToast({ |
||||
title: err.msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
// 支付失败, err.msg 是失败原因描述, 比如TN号不合法, 或者用户取消了交易 等等。 |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
submitHandle(e) { |
||||
this.PaymentPassword = e.value; |
||||
uni.showLoading({ |
||||
title: '支付中...' |
||||
}) |
||||
if (this.paytype == 'jinbi') { |
||||
let params = { |
||||
"orderId": this.orderNo, |
||||
"password": this.PaymentPassword |
||||
} |
||||
orderToGoldPay(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
if (this.jumpType == 4) { |
||||
uni.reLaunch({ |
||||
url: '/pages/tabBar/user/user' |
||||
}); |
||||
return; |
||||
} |
||||
uni.reLaunch({ |
||||
url: '../success/success?id=' + this.couponId |
||||
}); |
||||
|
||||
} |
||||
if (res.return_code == '102130') { |
||||
uni.navigateTo({ |
||||
url: '../../login/updatePas/updatePas' |
||||
}) |
||||
return; |
||||
} |
||||
|
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none' |
||||
}) |
||||
}) |
||||
return; |
||||
} |
||||
let params = { |
||||
"orderId": this.orderNo, |
||||
"cardNo": this.user.hltCardNo.cardNo, |
||||
"password": this.PaymentPassword |
||||
} |
||||
hltUnionCardPay(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
uni.reLaunch({ |
||||
url: '../success/success?id=' + this.couponId |
||||
}); |
||||
return; |
||||
} |
||||
if (res.return_code == '102130') { |
||||
uni.navigateTo({ |
||||
url: '../../login/updatePas/updatePas' |
||||
}) |
||||
return; |
||||
} |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none' |
||||
}) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.block { |
||||
width: 94%; |
||||
padding: 0 3% 40upx 3%; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
font-size: 34upx; |
||||
} |
||||
|
||||
.content { |
||||
.orderinfo { |
||||
width: 100%; |
||||
border-bottom: solid 1upx #eee; |
||||
|
||||
.row { |
||||
width: 100%; |
||||
height: 90upx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.nominal { |
||||
flex-shrink: 0; |
||||
font-size: 32upx; |
||||
color: #7d7d7d; |
||||
} |
||||
|
||||
.text { |
||||
width: 70%; |
||||
margin-left: 10upx; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
font-size: 32upx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pay-list { |
||||
width: 100%; |
||||
border-bottom: solid 1upx #eee; |
||||
|
||||
.row { |
||||
width: 100%; |
||||
height: 120upx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.left { |
||||
width: 100upx; |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
image { |
||||
width: 60upx; |
||||
height: 60upx; |
||||
} |
||||
} |
||||
|
||||
.center { |
||||
width: 100%; |
||||
font-size: 30upx; |
||||
} |
||||
|
||||
.right { |
||||
width: 100upx; |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pay { |
||||
margin-top: 20upx; |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.btn { |
||||
width: 70%; |
||||
height: 80upx; |
||||
border-radius: 80upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
color: #fff; |
||||
background-color: #0083f5; |
||||
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
.tis { |
||||
margin-top: 10upx; |
||||
width: 100%; |
||||
font-size: 24upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: baseline; |
||||
color: #999; |
||||
|
||||
.terms { |
||||
color: #5a9ef7; |
||||
} |
||||
} |
||||
} |
||||
<template> |
||||
<view> |
||||
<view class="block"> |
||||
<view class="content"> |
||||
<view class="orderinfo"> |
||||
<view class="row"> |
||||
<view class="nominal">订单金额:</view> |
||||
<view class="text" v-if="pryType == 1">{{amount}} 元</view> |
||||
<view class="text" v-if="pryType == 2">{{amount*100}} 个积分</view> |
||||
<view class="text" v-if="pryType == 3">{{amount}}元</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="block"> |
||||
<view class="title"> |
||||
选择支付方式 |
||||
</view> |
||||
<view class="content"> |
||||
<view class="pay-list"> |
||||
<!-- <view class="row" @tap="paytype='jinbi'"> |
||||
<view class="left"> |
||||
<image src="../../../static/img/jfx.png"></image> |
||||
</view> |
||||
<view class="center"> |
||||
积分支付(积分:{{user.gold}}) |
||||
</view> |
||||
<view class="right"> |
||||
<radio :checked="paytype=='jinbi'" color="#0083f5" /> |
||||
</view> |
||||
</view> --> |
||||
<view class="row" @tap="paytype='gonghuika'"> |
||||
<view class="left"> |
||||
<image mode="widthFix" style="border-radius: 50%;" src="../../../static/img/unionpay.png"> |
||||
</image> |
||||
</view> |
||||
<view class="center"> |
||||
银联支付 |
||||
</view> |
||||
<view class="right"> |
||||
<radio :checked="paytype=='gonghuika'" color="#0083f5" /> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="row" @tap="paytype='wxpay'" v-if="pryType == 1 || pryType==3 "> |
||||
<view class="left"> |
||||
<image :src="imagewxUrl+imgadres"></image> |
||||
</view> |
||||
<view class="center"> |
||||
微信支付 |
||||
</view> |
||||
<view class="right"> |
||||
<radio :checked="paytype=='wxpay'" color="#0083f5" /> |
||||
</view> |
||||
</view> --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="pay"> |
||||
<view class="btn" @tap="orderToPay">立即支付</view> |
||||
<view class="tis"> |
||||
点击立即支付,即代表您同意<view class="terms"> |
||||
《条款协议》 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<ssPaymentPassword ref="paymentPassword" :mode="1" @submit="submitHandle" /> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
orderToPay, |
||||
orderToGoldPay, |
||||
hltUnionCardPay, |
||||
unionPay |
||||
} from '../../../Utils/Api.js' |
||||
import ssPaymentPassword from '../../../components/sanshui-payment-password' |
||||
let app = getApp(); |
||||
export default { |
||||
components: { |
||||
ssPaymentPassword |
||||
}, |
||||
data() { |
||||
return { |
||||
amount: 0, |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'wxpay.png', |
||||
pryType: '', |
||||
paytype: '', //支付类型 |
||||
orderNo: '', |
||||
user: '', |
||||
couponId: '', |
||||
jumpType: '', |
||||
PaymentPassword: '', |
||||
tongCardPrice: 0 |
||||
}; |
||||
}, |
||||
onLoad(e) { |
||||
this.pryType = e.paytype; |
||||
this.orderNo = e.orderId; |
||||
this.couponId = e.couponId; |
||||
this.jumpType = e.typeaout; |
||||
if (this.pryType == 1) { |
||||
this.paytype = 'wxpay'; |
||||
} else if (this.pryType == 2) { |
||||
this.paytype = 'jinbi' |
||||
} else { |
||||
this.paytype = '' |
||||
} |
||||
this.amount = parseFloat(e.amount).toFixed(2); |
||||
}, |
||||
onShow() { |
||||
let that = this; |
||||
that.user = app.globalData.userInfo; |
||||
}, |
||||
methods: { |
||||
|
||||
//获取订单数据 |
||||
orderToPay() { |
||||
let that = this; |
||||
if (that.paytype == 'jinbi') { |
||||
if (!that.user.isSetPayPwd) { |
||||
uni.navigateTo({ |
||||
url: '../../login/updatePas/updatePas' |
||||
}) |
||||
return; |
||||
} |
||||
that.$refs.paymentPassword.modalFun('show'); |
||||
} else if (that.paytype == 'gonghuika') { |
||||
that.unionPay(); |
||||
} else { |
||||
uni.showToast({ |
||||
title: '请选择支付方式', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}, |
||||
//银联获取信息 |
||||
unionPay() { |
||||
let goods = { |
||||
"orderId": this.orderNo |
||||
} |
||||
unionPay(goods).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.uniontopay(res.return_data.prepayid); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}); |
||||
} |
||||
}) |
||||
}, |
||||
//银联支付 |
||||
uniontopay(item) { |
||||
let that = this; |
||||
upsdk.pluginReady(function() { |
||||
upsdk.pay({ |
||||
tn: item, |
||||
success: function(res) { |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
uni.reLaunch({ |
||||
url: '../success/success?id=' + this.couponId |
||||
}); |
||||
}, |
||||
fail: function(err) { |
||||
uni.showToast({ |
||||
title: err.msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
// 支付失败, err.msg 是失败原因描述, 比如TN号不合法, 或者用户取消了交易 等等。 |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
submitHandle(e) { |
||||
this.PaymentPassword = e.value; |
||||
uni.showLoading({ |
||||
title: '支付中...' |
||||
}) |
||||
if (this.paytype == 'jinbi') { |
||||
let params = { |
||||
"orderId": this.orderNo, |
||||
"password": this.PaymentPassword |
||||
} |
||||
orderToGoldPay(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
if (this.jumpType == 4) { |
||||
uni.reLaunch({ |
||||
url: '/pages/tabBar/user/user' |
||||
}); |
||||
return; |
||||
} |
||||
uni.reLaunch({ |
||||
url: '../success/success?id=' + this.couponId |
||||
}); |
||||
|
||||
} |
||||
if (res.return_code == '102130') { |
||||
uni.navigateTo({ |
||||
url: '../../login/updatePas/updatePas' |
||||
}) |
||||
return; |
||||
} |
||||
|
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none' |
||||
}) |
||||
}) |
||||
return; |
||||
} |
||||
let params = { |
||||
"orderId": this.orderNo, |
||||
"cardNo": this.user.hltCardNo.cardNo, |
||||
"password": this.PaymentPassword |
||||
} |
||||
hltUnionCardPay(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
uni.reLaunch({ |
||||
url: '../success/success?id=' + this.couponId |
||||
}); |
||||
return; |
||||
} |
||||
if (res.return_code == '102130') { |
||||
uni.navigateTo({ |
||||
url: '../../login/updatePas/updatePas' |
||||
}) |
||||
return; |
||||
} |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none' |
||||
}) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.block { |
||||
width: 94%; |
||||
padding: 0 3% 40upx 3%; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
font-size: 34upx; |
||||
} |
||||
|
||||
.content { |
||||
.orderinfo { |
||||
width: 100%; |
||||
border-bottom: solid 1upx #eee; |
||||
|
||||
.row { |
||||
width: 100%; |
||||
height: 90upx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.nominal { |
||||
flex-shrink: 0; |
||||
font-size: 32upx; |
||||
color: #7d7d7d; |
||||
} |
||||
|
||||
.text { |
||||
width: 70%; |
||||
margin-left: 10upx; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
font-size: 32upx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pay-list { |
||||
width: 100%; |
||||
border-bottom: solid 1upx #eee; |
||||
|
||||
.row { |
||||
width: 100%; |
||||
height: 120upx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.left { |
||||
width: 100upx; |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
image { |
||||
width: 60upx; |
||||
height: 60upx; |
||||
} |
||||
} |
||||
|
||||
.center { |
||||
width: 100%; |
||||
font-size: 30upx; |
||||
} |
||||
|
||||
.right { |
||||
width: 100upx; |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pay { |
||||
margin-top: 20upx; |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.btn { |
||||
width: 70%; |
||||
height: 80upx; |
||||
border-radius: 80upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
color: #fff; |
||||
background-color: #0083f5; |
||||
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
.tis { |
||||
margin-top: 10upx; |
||||
width: 100%; |
||||
font-size: 24upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: baseline; |
||||
color: #999; |
||||
|
||||
.terms { |
||||
color: #5a9ef7; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
File diff suppressed because it is too large
Load Diff
After Width: | Height: | Size: 7.5 KiB |
@ -0,0 +1,120 @@ |
||||
<template> |
||||
<view> |
||||
<image class="width94 mart20" mode="widthFix" :src="imagewxUrl+imgadres"></image> |
||||
<!-- 分割线 --> |
||||
<view class="title-split"> |
||||
<view></view> |
||||
<text>品牌分类</text> |
||||
<view></view> |
||||
</view> |
||||
<view v-if="brandByList == '' " class="mart60 fotct font14 fcor666"> |
||||
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres1"></image> |
||||
</view> |
||||
<!-- 分类--> |
||||
<view class="width94"> |
||||
<view class="width50 flleft fotct mart5" v-for="(item,index) in brandByList" :key="item" @click="jumpgoods(item.id)"> |
||||
<image :src="imageUrl+item.img" class="preimg"></image> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getBrandByList} from '../../Utils/Api.js'; |
||||
let app = getApp() |
||||
export default { |
||||
data() { |
||||
return { |
||||
imageUrl: app.globalData.imgUrl, |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
brandByList:[], |
||||
imgadres: 'brand.png', |
||||
imgadres1: 'noorder.png', |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
isNoMoreData: false, |
||||
desId:'' |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.desId = options.id; |
||||
this.getBrandByList(); |
||||
}, |
||||
onReachBottom() { |
||||
this.getBrandByList(); |
||||
}, |
||||
methods: { |
||||
//查询品牌 |
||||
getBrandByList() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
if (this.isNoMoreData) { |
||||
uni.hideLoading() |
||||
return false; |
||||
} |
||||
let pagenum = this.pageNum; |
||||
let params = { |
||||
pageNum: pagenum, |
||||
pageSize: this.pageSize, |
||||
goodTypeId : this.desId |
||||
} |
||||
getBrandByList(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; |
||||
this.brandByList = this.brandByList.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.brandByList = []; |
||||
} |
||||
}) |
||||
}, |
||||
// 跳转商品 |
||||
jumpgoods(item){ |
||||
uni.navigateTo({ |
||||
url:'../../pages/goods/goods-list/goods-list?id=3'+'&goodsId='+this.desId+'&brandId='+item |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.title-split { |
||||
margin: 30rpx 0 28rpx 0; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
text { |
||||
color: #161616; |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
padding: 0 24rpx; |
||||
} |
||||
|
||||
view { |
||||
width: 140rpx; |
||||
height: 4rpx; |
||||
border-radius: 3rpx; |
||||
|
||||
&:first-of-type { |
||||
background: linear-gradient(90deg, rgba(98, 98, 98, 0) 0%, #333333 100%); |
||||
} |
||||
|
||||
&:last-of-type { |
||||
background: linear-gradient(90deg, #333333 0%, rgba(98, 98, 98, 0) 100%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.preimg { |
||||
width: 120px; |
||||
height: 80px; |
||||
} |
||||
</style> |
@ -0,0 +1,35 @@ |
||||
<template> |
||||
<view> |
||||
<image src="../static/coupsucces.png" mode="widthFix" class="sucimg mart30"></image> |
||||
<view class="width90 clor4cd964 mart30 font18 fotct">支付成功</view> |
||||
<view class="width90 height45l backcor89 fcorfff fotct border-r mart80" @click="jumpcoupon">查看我的优惠券</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
jumpcoupon(){ |
||||
uni.switchTab({ |
||||
url:'../../pages/tabBar/user/user' |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.sucimg { |
||||
width: 20%; |
||||
margin-left: 40%; |
||||
} |
||||
|
||||
.clor4cd964 { |
||||
color: #4cd964; |
||||
} |
||||
</style> |
@ -0,0 +1,802 @@ |
||||
<template> |
||||
<view> |
||||
|
||||
<view class="width94 comorder mart10"> |
||||
<view class="height100p width94 goodsimg"> |
||||
<image class="flleft" mode="widthFix" :src="imageUrl+couponList.packageDetail.listImg"></image> |
||||
<view class="tcrig"> |
||||
<view class="font18 fontwig6 fcor333 text1">{{couponList.packageDetail.title}}</view> |
||||
<view class="font13 fcor666 mart10">规格: 默认</view> |
||||
<view class="price-number mart10"> |
||||
<view class="price font16">¥{{couponList.packageDetail.price}}</view> |
||||
<view class="flright fotrt paddleft10">x1</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="width94 line1 mart5 marb5"></view> |
||||
<view class="height50 width100 backcorfff"> |
||||
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> |
||||
商品总额 |
||||
</view> |
||||
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor999"> |
||||
¥{{couponList.packageDetail.price}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="width94 comorder mart10"> |
||||
<view class="height50 width100 backcorfff"> |
||||
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> |
||||
支付方式 |
||||
</view> |
||||
</view> |
||||
<view class="width94 line1 mart5 marb5"></view> |
||||
<view class="height50 width100 backcorfff" @tap="paytype='unionPay'"> |
||||
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> |
||||
银联支付 |
||||
</view> |
||||
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun" |
||||
style="align-items: center;"> |
||||
<radio :checked="paytype=='unionPay'" color="#0083f5" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="width100 height60"></view> |
||||
<view class="footer"> |
||||
<view class="settlement"> |
||||
<view class="sum">实付:<view class="money">¥{{paytheprice}}</view> |
||||
</view> |
||||
<!-- #ifdef MP --> |
||||
<button class="btn" open-type="getPhoneNumber" v-if="user == null" |
||||
@getphonenumber="loginByPhone">立即支付</button> |
||||
<button class="btn" v-else @tap="toPay">立即支付</button> |
||||
<!-- #endif --> |
||||
<!-- #ifdef H5 --> |
||||
<button class="btn" v-if="user.phone == null" @click="jumpH5Bding">立即支付</button> |
||||
<button class="btn" v-else @tap="toPay">立即支付</button> |
||||
<!-- #endif --> |
||||
</view> |
||||
</view> |
||||
<ssPaymentPassword ref="paymentPassword" :mode="1" @submit="submitHandle" /> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
addOrder, |
||||
getDiscountPackageDetail, |
||||
loginByPhone, |
||||
orderToPay, |
||||
unionPay, |
||||
orderToGoldPay, |
||||
findUser, |
||||
hltUnionCardPay, |
||||
getHuiLianTongCardBalance |
||||
} from '../../Utils/Api.js'; |
||||
import ssPaymentPassword from '../../components/sanshui-payment-password' |
||||
let app = getApp(); |
||||
// #ifdef H5 |
||||
var jweixin = require('jweixin-module'); |
||||
// #endif |
||||
export default { |
||||
components: { |
||||
ssPaymentPassword |
||||
}, |
||||
data() { |
||||
return { |
||||
buylist: [], //订单列表 |
||||
goodsPrice: 0.0, //商品合计价格 |
||||
sumPrice: 0.0, //用户付款价格 |
||||
freight: 12.00, //运费 |
||||
note: '', //备注 |
||||
int: 1200, //抵扣积分 |
||||
deduction: 0, //抵扣价格 |
||||
couponId: '', |
||||
couponList: [], |
||||
UserNormalDiscountList: [], |
||||
imageUrl: app.globalData.imgUrl, |
||||
deductionPrice: '0.00', |
||||
paytheprice: '', |
||||
radioStatus: true, |
||||
memDiscountId: '', |
||||
user: '', |
||||
paytype: '', |
||||
PaymentPassword: '', |
||||
orderId: '', |
||||
jumpType: '', |
||||
tongCardPrice: 0, |
||||
storeId: '', |
||||
isDiscont: false |
||||
|
||||
}; |
||||
}, |
||||
onLoad(option) { |
||||
this.couponId = option.id; |
||||
this.getDiscountPackageDetail(); |
||||
}, |
||||
onShow() { |
||||
let that = this; |
||||
that.paytype = ''; |
||||
that.user = app.globalData.userInfo; |
||||
that.findUser(); |
||||
}, |
||||
onHide() { |
||||
|
||||
}, |
||||
onBackPress() { |
||||
//页面后退时候,清除订单信息 |
||||
}, |
||||
filters: { |
||||
toFixed: function(x) { |
||||
return parseFloat(x).toFixed(2); |
||||
}, |
||||
//过滤器 用于格式化时间 |
||||
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}`; |
||||
} |
||||
}, |
||||
methods: { |
||||
//查询积分 |
||||
findUser() { |
||||
let params; |
||||
findUser(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
app.globalData.userInfo = res.return_data; |
||||
this.user = res.return_data; |
||||
this.getHuiLianTongCardBalance(); |
||||
uni.setStorage({ |
||||
key: "user", |
||||
data: res.return_data |
||||
}) |
||||
} |
||||
}); |
||||
}, |
||||
//查询优惠券包详情 |
||||
getDiscountPackageDetail() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
let params = { |
||||
packageId: this.couponId |
||||
} |
||||
getDiscountPackageDetail(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.couponList = res.return_data; |
||||
this.paytheprice = res.return_data.packageDetail.price; |
||||
} |
||||
}) |
||||
}, |
||||
//显示弹出 |
||||
showPopup() { |
||||
this.$refs.popup.show(); |
||||
}, |
||||
//查询工会卡余额 |
||||
//查询详情 |
||||
getHuiLianTongCardBalance() { |
||||
let params = { |
||||
cardNo: this.user.hltCardNo.cardNo |
||||
} |
||||
getHuiLianTongCardBalance(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.tongCardPrice = res.return_data.balance; |
||||
} |
||||
|
||||
}); |
||||
}, |
||||
// H5获取手机号 |
||||
jumpH5Bding() { |
||||
uni.navigateTo({ |
||||
url: '../../pages/login/register' |
||||
}) |
||||
}, |
||||
// 微信获取手机号 |
||||
loginByPhone(PhoneNumber) { |
||||
if (PhoneNumber.detail.iv == undefined) { |
||||
uni.showToast({ |
||||
title: "用户取消授权", |
||||
icon: "none" |
||||
}); |
||||
return; |
||||
} |
||||
let params = { |
||||
openId: app.globalData.openId, |
||||
iv: PhoneNumber.detail.iv, |
||||
encryptedData: PhoneNumber.detail.encryptedData |
||||
} |
||||
loginByPhone(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
app.globalData.userInfo = res.return_data |
||||
.object |
||||
.highUser; |
||||
this.user = res.return_data |
||||
.object |
||||
.highUser; |
||||
app.globalData.token = res.return_data.uniqueCode; |
||||
uni.setStorage({ |
||||
key: "token", |
||||
data: res.return_data.uniqueCode |
||||
}) |
||||
uni.setStorage({ |
||||
key: "user", |
||||
data: res.return_data |
||||
.object |
||||
.highUser |
||||
}) |
||||
let that = this; |
||||
that.toPay(); |
||||
} |
||||
}); |
||||
}, |
||||
toPay() { |
||||
if (this.paytype == '') { |
||||
uni.showToast({ |
||||
title: '请选择支付方式', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
return; |
||||
} |
||||
uni.showLoading({ |
||||
title: '提交订单中...' |
||||
}) |
||||
if (this.couponList.reserveStatus) { |
||||
this.storeId = app.globalData.storeid |
||||
} |
||||
let goods = { |
||||
"highChildOrderList": [{ |
||||
"goodsType": 7, |
||||
"goodsId": this.couponId, |
||||
"saleCount": 1, |
||||
"storeId": this.storeId |
||||
}] |
||||
} |
||||
addOrder(goods).then(res => { |
||||
if (res.return_code == '000000') { |
||||
uni.hideLoading(); |
||||
this.jumpType = res.return_data.highChildOrderList[0].ext1; |
||||
this.orderId = res.return_data.id; |
||||
this.orderToPay(res.return_data); |
||||
} else { |
||||
uni.hideLoading(); |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}); |
||||
} |
||||
}) |
||||
}, |
||||
//获取选择支付方式 |
||||
changeRiado() { |
||||
if (!this.user.isSetHltCard) { |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '当前账号还未绑定,前往绑定', |
||||
duration: 2000, |
||||
success() { |
||||
setTimeout(() => { |
||||
uni.navigateTo({ |
||||
url: '../../pages/user/bindingCard/bindingCard' |
||||
}) |
||||
}, 1000) |
||||
} |
||||
}); |
||||
return; |
||||
} |
||||
}, |
||||
//获取订单数据 |
||||
orderToPay(item) { |
||||
let goods = { |
||||
"orderId": this.orderId |
||||
} |
||||
unionPay(goods).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.uniontopay(res.return_data.prepayid); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}); |
||||
} |
||||
}) |
||||
}, |
||||
//银联支付 |
||||
uniontopay(item) { |
||||
let that = this; |
||||
upsdk.pluginReady(function() { |
||||
upsdk.pay({ |
||||
tn: item, |
||||
success: function(res) { |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
uni.reLaunch({ |
||||
url: '../coupon-comfirmation-success/coupon-comfirmation-success' |
||||
}); |
||||
}, |
||||
fail: function(err) { |
||||
uni.showToast({ |
||||
title: err.msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
// 支付失败, err.msg 是失败原因描述, 比如TN号不合法, 或者用户取消了交易 等等。 |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
submitHandle(e) { |
||||
this.PaymentPassword = e.value; |
||||
if (this.PaymentPassword == '') { |
||||
uni.showToast({ |
||||
title: '请勿手动关闭弹窗', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
return; |
||||
} |
||||
uni.showLoading({ |
||||
title: '支付中...' |
||||
}) |
||||
if (this.paytype == 'jinbi') { |
||||
let params = { |
||||
"orderId": this.orderId, |
||||
"password": this.PaymentPassword |
||||
} |
||||
orderToGoldPay(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
uni.reLaunch({ |
||||
url: '../coupon-comfirmation-success/coupon-comfirmation-success' |
||||
}); |
||||
return; |
||||
} |
||||
if (res.return_code == '102130') { |
||||
uni.navigateTo({ |
||||
url: '../../pages/login/updatePas/updatePas' |
||||
}) |
||||
return; |
||||
} |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none' |
||||
}) |
||||
}) |
||||
return; |
||||
} |
||||
|
||||
let params = { |
||||
"orderId": this.orderId, |
||||
"cardNo": this.user.hltCardNo.cardNo, |
||||
"password": this.PaymentPassword |
||||
} |
||||
hltUnionCardPay(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
uni.reLaunch({ |
||||
url: '../coupon-comfirmation-success/coupon-comfirmation-success' |
||||
}); |
||||
return; |
||||
} |
||||
if (res.return_code == '102130') { |
||||
uni.navigateTo({ |
||||
url: '../../pages/login/updatePas/updatePas' |
||||
}) |
||||
return; |
||||
} |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: 'none' |
||||
}) |
||||
}) |
||||
|
||||
|
||||
}, |
||||
payRequest: function(self) { |
||||
uni.showLoading({ |
||||
title: '支付中...' |
||||
}) |
||||
jweixin.config({ |
||||
// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 |
||||
appId: self.return_data.appId, // 必填,公众号的唯一标识 |
||||
timestamp: self.return_data.timeStamp, // 必填,生成签名的时间戳 |
||||
nonceStr: self.return_data.nonceStr, // 必填,生成签名的随机串 |
||||
signature: self.return_data.sign, // 必填,签名,见附录1 |
||||
jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 |
||||
}); |
||||
uni.hideLoading(); |
||||
jweixin.ready(function() { |
||||
jweixin.checkJsApi({ |
||||
jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表,所有JS接口列表见附录2, |
||||
success: function(res) {}, |
||||
fail: function(res) {} |
||||
}); |
||||
jweixin.chooseWXPay({ |
||||
appId: self.return_data.appId, |
||||
timestamp: self.return_data |
||||
.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 |
||||
nonceStr: self.return_data.nonceStr, // 支付签名随机串,不长于 32 位 |
||||
package: self.return_data |
||||
.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***) |
||||
signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5' |
||||
paySign: self.return_data.sign, // 支付签名 |
||||
success: function(res) { |
||||
// 支付成功后的回调函数 |
||||
uni.showToast({ |
||||
title: '支付成功' |
||||
}) |
||||
uni.reLaunch({ |
||||
url: '../coupon-comfirmation-success/coupon-comfirmation-success' |
||||
}); |
||||
}, |
||||
cancel: function(r) {}, |
||||
fail: function(res) {} |
||||
}); |
||||
}); |
||||
|
||||
jweixin.error(function(res) { |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '支付失败了', |
||||
duration: 4000 |
||||
}); |
||||
}); |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page { |
||||
background-color: #f7f7f7; |
||||
} |
||||
|
||||
.comorder { |
||||
background-color: #FFFFFF; |
||||
border-radius: 8px; |
||||
} |
||||
|
||||
.jtcs { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
margin-top: 30rpx; |
||||
} |
||||
|
||||
.goodsimg { |
||||
align-items: center; |
||||
display: flex; |
||||
|
||||
image { |
||||
width: 170rpx; |
||||
max-height: 170rpx; |
||||
} |
||||
} |
||||
|
||||
.yhprice { |
||||
width: 100%; |
||||
height: 25px; |
||||
text-align: right; |
||||
margin-top: -20px; |
||||
} |
||||
|
||||
.price-number { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
font-size: 28upx; |
||||
height: 40upx; |
||||
|
||||
.price { |
||||
color: #FE4545; |
||||
display: flex; |
||||
max-width: 50%; |
||||
align-items: center; |
||||
} |
||||
|
||||
.number { |
||||
display: flex; |
||||
align-items: center; |
||||
width: 50%; |
||||
text-decoration: line-through; |
||||
|
||||
} |
||||
} |
||||
|
||||
.yhqky { |
||||
background: #ff0034; |
||||
color: #ffffff; |
||||
font-size: 14px; |
||||
padding-left: 5px; |
||||
padding-right: 5px; |
||||
margin-left: 8px; |
||||
padding-top: 2px; |
||||
padding-bottom: 2px; |
||||
} |
||||
|
||||
|
||||
|
||||
.addr { |
||||
width: 86%; |
||||
padding: 20upx 3%; |
||||
margin: 30upx auto 20upx auto; |
||||
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||
border-radius: 20upx; |
||||
display: flex; |
||||
|
||||
.icon { |
||||
width: 80upx; |
||||
height: 80upx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
image { |
||||
width: 60upx; |
||||
height: 60upx; |
||||
} |
||||
} |
||||
|
||||
.tel-name { |
||||
width: 100%; |
||||
display: flex; |
||||
font-size: 32upx; |
||||
|
||||
.tel { |
||||
margin-left: 40upx; |
||||
} |
||||
} |
||||
|
||||
.addres { |
||||
width: 100%; |
||||
font-size: 26upx; |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
.tccs { |
||||
box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2); |
||||
border: 1px solid #f6f6f6; |
||||
border-radius: 8px; |
||||
align-items: center; |
||||
display: flex; |
||||
|
||||
image { |
||||
width: 170rpx; |
||||
max-height: 170rpx; |
||||
} |
||||
} |
||||
|
||||
.tcrig { |
||||
margin-left: 20rpx; |
||||
} |
||||
|
||||
.info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
width: 92%; |
||||
} |
||||
|
||||
.order { |
||||
width: 86%; |
||||
padding: 10upx 3%; |
||||
margin: 30upx auto 20upx auto; |
||||
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||
border-radius: 20upx; |
||||
|
||||
.row { |
||||
margin: 20upx 0; |
||||
height: 40upx; |
||||
display: flex; |
||||
|
||||
.left { |
||||
font-size: 28upx; |
||||
} |
||||
|
||||
.right { |
||||
margin-left: 40upx; |
||||
font-size: 26upx; |
||||
color: #999; |
||||
|
||||
input { |
||||
font-size: 26upx; |
||||
color: #999; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.footer { |
||||
width: 92%; |
||||
padding: 0 4%; |
||||
background-color: #fbfbfb; |
||||
height: 100upx; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
font-size: 28upx; |
||||
position: fixed; |
||||
bottom: 0upx; |
||||
z-index: 5; |
||||
|
||||
.settlement { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
|
||||
.sum { |
||||
width: 50%; |
||||
font-size: 18px; |
||||
margin-right: 10upx; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
|
||||
.money { |
||||
color: #eb5823; |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
|
||||
.btn { |
||||
padding: 0 50rpx; |
||||
height: 80rpx; |
||||
background-color: #0083f5; |
||||
color: #fff; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 30upx; |
||||
border-radius: 40upx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.goods-list { |
||||
width: 100%; |
||||
padding: 0; |
||||
|
||||
.tis { |
||||
width: 100%; |
||||
height: 60upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 32upx; |
||||
} |
||||
|
||||
.row { |
||||
width: calc(92%); |
||||
height: calc(22vw + 40upx); |
||||
margin: 20upx auto; |
||||
|
||||
border-radius: 15upx; |
||||
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
overflow: hidden; |
||||
z-index: 4; |
||||
border: 0; |
||||
|
||||
.menu { |
||||
.icon { |
||||
color: #fff; |
||||
// font-size: 25upx; |
||||
} |
||||
|
||||
position: absolute; |
||||
width: 30%; |
||||
height: 100%; |
||||
right: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: red; |
||||
color: #fff; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.carrier { |
||||
.checkbox-box { |
||||
padding-left: 20upx; |
||||
flex-shrink: 0; |
||||
height: 22vw; |
||||
margin-right: 20upx; |
||||
} |
||||
|
||||
position: absolute; |
||||
width: 94%; |
||||
margin-left: 3%; |
||||
padding: 0 0; |
||||
height: 100%; |
||||
z-index: 3; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.goods-info { |
||||
width: 100%; |
||||
display: flex; |
||||
padding-right: 20upx; |
||||
|
||||
.img { |
||||
width: 22vw; |
||||
height: 22vw; |
||||
border-radius: 10upx; |
||||
overflow: hidden; |
||||
flex-shrink: 0; |
||||
margin-right: 10upx; |
||||
|
||||
image { |
||||
width: 22vw; |
||||
height: 22vw; |
||||
} |
||||
} |
||||
|
||||
.info { |
||||
width: 100%; |
||||
height: 22vw; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
position: relative; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
font-size: 16px; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
// text-align: justify; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.spec { |
||||
font-size: 14px; |
||||
color: #a7a7a7; |
||||
height: 30upx; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0; |
||||
border-radius: 15upx; |
||||
margin-bottom: 20vw; |
||||
} |
||||
|
||||
.price-number { |
||||
position: absolute; |
||||
width: 100%; |
||||
bottom: 0upx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
font-size: 28upx; |
||||
height: 60upx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,280 @@ |
||||
<template> |
||||
<view> |
||||
<view class="input-box"> |
||||
<view class="icon search"></view> |
||||
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" @input="toSearch()" /> |
||||
</view> |
||||
<view class="swiper"> |
||||
<view class="swiper-box"> |
||||
<swiper circular="true" autoplay="true" @change="swiperChange"> |
||||
<swiper-item v-for="swiper in swiperList" :key="swiper.id"> |
||||
<image :src="imageUrl+swiper.imgData"></image> |
||||
</swiper-item> |
||||
</swiper> |
||||
<view class="indicator"> |
||||
<view class="dots" v-for="(swiper, index) in swiperList" |
||||
:class="[currentSwiper >= index ? 'on' : '']" :key="index"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view v-if="goodsList == '' " class="mart60 fotct font14 fcor666"> |
||||
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
||||
</view> |
||||
<view class="width90 height110 mart5" v-for="(row, index) in goodsList" :key="index" @click="toGoods(row.id)"> |
||||
<image class="goodsimg flleft mart5" mode="widthFix" :src="imageUrl+row.listImg"></image> |
||||
<view class="goodsli "> |
||||
<view class="text2 fcor333 font14 fontwig6">{{row.title}}</view> |
||||
<view class="goodsxg font12 fotct">限购{{row.purchaseNum}}件</view> |
||||
|
||||
<view class="info mart10"> |
||||
<view class="price"> |
||||
¥ {{row.price}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getDiscountPackageList, |
||||
getCmsContent, |
||||
} from '../../Utils/Api.js'; |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
goodsList: [], |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'noorder.png', |
||||
imageUrl: app.globalData.imgUrl, |
||||
// 轮播图片 |
||||
swiperList: [{ |
||||
id: 1, |
||||
src: 'url1', |
||||
img: 'banner2.png' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
src: 'url2', |
||||
img: 'banner3.png' |
||||
} |
||||
], |
||||
currentSwiper: 0, |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
isNoMoreData: false, |
||||
typeId: '', |
||||
couponName: '', |
||||
brandid: '', |
||||
goodtyid: '' |
||||
}; |
||||
}, |
||||
|
||||
onLoad: function() { //option为object类型,会序列化上个页面传递的参数 |
||||
uni.setNavigationBarTitle({ |
||||
title: '优惠券包列表' |
||||
}); |
||||
this.getDiscountPackageList(); |
||||
this.getCmsContent('CMS_DISCOUNT_BANNER'); |
||||
}, |
||||
onPageScroll(e) { |
||||
|
||||
}, |
||||
//上拉加载,需要自己在page.json文件中配置"onReachBottomDistance" |
||||
onReachBottom() { |
||||
this.getDiscountPackageList(); |
||||
}, |
||||
methods: { |
||||
//获取弹出或者弹窗 |
||||
getCmsContent(item) { |
||||
let params = { |
||||
regionId: app.globalData.cityId, |
||||
categoryCode: item |
||||
} |
||||
getCmsContent(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.swiperList = res.return_data; |
||||
} |
||||
}); |
||||
}, |
||||
//轮播图指示器 |
||||
swiperChange(event) { |
||||
this.currentSwiper = event.detail.current; |
||||
}, |
||||
//优惠券包列表 |
||||
getDiscountPackageList() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
if (this.isNoMoreData) { |
||||
uni.hideLoading() |
||||
return false; |
||||
} |
||||
let pagenum = this.pageNum; |
||||
let params = { |
||||
regionId: app.globalData.cityId, |
||||
pageNum: pagenum, |
||||
pageSize: this.pageSize, |
||||
title: this.couponName |
||||
} |
||||
getDiscountPackageList(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
uni.hideLoading(); |
||||
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; |
||||
this.goodsList = this.goodsList.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.goodsList = []; |
||||
} |
||||
}) |
||||
}, |
||||
toSearch() { |
||||
this.pageNum = 1; |
||||
this.pageSize = 10; |
||||
this.isNoMoreData = false; |
||||
this.goodsList = []; |
||||
this.getDiscountPackageList(); |
||||
}, |
||||
//商品跳转 |
||||
toGoods(e) { |
||||
uni.navigateTo({ |
||||
url: '../coupon-packge-details/coupon-packge-details?id=' + e |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.input-box { |
||||
width: 90%; |
||||
margin-left: 5%; |
||||
margin-top: 15px; |
||||
height: 70rpx; |
||||
background-color: #f5f5f5; |
||||
border-radius: 10rpx; |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.icon { |
||||
display: flex; |
||||
align-items: center; |
||||
position: absolute; |
||||
top: 2px; |
||||
left: 5px; |
||||
width: 60upx; |
||||
height: 60upx; |
||||
font-size: 34upx; |
||||
color: #c0c0c0; |
||||
} |
||||
|
||||
input { |
||||
padding-left: 50upx; |
||||
height: 28upx; |
||||
font-size: 28upx; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.swiper { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 20px; |
||||
margin-bottom: 20px; |
||||
|
||||
.swiper-box { |
||||
width: 92%; |
||||
height: 150px; |
||||
overflow: hidden; |
||||
border-radius: 15upx; |
||||
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2); |
||||
//兼容ios,微信小程序 |
||||
position: relative; |
||||
z-index: 1; |
||||
|
||||
swiper { |
||||
width: 100%; |
||||
height: 150px; |
||||
|
||||
swiper-item { |
||||
image { |
||||
width: 100%; |
||||
height: 150px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.indicator { |
||||
position: absolute; |
||||
bottom: 20upx; |
||||
left: 20upx; |
||||
background-color: rgba(255, 255, 255, 0.4); |
||||
width: 150upx; |
||||
height: 5upx; |
||||
border-radius: 3upx; |
||||
overflow: hidden; |
||||
display: flex; |
||||
|
||||
.dots { |
||||
width: 0upx; |
||||
background-color: rgba(255, 255, 255, 1); |
||||
transition: all 0.3s ease-out; |
||||
|
||||
&.on { |
||||
width: (100%/3); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.goodsimg { |
||||
width: 90px; |
||||
height: 90px; |
||||
} |
||||
|
||||
.goodsli { |
||||
margin-left: 100px; |
||||
padding-top: 5px; |
||||
} |
||||
|
||||
.goodsxg { |
||||
margin-top: 5px; |
||||
border: 1px solid #eb5823; |
||||
border-radius: 5px; |
||||
color: #eb5823; |
||||
width: 55px; |
||||
padding: 3px; |
||||
} |
||||
|
||||
.info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
width: 100%; |
||||
|
||||
.price { |
||||
color: #e65339; |
||||
font-size: 30upx; |
||||
font-weight: 600; |
||||
width: 50%; |
||||
} |
||||
|
||||
.slogan { |
||||
width: 50%; |
||||
color: #807c87; |
||||
font-size: 24upx; |
||||
text-decoration: line-through; |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,988 @@ |
||||
<template> |
||||
<view> |
||||
<!-- #ifdef H5 --> |
||||
<view class="header"> |
||||
<!-- 头部-默认显示 --> |
||||
<view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }"> |
||||
<view class="back"> |
||||
<view class="icon xiangqian" @tap="back" v-if="showBack"></view> |
||||
</view> |
||||
<view class="middle"></view> |
||||
</view> |
||||
</view> |
||||
<!-- #endif --> |
||||
<!-- 底部菜单 --> |
||||
<view class="footer"> |
||||
<button class="width100 fotct btnfot" @click="buy"> |
||||
立即兑换 |
||||
</button> |
||||
</view> |
||||
<!-- 商品主图轮播 --> |
||||
<view class="swiper-box"> |
||||
<swiper circular="true" autoplay="true" @change="swiperChange"> |
||||
<swiper-item v-for="(swiper,index) in swiperList" :key="index"> |
||||
<image mode="widthFix" :src="imageUrl+swiper" @click="perImage(swiper)"></image> |
||||
</swiper-item> |
||||
</swiper> |
||||
<view class="indicator">{{currentSwiper+1}}/{{swiperList.length}}</view> |
||||
</view> |
||||
<view class="width100 height60 backcorlr"> |
||||
<view class="flleft width70 fcorfff"> |
||||
<view class="font13 mart15 margle20">¥<text |
||||
class="font20 paddleft5">{{goodsData.packageDetail.price}}</text></view> |
||||
</view> |
||||
<view class="flright width30"> |
||||
<view class="xgnum">限购{{goodsData.packageDetail.purchaseNum}}件</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 标题 价格 --> |
||||
<view class="info-box goods-info"> |
||||
<view class="font16 fcor333 fontwig6"> |
||||
{{goodsData.packageDetail.title}} |
||||
</view> |
||||
<view class="mart10 width100 font14 fcor999 height20"> |
||||
<view class="width70 flleft">库存:{{goodsData.packageDetail.totalStock}}件</view> |
||||
</view> |
||||
</view> |
||||
<!-- 服务-规则选择 --> |
||||
<view class="height60 width100 backcorfff" @click="showPopup()"> |
||||
<view class="width80p flleft" style="padding-left: 4%;line-height: 60px; "> |
||||
优惠券包 |
||||
</view> |
||||
<view class="width15 flright fotct"> |
||||
<image class="jtcs" src="../../static/img/jt.png"></image> |
||||
</view> |
||||
</view> |
||||
<!-- 详情 --> |
||||
<view class="description"> |
||||
<view class="title">———— 商品详情 ————</view> |
||||
<view class="content marb65"> |
||||
<image mode="widthFix" class="width100" v-for="codes in couponDesc" :key="codes" :src="imageUrl+codes" |
||||
@click="perImage(codes)"> |
||||
</image> |
||||
</view> |
||||
</view> |
||||
<wybPopup ref="popup" type="bottom" width="500" scrollY="true" radius="6" :showCloseIcon="true"> |
||||
<view class="fotct font18 fontwig6 fcor333 mart10 height30">优惠券包</view> |
||||
<view class="width92 height110 tccs mart10" v-for="product in goodsData.discountList" :key="product.id"> |
||||
<image mode="widthFix" class="flleft" src="../../static/img/logo.png"></image> |
||||
<view class="tcrig"> |
||||
<view class="font16 fontwig6 fcor333 text2">{{ product.discountDetail.discountName}}</view> |
||||
<view class="font14 fcor999 mart5">数量: x{{product.num}}</view> |
||||
</view> |
||||
</view> |
||||
</wybPopup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getDiscountPackageDetail |
||||
} from '../../Utils/Api.js'; |
||||
import wybPopup from '../../components/wyb-popup/wyb-popup.vue'; |
||||
let app = getApp() |
||||
export default { |
||||
components: { |
||||
wybPopup |
||||
}, |
||||
data() { |
||||
return { |
||||
//控制渐变标题栏的参数 |
||||
beforeHeaderzIndex: 11, //层级 |
||||
afterHeaderOpacity: 0, //不透明度 |
||||
//是否显示返回按钮 |
||||
// #ifndef MP |
||||
showBack: true, |
||||
// #endif |
||||
//轮播主图数据 |
||||
swiperList: [], |
||||
couponDesc: [], |
||||
//轮播图下标 |
||||
currentSwiper: 0, |
||||
// 商品信息 |
||||
goodsData: "", |
||||
//商品描述html |
||||
desid: '', |
||||
imageUrl: app.globalData.imgUrl, |
||||
|
||||
}; |
||||
}, |
||||
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}`; |
||||
} |
||||
}, |
||||
onLoad(option) { |
||||
this.desid = option.id; |
||||
this.getDiscountPackageDetail(); |
||||
// #ifdef MP |
||||
//小程序隐藏返回按钮 |
||||
this.showBack = false; |
||||
// #endif |
||||
//option为object类型,会序列化上个页面传递的参数 |
||||
}, |
||||
methods: { |
||||
//优惠券包详情 |
||||
getDiscountPackageDetail() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
let params = { |
||||
packageId: this.desid |
||||
} |
||||
getDiscountPackageDetail(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.goodsData = res.return_data; |
||||
this.swiperList = res.return_data.packageDetail.bannerImg.split(','); |
||||
this.couponDesc = res.return_data.packageDetail.detailsImg.split(','); |
||||
uni.hideLoading() |
||||
} else { |
||||
uni.hideLoading() |
||||
} |
||||
}) |
||||
}, |
||||
//显示弹出 |
||||
showPopup() { |
||||
this.$refs.popup.show(); |
||||
}, |
||||
//查看大图 |
||||
perImage(item) { |
||||
uni.previewImage({ |
||||
current: 0, //预览图片的下标 |
||||
urls: [this.imageUrl + item] //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以 |
||||
}) |
||||
}, |
||||
//轮播图指示器 |
||||
swiperChange(event) { |
||||
this.currentSwiper = event.detail.current; |
||||
}, |
||||
buy() { |
||||
let that = this; |
||||
if (that.goodsData.totalStock == 0) { |
||||
uni.showToast({ |
||||
title: '库存不足', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
return; |
||||
} |
||||
uni.showToast({ |
||||
title: '提交订单...', |
||||
icon: 'none', |
||||
duration: 2000, |
||||
success() { |
||||
uni.navigateTo({ |
||||
url: '../coupon-comfirmation/coupon-comfirmation?id=' + that.desid |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
//返回上一页 |
||||
back() { |
||||
uni.navigateBack(); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page { |
||||
background-color: #f8f8f8; |
||||
} |
||||
|
||||
button::after { |
||||
border: none |
||||
} |
||||
|
||||
.jtcs { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
margin-top: 40rpx; |
||||
} |
||||
|
||||
.tccs { |
||||
box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2); |
||||
border: 1px solid #f6f6f6; |
||||
border-radius: 8px; |
||||
align-items: center; |
||||
display: flex; |
||||
|
||||
image { |
||||
width: 170rpx; |
||||
max-height: 170rpx; |
||||
} |
||||
} |
||||
|
||||
.tcrig { |
||||
margin-left: 20rpx; |
||||
} |
||||
|
||||
.info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-end; |
||||
width: 92%; |
||||
|
||||
.price { |
||||
color: #e65339; |
||||
font-size: 15px; |
||||
font-weight: 600; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.slogan { |
||||
color: #807c87; |
||||
font-size: 24upx; |
||||
text-decoration: line-through; |
||||
} |
||||
} |
||||
|
||||
.xgnum { |
||||
background-color: #FFFFFF; |
||||
color: #ff722e; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
font-size: 13px; |
||||
width: 60%; |
||||
padding-left: 5%; |
||||
padding-right: 5%; |
||||
border-radius: 15px; |
||||
margin-top: 15px; |
||||
text-align: center; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
@keyframes showPopup { |
||||
0% { |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes hidePopup { |
||||
0% { |
||||
opacity: 1; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes showLayer { |
||||
0% { |
||||
transform: translateY(0); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateY(-100%); |
||||
} |
||||
} |
||||
|
||||
@keyframes hideLayer { |
||||
0% { |
||||
transform: translateY(-100%); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateY(0); |
||||
} |
||||
} |
||||
|
||||
.icon { |
||||
font-size: 26upx; |
||||
} |
||||
|
||||
.status { |
||||
width: 100%; |
||||
height: 0; |
||||
position: fixed; |
||||
z-index: 10; |
||||
top: 0; |
||||
/* #ifdef APP-PLUS */ |
||||
height: var(--status-bar-height); //覆盖样式 |
||||
/* #endif */ |
||||
background-color: #f1f1f1; |
||||
transition: opacity 0.05s linear; |
||||
} |
||||
|
||||
.header { |
||||
width: 100%; |
||||
|
||||
height: 100upx; |
||||
display: flex; |
||||
align-items: center; |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 10; |
||||
/* #ifdef APP-PLUS */ |
||||
top: var(--status-bar-height); |
||||
|
||||
/* #endif */ |
||||
.before, |
||||
.after { |
||||
width: 92%; |
||||
padding: 0 4%; |
||||
height: 100upx; |
||||
display: flex; |
||||
align-items: center; |
||||
position: fixed; |
||||
top: 0; |
||||
/* #ifdef APP-PLUS */ |
||||
top: var(--status-bar-height); |
||||
/* #endif */ |
||||
transition: opacity 0.05s linear; |
||||
|
||||
.back { |
||||
width: 125upx; |
||||
height: 60upx; |
||||
flex-shrink: 0; |
||||
|
||||
.icon { |
||||
margin-left: -10%; |
||||
width: 60upx; |
||||
height: 60upx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 42upx; |
||||
} |
||||
} |
||||
|
||||
.middle { |
||||
width: 100%; |
||||
} |
||||
|
||||
.icon-btn { |
||||
width: 125upx; |
||||
height: 60upx; |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
|
||||
.icon { |
||||
&:first-child { |
||||
margin-right: 5upx; |
||||
} |
||||
|
||||
width: 60upx; |
||||
height: 60upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 42upx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.before { |
||||
.back { |
||||
.icon { |
||||
color: #fff; |
||||
background-color: rgba(0, 0, 0, 0.2); |
||||
border-radius: 100%; |
||||
} |
||||
} |
||||
|
||||
.icon-btn { |
||||
.icon { |
||||
color: #fff; |
||||
background-color: rgba(0, 0, 0, 0.2); |
||||
border-radius: 100%; |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
.after { |
||||
background-color: #f1f1f1; |
||||
|
||||
.back { |
||||
.icon { |
||||
color: #666; |
||||
} |
||||
} |
||||
|
||||
.icon-btn { |
||||
.icon { |
||||
color: #666; |
||||
} |
||||
} |
||||
|
||||
.middle { |
||||
font-size: 32upx; |
||||
height: 90upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 0 7%; |
||||
|
||||
view { |
||||
width: (100%/3); |
||||
padding: 0 3%; |
||||
margin: 0 3%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
&.on { |
||||
margin-bottom: -4upx; |
||||
color: #f47952; |
||||
border-bottom: solid 4upx #f47952; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.swiper-box { |
||||
position: relative; |
||||
width: 100%; |
||||
|
||||
swiper { |
||||
width: 100%; |
||||
|
||||
swiper-item { |
||||
image { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.indicator { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 0 25upx; |
||||
height: 40upx; |
||||
border-radius: 40upx; |
||||
font-size: 22upx; |
||||
position: absolute; |
||||
bottom: 20upx; |
||||
right: 20upx; |
||||
color: #fff; |
||||
background-color: rgba(0, 0, 0, 0.2); |
||||
} |
||||
} |
||||
|
||||
.info-box { |
||||
width: 92%; |
||||
padding: 4%; |
||||
background-color: #fff; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
|
||||
.goods-info { |
||||
.price { |
||||
font-size: 15px; |
||||
font-weight: 600; |
||||
color: #f47925; |
||||
} |
||||
|
||||
.zprice { |
||||
text-decoration: line-through; |
||||
} |
||||
|
||||
.title { |
||||
font-size: 30upx; |
||||
} |
||||
} |
||||
|
||||
.spec { |
||||
.row { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 5px 0 5px 0; |
||||
|
||||
.text { |
||||
font-size: 24upx; |
||||
color: #a2a2a2; |
||||
margin-right: 20upx; |
||||
} |
||||
|
||||
.content { |
||||
font-size: 28upx; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
.serviceitem { |
||||
margin-right: 10upx; |
||||
} |
||||
|
||||
.sp { |
||||
width: 100%; |
||||
display: flex; |
||||
|
||||
view { |
||||
background-color: #f6f6f6; |
||||
padding: 5upx 10upx; |
||||
color: #999; |
||||
margin-right: 10upx; |
||||
font-size: 20upx; |
||||
border-radius: 5upx; |
||||
|
||||
&.on { |
||||
border: solid 1upx #f47952; |
||||
padding: 4upx 8upx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.arrow { |
||||
position: absolute; |
||||
right: 4%; |
||||
|
||||
.icon { |
||||
color: #ccc; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.comments { |
||||
.row { |
||||
width: 100%; |
||||
height: 40upx; |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 0 0 30upx 0; |
||||
|
||||
.text { |
||||
font-size: 30upx; |
||||
} |
||||
|
||||
.arrow { |
||||
font-size: 28upx; |
||||
position: absolute; |
||||
right: 4%; |
||||
color: #17e6a1; |
||||
|
||||
.show { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.icon { |
||||
color: #17e6a1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.comment { |
||||
width: 100%; |
||||
|
||||
.user-info { |
||||
width: 100%; |
||||
height: 40upx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.face { |
||||
width: 40upx; |
||||
height: 40upx; |
||||
margin-right: 8upx; |
||||
|
||||
image { |
||||
width: 40upx; |
||||
height: 40upx; |
||||
border-radius: 100%; |
||||
} |
||||
} |
||||
|
||||
.username { |
||||
font-size: 24upx; |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
margin-top: 10upx; |
||||
font-size: 26upx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.description { |
||||
.title { |
||||
width: 100%; |
||||
height: 80upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 26upx; |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
.footer { |
||||
position: fixed; |
||||
bottom: 0upx; |
||||
width: 100%; |
||||
height: 99upx; |
||||
color: #FFFFFF; |
||||
border-top: solid 1upx #eee; |
||||
background-color: #0083f5; |
||||
z-index: 2; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.btnfot { |
||||
text-align: center; |
||||
padding: 0; |
||||
border-radius: 0; |
||||
height: 48px; |
||||
background-color: #0083f5; |
||||
color: #ffffff; |
||||
} |
||||
|
||||
.icons { |
||||
display: flex; |
||||
height: 80upx; |
||||
margin-left: -4%; |
||||
|
||||
.box { |
||||
width: 80upx; |
||||
height: 80upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.icon { |
||||
font-size: 40upx; |
||||
color: #828282; |
||||
} |
||||
|
||||
.text { |
||||
display: flex; |
||||
justify-content: center; |
||||
width: 100%; |
||||
font-size: 22upx; |
||||
color: #666; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.btn { |
||||
height: 80upx; |
||||
border-radius: 40upx; |
||||
overflow: hidden; |
||||
display: flex; |
||||
margin-right: -2%; |
||||
|
||||
.joinCart, |
||||
.buy { |
||||
height: 80upx; |
||||
padding: 0 40upx; |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28upx; |
||||
} |
||||
|
||||
.joinCart { |
||||
background-color: #f0b46c; |
||||
} |
||||
|
||||
.buy { |
||||
background-color: #0083f5; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.popup { |
||||
position: fixed; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 20; |
||||
display: none; |
||||
|
||||
.mask { |
||||
position: fixed; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 21; |
||||
background-color: rgba(0, 0, 0, 0.6); |
||||
} |
||||
|
||||
.layer { |
||||
position: fixed; |
||||
z-index: 22; |
||||
bottom: -70%; |
||||
width: 92%; |
||||
padding: 0 4%; |
||||
height: 70%; |
||||
border-radius: 20upx 20upx 0 0; |
||||
background-color: #fff; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-content: space-between; |
||||
|
||||
.content { |
||||
width: 100%; |
||||
padding: 20upx 0; |
||||
} |
||||
|
||||
.btn { |
||||
width: 100%; |
||||
height: 100upx; |
||||
|
||||
.button { |
||||
width: 100%; |
||||
height: 80upx; |
||||
border-radius: 40upx; |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background-color: #f47952; |
||||
font-size: 28upx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.show { |
||||
display: block; |
||||
|
||||
.mask { |
||||
animation: showPopup 0.2s linear both; |
||||
} |
||||
|
||||
.layer { |
||||
animation: showLayer 0.2s linear both; |
||||
} |
||||
} |
||||
|
||||
&.hide { |
||||
display: block; |
||||
|
||||
.mask { |
||||
animation: hidePopup 0.2s linear both; |
||||
} |
||||
|
||||
.layer { |
||||
animation: hideLayer 0.2s linear both; |
||||
} |
||||
} |
||||
|
||||
&.none { |
||||
display: none; |
||||
} |
||||
|
||||
&.service { |
||||
.row { |
||||
margin: 30upx 0; |
||||
|
||||
.title { |
||||
font-size: 30upx; |
||||
margin: 10upx 0; |
||||
} |
||||
|
||||
.description { |
||||
font-size: 28upx; |
||||
color: #999; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.spec { |
||||
.title { |
||||
font-size: 30upx; |
||||
margin: 30upx 0; |
||||
} |
||||
|
||||
.sp { |
||||
display: flex; |
||||
|
||||
view { |
||||
font-size: 28upx; |
||||
padding: 5upx 20upx; |
||||
border-radius: 8upx; |
||||
margin: 0 30upx 20upx 0; |
||||
background-color: #f6f6f6; |
||||
|
||||
&.on { |
||||
padding: 3upx 18upx; |
||||
border: solid 1upx #f47925; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.length { |
||||
margin-top: 30upx; |
||||
border-top: solid 1upx #aaa; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding-top: 20upx; |
||||
|
||||
.text { |
||||
font-size: 30upx; |
||||
} |
||||
|
||||
.number { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.input { |
||||
width: 80upx; |
||||
height: 60upx; |
||||
margin: 0 10upx; |
||||
background-color: #f3f3f3; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
|
||||
input { |
||||
width: 80upx; |
||||
height: 60upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
font-size: 26upx; |
||||
} |
||||
} |
||||
|
||||
.sub, |
||||
.add { |
||||
width: 60upx; |
||||
height: 60upx; |
||||
background-color: #f3f3f3; |
||||
border-radius: 5upx; |
||||
|
||||
.icon { |
||||
font-size: 30upx; |
||||
width: 60upx; |
||||
height: 60upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.share { |
||||
display: none; |
||||
|
||||
&.show { |
||||
display: block; |
||||
|
||||
.mask { |
||||
animation: showPopup 0.15s linear both; |
||||
} |
||||
|
||||
.layer { |
||||
animation: showLayer 0.15s linear both; |
||||
} |
||||
} |
||||
|
||||
&.hide { |
||||
display: block; |
||||
|
||||
.mask { |
||||
animation: hidePopup 0.15s linear both; |
||||
} |
||||
|
||||
.layer { |
||||
animation: hideLayer 0.15s linear both; |
||||
} |
||||
} |
||||
|
||||
&.none { |
||||
display: none; |
||||
} |
||||
|
||||
.mask { |
||||
background-color: rgba(0, 0, 0, .5); |
||||
position: fixed; |
||||
width: 100%; |
||||
height: 100%; |
||||
top: 0; |
||||
z-index: 11; |
||||
} |
||||
|
||||
.layer { |
||||
width: 92%; |
||||
position: fixed; |
||||
z-index: 12; |
||||
padding: 0 4%; |
||||
top: 100%; |
||||
background-color: rgba(255, 255, 255, 0.9); |
||||
|
||||
.list { |
||||
width: 100%; |
||||
display: flex; |
||||
padding: 10upx 0 30upx 0; |
||||
|
||||
.box { |
||||
width: 25%; |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
|
||||
image { |
||||
width: 13.8vw; |
||||
height: 13.8vw; |
||||
} |
||||
|
||||
.title { |
||||
margin-top: 10upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
width: 100%; |
||||
font-size: 26upx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.btn { |
||||
width: 100%; |
||||
height: 100upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 28upx; |
||||
border-top: solid 1upx #666666; |
||||
} |
||||
|
||||
.h1 { |
||||
width: 100%; |
||||
height: 80upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 34upx; |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
@ -0,0 +1,119 @@ |
||||
<template> |
||||
<view> |
||||
<image class="width94 mart20" mode="widthFix" :src="imagewxUrl+imgadres"></image> |
||||
<!-- 分割线 --> |
||||
<view class="title-split"> |
||||
<view></view> |
||||
<text>商品分类</text> |
||||
<view></view> |
||||
</view> |
||||
|
||||
<view v-if="listgoods == '' " class="mart60 fotct font14 fcor666"> |
||||
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres1"></image> |
||||
</view> |
||||
<!-- 分类--> |
||||
<view class="width94"> |
||||
<view class="width50 flleft fotct mart5" v-for="(item,index) in listgoods" :key="item" @click="jumpbrand(item)"> |
||||
<image :src="imageUrl+item.img" class="preimg"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getListGoodsType |
||||
} from '../../Utils/Api.js'; |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
imageUrl: app.globalData.imgUrl, |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'preimg.png', |
||||
imgadres1: 'noorder.png', |
||||
listgoods: [], |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
isNoMoreData: false, |
||||
} |
||||
}, |
||||
onLoad() { |
||||
this.getListGoodsType(); |
||||
}, |
||||
onReachBottom() { |
||||
this.getListGoodsType(); |
||||
}, |
||||
methods: { |
||||
//查询分类 |
||||
getListGoodsType() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
if (this.isNoMoreData) { |
||||
uni.hideLoading() |
||||
return false; |
||||
} |
||||
let pagenum = this.pageNum; |
||||
let params = { |
||||
pageNum: pagenum, |
||||
pageSize: this.pageSize, |
||||
} |
||||
getListGoodsType(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; |
||||
this.listgoods = this.listgoods.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.listgoods = []; |
||||
} |
||||
}) |
||||
}, |
||||
// 跳转品牌 |
||||
jumpbrand(item) { |
||||
uni.navigateTo({ |
||||
url: '../brand-classification/brand-classification?id='+item.id |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.title-split { |
||||
margin: 30rpx 0 28rpx 0; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
text { |
||||
color: #161616; |
||||
font-weight: 500; |
||||
font-size: 30rpx; |
||||
padding: 0 24rpx; |
||||
} |
||||
|
||||
view { |
||||
width: 140rpx; |
||||
height: 4rpx; |
||||
border-radius: 3rpx; |
||||
|
||||
&:first-of-type { |
||||
background: linear-gradient(90deg, rgba(98, 98, 98, 0) 0%, #333333 100%); |
||||
} |
||||
|
||||
&:last-of-type { |
||||
background: linear-gradient(90deg, #333333 0%, rgba(98, 98, 98, 0) 100%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.preimg { |
||||
width: 120px; |
||||
height: 80px; |
||||
} |
||||
</style> |
@ -0,0 +1,95 @@ |
||||
<template> |
||||
<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> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getStoreListByCoupon |
||||
} from '../../Utils/Api.js'; |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
storeList: [], |
||||
couDesId: '', |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres1: 'dhl.png', |
||||
pageNum: 1, |
||||
pageSize: 15, |
||||
isNoMoreData: false |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.couDesId = options.id; |
||||
this.getStoreListByCoupon(); |
||||
}, |
||||
onReachBottom() { |
||||
this.getStoreListByCoupon(); |
||||
}, |
||||
methods: { |
||||
/** |
||||
* 查询门店列表 |
||||
*/ |
||||
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() |
||||
} |
||||
}) |
||||
}, |
||||
//导航 |
||||
seeloaction(e) { |
||||
uni.openLocation({ |
||||
latitude: Number(e.latitude), //目的地的定位 |
||||
longitude: Number(e.longitude), //目的地的定位 |
||||
name: e.storeName, |
||||
address: e.address |
||||
}) |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.stoCont { |
||||
border-bottom: 1px solid #f6f6f6; |
||||
height: 140rpx; |
||||
} |
||||
</style> |
After Width: | Height: | Size: 4.1 KiB |
Loading…
Reference in new issue