<template>
<div class="login container">
<Header>
<span>注册</span>
</Header>
<section>
<!-- <form action=""> -->
<div class="login-tel">
<input v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*"
type="text"/>
</div>
<div class="login-code">
<input v-model="userCode" placeholder="请输入短信验证码" pattern="[0-
9]*" type="text"/>
<button @click="sendCode" :disabled="disabled">{{codeMsg}}</button>
</div>
<div class="login-tel">
<input v-model="userPwd" placeholder="请设置密码" pattern="[0-9]*"
type="text"/>
</div>
<div class="login-btn" @click="register">注册</div>
<!-- </form> -->
</section>
<Tabbar></Tabbar>
</div>
</template>
<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/views/login/Header.vue";
import http from "@/common/api/request.js"
import { Toast } from 'mint-ui';
export default {
components: { Tabbar, Header },
name: "Login",
data() {
return {
userPwd:"",
disabled:false,
userTel:"",//用户输入的手机号
codeNum:6,//定时器的倒计时秒数
codeMsg:'获取短信验证码',
code:"",//短信验证码
userCode:"",//用户输入的短信验证码
// 验证规则
rules:{
// 手机号验证
userTel:{rule:/^1[23456789]\d{9}$/,msg:'手机号不能为空,并且是11位数字'},
// 密码验证
userPwd:{rule:/^\w{6,12}$/,msg:'密码不能为空,并且要求6-12位'}
}
};
},
methods: {
// 点击快速注册
goRegister(){
this.$router.push("/register")
},
// 点击密码登录
goUserLogin(){
this.$router.push("/userLogin")
},
// 点击获取短信验证码按钮
sendCode(){
// 前端验证
if(!this.validate("userTel")) return//如果没有通过验证。直接return掉,如果通过验证就进
行下面的操作
//请求短信验证码接口
http.$axios({
url:"/api/code",
method:"POST",
data:{
phone:this.userTel //前端给后端传的数据
}
}).then(res=>{
console.log("这里是Login的res",res)//res.data就是手机验证码
if(res.success){
this.code=res.data
}
})
// 禁用按钮
this.disabled=true
// 倒计时
let timer=setInterval(() => { //6秒没有走完的时候,显示’重新发送‘
this.codeNum--
this.codeMsg=`重新发送${this.codeNum}`
}, 1000);
// 判断什么时候停止定时器
setTimeout(() => {
clearInterval(timer)
this.codeNum=6
this.disabled=false
this.codeMsg="获取短信验证码"
}, 6000);
},
validate(key){// ?????????????????????? ?????????????
let bool=true //test() 方法是正则表达式的一个方法,用于检测一个字符串是否匹配某个
模式.语法:regexp.test(str)
if(!this.rules[key].rule.test(this[key])){ //this[key]就是用户输入的值
// 提示信息
Toast(this.rules[key].msg)
bool=false//这里用bool做变量来定义true和false,直接return true会报错
return false //没有通过正则验证,就返回flase
}else{
return bool
}
},
// 点击注册按钮
register(){
if(!this.validate("userPwd")) return//如果没有通过验证。直接return掉,如果通过验证就进
行下面的操作
// 判断验证码是否正确
if(this.code!=this.userCode){
Toast("验证码不正确")
return;
}
//如果正确,进行注册
http.$axios({
url:"/api/register",
method:"POST",
data:{
phone:this.userTel, //前端给后端传的数据
pwd:this.userPwd
}
}).then(res=>{
console.log(res);
})
}
},
};
</script>
<style lang="scss" scoped>
section{
display: flex;
flex-direction: column;
background-color: #f5f5f5;
// justify-content: center;
align-items: center;
div{
width: 8.93rem;
height: 1.173rem;
margin: 0.26rem 0;
font-size: 14px;
}
.login-tel{
margin-top: 0.8rem;
input{
width: 8.93rem;
}
}
input{
line-height: 1.173rem;
background-color: #FFFFFF;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;//加了这个属性,padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里
padding: 0 0.2667rem;
}
.login-code{
display: flex;
input{
flex: 1;
}
button{
line-height: 1.173rem;
color: #fff;
background-color: #b0352f;
border: 0;
border-radius: 0.16rem;
padding: 0 8px;
}
}
.login-btn{
background-color: #b0352f;
line-height: 44px;
border-radius: 6px;
text-align: center;
color: #fff;
font-size: 0.48rem;
}
.tab{
font-size: 0.4rem;
display: flex;
justify-content: space-between;
}
}
</style>