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.
 
 
 

442 lines
13 KiB

<template>
<v-page>
<v-header>
<template #title>
<view>
<!-- {{ $t("assets.b6") }} -->
{{ $t("common.c16") }}
<!-- <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" style="background-color: #f1f1f1;padding: 20px;">
<el-steps direction="vertical" :active="active" style="min-height: 260px !important;width: 100%;box-sizing: border-box;">
<el-step :title="$t('common.c21')" style="flex-basis: 110px;">
<template slot="description">
<view class="d-flex justify-between m-t-md" @click="coinListShow=true" style="border: 1px solid #4e4e5d;padding: 10px;">
<view class="fn-20 color-light">{{ coin }}</view>
<view class="d-flex align-center">
{{ $t('recharge.a0') }}
<van-icon name="arrow"/>
</view>
</view>
</template>
</el-step>
<el-step :title="$t('common.c17')">
<template slot="description">
<view style="margin: 10px 0px;width: 540rpx;">
<v-input @input="addressnum" v-model="form.address" class="bg-form-panel-3 color-light w-max fn-13 rounded-xs" :placeholder="$t('assets.b9')"></v-input>
<el-select v-model="form.addressType" @change="enteraddressType" style="margin-top: 10px;width: 100%;" class="addressType" v-if="coin=='USDT'" :placeholder="$t('common.select')">
<el-option v-for="(item, index) in network" :key="index" :label="item.name" :value="item.id">
<span>{{ item.name }}</span>
</el-option>
</el-select>
</view>
</template>
</el-step>
<el-step :title="$t('common.c18')" v-if="form.address">
<template slot="description">
<view style="margin: 10px 0px;color: #fff;width: 540rpx;">
<v-input @input="amountnum" v-model="form.amount" :min="withdrawFee.withdrawal_min" :max="withdrawFee.withdrawal_max" class="color-light fn-13" :placeholder="$t('assets.c2')"></v-input>
<view class="d-flex justify-between align-end" style="margin: 10px 0px;">
<view style="width: 100%;">{{ $t("assets.c1") }}:{{ withdrawFee.usable_balance }}{{ coin }}</view>
<view style="width: 100%;text-align: right;">{{$t('common.c23')}}:{{timeFormat}}</view>
</view>
</view>
</template>
</el-step>
<el-step :title="$t('common.c13')" v-if="form.amount">
<template slot="description">
<view style="margin: 10px 0px;color: #fff;width: 540rpx;">
<v-input type="password" @input="withdrawalnum" v-model="form.withdrawal_psw" class="color-light w-max fn-13 rounded-xs" :placeholder="$t('common.c14')"></v-input>
</view>
</template>
</el-step>
<el-step :title="$t('safe.a5')" v-if="form.withdrawal_psw">
<template slot="description">
<view style="margin: 10px 0px;color: #fff;width: 540rpx;display: flex;">
<v-input type="text" v-model="form.emailcode" class="w-max color-light fn-13" :placeholder="$t('safe.a6')"></v-input>
<view class="d-flex" style="justify-content: space-between;align-items: center;">
<view style="width: 180rpx;text-align: center;" class="all color-light m-l-md flex-shrink fn-12 getCode" @click="getEmailCode">
<text v-if="!getEmailCodeLock">{{ $t("common.getCode") }}</text>
<text v-else>{{ daojishi }}</text>
</view>
</view>
</view>
</template>
</el-step>
</el-steps>
<view style="margin: 20px 32px;border-top: 2px solid #444;">
<view style="display: flex;align-items: center;padding-top: 10px;">{{$t('common.c24')}}<img src="@/assets/img/zhuanzan.png" alt width="20" style="margin-left: 5px;"/></view>
<view style="display: flex;justify-content: space-between;align-items: center;">
<view>
<view style="font-size: 30px;font-weight: bold;max-width: 540rpx;">
<span style="overflow-wrap: anywhere;">{{price1(quantity)}}</span>
</view>
<view>{{$t('assets.c4')}}: {{coin=='USDT'&&form.addressType==3?withdrawFee.trc20:withdrawFee.withdrawal_fee }} {{coin}}</view>
</view>
<view></view>
</view>
<view style="display: flex;margin-top: 10px;">
<view :class="!form.emailcode?'fontWithdrawal':'fontWithdrawal1'" @click="toDraw">
{{$t('common.c25')}}
</view>
</view>
</view>
<view class="form bg-panel-3 p-x-lg p-y-md" style="background-color: #ccc;">
<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>
<coin-list ref="coinList" v-model="coin" @close="coinListShow = false" v-show="coinListShow"/>
<view v-show="promptaddress" class="modal-overlay">
<view class="modal-content">
<view style="margin-top: 25px;padding: 0px 10px;">
<img src="@/assets/img/tishi.png" alt="" width="60" />
<view style="margin: 20px 0px;">{{$t('common.c29')}}</view>
<view class="losure" @click="closeModal">{{$t('common.c28')}}</view>
</view>
</view>
</view>
</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";
import Profile from "@/api/profile";
export default {
components: {
coinList,
},
data() {
return {
type: 'draw',
coin: "",
lang:"",
active:1,
JStime: 0,
tiemr: null,
indexshow:0,
quantity:"0.00",
timeFormat:"",
rechargeType: 2,
withdrawFee: {},
coinListShow: false,
promptaddress:false,
getEmailCodeLock: false,
lang: uni.getStorageSync('language'),
network:[{id:2,name:"ERC20"},{id:3,name:"TRC20"}],
form: {
coin_id: "",
amount: "",
withdrawal_psw:"",
address: "",
addressType: "",
code_type: 1,
code: '',
emailcode: '',
gr_code: '',//图形验证码Graphic verification code
},
}
},
created() {
this.lang = localStorage.getItem('lang')
this.updateTimeFormat()
this.timeUpdateInterval = setInterval(this.updateTimeFormat, 36000);
},
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.active = 2
this.form.address = "";
if (this.coin != "USDT") {
this.form.addressType = 1;
} else {
this.rechargeType = 2;
}
this.withdrawalBalance();
}
},
},
methods: {
price1(item){
if (item) {
let price = item.toString();
let parts = price.split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
}
},
addressnum(e){
if(e&&this.indexshow!==1){
this.indexshow++;
this.promptaddress = true;
this.active = 3
}
// console.log(e);
},
closeModal(){
this.promptaddress = false;
},
// 获取提币地址
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;
});
},
enteraddressType(e){
if(e&&this.form.amount){
const num = this.coin=='USDT'&&this.form.addressType==3?this.withdrawFee.trc20:this.withdrawFee.withdrawal_fee
this.quantity = this.form.amount - num
}
},
// 獲取邮箱验证码
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.form.gr_code) {
// this.$toast(this.$t('common.GraphicValidation'))
// 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.withdrawal_psw){
this.$toast(this.$t('common.c14'))
return
}
if (!this.form.emailcode) {
this.$toast(this.$t('safe.a6'))
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() {
// if(this.status!=2){
// this.$toast(this.$t('common.withdrawal2'));
// }
// 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);
// this.reGetGraphChe();//重新获取图形验证码;
} 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(() => {
});
},
amountnum(){
if(this.form.amount){
this.active = 4
const num = this.coin=='USDT'&&this.form.addressType==3?this.withdrawFee.trc20:this.withdrawFee.withdrawal_fee
this.quantity = this.form.amount - num
if(this.quantity < 0){
this.quantity = "0.00"
}
}else{
this.quantity = "0.00"
}
},
withdrawalnum(){
this.active = 5
},
updateTimeFormat() {
// 这里调用获取时间格式的函数,并更新data中的timeFormat
this.timeFormat = this.getTimeFormat();
},
getCurrentUSTime() {
const now = new Date();
const offset = -4 * 60; // UTC-4小时(东部时间)
// 注意:getTimezoneOffset() 返回的是当前时区与UTC的分钟差(正值),需要反向调整
const usTime = new Date(now.getTime() + (now.getTimezoneOffset() * 60000) + (offset * 60000));
return usTime;
},
// 获取当前美国时间的星期几(0代表周日,1代表周一,...,6代表周六)
getDayOfWeek(date) {
return date.getDay();
},
// 根据当前是美国时间的哪一天来返回“12H”或“24H”
getTimeFormat() {
const usTime = this.getCurrentUSTime();
const dayOfWeek = this.getDayOfWeek(usTime);
return dayOfWeek >= 1 && dayOfWeek <= 5 ? '12H' : '24H';
},
}
}
</script>
<style lang="scss">
</style>
<style scoped lang="scss">
.el-steps--vertical{
height: auto;
}
::v-deep .el-step__title.is-wait {
color: #303133 !important;
}
::v-deep .el-input__inner{
background-color: #242424;
}
::v-deep .is-process .el-step__icon.is-text{
border-color: #C0C4CC;
}
.modal-overlay {
z-index: 999999999999;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #1f1f1f;
padding: 20px;
border-radius: 5px;
width: 550rpx;
text-align: center;
position: relative;
}
.losure{
color: #fff;
width: 100%;
height: 40px;
font-size: 16px;
line-height: 40px;
cursor: pointer;
border-radius: 5px;
background-color: #77abff;
}
.getCode{
color: #fff;
margin: 10px 0px;
padding: 5px 10px;
border-radius: 5px;
align-items: center;
border: 1px solid #4e4e5d;
}
.fontWithdrawal{
color: #737475;
cursor: pointer;
padding: 10px 40px;
border-radius: 5px;
background-color: #3f4651;
}
.fontWithdrawal1{
color: #fff;
cursor: pointer;
padding: 10px 40px;
border-radius: 5px;
background-color: #1c52bc;
}
</style>