You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

529 lines
17 KiB

<template>
<v-page>
<v-header>
<template #title>
<view>
{{ $t("assets.b6") }}
<!-- <span class="color-theme-1">{{ coin }}</span> -->
</view>
</template>
<template #right>
<v-link :to="'/pages/assets/records?type='+type">
<van-icon class="fn-20 m-t-xs" name="todo-list-o" />
</v-link>
</template>
</v-header>
<view class="layout-main">
<view class="coin border-b p-x-lg p-md d-flex justify-between m-t-md" @click="coinListShow=true">
<view class="fn-25 color-light">{{ coin }}</view>
<view class="d-flex align-center">
{{ $t('recharge.a0') }}
<van-icon name="arrow"/>
</view>
</view>
<view class="bg-panel-3" style="height: 100%;padding-bottom: 120px;">
<view class="">
<view
class="d-flex flex-wrap justify-between align-center p-x-lg p-y-ms color-light"
v-if="coin=='USDT'"
>
<!-- <span>{{$t('assets.b7')}}</span> -->
<view class="group d-flex fn-12 color-light">
<!-- <view class="rounded-xs p-x-lg p-y-ms m-r-md"
:class="rechargeType==1?'bor-active':'bg-panel-3 border'"
size="mini"
@click="changeRechargeType(1)"
>OMNI</view> -->
<view class="rounded-xs p-x-lg p-y-ms m-r-md"
size="mini"
@click="changeRechargeType(2)"
:class="rechargeType==2?'bor-active':'bg-panel-3 border'"
>ERC20
</view>
<view class="rounded-xs p-x-lg p-y-ms m-r-md"
size="mini"
@click="changeRechargeType(3)"
:class="rechargeType==3?'bor-active':'bg-panel-3 border'"
>TRC20
</view>
</view>
</view>
<view class="p-x-lg d-flex justify-between flex-wrap align-center p-y-xs">
<!-- <view class="color-sell fn-12">*{{rechargeType==2?$t('assets.f5',{name:"Ethereun"}):$t('assets.f5',{name:"TRON"})}}</view> -->
<view class="color-light d-block w-max m-y-ms color-light fn-15">{{ $t("assets.b8") }}</view>
<v-input v-model="form.address" class="bg-form-panel-3 p-sm color-light w-max fn-13 rounded-xs"
:placeholder="$t('assets.b9')">
<!--<template #right>-->
<!-- &lt;!&ndash; #ifdef H5 &ndash;&gt;-->
<!-- <v-link tag="span" :to="{path:'/pages/assets/address-list',query:{-->
<!-- from:'draw'-->
<!-- }}" class="color-light fn-20 h-20">-->
<!-- <van-icon class="color-theme-1" name="orders-o" />-->
<!-- </v-link>-->
<!-- &lt;!&ndash; #endif &ndash;&gt;-->
<!-- &lt;!&ndash; #ifndef H5 &ndash;&gt;-->
<!-- <van-icon class="color-theme-1" @click="saoma" name="scan" />-->
<!-- &lt;!&ndash; #endif &ndash;&gt;-->
<!--</template>-->
</v-input>
<view class="color-sell fn-12 m-t-xs">
{{ $t('recharge.a5') }}
</view>
</view>
</view>
<view class="form bg-panel-3 p-x-lg">
<view class="d-flex align-center p-y-md justify-between color-light fn-15">
<span class="color-light">{{ $t("assets.c0") }}</span>
<span>{{ $t("assets.c1") }}:{{ withdrawFee.usable_balance }}
{{ coin }}</span>
</view>
<view class="d-flex align-end p-y-xs justify-between bg-form-panel-3 rounded-xs p-sm p-x-ms">
<v-input type="number" v-model="form.amount" :min="withdrawFee.withdrawal_min"
:max="withdrawFee.withdrawal_max" class=" w-8/12 color-light fn-13"
:placeholder="$t('assets.c2')"></v-input>
<view class="d-flex align-end">
<span class="unit fn-16 flex-shrink">{{ coin }}</span>
<view class="all color-theme-1 m-l-md flex-shrink" style="color: #54B58F;" @click="form.amount = withdrawFee.usable_balance">
{{ $t("assets.c3") }}
</view>
</view>
</view>
<view class="d-flex align-center p-y-xs justify-between fn-13">
<span>{{ $t('common.c1') }}:</span>
<span class="color-light">{{ withdrawFee.withdrawal_min }} {{ coin }}</span>
</view>
<view class="d-flex align-center p-y-xs m-t-ms justify-between color-light fn-15">
<span>{{ $t("assets.c4") }}:</span>
<!-- <span class="color-light">{{ withdrawFee.withdrawal_fee }} {{coin}}</span> -->
</view>
<view class="d-flex align-end p-y-xs justify-between bg-form-panel-3 rounded-xs p-y-sm">
<v-input v-model="coin=='USDT'&&rechargeType==3?withdrawFee.trc20:withdrawFee.withdrawal_fee" disabled
class="p-x-ms color-light w-max fn-13 rounded-xs" :placeholder="$t('assets.b9')">
<template #right>
{{ coin }}
</template>
</v-input>
</view>
<view class="d-flex align-center p-y-xs m-t-ms justify-between color-light fn-15">
<span>{{ $t("reg.a8") }}:</span>
<!-- <span class="color-light">{{ withdrawFee.withdrawal_fee }} {{coin}}</span> -->
</view>
<!-- 密码 -->
<!-- <view class="d-flex align-end p-y-xs justify-between bg-form-panel-3 rounded-xs p-y-sm">
<v-input type="password" v-model="form.password" class="p-x-ms color-light w-max fn-13 rounded-xs" :placeholder="$t('reg.a9')"></v-input>
</view> -->
<!-- 提币密码 -->
<view class="d-flex align-end p-y-xs justify-between bg-form-panel-3 rounded-xs p-y-sm">
<v-input type="password" v-model="form.withdrawal_psw" class="p-x-ms color-light w-max fn-13 rounded-xs" :placeholder="$t('common.c14')"></v-input>
</view>
<view class="d-flex align-center p-y-xs m-t-ms justify-between color-light fn-15">
<span>{{ $t("safe.a5") }}:</span>
</view>
<view class="d-flex align-end p-y-xs justify-between bg-form-panel-3 rounded-xs p-sm p-x-ms">
<v-input type="text" v-model="form.emailcode" class=" w-8/12 color-light fn-13"
:placeholder="$t('safe.a6')"></v-input>
<view class="d-flex align-end">
<view class="all color-theme-1 m-l-md flex-shrink" style="color: #54B58F;" @click="getEmailCode">
<text v-if="!getEmailCodeLock">{{ $t("common.getCode") }}</text>
<text v-else>{{ daojishi }}</text>
</view>
</view>
</view>
</view>
<view class="form bg-panel-3 p-x-lg p-y-md">
<ul class="fn-md rounded-md m-y-xs line-height-2">
<li>·{{ $t("assets.c5") }}</li>
<li>·{{ $t("assets.c6") }}</li>
<li>·{{ $t("assets.c7") }}</li>
</ul>
</view>
<!-- <view class="rounded-md m-b-lg" v-if="list.length" style="padding-bottom: 100px !important;">
<view class="title d-flex justify-between p-x-md p-y-xs align-center color-light">
<span class="fn-lg">{{ $t("assets.c8") }}</span>
</view>
<view class="p-x-md">
<table class="w-max">
<thead class="p-x-md">
<tr class="fn-sm p-x-md">
<th class="p-b-md fn-left p-l-md">{{ $t("assets.c9") }}</th>
<th class="p-b-md fn-left">{{ $t("assets.d0") }}</th>
<th class="p-b-md fn-right p-r-md">{{ $t("assets.c0") }}</th>
<th class="p-b-md fn-right p-r-md">{{ $t('exchange.g3') }}</th>
</tr>
</thead>
<tbody>
<tr class="color-light trChange p-x-md rounded-md" v-for="item in list" :key="item.id">
<td class="p-y-xs p-l-md rounded-tl-sm rounded-bl-sm fn-sm">
{{ item.datetime | parseTime }}
</td>
<td>
<view>{{ item.status_text }}</view>
</td>
<td>
{{ item.amount }}
<span class="color-default">({{ item.coin_name }})</span>
</td>
<td class="fn-right p-r-md rounded-tr-sm rounded-br-sm">
<v-button size="mini" v-if="item.status==0" type="danger" @click="cancelWithdraw(item)">
{{ $t('exchange.g4') }}
</v-button>
</td>
</tr>
<tr v-if="loadMore">
<td colspan="3" class="fn-center p-xs link-active" @click="more">
{{ $t("assets.d4") }}
</td>
</tr>
</tbody>
</table>
</view>
</view> -->
<view class="bot w-max bg-panel-3 p-lg box-size">
<v-button class="w-max m-y-md rounded-xs" block type="yellow" @click="toDraw" ref="btn">{{
$t("assets.b6")
}}
</v-button>
</view>
</view>
</view>
<coin-list ref="coinList" v-model="coin" @close="coinListShow = false" v-show="coinListShow"/>
<van-popup :show="secondaryShow" @close="secondaryShow=false" closeable close-on-popstate position="bottom"
custom-style="height:40%">
<van-tabs class="m-t-lg p-t-lg" v-if="secondaryShow" :sticky="false" :active="form.code_type" @change="changeTab">
<van-tab title="Google" v-if="withdrawFee.google_status==1" :name="3">
<v-input class="border h-40 m-y-md m-x-lg p-x-md" type="number" :placeholder="$t('common.code')"
v-model="form.code"></v-input>
</van-tab>
<van-tab :title="$t('login.a8')" v-if="withdrawFee.phone_status==1" :name="1">
<v-input class="border h-40 m-y-md m-x-lg p-x-md" type="number" :placeholder="$t('common.code')"
v-model="form.code">
<template #right>
<v-code type="green-plain" url="/user/getCode" :data="{type:1}" ref="mobileCode"></v-code>
</template>
</v-input>
</van-tab>
<van-tab :title="$t('login.a9')" v-if="withdrawFee.email_status==1" :name="2">
<v-input class="border h-40 m-y-md m-x-lg p-x-md" type="number" :placeholder="$t('common.code')"
v-model="form.code">
<template #right>
<v-code type="green-plain" url="/user/getCode" :data="{type:2}" ref="emailCode"></v-code>
</template>
</v-input>
<view class="m-md"></view>
</van-tab>
</van-tabs>
<view class="m-md">
<v-button type="yellow" block class="w-max rounded-md" @click="draw">{{ $t('common.confirm') }}</v-button>
</view>
</van-popup>
<van-toast id="van-toast"/>
</v-page>
</template>
<script>
import coinList from "./coin-list";
import Wallet from "@/api/wallet";
import Member from "@/api/member";
import formData from "@/utils/class/date";
export default {
components: {
coinList,
},
data() {
return {
coinListShow: false,
coin: "",
rechargeType: 2,
form: {
coin_id: "",
amount: "",
withdrawal_psw:"",
address: "",
addressType: "",
code_type: 1,
code: '',
emailcode: '',
},
withdrawFee: {},
list: [],
page: 1,
loadMore: true,
secondaryShow: false,
type: 'draw',
getEmailCodeLock: false,
JStime: 0,
tiemr: null,
};
},
computed: {
activeCoin() {
if (!this.coin) return {};
return this.$refs.coinList.coinList.find(
(item) => item.coin_name == this.coin
);
},
daojishi(){
return '('+this.JStime + 's' + ')';
}
},
watch: {
coin(n) {
if (n) {
this.form.address = "";
if (this.coin != "USDT") {
this.rechargeType = 1;
} else {
this.rechargeType = 2;
}
this.withdrawalBalance();
}
},
},
filters: {
parseTime(val) {
return formData.parseTime(val);
},
},
mounted() {
uni.$on('selectAddress', (e) => {
this.form.address = e
})
},
methods: {
saoma() {
let that = this;
uni.scanCode({
success: function (res) {
that.form.address = res.result;
}
});
},
changeRechargeType(idx) {
this.rechargeType = idx;
this.withdrawalBalance();
},
// 获取提币地址
withdrawalBalance() {
let address_type = 1
let data = {
coin_name: this.coin,
address_type: this.rechargeType
};
Wallet.withdrawalBalance(data).then((res) => {
// console.info(res)
this.withdrawFee = res.data;
});
},
// 獲取邮箱验证码
getEmailCode(){
if (!this.form.address) {
this.$toast(this.$t('assets.b9'))
return
}
if (!this.form.amount) {
this.$toast(this.$t('assets.c2'))
return
}
if (!this.form.withdrawal_psw) {
this.$toast(this.$t('common.c14'))
return
}
if(this.getEmailCodeLock){return};
this.JStime = 300;
this.tiemr = setInterval(()=>{
if(this.JStime===0){
this.getEmailCodeLock = false;
clearInterval(this.tiemr);
return;
}
this.JStime--;
}, 1000)
this.getEmailCodeLock = true;
Member.getWdcode({bt:this.coin,baddr:this.form.address,bnum:this.form.amount}).then(res=>{
// console.log(res);
if(res.code=='4001'){
this.$toast(res.message);
}else{
this.$toast(this.$t('common.sendSuccess'));
}
})
},
// 发起提币
toDraw() {
if (!this.form.address) {
this.$toast(this.$t('assets.b9'))
return
}
if (!this.form.amount) {
this.$toast(this.$t('assets.c2'))
return
}
if (!this.form.emailcode) {
this.$toast(this.$t('safe.a6'))
return
}
if (!this.form.withdrawal_psw) {
this.$toast(this.$t('common.c14'))
return
}
let data = this.withdrawFee
if (data.withdraw_switch == 1) {
this.secondaryShow = true
if (data.google_status == 1) {
this.form.code_type = 3;
} else if (data.phone_status == 1) {
this.form.code_type = 1;
this.$nextTick(() => {
this.$refs.mobileCode.send();
});
} else if (data.email_status == 1) {
this.form.code_type = 2;
this.$nextTick(() => {
this.$refs.emailCode.send();
});
}
} else {
this.draw()
}
},
draw() {
this.form.addressType = this.rechargeType;
this.form.coin_id = this.activeCoin.coin_id;
Wallet.withdraw(this.form, {btn: this.$refs.btn})
.then((res) => {
this.secondaryShow = false
this.form.code = ''
if (res.code == 4001) {
this.$toast(res.message);
} else {
this.$toast.success(this.$t("assets.d5") + "!");
this.form.amount = ''
setTimeout(()=>{
uni.navigateTo({
url:'/pages/assets/records?type='+this.type
})
}, 1500)
// setTimeout(()=>{
// this.getWithdrawRecords();
// }, 2000)
// setTimeout(()=>{
// this.getWithdrawRecords();
// }, 3000)
}
})
.catch(() => {
});
},
reset() {
this.loadMore = true;
this.page = 1;
this.getWithdrawRecords();
},
more() {
this.page++;
this.getWithdrawRecords();
},
// 获取提币记录
getWithdrawRecords() {
let data = {
page: this.page,
};
Wallet.withdrawalRecord(data).then((res) => {
if (res.data.current_page == 1) this.list = [];
let list = [...this.list, ...res.data.data];//无法响应
this.list.splice(0,this.list.length,...list);
// this.list.push(...list);
// console.log('length---------------',this.list.length, '页数:',res.data.current_page);
if (res.data.data.length < res.data.per_page) this.loadMore = false;
});
},
// 撤销订单
cancelWithdraw(item) {
Wallet.cancelWithdraw({withdraw_id: item.id}).then(() => {
this.$toast(this.$t('exchange.g6'))
this.reset();
})
},
changeTab(ev) {
this.form.code_type = ev.detail.name
},
},
created() {
this.getWithdrawRecords();
},
};
</script>
<style lang="scss" scoped>
.trChange:nth-child(2n-1) {
box-shadow: $shadow;
border-radius: $border-radius-xs;
td {
background: $panel-3;
padding-top: $padding-sm;
padding-bottom: $padding-sm;
}
}
.bor-active {
// border: 1px solid $theme-1;
border: 1px solid #54B58F;
position: relative;
overflow: hidden;
// color: $theme-1;
color: #54B58F;
}
.bor-active::before {
content: '';
position: absolute;
right: 0;
bottom: -2px;
height: 0;
width: 0;
border: 10px solid;
// border-color: transparent $theme-1 $theme-1 transparent;
border-color: transparent #54B58F #54B58F transparent;
text-align: center;
}
.bor-active::after {
content: '√';
position: absolute;
right: -4px;
bottom: -1px;
height: 15px;
width: 15px;
width: 20px;
transform: scale(0.7);
text-align: center;
color: white;
}
.border-b {
border-bottom: 5px solid $panel-3;
}
.autowidth {
margin: 0 auto;
}
.bg-lin {
background: linear-gradient(to right, #f6c769, #f3b644);
}
.color-black {
color: black;
}
.bot {
position: fixed;
bottom: 0;
}
</style>