Files
h5-uniapp/pages/my/safety/bind.vue
T
li 6b02df55ab feat: contract account tab, full i18n, male avatar, PC home stretch
- Asset page: add Contract account row + tab, show num_lh balance
- Total Assets = Spot + Contract + Fiat
- All Chinese text eliminated (z-paging, loadmore, colorui, pages)
- Password/payword pages use image captcha instead of OTP
- Home page PC: full-width stretch layout
- Register captcha input type fix, invite code lock
2026-04-05 13:05:27 +08:00

278 lines
7.3 KiB
Vue

<template>
<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
<myNav :title="current==0?i18n.mine.safety.email:i18n.mine.safety.phone"></myNav>
<view class="padding-w-30">
<view v-if="current==0" class="width-690 padding-w-32">
<view class="width-100b height-96 line-height-96">
<text class="font-30 bold-font">{{i18n.regist.phone}}</text>
</view>
<view class="width-100b height-96 radiu-12"
style="border-bottom: 1px solid rgba(191, 195, 199, 0.2);">
<input class="width-100b height-96 font-30" type="text" v-model="email"
:placeholder="i18n.regist.phoneTag" />
</view>
</view>
<view v-if="current==1" class="width-690 padding-w-32">
<view @click="kaiqiChina=true,countryType=true" class="width-100b height-96 flex align-center justify-between" style="border-bottom: 1px solid rgba(191, 195, 199, 0.2);">
<text class="font-30 bold-font">{{i18n.regist.guoji}}</text>
<text class="font-30 bold-font">{{seleCountry.label}}</text>
</view>
</view>
<view v-if="current==1" class="width-690 padding-w-32">
<view class="width-100b height-96 line-height-96">
<text class="font-30 bold-font">{{i18n.regist.mobile}}</text>
</view>
<view class="width-100b height-96 radiu-12 flex align-center" style="border-bottom: 1px solid rgba(191, 195, 199, 0.2);">
<view v-if="seleCountry.value" class="width-120 height-66 margin-r-20 flex align-center justify-center" style="border: 1rpx solid #3ECEB2;border-radius: 6rpx;">
<text class="font-30 numbold-font" style="color: #3ECEB2;">+{{seleCountry.value}}</text>
</view>
<view v-else class="width-120 margin-r-20" style="border: 1rpx solid #3ECEB2;border-radius: 6rpx;">
<input class="flex-1 height-66 font-30 numbold-font text-center" type="number" maxlength="6" v-model="quhao"
:placeholder="i18n.regist.quhao" style="color: #3ECEB2;"/>
</view>
<input class="flex-1 height-96 font-30 numbold-font" type="number" v-model="phone"
:placeholder="i18n.regist.mobileTag" />
</view>
</view>
<view class="width-690 padding-w-32 margin-t-30">
<view class="width-100b height-96 line-height-96">
<text class="font-30 bold-font">{{i18n.regist.code}}</text>
</view>
<view class="width-100b height-96 radiu-12 flex align-center justify-between"
style="border-bottom: 1px solid rgba(191, 195, 199, 0.2);">
<input class="flex-1 height-96 font-30" type="number" v-model="code"
:placeholder="i18n.regist.codeTag" />
<text @click="cutTime()" class="font-30 bold-font color-0165EE">{{codeText}}</text>
</view>
</view>
<view class="width-600" style="margin:130rpx auto;">
<button @click="bind" class="cu-btn loginBtn">{{i18n.regist.bind}}</button>
</view>
</view>
<u-picker @columnchange="change" @confirm="selectCountry" v-model="countryType" mode="selector" range-key="name" :range="rangelist"
:confirm-text="i18n.cycle.confirm" :cancel-text="i18n.cycle.cancel" :kaiqiChina="kaiqiChina"></u-picker>
</view>
</template>
<script>
import {
country
} from '../../../components/country.js'
export default {
data() {
return {
current: 0,
countryType:false,
quhao:'',
rangelist:country,
seleCountry:'',
phone: '',
email: '',
code: '',
kaiqiChina:true,
flag: true,
time: 0,
timeFlag: true,
theme: '',
}
},
computed: {
i18n() {
return this.$t('message');
},
codeText() {
if (this.time > 0) {
return this.time + " s"
} else {
return this.i18n.regist.get
}
}
},
onLoad(e) {
this.current = e.type
this.seleCountry = this.rangelist[0]
},
onShow() {
if (uni.getStorageSync("theme") == "dark") {
this.theme = this.$store.state.darkTheme
} else {
this.theme = this.$store.state.lightTheme
}
},
methods: {
change(index){
// console.log(index)
if(index==1){
this.kaiqiChina = false
}else{
this.kaiqiChina = true
}
},
selectCountry(index){
console.log(index)
this.seleCountry = this.rangelist[index]
},
bind() {
if (!this.flag) return
if(this.current==0){
if (this.email == '') {
this.tos(this.i18n.regist.phoneTag)
return
}
}
if(this.current==1){
if (this.seleCountry.value == ""&&this.quhao=="") {
this.tos(this.i18n.regist.quhao1)
return
}
if (this.phone == '') {
this.tos(this.i18n.regist.mobileTag)
return
}
}
if (this.code == '') {
this.tos(this.i18n.regist.codeTag)
return
}
uni.showLoading({
title: this.i18n.regist.loading,
mask: true
})
this.flag = false
var obj = {}
var url = {}
if(this.current==0){
url = '/my/bind_email'
obj = {
email: this.email,
captcha: this.code,
}
}
if(this.current==1){
url = '/my/bind_mobile'
obj = {
mobile: this.phone,
m_prefix:this.seleCountry.value?this.seleCountry.value:this.quhao,
captcha: this.code,
}
}
// console.log(obj)
this.post(url, obj).then(res => {
console.log(res)
uni.hideLoading()
this.flag = true
if (res.code == 1) {
this.tos(res.msg)
setTimeout(() => {
uni.navigateBack()
}, 500)
}
})
},
cutTime() {
if (!this.timeFlag) return
if (this.current == 0) {
if (this.email == "") {
this.tos(this.i18n.regist.phoneTag)
return
}
uni.showLoading({
title: this.i18n.regist.loading,
mask: true
})
this.timeFlag = false
this.post('/ems/send', {
email: this.email,
event: "changeemail",
}).then(res => {
uni.hideLoading()
if (res.code == 1) {
this.tos(res.msg)
this.time = 120
var that = this
let timeName = setInterval(() => {
if (that.time > 0) {
that.time--
} else {
that.time = 0
that.timeFlag = true
clearInterval(timeName)
}
}, 1000)
} else {
this.timeFlag = true
}
})
}
if (this.current == 1) {
if (this.seleCountry.value == ""&&this.quhao=="") {
this.tos(this.i18n.regist.quhao1)
return
}
if (this.phone == "") {
this.tos(this.i18n.regist.mobileTag)
return
}
uni.showLoading({
title: this.i18n.regist.loading,
mask: true
})
this.timeFlag = false
this.post('/sms/send', {
mobile: this.phone,
m_prefix:this.seleCountry.value?this.seleCountry.value:this.quhao,
event: "changemobile",
}).then(res => {
uni.hideLoading()
if (res.code == 1) {
this.tos(res.msg)
this.time = 60
var that = this
let timeName = setInterval(() => {
if (that.time > 0) {
that.time--
} else {
that.time = 0
that.timeFlag = true
clearInterval(timeName)
}
}, 1000)
} else {
this.timeFlag = true
}
})
}
}
}
}
</script>
<style lang="scss">
page {
background-color: #FFFFFF;
}
.loginBtn {
width: 600rpx;
height: 96rpx;
background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%) !important;
border-radius: 12rpx;
line-height: 96rpx;
color: #FFFFFF;
font-size: 32rpx;
text-align: center;
position: absolute;
bottom: 5%;
left: 50%;
margin-left: -300rpx;
}
</style>