短信进行登录及注册
一、页面样式以及输入限制和校验
<template>
<div class="forget">
<div class="forget-header">
<div class="forget-list yss-border-1-b">
<div class="forget-list-label">手机号</div>
<div class="forget-list-tel">
{
{ prefixTel }}
</div>
<div class="forget-list-contain tel">
<input
class="forget-list-core"
v-model.trim="suffixTel"
type="tel"
@blur="verifyTel"
placeholder="请输入手机号"
maxlength="11"
/>
</div>
<div class="list-error-wrap" v-show="telMessage">
<img
src="../../../static/images/public/[email protected]"
/> <span>{
{ telMessage }}</span>
</div>
</div>
<div class="forget-list yss-border-1-b">
<div class="forget-list-label">动态码</div>
<div class="forget-list-contain">
<input
class="forget-list-core"
v-model.trim="imgCode"
type="text"
@blur="verifyImgCode"
placeholder="请输入动态码"
maxlength="5"
/>
</div>
<div class="forget-list-code forget-img-code" @click="getImgPath">
<img v-if="imgCodePath" :src="imgCodePath" />
</div>
<div class="list-error-wrap" v-show="imgCodeMessage">
<img
src="../../../static/images/public/[email protected]"
/> <span>{
{ imgCodeMessage }}</span>
</div>
</div>
<div class="forget-list yss-border-1-b">
<div class="forget-list-label">验证码</div>
<div class="forget-list-contain">
<input
class="forget-list-core"
v-model.trim="telCode"
type="text"
@blur="verifyTelCode"
placeholder="请输入验证码"
maxlength="4"
/>
</div>
<div
:class="[
'forget-list-code',
'forget-code-wrap',
telCodeStatus ? 'code-commit' : ''
]"
@click="getEmailCode"
>
<template v-if="countDown > 0"> 重新获取 {
{ countDown }}s </template>
<template v-else> 获取验证码 </template>
</div>
<div class="list-error-wrap" v-show="telCodeMessage">
<img
src="../../../static/images/public/[email protected]"
/> <span>{
{ telCodeMessage }}</span>
</div>
</div>
<div class="forget-btn-wrap">
<button
:class="['forget-btn', nextStatus ? 'commit' : '']"
@click="onLogin"
>
登录
</button>
</div>
</div>
</div>
</template>
二、获取动态码以及发送短信和登录
computed: {
telCodeStatus() {
if (this.countDown > 0) {
return false;
}
if (!regularStudentNumber(this.suffixTel, 11)) {
return false;
}
if (!regularImgAuthCode(this.imgCode)) {
return false;
}
return true;
},
nextStatus() {
if (
regularStudentNumber(this.suffixTel, 11) &&
regularImgAuthCode(this.imgCode) &&
this.telCode.length == 4
) {
return true;
}
return false;
}
},
mounted() {
this.initData();
},
getImgPath() {
this.imgCodeMessage = "";
let uuid = (this.imgUuid = this.getUUID());
this.imgCodePath = `${
uuid}`;
console.log("动态码===========>", this.imgCodePath);
},
getUUID() {
let uuidArr = [];
let hexDigits = "0123456789abcdefghijklmnopqrstuvwxyz";
for (let i = 0; i < 36; i++) {
uuidArr[i] = hexDigits.substr(Math.floor(Math.random() * 0x16), 1);
}
uuidArr[14] = "4";
uuidArr[19] = hexDigits.substr((uuidArr[19] & 0x3) | 0x8, 1);
uuidArr[8] = uuidArr[13] = uuidArr[18] = uuidArr[23] = "-";
let uuid = uuidArr.join("");
return uuid;
},
initData() {
this.prefixTel = "";
this.getImgPath();
this.suffixTel = "";
this.imgCode = "";
this.telCode = "";
this.telMessage = "";
this.imgCodeMessage = "";
this.telCodeMessage = "";
},
verifyTel() {
if (!this.suffixTel) {
this.telMessage = "请输入手机号";
return;
}
if (!regularStudentNumber(this.suffixTel, 11)) {
this.telMessage = "请正确输入手机号";
return;
}
this.telMessage = "";
return true;
},
verifyImgCode() {
if (!this.imgCode) {
this.imgCodeMessage = "请输入动态码";
return;
}
if (!regularImgAuthCode(this.imgCode)) {
this.imgCodeMessage = "请正确输入动态码";
return;
}
this.imgCodeMessage = "";
return true;
},
verifyTelCode() {
if (!this.telCode) {
this.telCodeMessage = "请输入验证码";
return;
}
if (this.telCode.length < 3) {
this.telCodeMessage = "请正确输入验证码";
return;
}
this.telCodeMessage = "";
return true;
},
// 获取验证码
getEmailCode() {
console.log("获取验证码");
if (!this.telCodeStatus) {
this.verifyTel();
this.verifyImgCode();
return;
}
Indicator.open("加载中...");
// eslint-disable-next-line no-undef
ajaxMethod.doAjax(
"获取短信验证码接口",
{
phone: this.suffixTel,
sid: this.imgUuid,
authCode: this.imgCode,
type: 5
},
(res) => {
if (res.success) {
console.log("获取的短信数据================", res);
MessageBox({
title: "提示信息",
message: `验证码已发送,请注意查收`,
confirmButtonText: "知道了"
});
this.setCountDown();
return;
}
MessageBox({
title: "提示信息",
message: res.message,
confirmButtonText: "知道了"
});
},
() => {
Indicator.close();
}
);
},
setCountDown() {
this.countDown = 60;
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
this.countDown--;
if (this.countDown <= 0) {
clearInterval(this.timer);
}
}, 1000);
},
// 登录
onLogin() {
if (!this.nextStatus) {
return;
}
Indicator.open("加载中...");
// eslint-disable-next-line no-undef
ajaxMethod.doAjax(
"登录接口",
{
phone: this.suffixTel,
smsCode: this.telCode
},
(res) => {
if (res.success) {
setLocalStorageBykey({
key: "ticketLoginRestister",
value: res.ticket
});
// 登录成功后返回上一页
this.$router.go(-1);
return;
}
MessageBox({
title: "提示信息",
message: res.message,
confirmButtonText: "知道了"
});
},
() => {
Indicator.close();
}
);
}
三、页面样式
.forget {
width: 100%;
height: 100%;
padding: 0 25px;
font-size: 0.32rem;
box-sizing: border-box;
}
.forget-list {
position: relative;
width: 100%;
display: flex;
align-items: center;
padding: 0.6rem 0 0.1rem;
box-sizing: border-box;
}
.forget-list-label {
color: #333;
flex-shrink: 0;
width: 1.8rem;
}
.forget-list-tel {
padding: 0 0 0 10px;
flex-shrink: 0;
}
.forget-list-contain {
flex-grow: 1;
padding: 0 10px;
box-sizing: border-box;
}
.forget-list-contain.tel {
padding: 0 10px 0 0;
}
.forget-list-core {
appearance: none;
border-radius: 0;
border: 0;
outline: 0;
width: 100%;
text-indent: 0;
color: #333;
word-break: break-all;
}
.forget-btn-wrap {
width: 100%;
padding: 0.6rem 0px;
box-sizing: border-box;
}
.forget-btn {
display: block;
width: 100%;
border: 0;
outline: 0;
appearance: none;
text-align: center;
font-size: 0.36rem;
color: #fff;
padding: 0.2rem 0;
border-radius: 4px;
box-sizing: border-box;
opacity: 0.3;
background-color: #2288ff;
}
.forget-code-wrap {
color: #b1b1b1;
font-size: 0.28rem;
}
.forget-btn.commit {
opacity: 1;
}
.forget-code-wrap.code-commit {
color: #2288ff;
}
.forget-list-code {
flex-shrink: 0;
}
.list-error-wrap {
position: absolute;
left: 0;
top: 0.3rem;
font-size: 0.24rem;
color: #ff5328;
white-space: nowrap;
}
.list-error-wrap img {
width: 10px;
}
.forget-img-code {
width: 2rem;
}
.forget-img-code img {
width: 100%;
}