不啰嗦直接上代码
1、有使用全局的class名，请忽略或修改；
2、有本人自定的接口名称，请忽略或修改；
3、SlideAssembly 登录滑块，无需要请忽略，有需要，在下方链接自取；
https://www.jianshu.com/p/2cb40676d71b
<template>
<div class="login">
<div class="right" v-if="active == 1">
<h2>用户登录</h2>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
class="formSty demo-ruleForm"
>
<el-form-item prop="phone">
<input
class="inputSty"
v-model="ruleForm.phone"
placeholder="请输入账号"
:onkeyup="check(ruleForm.phone)"
/>
</el-form-item>
<el-form-item prop="password">
<input
class="inputSty"
type="password"
v-model="ruleForm.password"
placeholder="请输入密码"
/>
</el-form-item>
</el-form>
<!-- 登录滑块 -->
<SlideAssembly
class="slide mb15 mt20 pl13 pr13"
:successFun="successFun"
:errorFun="errorFun"
v-if="SlideAssemblyOk"
></SlideAssembly>
<div class="loginBtn pl8 pr8 cp" @click="loginPhone('ruleForm')">
<img class="banner" src="@/assets/images/loginbtn.png" alt="" />
</div>
<div style="position: relative">
<el-button
style="
position: absolute;
bottom: -67px;
right: 15px;
border: 1px solid rgb(47, 169, 253);
padding: 6px;
"
type="text"
@click="active = 2"
>忘记密码</el-button
>
</div>
</div>
<div class="right" v-if="active == 2">
<h2>修改密码</h2>
<el-form :model="setForm" ref="ruleForm" class="formSty demo-ruleForm">
<el-form-item>
<input
class="inputSty"
v-model="setForm.tel"
placeholder="请输入手机号"
:onkeyup="check2(setForm.tel)"
/>
</el-form-item>
<el-form-item>
<div class="df" style="justify-content: center">
<input
class="inputSty"
style="width: 220px"
v-model="setForm.code"
placeholder="请输入验证码"
/>
<div>
<el-button
type="warning"
@click="setBtn(1)"
v-if="show"
class="yanzhengBtn"
>获取验证码</el-button
>
<el-button type="warning" v-if="!show" class="yanzhengBtn"
>{{ count }}s后重新获取</el-button
>
</div>
</div>
</el-form-item>
<el-form-item>
<input
class="inputSty"
:type="showpass1 ? 'password' : 'text'"
v-model="setForm.new_password"
placeholder="新密码(6~16位字母/数字/符号)"
maxlength="16"
:onkeyup="check3(setForm.new_password)"
/>
<i class="el-icon-view iconsty" @click="eyscli(1)"></i>
</el-form-item>
<el-form-item>
<input
class="inputSty"
:type="showpass2 ? 'password' : 'text'"
v-model="setForm.confirm_password"
placeholder="确认密码(6~16位字母/数字/符号)"
maxlength="16"
:onkeyup="check4(setForm.confirm_password)"
/>
<i class="el-icon-view iconsty" @click="eyscli(2)"></i>
</el-form-item>
</el-form>
<div class="setBtns pl8 pr8 cp" @click="setBtn(2)">修改密码</div>
<div style="position: relative">
<el-button
style="
position: absolute;
bottom: -67px;
right: 15px;
border: 1px solid rgb(47, 169, 253);
padding: 6px;
"
type="text"
@click="active = 1"
>返回登录</el-button
>
</div>
</div>
</div>
</template>
//js文件
import { login, forgetPassword, sendCode } from "@/api/common";
export default {
data() {
return {
active: 1,
ruleForm: {
phone: "",
password: "",
status: false,
},
SlideAssemblyOk: true,
rules: {
phone: [
{ required: true, message: "请输入账号", trigger: "blur" },
{
min: 5,
max: 18,
message: "请输入5~18位的正确账号",
trigger: "blur",
},
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 15, message: "请输入正确密码", trigger: "blur" },
],
},
setForm: {
tel: "",
code: "",
new_password: "",
confirm_password: "",
},
show: true,
count: "",
timer: null,
showpass1: true,
showpass2: true,
};
},
created() {
let that = this;
document.addEventListener("keydown", that.watchEnter);
},
methods: {
//监听电脑回车键
watchEnter(e) {
//获取被按下的键值
let keyNum = window.event ? e.keyCode : e.which;
//判断如果用户按下了回车键（keycody=13）
if (keyNum == 13) {
this.loginPhone("ruleForm");
}
},
check(str) {
var temp = "";
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255) {
temp += str.charAt(i);
}
}
this.ruleForm.phone = temp.replace(/\s*/g, "");
},
check2(str) {
var temp = "";
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255) {
temp += str.charAt(i);
}
}
this.setForm.tel = temp.replace(/\s*/g, "");
},
check3(str) {
var temp = "";
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255) {
temp += str.charAt(i);
}
}
this.setForm.new_password = temp.replace(/\s*/g, "");
},
check4(str) {
var temp = "";
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255) {
temp += str.charAt(i);
}
}
this.setForm.confirm_password = temp.replace(/\s*/g, "");
},
// 登陆
loginPhone(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (!this.ruleForm.status) {
this.$message.error("请先完成滑块验证");
return;
}
let param = {
account: this.ruleForm.phone,
password: this.ruleForm.password,
};
login(param)
.then((res) => {
let user = res.data.data;
localStorage.setItem("userInfo", JSON.stringify(user));
setTimeout(() => {
location.reload();
}, 1000);
})
.catch((err) => {});
} else {
return false;
}
});
},
// 登录滑块成功
successFun(data) {
this.ruleForm.status = true;
},
// 登录滑块失败
errorFun(data) {
this.ruleForm.status = false;
},
// 开启倒计时
getCode() {
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
// 获取验证码/修改密码
setBtn(val) {
if (val == 1) {
if (this.setForm.tel) {
sendCode({ tel: this.setForm.tel }).then((res) => {
this.$message.success("验证码已发送！");
this.getCode();
});
} else {
this.$message.info("请输入正确手机号码！");
}
}
if (val == 2) {
if (!this.setForm.tel) {
this.$message.info("请输入正确手机号码！");
return;
}
if (!this.setForm.code) {
this.$message.info("请输入正确验证码！");
return;
}
if (
!this.setForm.new_password ||
this.setForm.new_password.length < 6
) {
this.$message.info("请输入新密码！");
return;
}
if (
!this.setForm.confirm_password ||
this.setForm.confirm_password != this.setForm.new_password
) {
this.$message.info("请输入正确密码！");
return;
}
forgetPassword(this.setForm).then((res) => {
this.$message.success("修改成功");
setTimeout(() => {
this.ruleForm = {
phone: this.setForm.tel,
password: this.setForm.new_password,
status: true,
};
this.loginPhone("ruleForm");
}, 500);
});
}
},
eyscli(val) {
if (val == 1) {
this.showpass1 = !this.showpass1;
}
if (val == 2) {
this.showpass2 = !this.showpass2;
}
},
},
};
//scss文件
.login {
min-width: 922px;
width: 100%;
height: 100vh;
position: relative;
.left {
width: 100%;
height: 100%;
position: relative;
h1 {
position: absolute;
top: 9%;
left: 6%;
font-size: 28px;
font-family: Microsoft YaHei;
font-weight: bold;
color: rgba(50, 75, 88, 1);
}
.banner {
position: absolute;
top: 18%;
left: 15%;
}
.bg {
width: 100%;
height: 100%;
}
}
.right {
position: absolute;
top: 17%;
right: 20%;
width: 400px;
padding: 50px 20px 80px 20px;
box-sizing: border-box;
width: 410px;
background: rgba(255, 255, 255, 1);
border-radius: 8px;
box-shadow: 0 2px 18px 0 rgba(229, 233, 239, 1);
h2 {
font-size: 30px;
font-family: Microsoft YaHei;
font-weight: normal;
color: rgba(51, 51, 51, 1);
margin-left: 10px;
}
.formSty {
margin-top: 30px;
text-align: center;
.inputSty {
text-indent: 15px;
border: 1px solid #f2f7fd;
width: 338px;
height: 54px;
color: #111a38;
background: #f2f7fd;
border-radius: 10px;
&:focus {
outline: none;
border: 1px solid #1d7cff;
}
}
}
.slide {
border-radius: 10px;
}
.loginBtn {
height: 48px;
}
.setBtns {
height: 50px;
width: 90%;
background: #278ffc;
margin: 0 auto;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
}
}
/deep/.el-form-item__error {
left: 5%;
}
.yanzhengBtn {
width: 100px;
padding: 15px 0;
margin-top: 7px;
margin-left: 17px;
}
.iconsty {
position: absolute;
top: 20px;
right: 30px;
font-size: 18px;
color: #999;
cursor: pointer;
}
网友评论