501 lines
11 KiB
Vue
501 lines
11 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">可提现额度</view>
|
||
<view class="balance">{{ balance || '0.00' }}</view>
|
||
<view class="frozen" @click="$Router.push({name: 'withdrawList'})">提现记录</view>
|
||
</view>
|
||
</view>
|
||
<!-- 提现渠道 -->
|
||
<view class="extract-radio">
|
||
<radio-group @change="extractType = $event.detail.value">
|
||
<view class="extract-item" v-for="(item, index) in types" :key="index">
|
||
<label class="radio">
|
||
<radio :value="item.type" color="#8b64fd" :checked="extractType === item.type" /><text>提现到{{item.name}}</text>
|
||
</label>
|
||
</view>
|
||
</radio-group>
|
||
</view>
|
||
<!-- 提现金额 -->
|
||
<view class="withdrawing-content">
|
||
<view class="item">
|
||
<view style="flex: 1;">
|
||
<view class="inputTxt">提现金额</view>
|
||
<input class="input_num" ref='inputNuber' v-model="withdraw_input" @input='inputNum' type="number" placeholder-style="color:#999;font-weight:normal; font-size:34rpx;" placeholder="请输入提现金额" :disabled="balance===0" />
|
||
</view>
|
||
<view class="all" @click="all">全部提现</view>
|
||
</view>
|
||
</view>
|
||
<!-- 银行卡 -->
|
||
<block v-if="extractType === '1'">
|
||
<view class="item-name">
|
||
<view class="cardName" v-if="bank_accounts === 0" @click="$Router.push({name: 'addBank'})">添加银行卡</view>
|
||
<view class="cardName" v-if='bank_accounts > 0' @click="$Router.push({name: 'bankList'})">{{bankInfo.name ? bankInfo.name:'选择银行卡'}}</view>
|
||
<uni-icons type="arrowright" size="16" color="#ddd" />
|
||
</view>
|
||
</block>
|
||
<!-- 支付宝 -->
|
||
<block v-if="extractType === '2'">
|
||
<view class="alipay-form">
|
||
<view class="alipay-inputs">
|
||
<label>支付宝账号</label>
|
||
<input type="text" v-model="alipayUser" placeholder="输入支付宝账号" />
|
||
</view>
|
||
<view class="alipay-inputs">
|
||
<label>支付宝姓名</label>
|
||
<input type="text" v-model="alipayName" placeholder="输入支付宝姓名" />
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<!-- -->
|
||
<view class="btn" @click="actions">申请提现</view>
|
||
<view class="des">预计5- 10个工作日到账 手续费: {{tax === '0'?'免手续费':tax+'%'}}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { withdrawsIndexCreate, withdrawsIndex } from '@/apis/interfaces/withdraws';
|
||
export default {
|
||
data() {
|
||
return {
|
||
types : [],
|
||
alipayUser : '', // 支付宝账号
|
||
alipayName : '', // 支付宝姓名
|
||
balance : 0, // 钱包通证金额
|
||
tax : 0, // 当前手续费
|
||
withdraw_input: '', // 提现通证金额
|
||
extractType : '1', // 提现方式
|
||
bank_accounts : 0,
|
||
bankInfo : {},
|
||
certification : false,// 认证状态
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getInfo()
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync('refresh')) {
|
||
this.bankInfo = {}
|
||
this.getInfo()
|
||
}
|
||
},
|
||
methods: {
|
||
// 提现基本信息
|
||
getInfo() {
|
||
withdrawsIndexCreate().then(res => {
|
||
let typesArry = new Array
|
||
for(let key in res.types){
|
||
typesArry.push({
|
||
type: key,
|
||
name: res.types[key]
|
||
})
|
||
}
|
||
this.types = typesArry
|
||
this.balance = res.balance
|
||
this.tax = res.tax
|
||
this.bank_accounts = res.bank_accounts.length
|
||
// this.withdraw_input = Number(res.balance)
|
||
this.certification = res.certification
|
||
uni.setStorageSync('refresh', false)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
// 输入提现通证金额
|
||
inputNum(e) {
|
||
let number = Number(e.detail.value)
|
||
if (number <= Number(this.balance)) {
|
||
this.total = Number(e.detail.value) * this.cost
|
||
} else {
|
||
this.total = 0
|
||
if (Number(this.balance) === 0) {
|
||
uni.showToast({
|
||
title: '当前不能提现',
|
||
icon: 'none',
|
||
duration: 2000,
|
||
mask: true
|
||
});
|
||
this.withdraw_input = 0
|
||
} else {
|
||
uni.showToast({
|
||
title: '最大值能超过' + this.balance + '',
|
||
icon: 'none',
|
||
duration: 2000,
|
||
mask: true
|
||
});
|
||
this.$nextTick(() => {
|
||
this.withdraw_input = this.balance
|
||
})
|
||
}
|
||
}
|
||
},
|
||
// 点击全部
|
||
all() {
|
||
if (this.balance > 0) {
|
||
this.withdraw_input = this.balance
|
||
this.total = this.balance * this.cost
|
||
} else {
|
||
uni.showToast({
|
||
title: '啥也没有，我也做不到~',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
this.withdraw_input = 0
|
||
}
|
||
},
|
||
// 提现
|
||
actions() {
|
||
// 提现前置条件
|
||
if (!this.certification) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '为了保障您的用户权益，未个人认证无法提现红包',
|
||
cancelColor: '#555',
|
||
cancelText: '稍后认证',
|
||
confirmColor: '#8b64fd',
|
||
confirmText: '立即认证',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
this.$Router.push({
|
||
name: 'Personal'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
return
|
||
}
|
||
|
||
// 组织提现数据
|
||
let data = {
|
||
type : this.extractType,
|
||
amount : this.withdraw_input,
|
||
bank_account_id : this.bankInfo.bank_account_id,
|
||
name : this.alipayName,
|
||
identity : this.alipayUser
|
||
}
|
||
|
||
// 检查提现金额
|
||
if (Number(data.amount) <= 0) {
|
||
uni.showToast({
|
||
title: '提现金额不能为0或复数',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
|
||
// 检查银行卡信息
|
||
if(data.type === 1){
|
||
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.type === 2){
|
||
if (data.name === '') {
|
||
uni.showToast({
|
||
title: '请输入支付宝账号',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
if (data.identity === '') {
|
||
uni.showToast({
|
||
title: '请输入支付宝姓名',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
}
|
||
|
||
uni.showModal({
|
||
title : '温馨提示',
|
||
content :this.tax === '0' ? '您是否确认提现，交易将免手续费' : '您是否确认提现，将会扣除' + this.tax + '%手续费',
|
||
confirmColor: '#7c52fc',
|
||
cancelColor : '#cacaca',
|
||
cancelText : '我再想想',
|
||
confirmText : '确认提现',
|
||
success : res => {
|
||
if (res.confirm) {
|
||
uni.showLoading({
|
||
title: '提交中'
|
||
})
|
||
withdrawsIndex(data).then(res => {
|
||
uni.showModal({
|
||
title : '提示',
|
||
content : res,
|
||
showCancel : false,
|
||
success : modalRes => {
|
||
if(modalRes.confirm){
|
||
this.getInfo()
|
||
this.withdraw_input = ''
|
||
this.total = ''
|
||
this.alipayUser = ''
|
||
this.alipayName = ''
|
||
}
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
}
|
||
}
|
||
}
|
||
</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 top, #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/2 $padding $padding*3;
|
||
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: $mian-color;
|
||
width: 160rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.item-name {
|
||
color: #303030;
|
||
margin-top: $margin;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
background: white;
|
||
padding: $padding/2 $padding;
|
||
line-height: 90rpx;
|
||
justify-content: space-between;
|
||
.cardName{
|
||
flex: 1;
|
||
&.gray{
|
||
color: $text-gray;
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdrawing-content {
|
||
background-color: #fff;
|
||
padding: $padding/2 $padding/2 $padding/2 $padding;
|
||
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: 20rpx 0;
|
||
span:nth-child(1) {
|
||
color: #666;
|
||
margin-right: 20rpx;
|
||
}
|
||
.inputTxt {
|
||
color: #999;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
.input_num {
|
||
font-size: 60rpx;
|
||
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;
|
||
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;
|
||
}
|
||
|
||
// 选择类型
|
||
.extract-radio{
|
||
background: white;
|
||
margin-bottom: $margin;
|
||
.extract-item{
|
||
position: relative;
|
||
padding: $padding/2 $padding;
|
||
line-height: 80rpx;
|
||
font-size: 32rpx;
|
||
label{
|
||
display: block;
|
||
}
|
||
radio{
|
||
margin-right: $margin/2;
|
||
}
|
||
&::before{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: $margin;
|
||
right: 0;
|
||
content: " ";
|
||
height: 1rpx;
|
||
background: $border-color;
|
||
}
|
||
&:last-child::before{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
// 支付宝提现
|
||
.alipay-form{
|
||
background: white;
|
||
margin-top: $margin;
|
||
.alipay-inputs{
|
||
position: relative;
|
||
padding-left: 240rpx;
|
||
position: relative;
|
||
height: 90rpx;
|
||
label{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
line-height: 90rpx;
|
||
width: 240rpx;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
}
|
||
input{
|
||
height: 90rpx;
|
||
width: 100%;
|
||
}
|
||
label,
|
||
input{
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|