<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="在线充值" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view class="coreshop-bg-white coreshop-margin-10 coreshop-padding-10" v-if="showRecharge">
|
<u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
|
<u-form-item label="当前金额" borderBottom>
|
<view class="coreshop-text-red coreshop-text-price coreshop-font-17">{{ user.balance || '0'}}</view>
|
</u-form-item>
|
<u-form-item label="储值金额" prop="form.money">
|
<u--input type="number" v-model="form.money" disabled="true" placeholder='请输入要储值的金额' border="bottom" clearable />
|
</u-form-item>
|
</u--form>
|
|
<view class="coreshop-flex coreshop-align-center coreshop-justify-center coreshop-padding-10">
|
请选择您的充值方案
|
</view>
|
|
<view>
|
<u-grid :border="false" col="2">
|
<u-grid-item v-for="(item, key) in typeList" :key="key">
|
<view class="coreshop-padding-10 coreshop-percent-100">
|
<u-button type="error" :plain="item.plain" :text="item.title" @click="changeMoney(key)"></u-button>
|
</view>
|
</u-grid-item>
|
</u-grid>
|
</view>
|
|
<view class="coreshop-font-13 coreshop-line-height-22 coreshop-margin-top-40">
|
<p>
|
充值须知：
|
</p>
|
<p>
|
1、充值金额永不过期；
|
</p>
|
<p>
|
2、充值一经办理，概不退款；
|
</p>
|
<p>
|
3、充值金额将无法用于提现;
|
</p>
|
</view>
|
|
<!--按钮-->
|
<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
|
<u-button type="error" size="normal" @click="navigateToHandle">去支付</u-button>
|
</view>
|
</view>
|
<view v-else>
|
<view class="page-box">
|
<view>
|
<view class="coreshop-emptybox">
|
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/coupon.png'" icon-size="150" mode="order" text="暂未充值功能"></u-empty>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
user: {}, // 用户信息
|
typeList: [],
|
topUpTypeId: 0,
|
form: {
|
money: 0// 储值的金额
|
},
|
rules: {
|
money: [
|
{
|
required: true,
|
message: '请输入储值金额',
|
trigger: 'blur,change'
|
}, {
|
type: 'number',
|
message: '请输入整数金额',
|
trigger: 'blur,change'
|
}
|
]
|
},
|
orderType: this.$globalConstVars.paymentType.recharge // 储值类型
|
}
|
},
|
computed: {
|
showRecharge() {
|
return this.$store.state.config.showStoreBalanceRechargeSwitch === 1;
|
}
|
},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
},
|
onLoad() {
|
this.userInfo()
|
this.getTopUpTypeList();
|
},
|
methods: {
|
// 获取用户信息
|
userInfo() {
|
this.$u.api.userInfo().then(res => {
|
if (res.status) {
|
this.user = res.data
|
}
|
})
|
},
|
// 获取用户信息
|
getTopUpTypeList() {
|
this.$u.api.getTopUpTypeList().then(res => {
|
if (res.status) {
|
for (var i = 0; i < res.data.length; i++) {
|
res.data[i].plain = i != 0;
|
if (i == 0) {
|
this.form.money = res.data[0].defaultMoney;
|
this.topUpTypeId = res.data[0].id;
|
}
|
}
|
this.typeList = res.data;
|
}
|
})
|
},
|
changeMoney(key) {
|
for (var i = 0; i < this.typeList.length; i++) {
|
if (key == i) {
|
this.typeList[i].plain = false;
|
this.form.money = this.typeList[i].defaultMoney;
|
this.topUpTypeId = this.typeList[i].id;
|
} else {
|
this.typeList[i].plain = true;
|
}
|
}
|
this.$refs.uForm.validateField('form.money')
|
console.log(key);
|
console.log(this.topUpTypeId);
|
},
|
// 去储值
|
navigateToHandle() {
|
this.$refs.uForm.validate().then(res => {
|
console.log('验证通过');
|
if (this.topUpTypeId <= 0) {
|
this.$u.toast('请选择您要储值的方案。')
|
return false;
|
}
|
if (!Number(this.form.money)) {
|
this.$u.toast('请选择您要储值的方案。')
|
} else {
|
this.$u.route('/pages/payment/pay/pay?recharge=' + Number(this.topUpTypeId) + '&type=' + this.orderType)
|
}
|
}).catch(errors => {
|
uni.$u.toast('提交的数据校验失败，请输入合法信息！')
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
</style>
|
