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