<div class="login container">
<Header>
<span>注册</span>
</Header>
<section>
<div class="login-tel">
<input
type="text"
v-model="userTel"
placeholder="请输入手机号"
pattern="[0-9]*"
/>
</div>
<div class="login-code">
<input
type="text"
placeholder="请输入验证码"
v-model="userCode"
pattern="[0-9]*"
/>
<button :disabled="disabled" @click="sendCode()">{{ codeMsg }}</button>
</div>
<div class="login-tel">
<input type="text" v-model="userPwd" placeholder="请设置密码" />
</div>
<div class="login-btn" @click="register()">注册</div>
</section>
<Tabbar></Tabbar>
</div>
import http from "@/common/api/request.js";
import { Toast } from "mint-ui";
data() {
return {
disabled: false, //默认是false,为true时候被禁用 不能点了
codeNum: 6,
codeMsg: "获取短信验证码",
userTel: "", //用户输入的手机号
userPwd: "", //用户设置的密码
userCode: "", //用户输入的验证码
code: "", //sdk验证码
//验证规则是个对象
rules: {
//手机号验证 key
userTel: {
rule: /^1[23456789]\d{9}$/,
msg: "手机号不能为空,并且是11位数字",
},
userPwd: {
rule: /^\w{6,12}$/,
msg: "密码不能为空,并且是6-12位",
},
},
};
},
methods: {
//点击获取短信验证码按钮
sendCode() {
//把手机号/密码的字符串作为实参
if (!this.validate("userTel")) return; //如果函数返回false 则用return来终止login函数
//请求短信验证码接口
http
.$axios({
url: "/api/code",
method: "POST",
data: {
phone: this.userTel,
},
})
.then((res) => {
if (res.success) {
//res.data就是验证码
this.code = res.data;
}
});
//如果通过正则 则继续,禁用按钮
this.disabled = true;
//倒计时
let timer = setInterval(() => {
--this.codeNum;
this.codeMsg = `重新发送${this.codeNum}`;
}, 1000);
//判断什么时候停止定时器 使按钮恢复为可用状态
setTimeout(() => {
clearInterval(timer);
this.codeNum = 6;
this.disabled = false;
this.codeMsg = "获取短信验证码";
}, 6000);
},
//验证信息提示
validate(key) {
let bool = true;
//key是“userTel”或者“userPwd”
if (!this.rules[key].rule.test(this[key])) {
//如果不匹配 则提示信息
Toast(this.rules[key].msg);
bool = false;
return false; //如果不匹配正则 终止函数 并且返回false
}
return bool; //如果匹配正则 就没进入以上条件 返回true
},
//注册
register() {
//验证密码
if (!this.validate("userPwd")) return; //如果函数返回false 则用return来终止login函数
//判断验证码是否正确
if (this.code != this.userCode) {
Toast("验证码不正确");
return;
}
if (this.code == this.userCode) {
//证明用户输入的短信验证码是对的 则发送请求
http
.$axios({
url: "/api/register",
method: "POST",
data: {
phone: this.userTel,
pwd: this.userPwd,
},
})
.then((res) => {
//返回用户信息
console.log(res);
});
}
},
},