You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

252 lines
4.9 KiB

<template>
<view class="container">
<view class="top">
<view class="topTitle">当前余额</view>
<view class="inputs one">
¥{{myMoney}}
</view>
</view>
<view class="top">
<view class="topTitle">充值金额</view>
<view class="inputs">
<span style="margin-right: 10rpx;">¥</span><input class="chongzhi" type="number" v-model="money" @input="inputText" placeholder="请输入充值金额" />
</view>
</view>
<view class="bottom">
<view class="bottomTitle">充值面值</view>
<view class="miane">
<view v-for="(item,index) in lists" class="chje" @click="btns(item)"
:class="onclicks==index?'active':''">充值<span>{{item.money}}</span></view>
</view>
</view>
<button class="btnCz" @click="btnCz">立即充值</button>
<view style="width: 100%;text-align: center;font-size: 26rpx;color: #999999;margin-top: 40rpx;" @tap="goCustom">联系客服</view>
</view>
</template>
<script>
export default {
data() {
return {
money: '',
myMoney:0,
onclicks: 5,
lists: [{
id: 0,
money: 50
},
{
id: 1,
money: 100
},
{
id: 2,
money: 200
},
{
id: 3,
money: 500
}
],
openWay: 2
};
},
onShow() {
let userId = this.$queue.getData('userId');
if(userId){
this.getUserInfointegral(userId);
}
},
methods: {
inputText(e){
this.onclicks = 5;
},
goCustom(){
uni.navigateTo({
url: '/pages/my/customer'
});
},
//获取用户积分信息
getUserInfointegral(userId) {
this.$Request.getT('/goodsMerchant/selectMerchantMoney?userId=' + userId).then(res => {
if (res.code === 0) {
let money = res.data.cannotMoney ? res.data.cannotMoney : 0;
let cashMoney = res.data.mayMoney ? res.data.mayMoney : 0;
this.myMoney = parseFloat(money) + parseFloat(cashMoney);
// this.mymoney = res.data.mayMoney ? res.data.mayMoney : 0;
}
});
},
btns(row) {
this.money = row.money;
this.onclicks = row.id
},
btnCz() {
let that = this;
if (!/^\d+$/.test(this.money)) {
uni.showToast({
icon: 'none',
title: '请输入正确金额,纯数字不能包含特殊字符和小数'
});
return;
}
if (this.money < 1) {
uni.showToast({
icon: 'none',
title: '金额必须大于1元'
});
return;
}
uni.showLoading({
title: '支付中...'
});
let userId = this.$queue.getData('userId');
let wxId = this.$queue.getData('wxId');
// #ifdef MP-WEIXIN
// 支付
that.$Request.postT('/apiPay/order/wxPayWx?userId=' + userId + '&wxId=' + wxId + '&money=' + this
.money).then(res => {
console.log('支付接口', res)
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.timestamp,
nonceStr: res.noncestr,
package: res.package,
signType: res.signType,
paySign: res.sign,
success: function(res) {
console.log('success:' + JSON.stringify(res));
uni.showToast({
title: '支付成功',
icon: 'success'
})
that.getUserInfointegral(userId);
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
uni.showToast({
title: '支付失败',
icon: 'none'
})
}
});
})
// #endif
},
}
}
</script>
<style lang='scss'>
page {
/* background: #fff; */
}
.container {
padding: 0 4%;
.top {
background: #fff;
margin: 30rpx 0;
border-radius: 20rpx;
padding: 20rpx;
.topTitle {
font-size: 30rpx;
line-height: 60rpx;
}
.inputs {
display: flex;
margin: 10rpx 0;
font-size: 44rpx;
color: #333;
height: 70rpx;
align-items: center;
font-weight: bold;
/* position: relative; */
.chongzhi {
width: 80%;
height: 70rpx;
}
}
.one {
border-bottom: none;
.yuan {
font-size: 28rpx;
}
.kyje {
position: absolute;
bottom: 0;
right: 0;
font-size: 24rpx;
color: #666;
.je {
color: #FF4701;
}
}
}
.ktxje {
span {
color: #FF4701;
}
}
}
.bottom {
background: #fff;
margin: 30rpx 0;
border-radius: 20rpx;
padding: 20rpx;
.bottomTitle {
font-size: 30rpx;
line-height: 60rpx;
}
.miane {
width: 100%;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
.chje {
border: 1rpx solid #E6E6E6;
width: 48%;
line-height: 112rpx;
margin-top: 30rpx;
text-align: center;
border-radius: 8rpx;
}
}
}
.active {
border: none;
background-image: url(https://h5.canmoujiang.com/img/20210714/0202b591649e4d59b35a5341f56fc712.png);
background-repeat: no-repeat;
background-size: 100%;
}
.btnCz {
margin-top: 50rpx;
border-radius: 40rpx;
border: none;
background: #FF4701;
color: #fff;
}
}
</style>