需求:填写手机号--手机号码验证码--验证成功-获取验证码-----失败弹窗提示!--- 验证码位数校验 --- 登陆校验(输入框不为空&&校验通过)
1、HTML
<template>
<div style="padding:40px 30px">
<div class="situLogo">
<img src="@/assets/login/situlogo.png" alt="">
</div>
<div class="FormSubmit">
<van-form ref="form" @submit="onSubmit">
<van-field
class="iconfont icon-shoujihao1"
v-model="tel"
type="tel"
clearable
name="tel"
:rules="userTel"
placeholder="请输入手机号" />
<van-field
v-model="sms"
center
ref="yanzhengCode"
:rules="userMsg"
clearable
class="iconfont icon-yanzhengyanzhengma"
placeholder="请输入手机验证码"
type="digit"
>
<template #button>
<van-button
type="primary"
size="small"
class="getCode"
@click="sendCode"
:disabled="ifdisabled"
native-type="button">
{{codeMsg}}
</van-button>
</template>
</van-field>
<div style="marginTop:119px">
<van-button
round
block
type="primary"
native-type="submit"
><span style="margin: 0.4267rem;fontSize:20px">登 录</span>
</van-button>
</div>
</van-form>
</div>
<div class="footCar">
<img src="@/assets/login/carlogo.png" alt="">
</div>
</div>
</template>
2、JS(需要后端接口:1⃣️获取验证码:参为输入电话号码 2⃣️登陆按钮:参为电话号码&&验证码后端校验返回result)
<script>
import { Form, Field, Button, Toast, CellGroup,} from 'vant'
import {setSms} from '@/api/login'
import { mapActions } from 'vuex'
export default {
components: {
[Button.name]: Button,
[Form.name]:Form,
[Field.name]:Field,
[Toast.name]:Toast,
[CellGroup.name]:CellGroup,
[Toast.name]:Toast
},
data() {
return {
tel: "",
sms: "",
ifdisabled: false,
codeNum: 60,
codeMsg: "获取短信验证码",
count:'',
userTel: [
{
required: true,
message: "请输入手机号",
trigger: "onBlur"
},
{
validator: value => {
return /^1[23456789]\d{9}$/.test(value);
},
message: "手机号格式错误,请检查!"
}
],
userMsg:[{
required: true,
message: "请输入验证码",
trigger: "onBlur"
}, {
validator: value => {
return /^\d{6}$/.test(value);
},
message: "验证码格式错误,请检查!"
}]
};
},
methods: {
...mapActions(['userLogin']),
// 获取短信验证码
async sendCode() {
// 验证手机号格式是否正确
if(!this.tel){
Toast('请输入手机号!')
return
}
if (!this.userTel[1].validator(this.tel)) return;
//发送请求
await setSms({phoneNo:this.tel}).then(res=>{
if(res.code===10000){
Toast.success('验证码已发送!');
// 禁用按钮
this.ifdisabled = true;
// 倒计时
this.count=this.codeNum
let timer=setInterval(()=>{
if(this.count>1 &&this.count<=this.codeNum){
this.count--
this.codeMsg=`重新发送(${this.count})`
}else{
// 判断什么时候停止定时器
clearInterval(timer)
this.codeMsg='获取短信验证码'
this.ifdisabled=false
this.count=''
}
},1000)
}
else{
Toast.fail(res.msg);
}
})
},
async onSubmit(){
//登陆按钮
// eslint-disable-next-line no-undef
await this.userLogin({phoneNo:this.tel,validCode:this.sms}).then(()=>{
this.$router.push( '/Sceneselection')
})
}
}
}
</script>
3、Vuex
actions: {
userLogin({ commit }, userInfo) {
const { phoneNo, validCode } = userInfo
return new Promise((resolve, reject) => {
login({phoneNo, validCode}).then(res=> {
if(res.code === 10000) {
commit('SET_TOKEN', res.result.token)
setToken(res.result.token)
resolve()
} else {
Toast(res.msg)
reject(res.msg)
}
})
})
},
}
4、CSS
<style>
.van-field__control{
font-size: 16px;
margin-left: 15px;
}
.situLogo{
margin:40px auto;
width:218px;
height:108px;
}
.getCode{
border-radius: 10px;
}
.FormSubmit{
margin-top: 55px;
}
.van-button{
background: #3A6DD4;
}
.footCar{
position: fixed;
bottom: 0px;
right: 0px;
}
</style>