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>
|