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.
265 lines
5.5 KiB
265 lines
5.5 KiB
<!-- 充值界面 -->
|
|
<template>
|
|
<view class="purse bx">
|
|
<navbar :leftClick="leftClick" :title="$t('page.purse.recharge')"></navbar>
|
|
|
|
<!-- 用户余额信息 -->
|
|
<view class="user-money content">
|
|
<view class="title">{{ $t('page.purse.account') }}</view>
|
|
<view class="money">
|
|
<view class="money-unit">{{ $t('page.purse.unit') }}</view>
|
|
<view class="money-detail">{{ money }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 充值方案列表 -->
|
|
<view class="recharge-list content">
|
|
<view @click="selectRecharge(index)" v-for="(item,index) in rechargeList" :key="item.id" class="recharge-item" :class="{ selectRecharge : index === active}">
|
|
<view class="money">{{ item.price }}</view>
|
|
<view class="unit">{{ $t('page.purse.unit') }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 输入框 -->
|
|
<view class="input content">
|
|
<input @input="moneyChange" v-model="form.money" class="input content" type="number" :placeholder="$t('page.purse.deposit-now')" />
|
|
</view>
|
|
<view class="input content">
|
|
<input v-model="form.payPass" class="input content" type="text" :placeholder="$t('page.purse.security-pin')" />
|
|
</view>
|
|
|
|
<!-- 按钮 -->
|
|
<view @click="recharge" class="btn content">{{ $t('page.purse.deposit-now') }}</view>
|
|
|
|
<!-- 客服列表 -->
|
|
<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/m-navbar.vue'
|
|
import serviceList from '@/components/serviceList/serviceList.vue';
|
|
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
serviceList
|
|
},
|
|
data() {
|
|
return {
|
|
rechargeList : [],
|
|
active : 0,
|
|
money : '',
|
|
form : {
|
|
money : '',
|
|
payPass : '',
|
|
id : ''
|
|
},
|
|
serverList : [],
|
|
showService : false
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUserInfo()
|
|
this.getTopUpScheme()
|
|
this.forgetPass()
|
|
},
|
|
methods: {
|
|
leftClick() {
|
|
uni.navigateTo({
|
|
url: '/pages/home/home'
|
|
})
|
|
},
|
|
|
|
//选择充值方案
|
|
selectRecharge(index){
|
|
this.$play()
|
|
this.active = index
|
|
this.form.money = this.rechargeList[index].price
|
|
this.form.id = this.rechargeList[index].id
|
|
},
|
|
|
|
//获取用户信息
|
|
getUserInfo(){
|
|
this.request('userInfo').then(res => {
|
|
if(res.code == 200){
|
|
this.money = res.result.userInfo.money
|
|
}
|
|
})
|
|
},
|
|
|
|
//获取充值方案
|
|
getTopUpScheme(){
|
|
this.request('shopNo').then(res => {
|
|
if(res.code == 200){
|
|
this.rechargeList = res.result
|
|
this.form.money = res.result[0].price; //默认选中第一个
|
|
}
|
|
})
|
|
},
|
|
|
|
//充值
|
|
recharge(){
|
|
this.$play()
|
|
let { money , payPass } = this.form
|
|
if(!money){
|
|
return uni.$u.toast(this.$t('page.purse.moneyEmpty'))
|
|
}
|
|
if(money <= 0){
|
|
return uni.$u.toast(this.$t('page.purse.AmountThan0'))
|
|
}
|
|
if(payPass.trim() == ''){
|
|
return uni.$u.toast(this.$t('page.purse.payPassEmpty'))
|
|
}
|
|
this.request('recharge',{},this.form).then(res => {
|
|
if(res.code == 200){
|
|
uni.$u.toast(this.$t('page.purse.success'))
|
|
this.cleanForm()
|
|
this.revealServiceList()
|
|
this.getUserInfo() //刷新用户信息(更新用户余额)
|
|
}
|
|
})
|
|
},
|
|
|
|
//用户手动填写充值金额
|
|
moneyChange(e){
|
|
this.active = ''
|
|
let inputValue= e.detail.value;
|
|
this.rechargeList.forEach((recharge,index) => {
|
|
if(parseInt(recharge.price) == inputValue){
|
|
this.active = index
|
|
}
|
|
})
|
|
},
|
|
|
|
//显示客服列表
|
|
revealServiceList(){
|
|
this.$play()
|
|
this.showService = true;
|
|
},
|
|
|
|
//关闭客服列表
|
|
closeServiceList(){
|
|
this.showService = false;
|
|
},
|
|
|
|
//忘记密码(获取客服列表)
|
|
forgetPass(){
|
|
this.request('forgetPass').then(res => {
|
|
if(res.code == 200){
|
|
this.serverList = res.result
|
|
}
|
|
})
|
|
},
|
|
|
|
//清空表单数据
|
|
cleanForm(){
|
|
this.form = {}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.purse {
|
|
width: 750rpx;
|
|
min-height: 100vh;
|
|
background-color: black;
|
|
margin: 0 auto;
|
|
background-image: url('@/static/pruse/bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
.content {
|
|
width: 96%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.user-money {
|
|
background: rgba(176, 199, 59, .8);
|
|
margin: 20rpx auto 30rpx auto;
|
|
border: 4rpx solid #D3EA5E;
|
|
padding: 60rpx 0rpx;
|
|
font-size: 36rpx;
|
|
|
|
.title,
|
|
.money {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60rpx;
|
|
|
|
.money-unit {
|
|
margin-right: 15rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.money-detail{
|
|
font-size: 50rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharge-list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
color: #B0C73B;
|
|
|
|
.recharge-item {
|
|
box-sizing: border-box;
|
|
width: calc(50% - 7rpx);
|
|
border: 1px solid #636363;
|
|
text-align: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.money , .unit{
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.money{
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.unit{
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.selectRecharge{
|
|
color: white;
|
|
border: 1px solid #D3EA5E;
|
|
background: rgba(176, 199, 59, .8);
|
|
}
|
|
}
|
|
|
|
.input{
|
|
margin: 30rpx auto;
|
|
|
|
input{
|
|
border: 1px solid #B0C73B;
|
|
height: 80rpx;
|
|
font-size: 34rpx;
|
|
color: #B0C73B;
|
|
text-indent: 15rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.btn{
|
|
height: 90rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #B0C73B;
|
|
border-radius: 10rpx;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|