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.
322 lines
7.1 KiB
322 lines
7.1 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.balance') }}</view>
|
|
<view class="money">
|
|
<view class="money-unit">{{ $store.state.unit }}</view>
|
|
<view class="money-detail">{{ money }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="purse-input content">
|
|
<view class="title">{{ $t('page.purse.recharge-address') }}</view>
|
|
<view class="text">{{ addressInfo[$store.state.key[$i18n.locale]] }}</view>
|
|
<view @click="copy(addressInfo[$store.state.key[$i18n.locale]])" class="btn">{{ $t('page.purse.copy') }}</view>
|
|
</view>
|
|
|
|
<view class="purse-input content">
|
|
<view class="title">{{ $t('page.purse.recharge-amount') }}</view>
|
|
<input v-model="form.money" type="number" :placeholder="$t('page.purse.recharge-amount-placeholder')" />
|
|
</view>
|
|
|
|
<view class="purse-input content">
|
|
<view class="title">{{ $t('page.purse.upload') }}</view>
|
|
<image :src="form.image"
|
|
v-if="form.image" mode=""
|
|
@click="uploadImage"></image>
|
|
|
|
<view class="image" v-else
|
|
@click="uploadImage">
|
|
<u-icon name="plus"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 按钮 -->
|
|
<view @click="recharge" class="submit-btn content">{{ $t('page.purse.complete-top-up') }}</view>
|
|
|
|
<view class="steps content">
|
|
<view class="steps-title">{{ $t('page.purse.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>
|
|
|
|
<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,
|
|
sTabbar
|
|
},
|
|
data() {
|
|
return {
|
|
active : 0,
|
|
money : '',
|
|
form : {
|
|
id : '',
|
|
image : '',
|
|
money : ''
|
|
},
|
|
serverList : [],
|
|
showService : false,
|
|
userInfo : {},
|
|
addressInfo : {}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUserInfo()
|
|
this.forgetPass()
|
|
this.getPayUrl()
|
|
},
|
|
methods: {
|
|
// leftClick() {
|
|
// if(this.$route.query.type){
|
|
// return uni.navigateTo({
|
|
// url: '/pages/home/home'
|
|
// })
|
|
// }else{
|
|
// uni.navigateTo({
|
|
// url: '/pages/center/center'
|
|
// })
|
|
// }
|
|
// },
|
|
|
|
getPayUrl(){
|
|
this.request('getPayUrl').then(res => {
|
|
if(res.code == 200){
|
|
this.addressInfo = res.result
|
|
}
|
|
})
|
|
},
|
|
|
|
uploadImage(){
|
|
let self = this
|
|
this.$Oss.ossUploadImage({
|
|
success(res) {
|
|
self.form.image = res
|
|
}
|
|
})
|
|
},
|
|
|
|
//获取用户信息
|
|
getUserInfo(){
|
|
this.request('userInfo').then(res => {
|
|
if(res.code == 200){
|
|
this.userInfo = res.result.userInfo
|
|
this.money = res.result.userInfo.money
|
|
}
|
|
})
|
|
},
|
|
|
|
//充值
|
|
recharge(){
|
|
this.$play()
|
|
let { money , image } = this.form
|
|
if(!money.trim()){
|
|
return uni.showToast({ icon: 'none' , title : this.$t('page.purse.money-empty') })
|
|
}
|
|
if(!image.trim()){
|
|
return uni.showToast({ icon: 'none' , title : this.$t('page.purse.image-empty') })
|
|
}
|
|
if(!this.userInfo.moneyAddress){
|
|
return uni.showToast({ icon: 'none' , title : this.$t('page.purse.address-empty') })
|
|
}
|
|
this.form.moneyAddress = this.userInfo.moneyAddress;
|
|
this.request('recharge2',{},this.form).then(res => {
|
|
if(res.code == 200){
|
|
uni.$u.toast(this.$t('page.purse.success'))
|
|
this.cleanForm()
|
|
this.revealServiceList()
|
|
this.getUserInfo() //刷新用户信息(更新用户余额)
|
|
}
|
|
})
|
|
},
|
|
|
|
//显示客服列表
|
|
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 = {
|
|
|
|
}
|
|
},
|
|
|
|
//复制内容
|
|
copy(content) {
|
|
if(!content){
|
|
return uni.$u.toast(this.$t('page.purse.addressEmpty'))
|
|
}
|
|
uni.setClipboardData({
|
|
data: content,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: this.$t('page.purse.copySuccess'),
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.purse {
|
|
width: 750rpx;
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background: #f6f6f6;
|
|
padding-bottom: 300px;
|
|
|
|
.content {
|
|
width: 96%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.user-money {
|
|
background: $uni-bg-color-app;
|
|
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;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.purse-input{
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 15rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title{
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.text{}
|
|
|
|
.btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: black;
|
|
color: white;
|
|
height: 60rpx;
|
|
border-radius: 100rpx;
|
|
font-size: 30rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
image{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.image{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border: 1px solid #333;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.submit-btn{
|
|
background: rgb(0, 208, 234);
|
|
height: 80rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
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>
|