|
|
|
@ -1,42 +1,31 @@ |
|
|
|
<!-- 充值界面 --> |
|
|
|
<template> |
|
|
|
<view class="purse bx"> |
|
|
|
<navbar :leftClick="leftClick" :title="$t('page.purse.recharge')"></navbar> |
|
|
|
<!-- <navbar :leftClick="leftClick" :title="$t('page.purse.recharge')"></navbar> --> |
|
|
|
|
|
|
|
<!-- 用户余额信息 --> |
|
|
|
<view class="user-money content"> |
|
|
|
<view class="title">{{ $t('page.purse.account') }}</view> |
|
|
|
<view class="title">Balance</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 v-model="form.no" class="input content" type="text" disabled :placeholder="$t('page.purse.orderId')" /> |
|
|
|
<view class="purse-input content"> |
|
|
|
<view class="title">Recharge address</view> |
|
|
|
<view class="text">TMzqKBCtFdjzCk293hLS4MgMJbppxUEhp8</view> |
|
|
|
<view @click="copy('TMzqKBCtFdjzCk293hLS4MgMJbppxUEhp8')" class="btn">copy</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"> |
|
|
|
<view class="address-info" style="margin-top: 20rpx;"> |
|
|
|
{{ userInfo.moneyAddress }} |
|
|
|
</view> |
|
|
|
<view @click="copy(userInfo.moneyAddress)" class="btn content">{{ $t('page.purse.copyAddress') }}</view> |
|
|
|
|
|
|
|
<view class="purse-input content"> |
|
|
|
<view class="title">Recharge amount</view> |
|
|
|
<input type="text" placeholder="Please enter recharge amout" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="input content" style="display: flex;"> |
|
|
|
|
|
|
|
<image :src="form.image" |
|
|
|
<view class="purse-input content"> |
|
|
|
<view class="title">Upload payment screenshot</view> |
|
|
|
<image :src="form.image" |
|
|
|
v-if="form.image" mode="" |
|
|
|
@click="uploadImage"></image> |
|
|
|
|
|
|
|
@ -47,10 +36,23 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 按钮 --> |
|
|
|
<view @click="recharge" class="btn content">{{ $t('page.purse.deposit-now') }}</view> |
|
|
|
<view class="submit-btn content">I have completed the recharge</view> |
|
|
|
|
|
|
|
<view class="steps content"> |
|
|
|
<view class="steps-title">The steps</view> |
|
|
|
<view class="steps-content"> |
|
|
|
<view>1. Please copy the TRC-20 wallet address for payment in this mall.</view> |
|
|
|
<view>2. Make the transfer after verification. If I make a mistake, this mall will not bear your loss.</view> |
|
|
|
<view>3. When your payment is successful, please upload the payment voucher.</view> |
|
|
|
<view>4. When you are done with this, click: I have completed the payment.</view> |
|
|
|
<view>5. When you encounter any problems, be sure to contact our online customer service in time to help you solve them.</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 客服列表 --> |
|
|
|
<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList> |
|
|
|
|
|
|
|
<sTabbar select="100" /> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -58,46 +60,43 @@ |
|
|
|
<script> |
|
|
|
import navbar from '@/components/base/m-navbar.vue' |
|
|
|
import serviceList from '@/components/serviceList/serviceList.vue'; |
|
|
|
import sTabbar from '@/components/base/tabBar.vue' |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
navbar, |
|
|
|
serviceList |
|
|
|
serviceList, |
|
|
|
sTabbar |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
rechargeList : [], |
|
|
|
active : 0, |
|
|
|
money : '', |
|
|
|
form : { |
|
|
|
money : '', |
|
|
|
id : '', |
|
|
|
no : Date.now(), |
|
|
|
image : '', |
|
|
|
address : '' |
|
|
|
}, |
|
|
|
serverList : [], |
|
|
|
showService : false, |
|
|
|
userInfo: {} |
|
|
|
showService : false |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.getUserInfo() |
|
|
|
this.getTopUpScheme() |
|
|
|
this.forgetPass() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
leftClick() { |
|
|
|
if(this.$route.query.type){ |
|
|
|
return uni.navigateTo({ |
|
|
|
url: '/pages/home/home' |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/center/center' |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
// leftClick() { |
|
|
|
// if(this.$route.query.type){ |
|
|
|
// return uni.navigateTo({ |
|
|
|
// url: '/pages/home/home' |
|
|
|
// }) |
|
|
|
// }else{ |
|
|
|
// uni.navigateTo({ |
|
|
|
// url: '/pages/center/center' |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// }, |
|
|
|
|
|
|
|
uploadImage(){ |
|
|
|
let self = this |
|
|
|
@ -108,14 +107,6 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//选择充值方案 |
|
|
|
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 => { |
|
|
|
@ -126,36 +117,9 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//获取充值方案 |
|
|
|
getTopUpScheme(){ |
|
|
|
this.request('shopNo').then(res => { |
|
|
|
if(res.code == 200){ |
|
|
|
this.rechargeList = res.result |
|
|
|
this.form.money = res.result[0].price; //默认选中第一个 |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//充值 |
|
|
|
recharge(){ |
|
|
|
this.$play() |
|
|
|
this.form.address = this.userInfo.moneyAddress |
|
|
|
let { money , no , address , image } = this.form |
|
|
|
if(!no){ |
|
|
|
return uni.$u.toast(this.$t('page.purse.orderNumberEmpty')) |
|
|
|
} |
|
|
|
if(!money){ |
|
|
|
return uni.$u.toast(this.$t('page.purse.moneyEmpty')) |
|
|
|
} |
|
|
|
if(money <= 0){ |
|
|
|
return uni.$u.toast(this.$t('page.purse.AmountThan0')) |
|
|
|
} |
|
|
|
if(address.trim() == ''){ |
|
|
|
return uni.$u.toast(this.$t('page.purse.addressEmpty')) |
|
|
|
} |
|
|
|
if(image.trim() == ''){ |
|
|
|
return uni.$u.toast(this.$t('page.purse.imgEmpty')) |
|
|
|
} |
|
|
|
this.request('recharge2',{},this.form).then(res => { |
|
|
|
if(res.code == 200){ |
|
|
|
uni.$u.toast(this.$t('page.purse.success')) |
|
|
|
@ -166,17 +130,6 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//用户手动填写充值金额 |
|
|
|
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() |
|
|
|
@ -200,11 +153,7 @@ |
|
|
|
//清空表单数据 |
|
|
|
cleanForm(){ |
|
|
|
this.form = { |
|
|
|
money : '100', |
|
|
|
id : '', |
|
|
|
no : Date.now(), |
|
|
|
image : '', |
|
|
|
address : '' |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@ -232,11 +181,10 @@ |
|
|
|
.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; |
|
|
|
background: #f6f6f6; |
|
|
|
|
|
|
|
.content { |
|
|
|
width: 96%; |
|
|
|
@ -245,86 +193,64 @@ |
|
|
|
|
|
|
|
.user-money { |
|
|
|
background: $uni-bg-color-app; |
|
|
|
// background: rgba(176, 199, 59, .8); |
|
|
|
margin: 20rpx auto 30rpx auto; |
|
|
|
border: 4rpx solid #D3EA5E; |
|
|
|
border: 4rpx solid $uni-bg-color-app; |
|
|
|
padding: 60rpx 0rpx; |
|
|
|
font-size: 36rpx; |
|
|
|
color: $uni-bg-color; |
|
|
|
border-top-right-radius: 60rpx; |
|
|
|
|
|
|
|
.title, |
|
|
|
.money { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
align-items: flex-end; |
|
|
|
height: 60rpx; |
|
|
|
|
|
|
|
font-size: 28rpx; |
|
|
|
color: hsla(0, 0%, 100%, .8); |
|
|
|
box-sizing: border-box; |
|
|
|
padding-left: 30rpx; |
|
|
|
|
|
|
|
.money-unit { |
|
|
|
margin-right: 15rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.money-detail{ |
|
|
|
font-size: 50rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.recharge-list { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap: wrap; |
|
|
|
color: $uni-bg-color-app; |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
.purse-input{ |
|
|
|
background: white; |
|
|
|
border-radius: 20rpx; |
|
|
|
padding: 30rpx; |
|
|
|
margin-bottom: 15rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.title{ |
|
|
|
padding-bottom: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.selectRecharge{ |
|
|
|
.text{} |
|
|
|
|
|
|
|
.btn{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background: black; |
|
|
|
color: white; |
|
|
|
// border: 1px solid #D3EA5E; |
|
|
|
background: $uni-bg-color-app; |
|
|
|
// background: rgba(176, 199, 59, .8); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.input{ |
|
|
|
margin: 30rpx auto; |
|
|
|
input{ |
|
|
|
border: 1px solid $uni-bg-color-app; |
|
|
|
height: 80rpx; |
|
|
|
font-size: 34rpx; |
|
|
|
color: $uni-bg-color-app; |
|
|
|
text-indent: 15rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
height: 60rpx; |
|
|
|
border-radius: 100rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
margin-top: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
image{ |
|
|
|
width: 150rpx; |
|
|
|
height: 150rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
border: 1px solid #333; |
|
|
|
} |
|
|
|
.image{ |
|
|
|
width: 150rpx; |
|
|
|
height: 150rpx; |
|
|
|
@ -335,31 +261,33 @@ |
|
|
|
align-items: center; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.address-info{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
box-sizing: border-box; |
|
|
|
padding-left: 20rpx; |
|
|
|
height: 80rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
background: #e9ecef; |
|
|
|
font-size: 34rpx; |
|
|
|
width: 96%; |
|
|
|
margin: 0rpx auto 20rpx auto; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btn{ |
|
|
|
height: 90rpx; |
|
|
|
.submit-btn{ |
|
|
|
background: rgb(0, 208, 234); |
|
|
|
height: 80rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background: $uni-bg-color-app; |
|
|
|
border-radius: 10rpx; |
|
|
|
color: $uni-bg-color; |
|
|
|
font-size: 40rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: white; |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.steps { |
|
|
|
width: 90%; |
|
|
|
margin: 0rpx auto; |
|
|
|
padding-top: 30rpx; |
|
|
|
|
|
|
|
.steps-title { |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.steps-content { |
|
|
|
color: #8e8e98; |
|
|
|
font-size: 30rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
