11 changed files with 617 additions and 107 deletions
@ -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 = { |
const element = { |
||||
install: function (Vue) { |
install: function (Vue) { |
||||
Vue.use(Slider) |
// Vue.use(Slider)
|
||||
|
components.forEach(component => { |
||||
|
Vue.use(component) |
||||
|
}) |
||||
} |
} |
||||
} |
} |
||||
export default element |
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'" :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: #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> |
||||
@ -1,22 +1,22 @@ |
|||||
{ |
{ |
||||
"uni-datetime-picker.selectDate": "选择日期", |
"uni-datetime-picker.selectDate": "select date", |
||||
"uni-datetime-picker.selectTime": "选择时间", |
"uni-datetime-picker.selectTime": "select time", |
||||
"uni-datetime-picker.selectDateTime": "选择日期时间", |
"uni-datetime-picker.selectDateTime": "select datetime", |
||||
"uni-datetime-picker.startDate": "开始日期", |
"uni-datetime-picker.startDate": "start date", |
||||
"uni-datetime-picker.endDate": "结束日期", |
"uni-datetime-picker.endDate": "end date", |
||||
"uni-datetime-picker.startTime": "开始时间", |
"uni-datetime-picker.startTime": "start time", |
||||
"uni-datetime-picker.endTime": "结束时间", |
"uni-datetime-picker.endTime": "end time", |
||||
"uni-datetime-picker.ok": "确定", |
"uni-datetime-picker.ok": "Define", |
||||
"uni-datetime-picker.clear": "清除", |
"uni-datetime-picker.clear": "Clear", |
||||
"uni-datetime-picker.cancel": "取消", |
"uni-datetime-picker.cancel": "Cancel", |
||||
"uni-datetime-picker.year": "年", |
"uni-datetime-picker.year": "/", |
||||
"uni-datetime-picker.month": "月", |
"uni-datetime-picker.month": "", |
||||
"uni-calender.SUN": "日", |
"uni-calender.SUN": "Sun", |
||||
"uni-calender.MON": "一", |
"uni-calender.MON": "Mon", |
||||
"uni-calender.TUE": "二", |
"uni-calender.TUE": "Tue", |
||||
"uni-calender.WED": "三", |
"uni-calender.WED": "Wed", |
||||
"uni-calender.THU": "四", |
"uni-calender.THU": "Thu", |
||||
"uni-calender.FRI": "五", |
"uni-calender.FRI": "Fri", |
||||
"uni-calender.SAT": "六", |
"uni-calender.SAT": "Sat", |
||||
"uni-calender.confirm": "确认" |
"uni-calender.confirm": "Confirm" |
||||
} |
} |
||||
Loading…
Reference in new issue