9 changed files with 581 additions and 28 deletions
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 367 B |
@ -1,8 +1,12 @@ |
|||
// 导入自己需要的组件
|
|||
import { Slider } from 'element-ui' |
|||
import { Slider,Steps,Step,Select,Option } from 'element-ui' |
|||
const components = [Slider,Steps,Step,Select,Option] |
|||
const element = { |
|||
install: function (Vue) { |
|||
Vue.use(Slider) |
|||
// Vue.use(Slider)
|
|||
components.forEach(component => { |
|||
Vue.use(component) |
|||
}) |
|||
} |
|||
} |
|||
export default element |
|||
@ -0,0 +1,441 @@ |
|||
<template> |
|||
<v-page> |
|||
<v-header> |
|||
<template #title> |
|||
<view> |
|||
{{ $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: #121212;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'"> |
|||
<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 type="number" @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: #121212;"> |
|||
<ul class="fn-md rounded-md m-y-xs line-height-2"> |
|||
<li>·{{ $t("assets.c5") }}{{lang=='zh-TW'||lang=='jp'?'。':'.'}}</li> |
|||
<li>·{{ $t("assets.c6") }}{{lang=='zh-TW'||lang=='jp'?'。':'.'}}</li> |
|||
<li>·{{ $t("assets.c7") }}{{lang=='zh-TW'||lang=='jp'?'。':'.'}}</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: 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: 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> |
|||
Loading…
Reference in new issue