<template>
|
<view class="content">
|
<view class="input">
|
<input type="number" class="input-phone" placeholder="请输入手机号" v-model="phone" maxlength="11" />
|
</view>
|
<view class="input">
|
<input type="number" class="input-phone" placeholder="请输入验证码" v-model="code" maxlength="4" />
|
<button class="button sendCode" :class="{disabled:(verifyPhone)}" :disabled="verifyPhone" @click="getCode">{{st}}</button>
|
</view>
|
<button class="button submit" :loading="loading.submit" :class="{disabled:verifyCode}" :disabled="verifyCode || loading.submit" @click="submit">提交</button>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState,
|
mapMutations
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
phone:"",
|
code:"",
|
s:0,
|
st:"发送验证码",
|
uid:"",
|
loading:{
|
submit:false
|
}
|
}
|
},
|
onLoad(o) {
|
if(o.uid){
|
this.uid = o.uid
|
}
|
},
|
computed: {
|
verifyPhone(){
|
const strictReg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
|
return !strictReg.test(this.phone) || this.s != 0
|
},
|
// 验证4位纯数字验证码
|
verifyCode(){
|
const reg = /^\d{4}$/;
|
return !reg.test(this.code)
|
},
|
},
|
methods: {
|
...mapMutations(['setUserInfo']),
|
getCode(){
|
if(this.s >= 1){
|
return
|
}
|
this.$apis.login.getCode({phone:this.phone,type:1}).then(res=>{
|
this.$toast(res.msg)
|
this.s = 60
|
let timer = setInterval(()=>{
|
if(this.s < 1){
|
this.st = '发送验证码'
|
clearInterval(timer)
|
return
|
}
|
this.s--
|
this.st = this.s + 'S后重试'
|
},1000)
|
})
|
},
|
submit(){
|
if(!this.phone){
|
this.$toast('请输入手机号')
|
return
|
}
|
if(!this.phone){
|
this.$toast('请输入验证码')
|
return
|
}
|
let params = {
|
phone:this.phone,
|
uid:this.uid,
|
smsCode:this.code
|
}
|
this.loading.submit = true
|
this.$apis.login.yaoqPhoneRegistered(params).then(res=>{
|
this.loading.submit = false
|
this.$toast('注册成功')
|
this.setUserInfo(res.data)
|
uni.reLaunch({
|
url:"/pages/index/index/index"
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.content{
|
padding: 40rpx 59rpx;
|
.input{
|
height: 110rpx;
|
border-bottom: 1rpx solid #D9D9D9;
|
display: flex;
|
align-items: center;
|
.input-phone{
|
height: 100%;
|
padding-left: 4rpx;
|
flex: 1;
|
}
|
.sendCode{
|
width: 180rpx;
|
background-color: #FF2729;
|
color: #fff;
|
border-radius: 0;
|
font-size: 24rpx;
|
text-align: center;
|
height: 80rpx;
|
border-radius: 18rpx;
|
&.disabled{
|
background-color: #FFD3D3;
|
}
|
}
|
}
|
.submit {
|
width: 635rpx;
|
height: 96rpx;
|
background: #FFFFFF;
|
border-radius: 58rpx;
|
opacity: 0.8;
|
background-color: #FF2729;
|
font-weight: 700;
|
font-size: 35rpx;
|
color: #FFFFFF;
|
line-height: 48rpx;
|
margin-top: 78rpx;
|
&.disabled{
|
background-color: #FFD3D3;
|
}
|
}
|
}
|
</style>
|
