292 lines
6.6 KiB
Vue
292 lines
6.6 KiB
Vue
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<u-navbar title="充值中心" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
|
||
|
|
title-size='36' height='36' id="navbar">
|
||
|
|
</u-navbar>
|
||
|
|
<view class="topcz">
|
||
|
|
<view class="topname">
|
||
|
|
[Deep] 会员充值
|
||
|
|
</view>
|
||
|
|
<view class="topprice">
|
||
|
|
充值金额
|
||
|
|
</view>
|
||
|
|
<view class="topinp">
|
||
|
|
￥ <input type="text" v-model="rechargeAmount" placeholder="请填写充值金额"/>
|
||
|
|
</view>
|
||
|
|
<view class="topanniu" @click="btnczs">
|
||
|
|
确认充值
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="taocan">
|
||
|
|
套餐充值
|
||
|
|
</view>
|
||
|
|
<view class="taocanlist" v-for="(item,index) in tclist" :key="index" @click="btncz(item)">
|
||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uELr9f0UbIC3vqBqTpr5" mode=""></image>
|
||
|
|
<view class="tcwz">
|
||
|
|
<view class="czprice">
|
||
|
|
充值{{item.rechargeAmount}}元赠送{{item.giftedAmount}}元
|
||
|
|
</view>
|
||
|
|
<view class="ljcz">
|
||
|
|
立即充值
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
bgc: {
|
||
|
|
backgroundColor: "#010000",
|
||
|
|
},
|
||
|
|
tclist:[],
|
||
|
|
channelId:'',
|
||
|
|
rechargeAmount:''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getchannelId()
|
||
|
|
this.gettclist()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取充值套餐
|
||
|
|
gettclist(){
|
||
|
|
this.$u.get(`/app/rechargeActivity/list?storeId=${this.$store.state.storeId}`).then(res => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.tclist = res.data
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取渠道id
|
||
|
|
getchannelId(){
|
||
|
|
this.$u.get(`/app/channel/list?appId=${this.$store.state.appid}&bstType=3&storeId=${this.$store.state.storeId}`).then(res => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.channelId = res.data[0].channelId
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 点击确认充值
|
||
|
|
btnczs(){
|
||
|
|
uni.showLoading({
|
||
|
|
title: '准备支付中...',
|
||
|
|
mask: true
|
||
|
|
})
|
||
|
|
let data = {
|
||
|
|
storeId:this.$store.state.storeId,
|
||
|
|
appId:this.$store.state.appid,
|
||
|
|
channelId:this.channelId,
|
||
|
|
rechargeAmount:this.rechargeAmount,
|
||
|
|
}
|
||
|
|
this.$u.post(`/app/rechargeOrder`,data).then(resp => {
|
||
|
|
if (resp.code == 200) {
|
||
|
|
uni.requestPayment({
|
||
|
|
provider: 'wxpay',
|
||
|
|
timeStamp: resp.data.payParams.timeStamp,
|
||
|
|
nonceStr: resp.data.payParams.nonceStr,
|
||
|
|
package: resp.data.payParams.packageVal,
|
||
|
|
signType: resp.data.payParams.signType,
|
||
|
|
paySign: resp.data.payParams.paySign,
|
||
|
|
success: (respc) => {
|
||
|
|
this.$u.put(`/app/pay/refreshPayResult?no=${resp.data.pay.no}`).then((res) => {
|
||
|
|
uni.hideLoading()
|
||
|
|
this.rechargeAmount = ''
|
||
|
|
uni.showToast({
|
||
|
|
title: '支付成功',
|
||
|
|
icon: 'success',
|
||
|
|
duration: 2000
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateBack()
|
||
|
|
}, 1000)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail(err) {
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.hideLoading()
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: res.msg,
|
||
|
|
showCancel: false,
|
||
|
|
success: function(res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
|
||
|
|
} else if (res.cancel) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 点击立即充值
|
||
|
|
btncz(item){
|
||
|
|
uni.showLoading({
|
||
|
|
title: '准备支付中...',
|
||
|
|
mask: true
|
||
|
|
})
|
||
|
|
let data = {
|
||
|
|
storeId:this.$store.state.storeId,
|
||
|
|
appId:this.$store.state.appid,
|
||
|
|
channelId:this.channelId,
|
||
|
|
rechargeAmount:item.rechargeAmount,
|
||
|
|
giftedAmount:item.giftedAmount,
|
||
|
|
rechargeActivityId:item.id
|
||
|
|
}
|
||
|
|
this.$u.post(`/app/rechargeOrder`,data).then(resp => {
|
||
|
|
if (resp.code == 200) {
|
||
|
|
uni.requestPayment({
|
||
|
|
provider: 'wxpay',
|
||
|
|
timeStamp: resp.data.payParams.timeStamp,
|
||
|
|
nonceStr: resp.data.payParams.nonceStr,
|
||
|
|
package: resp.data.payParams.packageVal,
|
||
|
|
signType: resp.data.payParams.signType,
|
||
|
|
paySign: resp.data.payParams.paySign,
|
||
|
|
success: (respc) => {
|
||
|
|
this.$u.put(`/app/pay/refreshPayResult?no=${resp.data.pay.no}`).then((res) => {
|
||
|
|
uni.hideLoading()
|
||
|
|
uni.showToast({
|
||
|
|
title: '支付成功',
|
||
|
|
icon: 'success',
|
||
|
|
duration: 2000
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateBack()
|
||
|
|
}, 1000)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail(err) {
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.hideLoading()
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: res.msg,
|
||
|
|
showCancel: false,
|
||
|
|
success: function(res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
|
||
|
|
} else if (res.cancel) {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
background: #010000;
|
||
|
|
padding-bottom: 100rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.taocan{
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
margin-top: 74rpx;
|
||
|
|
padding: 0 30rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.taocanlist{
|
||
|
|
width: 690rpx;
|
||
|
|
height: 216rpx;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 18rpx;
|
||
|
|
position: relative;
|
||
|
|
image{
|
||
|
|
width: 690rpx;
|
||
|
|
height: 216rpx;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
.tcwz{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
height: 216rpx;
|
||
|
|
padding: 0 32rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.czprice{
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
.ljcz{
|
||
|
|
width: 208rpx;
|
||
|
|
height: 62rpx;
|
||
|
|
background: #FF8998;
|
||
|
|
border-radius: 34rpx 34rpx 34rpx 34rpx;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 62rpx;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.topcz{
|
||
|
|
padding: 0 30rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.topname{
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
margin-top: 42rpx;
|
||
|
|
}
|
||
|
|
.topprice{
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
margin-top: 24rpx;
|
||
|
|
}
|
||
|
|
.topsm{
|
||
|
|
view{
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.topinp{
|
||
|
|
margin-top: 42rpx;
|
||
|
|
border-bottom: 1rpx solid #D8D8D8;
|
||
|
|
display: flex;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
padding-bottom: 8rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
input{
|
||
|
|
margin-left: 12rpx;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.topanniu{
|
||
|
|
width: 588rpx;
|
||
|
|
height: 86rpx;
|
||
|
|
background: #FF8998;
|
||
|
|
border-radius: 43rpx 43rpx 43rpx 43rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #0E0C0C;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 44rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 86rpx;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|