不啰嗦直接上代码
1、有使用全局的class名，请忽略或修改；
2、有本人自定的接口名称，请忽略或修改；
3、SlideAssembly 登录滑块，无需要请忽略，有需要，在下方链接自取；
https://www.jianshu.com/p/2cb40676d71b
用户登录
忘记密码
修改密码
获取验证码
{{ count }}s后重新获取
修改密码
返回登录
//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文件
//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;
margin-bottom: 15px;
margin-top: 20px;
padding: 0 13px;
}
.loginBtn {
height: 48px;
margin: 20px 12px 0;
cursor: pointer;
text-align: center;
background: linear-gradient(-38deg, rgba(36, 95, 244, 1) 0%, rgba(36, 163, 244, 1) 100%);
line-height: 48px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
.setBtns {
height: 50px;
width: 90%;
background: #278ffc;
margin: 0 auto;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
padding: 0 8px;
cursor: pointer;
}
}
}
/deep/.el-form-item__error {
left: 5%;
}
.df{
display: flex;
}
.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;
}