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.
 
 
 
 
 

374 lines
8.0 KiB

<!-- 提现页面 -->
<template>
<view class="withdraw bx">
<!-- 用户余额信息 -->
<view class="user-money content">
<view class="title info">{{ $t('page.center.balance') }}</view>
<view class="money">
<view class="money-unit">{{ $store.state.unit }}</view>
<view class="money-detail">{{ money }}</view>
</view>
</view>
<view class="box content">
<view class="info">
<!-- Withdraw amount -->
{{ $t('page.withdraw.withdrawal-account') }}
</view>
<view style="font-size: 50rpx;font-weight: 900;
padding: 30rpx 0;display: flex;align-items: center;
">
<text style="padding-right: 40rpx;">{{ $store.state.unit }}</text> <input v-model="form.money" type="number" />
</view>
<view class="info"
style="font-size: 22rpx;
border-top: 1px solid #99999944;
padding-top: 10rpx;">
<!-- Minimum Withdrawal amount 1 -->
{{ $t('page.withdraw.min-withdrawal') }}
</view>
</view>
<view class="box content">
<view class="title info">{{ $t('page.withdraw.payment-password') }}</view>
<input v-model="form.payPass" type="password" :placeholder="$t('page.withdraw.payment_password-placeholder')"/>
</view>
<!-- <view class="withdraw-amount content">
<view class="withdraw-title">{{ $t('page.withdraw.withdraw-amount')}}</view>
<view class="withdraw-content">{{ $t('page.withdraw.withdraw-descript')}}</view>
</view> -->
<!-- 输入框组 -->
<!-- <view class="inputs content">
<view class="input-item">
<view class="input-top">
<view class="title">{{ $t('page.withdraw.address') }}</view>
</view>
<view class="address-info" style="margin-top: 20rpx;">
{{ userInfo.moneyAddress }}
</view>
</view>
<view class="input-item">
<view class="input-top">
<view class="title">{{ $t('page.withdraw.withdraw-amount') }}</view>
<view @click="withdrawAll" class="all">{{ $t('page.withdraw.withdrawal-all') }}</view>
</view>
<input v-model="form.money" type="number" :placeholder="$t('page.withdraw.deposit-now')"/>
</view>
</view> -->
<!-- 提交按钮 -->
<view @click="withdraw" class="submit content">{{ $t('page.withdraw.confirm') }}</view>
<!-- 超出最大提现金额提示 -->
<view v-if="showModal" class="modal">
<view class="modal-main">
<view class="title">{{ $t('page.withdraw.warn') }}</view>
<view class="tip">{{ $t('page.withdraw.warn-detail') }}</view>
<view @click="showModal = false;$play()" class="ok">{{ $t('page.withdraw.ok') }}</view>
</view>
</view>
<sTabbar />
</view>
</template>
<script>
export default {
data() {
return {
money : '',
form : {
money : '', //提现金额
payPass : '',
// address : ''
},
vipInfo : {},
showModal : false, //是否显示超出最大提现金额提示
serverList : [],
showService : false,
userInfo : {}
}
},
onShow() {
this.getUserInfo()
this.forgetPass()
},
methods: {
leftClick() {
if(this.$route.query.type){
return uni.navigateTo({
url: '/pages/home/home'
})
}else{
uni.navigateTo({
url: '/pages/center/center'
})
}
},
//获取用户信息
getUserInfo(){
this.request('userInfo').then(res => {
if(res.code == 200){
this.userInfo = res.result.userInfo
this.money = res.result.userInfo.money
this.vipInfo = res.result.vip
}
})
},
//点击提现全部按钮
withdrawAll(){
this.$play()
if(!this.money){
return uni.$u.toast(this.$t('page.withdraw.noBalance'))
}
this.form.money = this.money
},
//提现
withdraw(){
this.$play()
this.form.address = this.userInfo.moneyAddress
let { money , address } = this.form;
if(address.trim() == ''){
return uni.$u.toast(this.$t('page.withdraw.addressEmpty'))
}
if(money <= 0){
return uni.$u.toast(this.$t('page.withdraw.creditLimit'))
}
if(money > this.money){ //用户提现金额大于用户余额
return uni.$u.toast(this.$t('page.withdraw.insufficientBalance'))
}
// if(payPass.trim() == ''){
// return uni.$u.toast(this.$t('page.withdraw.payPassEmpty'))
// }
this.request('withdrawal2',{},this.form).then(res => {
if(res.code == 200){
uni.$u.toast(this.$t(`message.${res.message}`))
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 = {}
}
}
}
</script>
<style lang="scss" scoped>
.withdraw {
width: 750rpx;
min-height: 100vh;
background-color: #f3f3f3;
margin: 0 auto;
background-size: 100%;
background-repeat: no-repeat;
.content {
width: 94%;
margin: 0 auto;
}
.box{
margin-top: 5rpx;
background-color: #fff;
box-sizing: border-box;
padding: 20rpx;
.info{
color: #999;
font-size: 26rpx;
}
.title{
font-size: 28rpx;
margin-bottom: 20rpx;
}
}
.user-money {
background: $uni-bg-color-app;
color: $uni-text-color-inverse;
margin: 20rpx auto 30rpx auto;
padding: 70rpx 0rpx;
font-size: 36rpx;
border-radius: 10rpx;
border-top-right-radius: 55rpx;
.title{
padding-left: 40rpx;
margin-bottom: 40rpx;
font-size: 26rpx;
color: #999;
}
.money {
display: flex;
align-items: center;
height: 60rpx;
padding-left: 40rpx;
.money-unit {
margin-right: 15rpx;
font-size: 26rpx;
font-weight: bold;
margin-top: 15rpx;
}
.money-detail{
font-size: 50rpx;
font-weight: bold;
}
}
}
.withdraw-amount{
color: $uni-text-color;
.withdraw-title{
font-size: 28rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.withdraw-content{
color: $uni-text-color;
font-size: 24rpx;
}
}
.inputs{
.input-item{
margin-top: 35rpx;
.input-top{
display: flex;
justify-content: space-between;
.title{
font-size: 28rpx;
font-weight: bold;
color: $uni-text-color;
}
.all{
background: $uni-bg-color-app;
padding: 5rpx 10rpx;
border-radius: 10rpx;
font-size: 20rpx;
color: $uni-text-color-inverse;
}
}
.address-info{
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 20rpx;
height: 80rpx;
border-radius: 10rpx;
background: #e9ecef;
font-size: 34rpx;
}
input{
border: 1px solid $uni-bg-color-app;
height: 80rpx;
margin-top: 20rpx;
text-indent: 1em;
border-radius: 10rpx;
}
}
}
.submit{
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
background: $uni-bg-color-app;
border-radius: 40rpx;
font-size: 40rpx;
font-weight: bold;
margin-top: 30rpx;
color: $uni-text-color-inverse;
}
.modal{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
top: 0;
width: 750rpx;
height: 100vh;
.modal-main{
width: 600rpx;
background: black;
border-radius: 10rpx;
color: #ccc;
border: 1px solid #ccc;
.title{
text-align: center;
font-size: 36rpx;
color: #afc638;
font-weight: bold;
padding: 20rpx 0rpx;
}
.tip{
box-sizing: border-box;
padding: 0rpx 20rpx;
margin-bottom: 20rpx;
}
.ok{
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
background: black;
border-radius: 10rpx;
font-size: 40rpx;
font-weight: bold;
border-top: 1px solid #ffffff80;
}
}
}
}
</style>