<!--
|
* @Author: 小明丶
|
* @Date: 2019-10-24 15:13:33
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-20 17:26:19
|
* @Description:
|
-->
|
<template>
|
<div class="tonglian-withdrawals-page">
|
<v-navbar title="提现">
|
<div slot="right" @click="goHistory">提现纪录</div>
|
</v-navbar>
|
<!-- 账号 -->
|
<div class="zfb-box">
|
<div class="left">
|
<p>提现至</p>
|
</div>
|
<div class="right">
|
<span
|
v-if="sta == '02'"
|
style="color: #333333; font-size: 14px; margin-bottom: 5px"
|
>支付宝账号</span
|
>
|
<span
|
v-if="sta == '01'"
|
style="color: #333333; font-size: 14px; margin-top: 9px"
|
>银行卡账号</span
|
>
|
<span style="color: #333333; font-size: 14px">{{
|
withdAccount.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
|
}}</span>
|
</div>
|
</div>
|
<!-- 金额 -->
|
<div class="money-box">
|
<div class="tit">
|
<p>提现金额</p>
|
</div>
|
<div class="input-box">
|
<span>￥</span>
|
<van-field
|
v-model="amount"
|
placeholder="请输入提现金额"
|
style="
|
width: 70%;
|
display: inline-block;
|
margin-left: 30px;
|
font-size: 18px;
|
"
|
:border="false"
|
maxlength="10"
|
/>
|
<span @click="allWithd">全部提现</span>
|
</div>
|
<div class="yue">
|
<p>
|
<span>可提现金额：</span>
|
<span>￥{{ this.balanceAmt }}</span>
|
</p>
|
</div>
|
</div>
|
<van-button
|
round
|
type="info"
|
color="#896EDB"
|
style="
|
width: 86%;
|
margin-top: 60px;
|
margin-left: 7%;
|
background: #896edb;
|
color: #fff;
|
border: 0.02rem solid rgb(137, 110, 219);
|
"
|
@click="getWidthrawals"
|
>下一步</van-button
|
>
|
<!-- 短信弹窗 -->
|
<van-popup
|
v-model="showSendCode"
|
style="width: 75%; text-align: center; padding: 34px 18px 20px 18px"
|
>
|
<van-icon
|
name="cross"
|
size="20px"
|
style="position: absolute; right: 10px; top: 10px; color: #cccccc"
|
@click="closePop"
|
color="#CCCCCC"
|
/>
|
<p style="font-size: 16px; font-weight: 500; color: rgba(0, 0, 0, 1)">
|
请确认提现金额
|
</p>
|
<p
|
style="
|
font-size: 14px;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
margin: 12px 0 20px 0;
|
"
|
>
|
您当前发起提现金额为：
|
</p>
|
<p style="font-size: 18px;">{{amount}}元</p>
|
<!-- <div class="withdrawal-code-box">
|
<input
|
type="text"
|
v-model="authCode"
|
placeholder="请输入验证码"
|
maxlength="6"
|
/>
|
<van-button size="small" color="#896EDB" plain type="info" @click="getCode">{{
|
btnText
|
}}</van-button>
|
</div> -->
|
<button class="withdrawal-btn" @click="goResrult">发起提现</button>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import QRCode from "qrcode";
|
//import { setInterval } from 'timer';
|
import { Notify,Toast } from "vant";
|
import { Icon } from "vant";
|
|
Vue.use(Toast);
|
Vue.use(Icon);
|
Vue.use(Notify);
|
export default {
|
data() {
|
return {
|
btnDis: false, //获取验证码按钮是否禁用
|
btnText: "发送验证码",
|
params: {}, //路由接收的参数
|
showSendCode: false, //短信验证码弹窗
|
showTip: false, //提示弹窗
|
amount: "", //提现金额
|
timer: "", //轮训定时器
|
balanceAmt: "", //可提现余额
|
branchName: "", //开户支行名称
|
withdAccount: "", //提现账户
|
legalMblNo: "", //提现手机号
|
authCode: "", //验证码
|
withdrawId: "", //提现id
|
sta: 1,
|
hasGetCode:true,
|
};
|
},
|
created() {
|
this.$api.tltWalletInit().then((res) => {
|
this.balanceAmt = res.body.balanceAmt;
|
this.sta = res.body.settType;
|
this.branchName = res.body.branchName;
|
this.withdAccount = res.body.withdAccount;
|
this.legalMblNo = res.body.legalMblNo;
|
});
|
},
|
mounted() {
|
this.params = this.$route.params;
|
},
|
updated() {
|
window.onresize;
|
},
|
beforeDestroy() {
|
clearInterval(this.timer);
|
this.timer = null;
|
},
|
methods: {
|
/**
|
* @description:获取验证码
|
* @return void
|
* **/
|
getCode() {
|
let _this = this;
|
this.$api
|
.tltWalletSendSmsCode({
|
amount: this.amount,
|
})
|
.then((res) => {
|
this.hasGetCode = true
|
this.withdrawId = res.body.withdrawId;
|
this.btnText = 60;
|
this.btnDis = true;
|
this.timer = setInterval(function () {
|
if (_this.btnText == 1) {
|
_this.btnText = "重新获取";
|
_this.btnDis = false;
|
clearInterval(_this.timer);
|
} else {
|
_this.btnText = --_this.btnText;
|
}
|
}, 1000);
|
});
|
},
|
/**
|
* @description:弹出层关闭
|
* @return void
|
* **/
|
closePop() {
|
this.showSendCode = false;
|
},
|
/**
|
* @description:提现函数
|
* @return void
|
* **/
|
getWidthrawals() {
|
if (this.amount <= 0) {
|
Notify({ type: "primary", message: "提现金额需大于0元" });
|
}else if (this.amount > this.balanceAmt) {
|
Notify({ type: "primary", message: "提现金额不得大于余额" });
|
} else {
|
this.showSendCode = true;
|
this.getCode()
|
}
|
},
|
/**
|
* @description:全部提现
|
* @return void
|
* **/
|
allWithd() {
|
this.amount = this.balanceAmt;
|
},
|
/**
|
* @description:提交提现，跳转提现结果
|
* @return void
|
* **/
|
goResrult() {
|
if(!this.hasGetCode){
|
Toast.fail('请先获取验证码');
|
return false
|
}
|
this.$api
|
.tltWalletWithdraw({
|
withdrawId: this.withdrawId,
|
authCode: '888888',
|
amount: this.amount,
|
})
|
.then((res) => {
|
this.$router.push({
|
path: "/tonglian/Withdrawal-result",
|
query: {
|
withdrawId: this.withdrawId,
|
},
|
});
|
});
|
},
|
/**
|
* @description:跳转提现记录
|
* @return void
|
* **/
|
|
goHistory() {
|
this.$router.push({
|
path: "/tonglian/withdrawal-history",
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.tonglian-withdrawals-page {
|
& {
|
background-color: #f0f1f3;
|
height: 100vh;
|
}
|
.clearfix {
|
*zoom: 1;
|
}
|
.clearfix:after {
|
clear: both;
|
display: block;
|
visibility: hidden;
|
height: 0;
|
content: ".";
|
}
|
.zfb-box {
|
height: 60px;
|
width: 94%;
|
background-color: white;
|
border-radius: 3px;
|
margin-left: 3%;
|
margin-top: 20px;
|
display: flex;
|
.left {
|
width: 20%;
|
box-sizing: border-box;
|
padding-left: 13px;
|
line-height: 60px;
|
p {
|
color: #333333;
|
font-size: 18px;
|
font-weight: Bold;
|
text-align: left;
|
}
|
}
|
.right {
|
width: 84%;
|
box-sizing: border-box;
|
padding-left: 10px;
|
line-height: 60px;
|
}
|
}
|
.money-box {
|
width: 94%;
|
background-color: white;
|
margin-left: 3%;
|
height: 145px;
|
margin-top: 20px;
|
border-radius: 3px;
|
.tit {
|
height: 50px;
|
box-sizing: border-box;
|
padding: 18px 0 17px 13px;
|
p {
|
color: #333333;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
}
|
.input-box {
|
border-bottom: 1px solid #eeeeee;
|
box-sizing: border-box;
|
padding-left: 13px;
|
padding-right: 12px;
|
vertical-align: middle;
|
position: relative;
|
span:nth-of-type(1) {
|
font-size: 18px;
|
display: inline-block;
|
position: absolute;
|
bottom: 15px;
|
z-index: 1000;
|
}
|
span:nth-of-type(2) {
|
font-size: 14px;
|
color: #896edb;
|
text-decoration: underline;
|
position: absolute;
|
bottom: 15px;
|
z-index: 1000;
|
}
|
}
|
.yue {
|
box-sizing: border-box;
|
padding-left: 13px;
|
padding-top: 16px;
|
p {
|
span:nth-of-type(1),
|
span:nth-of-type(3) {
|
font-size: 12px;
|
color: #999999;
|
}
|
span:nth-of-type(2) {
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
.notes {
|
font-size: 12px;
|
color: #999999;
|
text-align: center;
|
margin-top: 12px;
|
}
|
.payCode {
|
.myimg {
|
position: absolute;
|
top: 45px;
|
left: 85px;
|
z-index: 1000;
|
}
|
}
|
.prod {
|
p:nth-of-type(1) {
|
font-size: 18px;
|
color: #333333;
|
margin-bottom: 20px;
|
margin-top: 25px;
|
}
|
p:nth-of-type(2),
|
p:nth-of-type(3) {
|
font-size: 12px;
|
color: #999999;
|
margin-bottom: 5px;
|
}
|
}
|
.withdrawal-btn {
|
width: 70%;
|
height: 36px;
|
background: rgba(137, 110, 219, 1);
|
border-radius: 18px;
|
border: 0;
|
outline: none;
|
margin-top: 28px;
|
color: #fff;
|
}
|
.withdrawal-code-box {
|
text-align: center;
|
border-bottom: 1px solid #eeeeee;
|
padding-bottom: 5px;
|
display: flex;
|
input {
|
border: 0;
|
width: 66%;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
