<template> <div class="cash-out"> <van-cell-group style="margin-bottom: 10px"> <van-cell is-link title="所属银行" :value="bank" @click="jumpToBank" /> </van-cell-group> <div class="detail"> <p class="cash-out-title">提现金额</p> <van-field v-model="money" type="number" label="¥" class="money" :maxlength="maxValue" center @blur="onFillMoneyBlur" @input="inputClick" /> <div class="remain"> <span style="color: #666666" >可提现金额{{ remainMoney.toFixed(2) }}元</span > <span v-if="remainMoney > 0" class="all" @click="allIn">全部提现</span> </div> <div class="real"> <p class="real-item"> <span>实际到账</span> <span>{{ account.toFixed(2) }}</span> </p> <p class="real-item"> <span>税款</span> <span>{{ rate.toFixed(2) }}</span> </p> <p class="explain"> <span>扣税说明</span> <img @click="taxtClick" class="explain-img" src="@/assets/images/explain.png" alt="解释" /> </p> <p v-if="showExplain" class="explain"> <span>{{ this.textName }}</span> </p> </div> </div> <div style="padding: 10px 16px"> <van-button type="primary" size="large" @click="onCashOut" >提现</van-button > </div> <base-dialog base-dialog-title="提现" base-dialog-btn="提交" :base-dialog-show="validCodeDialogShow" :base-dialog-show-close="true" @onClick="onSubmit" @onClose="onCloseDialog" > <div slot="content"> <p class="content-text">请输入手机号{{ userPhone }}的动态验证码</p> <van-field v-model="validCode" type="number" class="validCodeInput" placeholder="请输入" center > <img slot="left-icon" class="valid-code" src="@/assets/images/验证码.png" /> <van-button slot="button" size="small" type="primary" class="verify-code" @click="sendVerification" > <span v-if="!canSend">{{ time }}秒后重新发送</span> <span v-else>发送验证码</span> </van-button> </van-field> </div> </base-dialog> <base-dialog :base-dialog-title="resultDialogTitle" :base-dialog-show="resultDialog" @onClick="onSuccess" > <div slot="content" style="text-align: center"> <img :src="resultDialogImg" style="width: 70px; height: 76px" alt /> <p style="margin: 0; font-size: 14px; color: #999999"> {{ resultDialogTip }} </p> </div> <div></div> </base-dialog> </div> </template> <script> import { getWithdrawalAmount } from "@/api/wallet"; import { getUserBankInfo, sendSms, cashOut, getTaxRate } from "@/api/bank"; import BaseDialog from "@/components/BaseDialog.vue"; export default { components: { BaseDialog }, name: "CashOut", data() { return { showExplain: false, userPhone: JSON.parse(localStorage.getItem("user")).userId, bank: "", money: null, account: 0, rate: 0, remainMoney: 100, resultDialogTitle: "", resultDialogTip: "", resultDialogImg: "", resultDialog: false, canSend: true, textName: "", validCodeDialogShow: false, validCode: null, time: 60, maxValue: 8 }; }, created() { this.getUserInfo(); this.canCashOut(); }, methods: { onFillMoneyBlur(e) { if (e.target.value > this.remainMoney) { this.$toast.fail("输入超过可提现金额,请重新输入"); return false; } }, sendVerification() { const params = { userId: JSON.parse(localStorage.getItem("user")).userId }; sendSms(params).then(res => { if (res.code == 0) { this.timeDown(); } else { this.$toast.fail(res.message); } }); }, timeDown() { this.canSend = false; const timer = setInterval(() => { this.time -= 1; if (this.time <= 0) { clearInterval(timer); this.canSend = true; } }, 1000); }, inputClick() { this.rate = this.money * 0.02; this.account = this.money - this.rate; let num = this.money; var re = /([0-9]+\.[0-9]{2})[0-9]*/; this.money = num.replace(re, "$1"); }, canCashOut() { const params = { userId: JSON.parse(localStorage.getItem("user")).userId }; getWithdrawalAmount(params).then(res => { if (res.code === 0) { this.remainMoney = res.data.currentMoneyCan; } else { this.remainMoney = 100; } }); getWithdrawalAmount; }, jumpToBank() { console.log("1"); this.$router.push("/bank"); }, // 全部提现 allIn() { this.money = this.remainMoney; }, // 点击提现 onCashOut() { if (this.money == 0) { this.$toast.fail("请输入正确金额"); return; } if (!this.money) { this.$toast.fail("未输入提现金额"); return; } if (this.money > this.remainMoney) { this.$toast.fail("输入超过可提现金额,请重新输入"); return; } this.validCode = null; this.validCodeDialogShow = true; }, taxtClick() { this.showExplain = !this.showExplain; if (this.showExplain) { const params = { money: 1 }; getTaxRate(params).then(res => { if (res.code === 0) { this.textName = res.data.taxDesc; } }); } }, getUserInfo() { const params = { userId: JSON.parse(localStorage.getItem("user")).userId }; getUserBankInfo(params).then(res => { if (res.code === 0) { if (res.data.bankName) { this.bank = res.data.bankName; } else { this.bank = ""; } } }); }, onCloseDialog() { this.validCodeDialogShow = false; }, onSubmit() { if (!this.validCode) { this.$toast.fail("请输入验证码"); return; } this.validCodeDialogShow = false; const params = { code: this.validCode, money: this.money, userId: JSON.parse(localStorage.getItem("user")).userId }; cashOut(params) .then(res => { this.resultDialog = true; if (res.code == 0) { this.resultDialogTitle = "提现成功"; this.resultDialogTip = "提现成功,请及时查收"; this.resultDialogImg = require("@/assets/images/成功.png"); } else { this.resultDialogTitle = "提现失败"; this.resultDialogTip = res.message; this.resultDialogImg = require("@/assets/images/叉号.png"); } }) .catch(err => { this.$toast.fail(err.response.data.error); }); }, onSuccess() { this.resultDialog = false; } } }; </script> <style lang="scss" scoped> .cash-out { padding: 10px 0; font-family: PingFang-SC-Medium; .bank { ::v-deep .van-field__control { text-align: right; } } .detail { height: 380px; padding: 10px 16px; background-color: #ffffff; .cash-out-title { font-size: 24px; } .money { box-sizing: border-box; margin: 0 0 10px; border-bottom: 1px solid #eeeeee; ::v-deep .van-field__label { width: 16px; height: 21px; font-size: 28px; line-height: 20px; color: #333333; } ::v-deep .van-field__control { font-size: 23px; color: #333333; } } .remain { padding: 10px 16px; font-size: 12px; .all { padding-left: 20px; color: #88c678; } } .real { padding: 10px 16px; font-size: 14px; background-color: #f9f9f9; .real-item { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .explain { position: relative; span { color: #999999; } .explain-img { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; margin-left: 8px; } } } } } .content-text { width: 185px; margin: 25px auto; text-align: center; font-family: PingFang-SC-Medium; font-size: 14px; color: #333333; } .validCodeInput { width: 245px; margin: 10px auto; background-color: #f9f9f9; border-radius: 20px; .van-field__left-icon { display: flex; align-items: center; } .valid-code { width: 16px; height: 18px; } } .verify-code { background-color: transparent; border: none; color: #88c677; } </style>