381 lines
8.0 KiB
Vue
381 lines
8.0 KiB
Vue
<template>
|
||
<view class="WithdrawingCoin ">
|
||
<view class="propery">
|
||
<image src="/static/imgs/account-bg.png" mode="aspectFill" class="record-bg" />
|
||
<view class="propery-content">
|
||
<view class="currency">能量球钱包
|
||
<span>(≈ {{ cost || '0.00' }} CNY)</span>
|
||
</view>
|
||
<view class="balance">{{ balance || '0.00' }}</view>
|
||
<view class="frozen" @click="withdrawDetail">提现记录</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item-name">
|
||
提现至银行卡
|
||
<view class="right">
|
||
<view class="cardName" v-if="bank_accounts === 0" @click="addBanks">添加银行卡</view>
|
||
<view class="cardName" v-if='bank_accounts>0' @click="bankLists">{{bankInfo.name?bankInfo.name:'选择银行卡'}}
|
||
</view>
|
||
<uni-icons type="arrowright" size="12" color="#fff" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawing-content">
|
||
<view class="item">
|
||
<view style="flex: 1;">
|
||
<input class="input_num" v-model="withdraw_input" @input='inputNum' type="number"
|
||
placeholder-style="color:#999;font-weight:normal; font-size:34rpx;" placeholder="提现数量" />
|
||
</view>
|
||
<view class="all" @click="all">全部提现</view>
|
||
</view>
|
||
</view>
|
||
<view class="total" v-if="total">≈ ￥{{total.toFixed(2)}} </view>
|
||
<view class="btn" @click="actions">提现至银行卡</view>
|
||
<view class="des">预计5- 10个工作日到账 手续费: {{tax}}%</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
withdrawsIndexCreate,
|
||
withdrawsIndex
|
||
} from '@/apis/interfaces/withdraws';
|
||
export default {
|
||
data() {
|
||
return {
|
||
balance: 0, // 钱包能量球数量
|
||
tax: 0, // 当前手续费
|
||
cost: 1, // 每个能量球的价格
|
||
total: 0, // 约合人民币
|
||
card: '', // 银行卡号
|
||
withdraw_input: '', // 提现能量球数量
|
||
bank_accounts: 0,
|
||
bankInfo: {}
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getInfo()
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync('refresh')) {
|
||
this.bankInfo = {}
|
||
this.getInfo()
|
||
}
|
||
},
|
||
methods: {
|
||
// 提现基本信息
|
||
getInfo() {
|
||
withdrawsIndexCreate().then(res => {
|
||
this.balance = res.balance
|
||
this.tax = res.tax
|
||
this.cost = res.cost
|
||
this.bank_accounts = res.bank_accounts.length
|
||
uni.setStorageSync('refresh', false)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
// 输入提现能量球数量
|
||
inputNum(e) {
|
||
let number = Number(e.detail.value)
|
||
if (number <= this.balance) {
|
||
this.total = Number(e.detail.value) * this.cost
|
||
} else {
|
||
uni.showToast({
|
||
title: '最大值能超过' + this.balance + '',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
this.withdraw_input = ''
|
||
this.total = 0
|
||
}
|
||
|
||
},
|
||
// 点击全部
|
||
all() {
|
||
if (this.balance > 0) {
|
||
this.withdraw_input = this.balance
|
||
this.total = this.balance * this.cost
|
||
} else {
|
||
uni.showToast({
|
||
title: '啥也没有，我也做不到~',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
// 提现
|
||
actions() {
|
||
let data = {
|
||
bank_account_id: this.bankInfo.bank_account_id,
|
||
amount: Number(this.withdraw_input)
|
||
}
|
||
if (data.bank_account_id === undefined || data.bank_account_id === null || data.bank_account_id === '') {
|
||
uni.showToast({
|
||
title: this.bank_accounts > 0 ? '请选择银行卡' : '请添加银行卡',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
if (data.amount === 0) {
|
||
uni.showToast({
|
||
title: '请输入能量球数量',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '您是否确认提现，将会扣除' + this.tax + '%手续费',
|
||
confirmColor: '#7c52fc',
|
||
cancelColor: '#cacaca',
|
||
cancelText: '我再想想',
|
||
confirmText: '确认提现',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showLoading({
|
||
title:'提交中'
|
||
})
|
||
withdrawsIndex(data).then(res => {
|
||
uni.showToast({
|
||
title: res,
|
||
icon: 'none',
|
||
duration:3000
|
||
})
|
||
this.withdraw_input = ''
|
||
this.total = ''
|
||
setTimeout(res => {
|
||
this.getInfo()
|
||
uni.hideLoading()
|
||
}, 3000)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
// 添加银行卡
|
||
addBanks() {
|
||
uni.navigateTo({
|
||
url: '/pages/wallet/addBank'
|
||
})
|
||
},
|
||
// 选择银行卡
|
||
bankLists() {
|
||
this.$Router.push({name: 'bankList'})
|
||
},
|
||
// 提现记录
|
||
withdrawDetail() {
|
||
uni.navigateTo({
|
||
url: '/pages/wallet/withdrawList'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.receiptCode {
|
||
color: #808080;
|
||
text-align: left;
|
||
// margin: $margin 0;
|
||
font-size: $title-size-m;
|
||
}
|
||
|
||
.WithdrawingCoin {
|
||
background-color: #f7f7f7;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
padding-bottom: 100rpx;
|
||
|
||
// 账户
|
||
.propery {
|
||
position: relative;
|
||
padding-top: var(--status-bar-height);
|
||
background-image: linear-gradient(to right, #7c52fc, #976dff);
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.record-bg {
|
||
position: absolute;
|
||
width: 120%;
|
||
height: 300rpx;
|
||
bottom: -50rpx;
|
||
right: -20rpx;
|
||
z-index: 1;
|
||
opacity: .5;
|
||
transform: rotate(-7deg);
|
||
}
|
||
|
||
.propery-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: $padding *3 $padding *1.4;
|
||
text-align: center;
|
||
|
||
.currency {
|
||
font-size: $title-size-m;
|
||
color: rgba($color: white, $alpha: .8);
|
||
}
|
||
|
||
.balance {
|
||
font-size: $title-size * 2.5;
|
||
padding: $padding 0;
|
||
color: white;
|
||
}
|
||
|
||
.frozen {
|
||
background: rgba($color: #000000, $alpha: .1);
|
||
color: rgba($color: white, $alpha: .7);
|
||
display: inline-block;
|
||
font-size: 24rpx;
|
||
padding: 6rpx $padding;
|
||
border-radius: $radius-m;
|
||
border: solid 1rpx rgba($color: white, $alpha: .4)
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.all {
|
||
color: $text-price;
|
||
width: 160rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.item-name {
|
||
text-align: center;
|
||
color: #303030;
|
||
font-weight: bold;
|
||
margin-bottom: $margin;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
background-image: linear-gradient(to right, #aaaaff, #aaaaff);
|
||
color: #fff;
|
||
margin: 30rpx;
|
||
padding: 30rpx;
|
||
|
||
.right {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 34rpx;
|
||
|
||
.cardName {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdrawing-content {
|
||
background-color: #fff;
|
||
padding: $padding $padding $padding $padding * 2;
|
||
font-size: $title-size-m;
|
||
|
||
/* 绑定银行卡 */
|
||
.bank-card {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 0 45rpx 0 35rpx;
|
||
}
|
||
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
padding: $padding 0;
|
||
|
||
span:nth-child(1) {
|
||
color: #666;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.input_num {
|
||
font-size: $title-size*1.5;
|
||
color: #3a3a3a;
|
||
font-weight: bolder;
|
||
flex: 1;
|
||
|
||
}
|
||
}
|
||
|
||
.item-total {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: $padding*1 0 0 0;
|
||
color: #3a3a3a;
|
||
|
||
.total {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
|
||
.money {
|
||
padding-top: $padding *0.5;
|
||
}
|
||
}
|
||
|
||
.lists {
|
||
color: $text-price;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.btn {
|
||
background-image: linear-gradient(to right, #7c52fc, #976dff);
|
||
color: #fff;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
padding: $padding * .9;
|
||
margin: $margin * 3 $margin *2 $margin $margin*2;
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.des {
|
||
text-align: center;
|
||
color: #cacaca;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.total {
|
||
color: $mian-color;
|
||
margin-top: 20rpx;
|
||
margin-left: 50rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
</style>
|