12 changed files with 600 additions and 17 deletions
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 367 B |
@ -0,0 +1,415 @@ |
|||
<template> |
|||
<div class="wallet-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<form action class="withdraw-body"> |
|||
<div class="modal-dialog modal-xl" style="display: flex;"> |
|||
<div style="height: 800px;width: 650px;"> |
|||
<el-steps direction="vertical" :active="active" style="min-height: 260px !important;width: 650px;box-sizing: border-box;"> |
|||
<el-step :title="$t('common.c21')" style="flex-basis: 110px;"> |
|||
<template slot="description"> |
|||
<div style="pointer-events: all;width: 480px;"> |
|||
<el-select v-model="withdraw.coin_id" @change="enterWithdraw" :placeholder="$t('wallet.pleaseSelect')" style="margin-top: 10px;"> |
|||
<el-option v-for="(item, index) in coinAssets" :key="item.coin_id" :label="item.coin_name" :value="item.coin_id" v-if="item.is_recharge!==0&&item.is_recharge!==null||item.is_withdraw!==0&&item.is_withdraw!==null"> |
|||
<img :src="item.image" alt width="20" /> |
|||
<span>{{ item.coin_name }}</span> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
</el-step> |
|||
<el-step :title="$t('common.c17')" style="position: relative;flex-basis: 155px;"> |
|||
<template slot="description"> |
|||
<div :style="{ pointerEvents: withdraw.coin_id ? 'all' : 'none' }" style="width: 480px;"> |
|||
<div style="position: absolute;top: 4px;right: 130px;"> |
|||
<router-link to="" @click.native="addressText" :style="{ Color: withdraw.coin_id ? '#007bff !important' : '#3f4651 !important' }">{{$t('wallet.addressList')}}</router-link> |
|||
</div> |
|||
<input style="margin-top: 10px;" type="text" :placeholder="$t('wallet.enterDrawAddress')" :data-message="$t('wallet.invalidWallet')+'！'" v-model="withdraw.address" @input="addressnum" class="form-control" required /> |
|||
<el-select :disabled="!withdraw.coin_id" v-model="withdraw.addressType" @change="enteraddressType" :placeholder="$t('wallet.pleaseSelect')" style="margin-top: 10px;" class="addressType" v-if="withdraw.coin_id==1"> |
|||
<el-option v-for="(item, index) in network" :key="index" :label="item.name" :value="item.id"> |
|||
<span>{{ item.name }}</span> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
</el-step> |
|||
<el-step :title="$t('common.c18')" v-if="withdraw.address"> |
|||
<template slot="description"> |
|||
<div style="pointer-events: all;width: 480px;color: #fff;margin-top: 10px;"> |
|||
<input type="number" @input="amountnum" v-model="withdraw.amount" step="0.00000001" :placeholder="$t('wallet.enterDrawNum')" class="form-control" /> |
|||
<span style="display: flex;justify-content: space-between;align-items: center;margin-top: 8px;margin-bottom: 20px;"> |
|||
<!-- <div> |
|||
<input class="form-check-input" type="checkbox" id="allAssets" v-model="allAssets" /> |
|||
<label for="allAssets">{{$t('wallet.all')}}</label> |
|||
</div> --> |
|||
<div style="width: 100%;"> |
|||
<span>{{$t('wallet.availableBalance')}}: {{withdrawFee.usable_balance}} {{withdrawCoin}}</span> |
|||
</div> |
|||
<div style="width: 100%;text-align: right;">{{$t('common.c23')}}：{{timeFormat}}</div> |
|||
</span> |
|||
|
|||
</div> |
|||
</template> |
|||
</el-step> |
|||
<el-step :title="$t('common.c13')" v-if="withdraw.amount"> |
|||
<template slot="description"> |
|||
<div style="pointer-events: all;width: 480px;margin-top: 10px;margin-bottom: 20px;"> |
|||
<input type="password" @input="withdrawalnum" v-model="withdraw.withdrawal_psw" required :placeholder="$t('common.c13')" class="form-control" /> |
|||
</div> |
|||
</template> |
|||
</el-step> |
|||
<el-step :title="$t('login.email-code')" v-if="withdraw.withdrawal_psw"> |
|||
<template slot="description"> |
|||
<div class="withdrawal1"> |
|||
<div style="width: 350px;"> |
|||
<input type="text" id="EmailCode" v-model="withdraw.emailcode" :placeholder="$t('common.enterEmailCode')" class="form-control" /> |
|||
</div> |
|||
<label class="d-flex justify-content-between" for="" style="align-items: center;margin-top: 10px;color: #fff;"> |
|||
<span class="getCodeAA" @click="getEmailCode"> |
|||
<span v-if="!getEmailCodeLock">{{$t('common.getCode')}}</span> |
|||
<span v-else>{{ daojishi }}</span> |
|||
</span> |
|||
</label> |
|||
</div> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> |
|||
<div style="padding: 20px 32px;pointer-events: all;width: 540px;"> |
|||
<div>{{$t('common.c24')}}<img src="@/assets/img/icon/zhuanzan.png" alt width="20" style="margin-left: 5px;"/></div> |
|||
<div style="display: flex;justify-content: space-between;align-items: center;"> |
|||
<div> |
|||
<div style="font-size: 30px;font-weight: bold;">{{price1(quantity)}}</div> |
|||
<div>{{$t('wallet.handlingFee1')}}: {{withdrawCoin=='USDT'&&withdraw.addressType==3?withdrawFee.trc20:withdrawFee.withdrawal_fee }} {{withdrawCoin}}</div> |
|||
</div> |
|||
<div :class="!withdraw.emailcode?'fontWithdrawal':'fontWithdrawal1'" @click="toHandleWithdraw"> |
|||
{{$t('common.c25')}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<p>{{$t('wallet.withdrawalInstructions')}}</p> |
|||
<ul> |
|||
<li>1. {{$t('wallet.enterAddress')}}{{lang=='tw'?'。':'.'}}</li> |
|||
<li>2. {{$t('wallet.notSend')}}{{lang=='tw'?'。':'.'}}</li> |
|||
<li>3. {{$t('wallet.deductionFee')}}{{lang=='tw'?'。':'.'}}</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
<div v-show="promptaddress" class="modal-overlay"> |
|||
<div class="modal-content"> |
|||
<div style="margin-top: 25px;padding: 0px 10px;"> |
|||
<img src="@/assets/img/icon/tishi.png" alt="" width="60" /> |
|||
<div style="margin: 20px 0px;">{{$t('common.c29')}}</div> |
|||
<div class="losure" @click="closeModal">{{$t('common.c28')}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Wallet from "@/api/wallet"; |
|||
import Member from "@/api/member"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
lang: "", |
|||
active:1, |
|||
indexshow:0, |
|||
quantity:"0.00", |
|||
coinAssets: [], |
|||
withdrawCoin: "", |
|||
allAssets: false, |
|||
getEmailCodeLock: false, |
|||
promptaddress:false, |
|||
cacheInputAssets: null, |
|||
timeUpdateInterval: null, |
|||
JStime: 0, |
|||
tiemr: null, |
|||
withdrawFee: { |
|||
usable_balance: "-", |
|||
withdrawal_fee: "-", |
|||
withdrawal_min: "-", |
|||
withdrawal_max: "-" |
|||
}, |
|||
withdraw:{ |
|||
coin_id:"", |
|||
address:"", |
|||
addressType:2, |
|||
code_type: 1, |
|||
amount:"", |
|||
withdrawal_psw:"", |
|||
emailcode:"" |
|||
}, |
|||
network:[{id:2,name:"ERC20"},{id:3,name:"TRC20"}], |
|||
} |
|||
}, |
|||
computed : { |
|||
daojishi(){ |
|||
return '('+this.JStime + 's' + ')'; |
|||
} |
|||
}, |
|||
watch: { |
|||
allAssets(val) { |
|||
if (val) { |
|||
this.cacheInputAssets = this.withdraw.amount; |
|||
this.withdraw.amount = this.withdrawFee.usable_balance; |
|||
} else { |
|||
this.withdraw.amount = this.cacheInputAssets; |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
// console.log(this.Funding); |
|||
this.getCoinAssets() |
|||
this.lang = localStorage.getItem('lang') |
|||
this.updateTimeFormat() |
|||
this.timeUpdateInterval = setInterval(this.updateTimeFormat, 36000); |
|||
}, |
|||
beforeDestroy() { |
|||
// 清除定时器 |
|||
if (this.timeUpdateInterval) { |
|||
clearInterval(this.timeUpdateInterval); |
|||
this.timeUpdateInterval = null; // 可选，将变量置为null以避免潜在的引用问题 |
|||
} |
|||
}, |
|||
methods: { |
|||
withdrawalnum(){ |
|||
this.active = 5 |
|||
}, |
|||
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("."); |
|||
} |
|||
}, |
|||
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'; |
|||
}, |
|||
amountnum(){ |
|||
// if(this.withdraw.amount >= this.withdrawFee.withdrawal_max){ |
|||
// this.quantity = "0.00" |
|||
// this.$message({message: this.$t("common.c26",{name:this.withdrawFee.withdrawal_max}),type: "error",duration : 2000,}); |
|||
// } else |
|||
if(this.withdraw.amount >= this.withdrawFee.withdrawal_min&&this.withdraw.coin_id){ |
|||
this.active = 4 |
|||
const num = this.withdrawCoin=='USDT'&&this.withdraw.addressType==3?this.withdrawFee.trc20:this.withdrawFee.withdrawal_fee |
|||
this.quantity = this.withdraw.amount - num |
|||
}else{ |
|||
this.quantity = "0.00" |
|||
} |
|||
}, |
|||
addressnum(e){ |
|||
if(e&&this.indexshow!==1){ |
|||
this.indexshow++; |
|||
this.promptaddress = true; |
|||
this.active = 3 |
|||
} |
|||
// console.log(e); |
|||
}, |
|||
closeModal(){ |
|||
this.promptaddress = false; |
|||
}, |
|||
enteraddressType(e){ |
|||
if(e&&this.withdraw.amount){ |
|||
const num = this.withdrawCoin=='USDT'&&this.withdraw.addressType==3?this.withdrawFee.trc20:this.withdrawFee.withdrawal_fee |
|||
this.quantity = this.withdraw.amount - num |
|||
} |
|||
}, |
|||
addressText(){ |
|||
this.$router.push("/wallet/address") |
|||
}, |
|||
getCoinAssets() { |
|||
Wallet.fundAccount() |
|||
.then(data => { |
|||
this.coinAssets = data.list; |
|||
}) |
|||
.catch(err => { }); |
|||
}, |
|||
enterWithdraw(e) { |
|||
this.active = 2 |
|||
this.coinAssets.forEach((item)=>{ |
|||
if(item.coin_id === e){ |
|||
this.withdrawCoin = item.coin_name; |
|||
} |
|||
}) |
|||
// 查找余额 手续费等信息 |
|||
Wallet.withdrawalBalance({coin_name: this.withdrawCoin}).then(data => { |
|||
this.withdrawFee = data; |
|||
}) |
|||
.catch(err => { }); |
|||
}, |
|||
getEmailCode(){ |
|||
if(!this.withdraw.address){ |
|||
this.$message({ |
|||
message: this.$t('wallet.enterDrawAddress'), |
|||
// message: 'mlkdfdks', |
|||
// type: "warn", |
|||
duration : 2000, |
|||
}); |
|||
return; |
|||
} |
|||
if(!this.withdraw.amount){ |
|||
this.$message({ |
|||
message: this.$t('wallet.enterDrawNum'), |
|||
// type: "warn", |
|||
duration : 2000, |
|||
}); |
|||
return; |
|||
} |
|||
if(!this.withdraw.withdrawal_psw){ |
|||
this.$message({ |
|||
message: this.$t('common.c14'), |
|||
// type: "warn", |
|||
duration : 2000, |
|||
}); |
|||
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; |
|||
|
|||
let gdata = {bt:this.withdrawCoin,baddr:this.withdraw.address,bnum:this.withdraw.amount} |
|||
Member.getWdcode(gdata).then(res => { |
|||
// console.log(res, 546576798) |
|||
this.$message({ |
|||
message: `${this.$t("login.sendOK")}`, |
|||
type: "success", |
|||
duration : 2000, |
|||
}); |
|||
}).catch(err=>{ |
|||
// this.gett_gc_code(); |
|||
}); |
|||
}, |
|||
toHandleWithdraw() { |
|||
console.log(11111); |
|||
let data = this.withdrawFee |
|||
if (utils.validate(".withdraw-body")) { |
|||
if (data.withdraw_switch == 1) { |
|||
$("#withdraw").modal("hide"); |
|||
this.verShow = true |
|||
} else { |
|||
this.handleWithdraw() |
|||
} |
|||
} |
|||
}, |
|||
handleWithdraw() { |
|||
|
|||
Wallet.withdraw(this.withdraw) |
|||
.then(data => { |
|||
// this.$message(this.$t("wallet.operationComplete") ); |
|||
$("#withdraw").modal("hide"); |
|||
this.verShow = false |
|||
this.$router.push('/wallet/funding?currentTab=withdrawal') |
|||
}) |
|||
.catch(err => { }); |
|||
|
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.el-step__title.is-wait { |
|||
color: #303133 !important; |
|||
} |
|||
.addressType .el-input.is-disabled .el-input__inner{ |
|||
background-color: #000; |
|||
} |
|||
</style> |
|||
<style scoped lang="scss"> |
|||
.getCodeAA{ |
|||
border: 1px solid #444; |
|||
padding: 5px 10px; |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
} |
|||
.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; |
|||
} |
|||
|
|||
.modal-overlay { |
|||
z-index: 999999999999; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.modal-content { |
|||
background-color: #1f1f1f; |
|||
padding: 20px; |
|||
border-radius: 5px; |
|||
width: 400px; |
|||
text-align: center; |
|||
position: relative; |
|||
} |
|||
|
|||
.losure{ |
|||
width: 100%; |
|||
height: 40px; |
|||
font-size: 16px; |
|||
line-height: 40px; |
|||
cursor: pointer; |
|||
border-radius: 5px; |
|||
background-color: #77abff; |
|||
} |
|||
.el-steps--vertical{ |
|||
height: auto; |
|||
} |
|||
.withdrawal1{ |
|||
width: 480px; |
|||
display: flex; |
|||
margin-top: 10px; |
|||
pointer-events: all; |
|||
padding-bottom: 15px; |
|||
border-bottom: 2px solid #444; |
|||
justify-content: space-between; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue