710 lines
18 KiB
Vue
710 lines
18 KiB
Vue
<template>
|
||
<view class="withdraw">
|
||
<u-navbar
|
||
title=""
|
||
bgColor="transparent"
|
||
:placeholder="true"
|
||
:fixed="true"
|
||
leftIcon=""
|
||
height="60"
|
||
>
|
||
<view slot="left">
|
||
<text class="navbar-lab">{{ $lang.withdraw }}</text>
|
||
</view>
|
||
</u-navbar>
|
||
<view class="content">
|
||
<view class="list">
|
||
<view class="lable money"
|
||
>{{ $lang.balance }}：{{ userInfo.money }}</view
|
||
>
|
||
</view>
|
||
<!-- USDT 提现 -->
|
||
<template v-if="userInfo.pay_channel != 'ALIN_VN'">
|
||
<view class="picker-view" @click="show = true">
|
||
<u-input
|
||
readonly
|
||
:placeholder="$lang.pleaseChoose"
|
||
color="#f7ecd0"
|
||
v-model="type"
|
||
border="none"
|
||
>
|
||
<u--text
|
||
:text="$lang.chooseWithdraw"
|
||
slot="prefix"
|
||
margin="0 3px 0 0"
|
||
type="tips"
|
||
></u--text>
|
||
<u-icon
|
||
slot="suffix"
|
||
name="arrow-down-fill"
|
||
color="#b9aa84"
|
||
size="16"
|
||
></u-icon>
|
||
</u-input>
|
||
</view>
|
||
<u-picker
|
||
:title="$lang.pleaseChooseWithdraw"
|
||
closeOnClickOverlay
|
||
:show="show"
|
||
:columns="columns"
|
||
:cancelText="$lang.cancel"
|
||
:confirmText="$lang.confirm"
|
||
@cancel="close"
|
||
@close="close"
|
||
@confirm="confirm"
|
||
></u-picker>
|
||
<view class="list">
|
||
<view class="lable">{{ $lang.walletAddress }}</view>
|
||
<u-input
|
||
class="input"
|
||
color="#f7ecd0"
|
||
clearable
|
||
:placeholder="$lang.enterWithdrawalAddress"
|
||
border="none"
|
||
v-model="address"
|
||
></u-input>
|
||
</view>
|
||
<view class="list">
|
||
<view class="lable">{{ $lang.amount }}</view>
|
||
<u-input
|
||
class="input"
|
||
color="#f7ecd0"
|
||
clearable
|
||
:placeholder="$lang.enterWithdrawalamount"
|
||
border="none"
|
||
v-model="money"
|
||
></u-input>
|
||
</view>
|
||
<view class="list">
|
||
<view class="lab">{{ $lang.rechargeWithdrawNetwork }}</view>
|
||
<view class="type">TRC20</view>
|
||
</view>
|
||
<view class="list">
|
||
<u-button
|
||
@tap="applyWithdraw"
|
||
class="button"
|
||
color="#e5b932"
|
||
:text="$lang.submit"
|
||
></u-button>
|
||
</view>
|
||
<view class="list">
|
||
<view class="tip">{{ $lang.withdrawTip }}</view>
|
||
<view class="tip">{{ $lang.commission }}:1 USDT</view>
|
||
</view>
|
||
</template>
|
||
<!-- 越南银行卡提现 -->
|
||
<template v-if="userInfo.pay_channel == 'ALIN_VN'">
|
||
<view class="picker-view" @click="openBankPicker">
|
||
<u-input
|
||
readonly
|
||
:placeholder="$lang.pleaseChoose"
|
||
color="#f7ecd0"
|
||
v-model="bankName"
|
||
border="none"
|
||
>
|
||
<u--text
|
||
:text="$lang.bankName"
|
||
slot="prefix"
|
||
margin="0 3px 0 0"
|
||
type="tips"
|
||
></u--text>
|
||
<u-icon
|
||
slot="suffix"
|
||
name="arrow-down-fill"
|
||
color="#b9aa84"
|
||
size="16"
|
||
></u-icon>
|
||
</u-input>
|
||
</view>
|
||
<u-popup
|
||
:show="showBankPicker"
|
||
mode="bottom"
|
||
round="20"
|
||
closeOnClickOverlay
|
||
@close="closeBankPicker"
|
||
>
|
||
<view class="bank-picker-popup">
|
||
<view class="bank-picker-header">
|
||
<view class="bank-picker-action cancel" @click="closeBankPicker">{{
|
||
$lang.cancel
|
||
}}</view>
|
||
<view class="bank-picker-title">{{ $lang.bankName }}</view>
|
||
<view class="bank-picker-action confirm" @click="confirmBankSelection">{{
|
||
$lang.confirm
|
||
}}</view>
|
||
</view>
|
||
<scroll-view scroll-y class="bank-picker-list">
|
||
<view
|
||
class="bank-picker-item"
|
||
:class="{ active: tempBankName === item.name }"
|
||
v-for="(item, index) in bankList"
|
||
:key="index"
|
||
@click="selectBankOption(item)"
|
||
>
|
||
<text>{{ item.name }}</text>
|
||
<u-icon
|
||
v-if="tempBankName === item.name"
|
||
name="checkmark"
|
||
color="#231705"
|
||
size="16"
|
||
></u-icon>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
<view class="list">
|
||
<view class="lable">{{ $lang.accountName }}</view>
|
||
<u-input
|
||
class="input"
|
||
color="#f7ecd0"
|
||
clearable
|
||
:placeholder="$lang.enterAccountName"
|
||
border="none"
|
||
v-model="accountName"
|
||
></u-input>
|
||
</view>
|
||
<view class="list">
|
||
<view class="lable">{{ $lang.accountNumber }}</view>
|
||
<u-input
|
||
class="input"
|
||
color="#f7ecd0"
|
||
clearable
|
||
:placeholder="$lang.enterAccountNumber"
|
||
border="none"
|
||
v-model="accountNumber"
|
||
></u-input>
|
||
</view>
|
||
<view class="list">
|
||
<view class="lable">{{ $lang.amount }}</view>
|
||
<u-input
|
||
class="input"
|
||
color="#f7ecd0"
|
||
clearable
|
||
type="number"
|
||
:placeholder="'Tối thiểu 1,000,000 VND'"
|
||
border="none"
|
||
v-model="money"
|
||
></u-input>
|
||
</view>
|
||
<view class="list">
|
||
<u-button
|
||
@tap="applyWithdrawBank"
|
||
class="button"
|
||
color="#e5b932"
|
||
:text="$lang.submit"
|
||
></u-button>
|
||
</view>
|
||
<view class="list">
|
||
<view class="tip">{{ $lang.withdrawTip }}</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="mb60"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
address: "",
|
||
money: "",
|
||
type: "USDT",
|
||
show: false,
|
||
columns: [["USDT"]],
|
||
// 越南银行卡提现
|
||
bankName: "",
|
||
bankCode: "",
|
||
tempBankName: "",
|
||
accountName: "",
|
||
accountNumber: "",
|
||
showBankPicker: false,
|
||
bankColumns: [[]],
|
||
bankList: [],
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
userInfo: (state) => state.app.userInfo,
|
||
$lang: (state) => state.app.lang[state.app.language],
|
||
}),
|
||
},
|
||
onLoad() {
|
||
// 越南渠道加载银行列表
|
||
if (this.userInfo && this.userInfo.pay_channel === 'ALIN_VN') {
|
||
this.loadBankList();
|
||
}
|
||
},
|
||
methods: {
|
||
confirm(chose) {
|
||
this.type = chose.value[0];
|
||
this.close();
|
||
},
|
||
close() {
|
||
this.show = false;
|
||
},
|
||
applyWithdraw() {
|
||
const params = {
|
||
user_id: this.userInfo.id,
|
||
to_addr: this.address,
|
||
amount: this.money,
|
||
};
|
||
if (!params.to_addr) {
|
||
this.$toast({
|
||
message: this.$lang.enterWithdrawalAddress,
|
||
duration: 2000,
|
||
});
|
||
} else if (!params.amount) {
|
||
this.$toast({
|
||
message: this.$lang.amountCannotBe0,
|
||
duration: 2000,
|
||
});
|
||
} else {
|
||
this.$toast({
|
||
type: "loading",
|
||
message: this.$lang.submittingApplication,
|
||
duration: 200000,
|
||
});
|
||
this.$api
|
||
.applyWithdraw(params)
|
||
.then((res) => {
|
||
if (res.Success) {
|
||
this.$toast({
|
||
type: "success",
|
||
message: res.Msg,
|
||
duration: 2000,
|
||
});
|
||
this.address = "";
|
||
this.money = "";
|
||
} else {
|
||
this.$toast({
|
||
message: res.Msg,
|
||
duration: 2000,
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
})
|
||
.finally(() => {
|
||
this.$toastHide();
|
||
});
|
||
}
|
||
},
|
||
// 加载越南银行列表
|
||
loadBankList() {
|
||
this.$api
|
||
.getBankListVn({ user_id: this.userInfo.id })
|
||
.then((res) => {
|
||
if (res.Data && res.Data.data) {
|
||
this.bankList = res.Data.data;
|
||
this.bankColumns = [res.Data.data.map((item) => item.name)];
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
openBankPicker() {
|
||
this.tempBankName = this.bankName;
|
||
this.showBankPicker = true;
|
||
},
|
||
closeBankPicker() {
|
||
this.showBankPicker = false;
|
||
},
|
||
selectBankOption(item) {
|
||
this.tempBankName = item.name;
|
||
},
|
||
// 选择银行
|
||
confirmBankSelection() {
|
||
if (!this.tempBankName) {
|
||
this.showBankPicker = false;
|
||
return;
|
||
}
|
||
this.bankName = this.tempBankName;
|
||
this.bankCode = this.tempBankName;
|
||
this.showBankPicker = false;
|
||
},
|
||
// 越南银行卡提现
|
||
applyWithdrawBank() {
|
||
if (!this.bankName) {
|
||
this.$toast({
|
||
message: this.$lang.bankName,
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
if (!this.accountName) {
|
||
this.$toast({
|
||
message: this.$lang.enterAccountName,
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
if (!this.accountNumber) {
|
||
this.$toast({
|
||
message: this.$lang.enterAccountNumber,
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
if (!this.money || this.money <= 0) {
|
||
this.$toast({
|
||
message: this.$lang.amountCannotBe0,
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
if (Number(this.money) < 1000000) {
|
||
this.$toast({
|
||
message: 'Số tiền rút tối thiểu là 1,000,000 VND',
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
if (Number(this.money) > Number(this.userInfo.money)) {
|
||
this.$toast({
|
||
message: this.$lang.insufficientBalance,
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
const params = {
|
||
user_id: this.userInfo.id,
|
||
account_name: this.accountName,
|
||
account_number: this.accountNumber,
|
||
bank_code: this.bankCode,
|
||
bank_name: this.bankName,
|
||
amount: this.money,
|
||
};
|
||
this.$toast({
|
||
type: "loading",
|
||
message: this.$lang.submittingApplication,
|
||
duration: 200000,
|
||
});
|
||
this.$api
|
||
.applyWithdrawBank(params)
|
||
.then((res) => {
|
||
if (res.Success) {
|
||
this.$toast({
|
||
type: "success",
|
||
message: res.Msg,
|
||
duration: 2000,
|
||
});
|
||
this.bankName = "";
|
||
this.bankCode = "";
|
||
this.accountName = "";
|
||
this.accountNumber = "";
|
||
this.money = "";
|
||
} else {
|
||
this.$toast({
|
||
message: res.Msg,
|
||
duration: 2000,
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
})
|
||
.finally(() => {
|
||
this.$toastHide();
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.withdraw {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
|
||
color: #f7ecd0;
|
||
|
||
::v-deep .u-navbar {
|
||
background: rgba(0, 0, 0, 0.72) !important;
|
||
}
|
||
|
||
::v-deep .u-navbar__content {
|
||
background: transparent !important;
|
||
}
|
||
|
||
::v-deep .u-picker__view__column__item {
|
||
color: #f3e3b8 !important;
|
||
font-size: 16px !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
::v-deep .u-toolbar {
|
||
background: #15120f !important;
|
||
border-bottom-color: rgba(223, 189, 120, 0.12) !important;
|
||
}
|
||
|
||
::v-deep .u-toolbar__title {
|
||
color: #f4dfae !important;
|
||
}
|
||
|
||
::v-deep .u-toolbar__wrapper__cancel {
|
||
color: #a9956d !important;
|
||
}
|
||
|
||
::v-deep .u-toolbar__wrapper__confirm {
|
||
color: #dfbd78 !important;
|
||
}
|
||
|
||
.navbar-lab {
|
||
color: #fbf2de;
|
||
font-weight: 700;
|
||
font-size: 19px;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
.content {
|
||
width: calc(100% - 24px);
|
||
max-width: 760px;
|
||
margin: 10px auto 0;
|
||
padding: 18px 16px 22px;
|
||
box-sizing: border-box;
|
||
border-radius: 24px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(16, 13, 11, 0.96) 0%,
|
||
rgba(10, 8, 7, 0.96) 100%
|
||
);
|
||
border: 1px solid rgba(223, 189, 120, 0.18);
|
||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
|
||
inset 0 1px 0 rgba(255, 245, 223, 0.03);
|
||
min-height: 400px;
|
||
|
||
.picker-view {
|
||
min-height: 56px;
|
||
margin-bottom: 14px;
|
||
padding: 0 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(25, 21, 18, 0.96) 0%,
|
||
rgba(17, 14, 12, 0.96) 100%
|
||
);
|
||
border: 1px solid rgba(223, 189, 120, 0.14);
|
||
border-radius: 16px;
|
||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03),
|
||
inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||
|
||
::v-deep .u-input {
|
||
flex: 1;
|
||
}
|
||
|
||
::v-deep .u-input__content {
|
||
min-height: 54px;
|
||
padding: 0;
|
||
}
|
||
|
||
::v-deep .u-input__content__field-wrapper {
|
||
width: 100%;
|
||
}
|
||
|
||
::v-deep input {
|
||
color: #f7ecd0 !important;
|
||
font-size: 15px !important;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
::v-deep input::placeholder {
|
||
color: rgba(245, 228, 184, 0.4) !important;
|
||
}
|
||
|
||
::v-deep .u-text__value {
|
||
color: #baa67f !important;
|
||
font-size: 13px !important;
|
||
}
|
||
}
|
||
.list {
|
||
margin-bottom: 14px;
|
||
padding: 14px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(23, 19, 16, 0.92) 0%,
|
||
rgba(14, 12, 10, 0.92) 100%
|
||
);
|
||
border: 1px solid rgba(223, 189, 120, 0.1);
|
||
font-size: 14px;
|
||
text-align: center;
|
||
.lab {
|
||
color: #b9aa84;
|
||
margin: 0 0 10px;
|
||
text-align: left;
|
||
font-size: 13px;
|
||
}
|
||
.lable {
|
||
text-align: left;
|
||
color: #d9c6a0;
|
||
margin-top: 0;
|
||
font-size: 15px;
|
||
margin-bottom: 10px;
|
||
font-weight: 600;
|
||
}
|
||
.money {
|
||
min-height: 52px;
|
||
padding: 0 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 17px;
|
||
margin-top: 0;
|
||
color: #f1d392;
|
||
font-weight: 700;
|
||
border-radius: 16px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(27, 22, 18, 0.96) 0%,
|
||
rgba(17, 14, 12, 0.96) 100%
|
||
);
|
||
border: 1px solid rgba(223, 189, 120, 0.14);
|
||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.04);
|
||
}
|
||
.type {
|
||
min-width: 86px;
|
||
height: 36px;
|
||
padding: 0 16px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||
border-radius: 999px;
|
||
text-align: center;
|
||
line-height: 36px;
|
||
font-weight: 700;
|
||
color: #231705;
|
||
box-shadow: 0 8px 18px rgba(125, 84, 22, 0.16),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||
margin: 0 auto;
|
||
}
|
||
.input {
|
||
min-height: 48px;
|
||
padding: 0 12px;
|
||
background: rgba(255, 255, 255, 0.02);
|
||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||
border-radius: 14px;
|
||
|
||
::v-deep .u-input__content {
|
||
min-height: 48px;
|
||
padding: 0;
|
||
}
|
||
|
||
::v-deep .u-input__content__field-wrapper {
|
||
width: 100%;
|
||
}
|
||
|
||
::v-deep input {
|
||
color: #f7ecd0 !important;
|
||
font-size: 15px !important;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
::v-deep input::placeholder {
|
||
color: rgba(245, 228, 184, 0.4) !important;
|
||
}
|
||
}
|
||
.button {
|
||
height: 50px !important;
|
||
margin-top: 8px;
|
||
margin-bottom: 2px;
|
||
border: none !important;
|
||
border-radius: 16px !important;
|
||
color: #231705 !important;
|
||
font-weight: 700;
|
||
letter-spacing: 0.3px;
|
||
box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.36);
|
||
}
|
||
.tip {
|
||
color: #bca47a;
|
||
font-size: 13px;
|
||
text-align: justify;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bank-picker-popup {
|
||
background: linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
|
||
border-top: 1px solid rgba(223, 189, 120, 0.14);
|
||
border-radius: 20px 20px 0 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bank-picker-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 54px;
|
||
padding: 0 16px;
|
||
border-bottom: 1px solid rgba(223, 189, 120, 0.1);
|
||
background: rgba(21, 18, 15, 0.96);
|
||
}
|
||
|
||
.bank-picker-title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #f4dfae;
|
||
}
|
||
|
||
.bank-picker-action {
|
||
min-width: 52px;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
|
||
&.cancel {
|
||
color: #a9956d;
|
||
text-align: left;
|
||
}
|
||
|
||
&.confirm {
|
||
color: #dfbd78;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.bank-picker-list {
|
||
max-height: 52vh;
|
||
padding: 10px 12px calc(18px + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bank-picker-item {
|
||
min-height: 48px;
|
||
padding: 0 14px;
|
||
margin-bottom: 10px;
|
||
border-radius: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #d9c6a0;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(25, 21, 18, 0.96) 0%,
|
||
rgba(17, 14, 12, 0.96) 100%
|
||
);
|
||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03);
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&.active {
|
||
color: #231705;
|
||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||
border-color: rgba(242, 223, 182, 0.45);
|
||
box-shadow: 0 10px 20px rgba(125, 84, 22, 0.16),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||
}
|
||
}
|
||
}
|
||
</style>
|