434 lines
8.8 KiB
Vue
434 lines
8.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="recharge">
|
|||
|
|
<view class="block">
|
|||
|
|
<view class="title">
|
|||
|
|
我的账户
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="my">
|
|||
|
|
我的账户余额：
|
|||
|
|
<text class="balance" :class="'text-' + themeColor.name">{{
|
|||
|
|
(userInfo.allPredeposit ) || '0'
|
|||
|
|
}}</text>
|
|||
|
|
元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="block">
|
|||
|
|
<view class="title">
|
|||
|
|
充值金额
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="amount">
|
|||
|
|
<view class="list">
|
|||
|
|
<view
|
|||
|
|
class="box"
|
|||
|
|
v-for="(amount, index) in amountList"
|
|||
|
|
:key="index"
|
|||
|
|
@tap="select(amount)"
|
|||
|
|
:class="amount.price == inputAmount ? 'bg-' + themeColor.name : 'on'"
|
|||
|
|
>
|
|||
|
|
<view class="real">{{ amount.price }}元</view>
|
|||
|
|
<text class="give">赠送 {{ amount.give_price }}元</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="num">
|
|||
|
|
<view class="text">
|
|||
|
|
自定义充值金额
|
|||
|
|
</view>
|
|||
|
|
<view class="input">
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
:class="'text-' + themeColor.name"
|
|||
|
|
@input="handleInputAmountChange"
|
|||
|
|
v-model="inputAmount"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<text class="give" :class="'text-' + themeColor.name" v-if="inputAmountGive > 0"
|
|||
|
|
>赠送 {{ inputAmountGive }}元</text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="block">
|
|||
|
|
<view class="title">
|
|||
|
|
选择支付方式
|
|||
|
|
</view>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="pay-list">
|
|||
|
|
<!-- #ifndef MP-WEIXIN -->
|
|||
|
|
<view class="row" @tap="payType = '2'" v-if="parseInt(payTypeList.order_ali_pay, 10) === 1 && !isWechat">
|
|||
|
|
<text class="icon iconfont iconalipay"></text>
|
|||
|
|
<view class="center">
|
|||
|
|
支付宝支付
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<radio :checked="payType == '2'" :color="themeColor.color" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!--#endif-->
|
|||
|
|
<view class="row" @tap="payType = '1'" v-if="parseInt(payTypeList.order_wechat_pay, 10) === 1">
|
|||
|
|
<i class="icon iconfont iconweixinzhifu"></i>
|
|||
|
|
<view class="center">
|
|||
|
|
微信支付
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<radio :checked="payType == '1'" :color="themeColor.color" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pay">
|
|||
|
|
<view class="btn" :class="'bg-' + themeColor.name" @tap="pay">立即充值</view>
|
|||
|
|
<view class="tis">
|
|||
|
|
点击立即充值，即代表您同意
|
|||
|
|
<view class="terms" @tap="toTipDetail">
|
|||
|
|
《充值协议》
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!--加载动画-->
|
|||
|
|
<rfLoading isFullScreen :active="pageLoading"></rfLoading>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { memberInfo, rechargeConfigIndex } from '@/api/userInfo';
|
|||
|
|
import { configList } from '@/api/basic';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
inputAmount: 0, // 金额
|
|||
|
|
inputAmountGive: 0, // 金额
|
|||
|
|
amountList: [{price:0.01,give_price:5},{price:100,give_price:10},{price:200,give_price:20}], // 预设3个可选快捷金额
|
|||
|
|
payType: 1, // 支付类型
|
|||
|
|
userInfo: {},
|
|||
|
|
loading: false,
|
|||
|
|
providerList: [],
|
|||
|
|
payTypeList: {order_ali_pay: 1,order_wechat_pay: 1},
|
|||
|
|
isWechat: this.$mPayment.isWechat(),
|
|||
|
|
pageLoading: true,
|
|||
|
|
code: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.initData(options);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 计算充值送的钱 后台配置
|
|||
|
|
handleInputAmountChange(e) {
|
|||
|
|
this.inputAmount = parseFloat(e.detail.value);
|
|||
|
|
if (this.inputAmount < this.amountList[0].price) {
|
|||
|
|
this.inputAmountGive = 0;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (
|
|||
|
|
this.inputAmount >= this.amountList[this.amountList.length - 1].price
|
|||
|
|
) {
|
|||
|
|
this.inputAmountGive = this.amountList[
|
|||
|
|
this.amountList.length - 1
|
|||
|
|
].give_price;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < this.amountList.length; i++) {
|
|||
|
|
if (
|
|||
|
|
this.inputAmount >= this.amountList[i].price &&
|
|||
|
|
this.inputAmount < this.amountList[i + 1].price
|
|||
|
|
) {
|
|||
|
|
this.inputAmountGive = this.amountList[i].give_price;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async pay() {
|
|||
|
|
if (this.payTypeList.order_ali_pay === '0' && this.payTypeList.order_wechat_pay === '0') return;
|
|||
|
|
const params = {};
|
|||
|
|
params.money = parseFloat(this.inputAmount);
|
|||
|
|
switch (parseInt(this.payType, 10)) {
|
|||
|
|
case 1: // 微信支付
|
|||
|
|
await this.$mPayment.weixinRecharge('recharge', params, '/pages/user/account/account', this.code);
|
|||
|
|
break;
|
|||
|
|
case 2: // 支付宝支付
|
|||
|
|
await this.$mPayment.aliPayRecharge('recharge', params, '/pages/user/account/account');
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 充值成功后更新用户信息
|
|||
|
|
async getMemberInfo() {
|
|||
|
|
this.$http.get(memberInfo).then(r => {
|
|||
|
|
uni.setStorage({
|
|||
|
|
key: 'userInfo',
|
|||
|
|
data: r
|
|||
|
|
});
|
|||
|
|
this.userInfo = r || undefined;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
toTipDetail() {
|
|||
|
|
this.$mRouter.push({
|
|||
|
|
route: '/pages/set/about/detail?field=protocol_recharge&title=充值协议'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 初始化数据
|
|||
|
|
async initData(options) {
|
|||
|
|
this.code = options.code;
|
|||
|
|
this.userInfo = uni.getStorageSync('userInfo') || undefined;
|
|||
|
|
|
|||
|
|
this.pageLoading = false;
|
|||
|
|
|
|||
|
|
// #ifdef H5
|
|||
|
|
if (uni.getSystemInfoSync().platform === 'android') {
|
|||
|
|
await this.$mPayment.wxConfigH5(window.location.href);
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
uni.getProvider({
|
|||
|
|
service: 'payment',
|
|||
|
|
success: e => {
|
|||
|
|
let providerList = [];
|
|||
|
|
e.provider.map(value => {
|
|||
|
|
switch (value) {
|
|||
|
|
case 'alipay':
|
|||
|
|
providerList.push({
|
|||
|
|
name: '支付宝',
|
|||
|
|
id: value,
|
|||
|
|
loading: false
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'wxpay':
|
|||
|
|
providerList.push({
|
|||
|
|
name: '微信',
|
|||
|
|
id: value,
|
|||
|
|
loading: false
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.providerList = providerList;
|
|||
|
|
},
|
|||
|
|
fail: e => {}
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
// 获取支付类型列表
|
|||
|
|
async getPayTypeList() {
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${configList}`, {
|
|||
|
|
field: 'order_balance_pay,order_wechat_pay,order_ali_pay'
|
|||
|
|
})
|
|||
|
|
.then(r => {
|
|||
|
|
this.payTypeList = r;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
select(item) {
|
|||
|
|
this.inputAmount = item.price;
|
|||
|
|
this.inputAmountGive = item.give_price;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: $color-white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.block {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 20upx;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 34upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
.my {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 120upx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: $font-lg;
|
|||
|
|
border-bottom: solid 1upx #eee;
|
|||
|
|
|
|||
|
|
.balance {
|
|||
|
|
margin-right: 6upx;
|
|||
|
|
font-size: $font-lg + 4upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amount {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-top: 20upx;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
width: 31%;
|
|||
|
|
margin-bottom: 20upx;
|
|||
|
|
height: 120upx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.05);
|
|||
|
|
&.on {
|
|||
|
|
background-color: #f1f1f1;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.real {
|
|||
|
|
font-size: $font-lg;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.give {
|
|||
|
|
display: block;
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num {
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
padding-right: 10upx;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.give {
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
width: 28.2vw;
|
|||
|
|
border-bottom: solid 2upx;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
margin: 0 20upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pay-list {
|
|||
|
|
width: 100%;
|
|||
|
|
border-bottom: solid 1upx #eee;
|
|||
|
|
|
|||
|
|
.row {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 120upx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 100upx;
|
|||
|
|
font-size: 52upx;
|
|||
|
|
margin-left: 15upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconerjiye-yucunkuan {
|
|||
|
|
color: #fe8e2e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconweixinzhifu {
|
|||
|
|
color: #36cb59;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconalipay {
|
|||
|
|
color: #01aaef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rmbLogo {
|
|||
|
|
font-size: 40upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
background-color: #007aff;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-h1.uni-center {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
width: 200upx;
|
|||
|
|
height: 80upx;
|
|||
|
|
padding-bottom: 4upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ipaPayBtn {
|
|||
|
|
margin-top: 30upx;
|
|||
|
|
}
|
|||
|
|
</style>
|