<template>
|
<div id="cryptos" class="withdraw-wrap">
|
<assets-head :title="$t('提取')" :show-left="true" :back-func="goBack">
|
<img src="../../../assets/image/assets-center/exchange.png" alt="" class="withdraw-head-icon"
|
@click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')" />
|
</assets-head>
|
|
<!-- 第一部分：转账网络 + 选择币种 -->
|
<div class="withdraw-part withdraw-part-1">
|
<div class="withdraw-row" @click="showNetworkSheet = true">
|
<span class="withdraw-label">{{ $t('转账网络') }}</span>
|
<div class="withdraw-row-right">
|
<span class="withdraw-value">{{ blockName || '–' }}</span>
|
<van-icon name="arrow" class="withdraw-arrow" />
|
</div>
|
</div>
|
<div class="withdraw-row" @click="showSymbol = true">
|
<span class="withdraw-label">{{ $t('选择币种') }}</span>
|
<div class="withdraw-row-right">
|
<span class="withdraw-value">{{ value }}</span>
|
<van-icon name="arrow" class="withdraw-arrow" />
|
</div>
|
</div>
|
</div>
|
<!-- 第二部分：地址 + 数量 -->
|
<div class="withdraw-part withdraw-part-2">
|
<div class="withdraw-block">
|
<div class="withdraw-label">{{ $t('地址') }}</div>
|
<div class="withdraw-input-row">
|
<input v-model="address" type="text" class="withdraw-input" :placeholder="$t('长按粘贴')" />
|
<span class="withdraw-paste" @click="pastCont">{{ $t('粘贴') }}</span>
|
<img src="@/assets/image/public/scan.png" alt="scan" class="withdraw-scan" @click="clickCode" />
|
</div>
|
</div>
|
<div class="withdraw-block">
|
<div class="withdraw-label">{{ $t('数量') }}</div>
|
<div class="withdraw-input-row withdraw-quantity-row">
|
<input v-model="amount" type="number" class="withdraw-input" :placeholder="$t('请输入提币数量')"
|
maxlength="10" @input="changeInput" />
|
<span class="withdraw-unit">{{ value }}</span>
|
<span class="withdraw-all" @click="allBtn">{{ $t('全部') }}</span>
|
</div>
|
<div class="withdraw-fee-balance">
|
<span class="withdraw-fee">{{ $t('提现费用') }}: {{ fee || '0' }} {{ value }}</span>
|
<div class="withdraw-balance-col">
|
<span>{{ $t('可用') }}: {{ getwei(usdtBalance * 1, numLenth) || '0' }} {{ value }}</span>
|
<span>Locked: 0 {{ value }}</span>
|
<span>{{ $t('可提现') }}: ≈{{ getwei(usdtBalance * 1, numLenth) || '0' }} {{ value }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="withdraw-body-footer">
|
<van-button class="withdraw-submit-btn" @click="onMainSubmit">
|
{{ $t('提交') }}
|
</van-button>
|
</div>
|
|
<!-- Network 选择 -->
|
<van-action-sheet v-model:show="showNetworkSheet" :actions="networkActions" @select="onSelectNetwork" />
|
|
<!-- Currency 选择 -->
|
<van-action-sheet v-model:show="showSymbol" :actions="actions.filter(item => item.name !== value)" @select="onSelect" />
|
|
<!-- Payment Password 弹框 (图二) -->
|
<van-popup v-model:show="showPasswordPopup" position="bottom" round class="withdraw-password-popup">
|
<div class="withdraw-password-box">
|
<div class="withdraw-password-head">
|
<span class="withdraw-password-title">{{ $t('fundsPassword') }}</span>
|
<van-icon name="cross" class="withdraw-password-close" @click="showPasswordPopup = false" />
|
</div>
|
<input v-model="safeword" type="password" class="withdraw-password-input"
|
:placeholder="$t('fundsPasswordContTips')" maxlength="6" />
|
<div class="withdraw-password-forgot-wrap">
|
<span class="withdraw-password-forgot" @click="onForgotPassword">{{ $t('忘记资金密码?') }}</span>
|
</div>
|
<van-button class="withdraw-password-submit" @click="onConfirm">
|
{{ $t('提交') }}
|
</van-button>
|
</div>
|
</van-popup>
|
|
<bar-scan v-if="scancode" @ok="getResult"></bar-scan>
|
</div>
|
</template>
|
|
<script>
|
import { Popup, ActionSheet, showToast } from "vant";
|
import Axios from "@/service/recharge.js";
|
import { _widtGetSessionToken, _withdrawFee, _withdrawApply } from "@/service/withdraw.api.js";
|
import assetsHead from "@/components/Transform/assets-head/index.vue";
|
import BarScan from '@/components/Transform/scan/scan.vue';
|
import { _getAllWallet } from "@/service/fund.api";
|
import { throttle } from "@/utils/index.js";
|
|
export default {
|
name: "withdrawPage",
|
components: {
|
assetsHead,
|
[Popup.name]: Popup,
|
[ActionSheet.name]: ActionSheet,
|
BarScan
|
},
|
data() {
|
return {
|
tip: '',
|
value: 'USDT',
|
showSymbol: false,
|
showNetworkSheet: false,
|
showPasswordPopup: false,
|
actions: [{ name: 'USDT' }, { name: 'BTC' }, { name: 'ETH' }, { name: 'USDC' }],
|
blockList: [],
|
blockchainIndex: 0,
|
usdtBalance: "",
|
amount: "",
|
fee: "",
|
volume_last: "",
|
blockName: "",
|
address: "",
|
scancode: false,
|
withdraw_fee_type: '',
|
percent: 0,
|
numLenth: 3,
|
safeword: '',
|
sessionToken: ''
|
};
|
},
|
computed: {
|
networkActions() {
|
return (this.blockList || []).map((item, index) => ({
|
name: item.blockchain_name,
|
index
|
}));
|
}
|
},
|
created() {
|
_widtGetSessionToken().then((res) => {
|
this.sessionToken = (res && res.session_token) ? res.session_token : '';
|
}).catch(() => {});
|
this.getBlock(this.value);
|
this.getAvailable(this.actions[0].name);
|
Axios.getRechargeTips({
|
language: this.$i18n.locale,
|
token: this.$store.state.user.userInfo.token,
|
content_code: '003',
|
}).then(res => {
|
this.tip = res.content;
|
}).catch(() => {});
|
this.fetchFee();
|
},
|
methods: {
|
goBack() {
|
this.$router.push('/quotes/index?tabActive=1');
|
},
|
fetchFee() {
|
_withdrawFee({
|
amount: 1,
|
channel: this.value + '_' + (this.blockName || (this.blockList[0] && this.blockList[0].blockchain_name))
|
}).then((res) => {
|
this.withdraw_fee_type = res.withdraw_fee_type;
|
if (this.withdraw_fee_type === 'rate') {
|
this.percent = res.fee;
|
} else {
|
this.fee = res.fee;
|
}
|
}).catch(() => {});
|
},
|
getwei(value, numLenth) {
|
let str = (value || 0).toString();
|
const strIndex = str.indexOf('.');
|
if (strIndex === -1) return str;
|
return str.substring(0, strIndex + numLenth);
|
},
|
clickCode() {
|
this.scancode = true;
|
},
|
getResult(result) {
|
this.address = result || '';
|
if (result !== "") this.scancode = false;
|
},
|
onMainSubmit() {
|
if (!this.address || this.address.length > 63) {
|
showToast(this.$t('提现地址格式错误'));
|
return;
|
}
|
if (!this.amount) {
|
showToast(this.$t('请输入正确数量'));
|
return;
|
}
|
if (this.amount / 1 > this.usdtBalance / 1) {
|
showToast(this.$t('金额不足'));
|
return;
|
}
|
this.showPasswordPopup = true;
|
},
|
onSelectNetwork(item) {
|
this.blockchainIndex = item.index;
|
this.blockName = item.name;
|
this.showNetworkSheet = false;
|
this.fetchFee();
|
},
|
goRouter(params) {
|
this.$router.push({ path: params, query: { type: '2', back: "1" } });
|
},
|
onSelect(item) {
|
this.amount = '';
|
this.volume_last = '';
|
this.fee = '';
|
this.showSymbol = false;
|
this.value = item.name;
|
this.withdraw_fee_type = '';
|
this.getBlock(item.name);
|
this.getAvailable(item.name);
|
if (item.name === 'BTC' || item.name === 'ETH') {
|
this.numLenth = 7;
|
_withdrawFee({
|
amount: 1,
|
channel: this.value + '_' + this.blockName
|
}).then((res) => {
|
this.withdraw_fee_type = res.withdraw_fee_type;
|
if (this.withdraw_fee_type === 'fixed') this.fee = res.fee;
|
else this.percent = res.fee;
|
});
|
} else {
|
this.numLenth = 3;
|
}
|
},
|
getBlock(symbol) {
|
Axios.getBlock({ coin: symbol }).then((res) => {
|
this.blockList = res || [];
|
this.blockName = this.blockList[0] ? this.blockList[0].blockchain_name : '';
|
this.blockchainIndex = 0;
|
this.fetchFee();
|
});
|
},
|
getAvailable(symbol) {
|
_getAllWallet().then((res) => {
|
const walletList = (res.extends || []);
|
const initObj = walletList.find(item => (item.symbol_data || '').toLowerCase() === (symbol || '').toLowerCase());
|
this.usdtBalance = initObj ? initObj.volume : '';
|
});
|
},
|
allBtn() {
|
this.amount = this.getwei(this.usdtBalance, this.numLenth);
|
this.changeInput();
|
},
|
changeInput() {
|
if (this.amount === '') {
|
this.volume_last = '0.00';
|
return;
|
}
|
if (this.amount.length > 11) this.amount = this.amount.slice(0, 11);
|
if (this.withdraw_fee_type === 'part') {
|
_withdrawFee({
|
amount: this.amount,
|
channel: this.value + '_' + this.blockName
|
}).then((res) => {
|
this.fee = res.fee;
|
this.volume_last = res.volume_last;
|
});
|
} else if (this.withdraw_fee_type === 'rate') {
|
this.fee = this.amount ? this.getwei(this.percent * this.amount, this.numLenth) : '0';
|
this.volume_last = this.amount ? this.getwei(this.amount * 1 - this.percent * this.amount, this.numLenth) : '0';
|
} else {
|
this.volume_last = (this.amount * 1 < this.fee * 1) ? '0' : this.getwei(this.amount * 1 - this.fee * 1, this.numLenth);
|
}
|
},
|
onForgotPassword() {
|
this.showPasswordPopup = false;
|
// 可跳转忘记资金密码页
|
},
|
onConfirm: throttle(function () {
|
if (!this.amount) {
|
showToast(this.$t('请输入数量'));
|
return;
|
}
|
const numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
|
if (!numReg.test(this.amount)) {
|
showToast(this.$t('请输入数字'));
|
return;
|
}
|
if (!this.address) {
|
showToast(this.$t('请输入提现地址'));
|
return;
|
}
|
if (!this.safeword) {
|
showToast(this.$t('fundsPasswordContTips'));
|
return;
|
}
|
_withdrawApply({
|
session_token: this.sessionToken,
|
amount: this.amount,
|
safeword: this.safeword,
|
from: this.address,
|
channel: this.value + '_' + this.blockName
|
}).then(() => {
|
this.showPasswordPopup = false;
|
this.$router.push({ path: "/cryptos/withdraw/withdrawSumbit" });
|
}).catch(err => {
|
if (err.code == 105) {
|
showToast(this.$t('当前还需交易%s,才可提币', { 'MONEY': err.msg }));
|
} else if (err.code === 'ECONNABORTED') {
|
showToast(this.$t('网络超时！'));
|
} else if (err.msg !== undefined) {
|
showToast(this.$t(err.msg));
|
}
|
});
|
}, 1000),
|
async pastCont() {
|
try {
|
if (navigator.clipboard && navigator.clipboard.readText) {
|
this.address = await navigator.clipboard.readText();
|
}
|
} catch (e) {}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.withdraw-wrap {
|
min-height: 100vh;
|
background: #f5f5f5;
|
padding-bottom: 2rem;
|
}
|
.withdraw-head-icon {
|
width: 1.375rem;
|
height: 1.1875rem;
|
}
|
/* 两个独立 div：上下边距各 20px */
|
.withdraw-part {
|
margin: 20px 1rem;
|
padding: 0 1.5rem;
|
background: #fff;
|
border-radius: 0.5rem;
|
overflow: hidden;
|
}
|
.withdraw-body-footer {
|
margin: 20px 1rem 2rem;
|
padding: 20px 0;
|
}
|
/* 字体加大 */
|
.withdraw-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
min-height: 4rem;
|
padding: 40px 0;
|
font-size: 34px;
|
}
|
.withdraw-label {
|
color: #333;
|
font-weight: 600;
|
}
|
.withdraw-row-right {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
gap: 0.25rem;
|
}
|
.withdraw-value {
|
color: #333;
|
text-align: right;
|
}
|
.withdraw-arrow {
|
color: #999;
|
font-size: 34px;
|
flex-shrink: 0;
|
}
|
.withdraw-block {
|
padding: 1rem 0;
|
}
|
.withdraw-block .withdraw-label {
|
display: block;
|
margin-bottom: 0.75rem;
|
font-size: 34px;
|
color: #333;
|
}
|
.withdraw-input-row {
|
display: flex;
|
align-items: center;
|
background: transparent;
|
border-radius: 0.5rem;
|
padding: 0 1rem;
|
height: 4rem;
|
}
|
.withdraw-input {
|
flex: 1;
|
border: none;
|
background: transparent;
|
font-size: 34px;
|
color: #333;
|
outline: none;
|
}
|
.withdraw-input::placeholder {
|
color: #9b9b9b;
|
}
|
.withdraw-paste {
|
font-size: 32px;
|
color: #5e2bc8;
|
margin-left: 0.5rem;
|
cursor: pointer;
|
}
|
.withdraw-scan {
|
width: 2.25rem;
|
height: 2.25rem;
|
margin-left: 0.75rem;
|
cursor: pointer;
|
}
|
.withdraw-quantity-row .withdraw-unit {
|
font-size: 28px;
|
color: #9b9b9b;
|
margin-left: 0.5rem;
|
}
|
.withdraw-all {
|
font-size: 32px;
|
color: #5e2bc8;
|
margin-left: 0.75rem;
|
cursor: pointer;
|
}
|
.withdraw-fee-balance {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-top: 0.75rem;
|
font-size: 28px;
|
color: #9b9b9b;
|
font-weight: normal;
|
}
|
.withdraw-balance-col {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
font-weight: normal;
|
}
|
.withdraw-balance-col span {
|
line-height: 1.5;
|
}
|
.withdraw-submit-btn {
|
width: 100%;
|
margin: 20px 0;
|
padding: 20px 0;
|
border: none;
|
border-radius: 0.5rem;
|
background: linear-gradient(90deg, #a443cf, #5e2bc8);
|
color: #fff !important;
|
font-size: 38px;
|
font-weight: 600;
|
}
|
:deep(.withdraw-submit-btn .van-button__text) {
|
color: #fff !important;
|
}
|
|
/* Payment Password 弹框 - 字体加大 */
|
.withdraw-password-popup {
|
border-radius: 1rem 1rem 0 0;
|
}
|
.withdraw-password-box {
|
padding: 2rem 1.5rem 3rem;
|
background: #fff;
|
}
|
.withdraw-password-head {
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 2.5rem;
|
}
|
.withdraw-password-title {
|
font-size: 42px;
|
font-weight: 600;
|
color: #333;
|
text-align: center;
|
}
|
.withdraw-password-close {
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
font-size: 38px;
|
color: #999;
|
cursor: pointer;
|
}
|
.withdraw-password-input {
|
width: 100%;
|
padding: 2rem 1rem;
|
background: #f6f6f6;
|
border: none;
|
border-radius: 0.5rem;
|
font-size: 34px;
|
color: #333;
|
box-sizing: border-box;
|
outline: none;
|
}
|
.withdraw-password-input::placeholder {
|
color: #9b9b9b;
|
}
|
.withdraw-password-forgot-wrap {
|
text-align: right;
|
margin-top: 0.75rem;
|
margin-bottom: 1.5rem;
|
}
|
.withdraw-password-forgot {
|
font-size: 32px;
|
color: #666;
|
cursor: pointer;
|
}
|
.withdraw-password-submit {
|
width: 100%;
|
border: none;
|
border-radius: 0.5rem;
|
background: linear-gradient(90deg, #a443cf, #5e2bc8);
|
color: #fff !important;
|
font-size: 38px;
|
font-weight: 600;
|
margin-bottom: 40px;
|
}
|
:deep(.withdraw-password-submit .van-button__text) {
|
color: #fff !important;
|
}
|
</style>
|
