You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
206 lines
4.3 KiB
206 lines
4.3 KiB
<template>
|
|
<view class="wrap">
|
|
<u-popup v-model="show" mode="center" width="90%" :border-radius="32">
|
|
<view class="content">
|
|
<view>
|
|
<u-icon @click="show = false" name="close" class="close"></u-icon>
|
|
</view>
|
|
<view class="content-top">
|
|
<view class="title">绑定手机号</view>
|
|
|
|
</view>
|
|
<view class="content-center">
|
|
<view class="content-center-mobile">
|
|
<view>手机号</view>
|
|
<view>
|
|
<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" :border="false" />
|
|
</view>
|
|
</view>
|
|
<view class="content-center-code">
|
|
<view>验证码</view>
|
|
<view class="content-center-input">
|
|
<u-input @input="inputcode" v-model="form.code" placeholder="请输入验证码" type="number" :border="false" />
|
|
<view @click="getCode" class="content-center-input-get" :class="{'hasSend':hasSend}">{{hasSend?'已发送':'获取验证码'}}<text
|
|
v-if="hasSend">({{count}}s)</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-bottom">
|
|
<view class="content-bottom-btn" @click="submitCode" :class="{'active':canSubmit}">
|
|
确定
|
|
</view>
|
|
<view class="content-bottom-tips">
|
|
验证成功后，将与账号绑定
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: true,
|
|
form: {
|
|
mobile: '',
|
|
code: ''
|
|
},
|
|
count:60,
|
|
hasSend:false,
|
|
sendTimer:null,
|
|
canSubmit:false
|
|
}
|
|
},
|
|
onUnload() {
|
|
if (this.sendTimer) {
|
|
clearInterval(this.sendTimer);
|
|
this.sendTimer = null
|
|
}
|
|
},
|
|
onHide() {
|
|
if (this.sendTimer) {
|
|
clearInterval(this.sendTimer);
|
|
this.sendTimer = null
|
|
}
|
|
},
|
|
methods: {
|
|
getCode(){
|
|
if(this.base.isNull(this.form.mobile)){
|
|
this.base.toast("请输入手机号")
|
|
return
|
|
}
|
|
if(!this.base.isMobile(this.form.mobile)){
|
|
this.base.toast("请输入正确的手机号")
|
|
return
|
|
}
|
|
let that = this
|
|
this.base.toast("发送成功")
|
|
this.hasSend = true
|
|
this.sendTimer = setInterval(function() {
|
|
if (that.count > 1) {
|
|
that.count--
|
|
} else {
|
|
clearInterval(that.sendTimer);
|
|
that.sendTimer = null
|
|
that.count = 60
|
|
that.hasSend = false;
|
|
}
|
|
}, 1000)
|
|
|
|
},
|
|
inputcode(e){
|
|
console.log("E",e)
|
|
if(!this.base.isNull(this.form.mobile) && e.length>0){
|
|
this.canSubmit = true
|
|
}else{
|
|
this.canSubmit = false
|
|
}
|
|
},
|
|
submitCode(){
|
|
if(!this.canSubmit){
|
|
return
|
|
}else{
|
|
if(this.base.isNull(this.form.mobile)){
|
|
this.base.toast("请输入手机号")
|
|
return
|
|
}
|
|
if(!this.base.isMobile(this.form.mobile)){
|
|
this.base.toast("请输入正确的手机号")
|
|
return
|
|
}
|
|
if(this.base.isNull(this.form.code)){
|
|
this.base.toast("请输入验证码")
|
|
return
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.wrap {
|
|
.content {
|
|
position: relative;
|
|
padding: 40rpx 60rpx;
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 45rpx;
|
|
right: 30rpx;
|
|
}
|
|
|
|
&-top {
|
|
.title {
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
&-center {
|
|
padding-top: 20rpx;
|
|
font-size: 32rpx;
|
|
color: rgba(0, 0, 0, .9);
|
|
|
|
&>view {
|
|
border-bottom: 1px solid rgba(0, 0, 0, .15);
|
|
padding-top: 40rpx;
|
|
}
|
|
|
|
&-input {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 10rpx;
|
|
|
|
&-get {
|
|
margin-left: 20rpx;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #d90209;
|
|
font-size: 24rpx;
|
|
color: #d90209;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
background: #fdf0f0;
|
|
width:200rpx;
|
|
}
|
|
.hasSend {
|
|
background: #dad8d8;
|
|
color: #333;
|
|
border: 1px solid #dad8d8;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-bottom {
|
|
margin-top: 40rpx;
|
|
|
|
&-btn {
|
|
background: rgba(0, 0, 0, .15);
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-bottom: 20rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
.active{
|
|
background: #d90209;
|
|
}
|
|
|
|
&-tips {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: rgba(0, 0, 0, .3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |