78 lines
2.1 KiB
Vue
78 lines
2.1 KiB
Vue
<template>
|
||
<!-- 绑定手机号 页面 -->
|
||
<view class="content">
|
||
<HeaderTop page_title='绑定手机号'></HeaderTop>
|
||
<view class="padding-30">
|
||
<view class="uni-form-item uni-column d-flex x_margin0auto padding-zy30 j-sb a-center border-bottom list">
|
||
<input class="uni-input h-100 flex-1" type="number" focus placeholder="请输入手机号" v-model="phone"/>
|
||
<view class="get_code x-text-red x-text-font24" v-if="get_code==false" @click="getCode()">获取验证码</view>
|
||
<view class="get_code x-text-red x-text-font24 w-50" v-else>{{count_time}}s后再次获取验证码</view>
|
||
</view>
|
||
<view class="uni-form-item uni-column d-flex x_margin0auto padding-zy30 j-sb a-center border-bottom list">
|
||
<input class="uni-input flex-1" type="number" placeholder="验证码" v-model="code" />
|
||
</view>
|
||
<view class="x_public_box x-bg-159 esc_login x-text-white" @click="sureBind()">确定</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
||
import verification from '../../common/verification.js' //正则验证
|
||
export default{
|
||
data(){
|
||
return {
|
||
phone:'',
|
||
get_code: false, //判断是否点击了“获取验证码”按钮 是：true ； 否：false
|
||
code: '', // 验证码
|
||
count_time: 60,
|
||
}
|
||
},
|
||
comments: {
|
||
HeaderTop
|
||
},
|
||
methods:{
|
||
// 确认绑定手机号
|
||
sureBind(){
|
||
verification.isNull(this.phone, this.code) // 非空验证
|
||
if (verification.isNull.prototype.the_Null == true) {
|
||
uni.navigateBack(2)
|
||
|
||
}
|
||
},
|
||
// 获取验证码
|
||
getCode() {
|
||
this.get_code = !this.get_code
|
||
this.timer();
|
||
},
|
||
// 验证码计时器
|
||
timer() {
|
||
if (this.count_time > 0) {
|
||
this.count_time--;
|
||
this.get_code = true
|
||
setTimeout(this.timer, 1000);
|
||
} else {
|
||
this.count_time = 60;
|
||
this.get_code = false
|
||
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
position: relative;
|
||
.list{
|
||
height: 83upx;
|
||
}
|
||
.esc_login{
|
||
line-height: 82upx;
|
||
position: absolute;
|
||
bottom:100upx;
|
||
left: 34upx;
|
||
}
|
||
}
|
||
</style>
|