<template>
|
<div class="login-container">
|
|
<div class="login-card">
|
<div class="img-mylogin">
|
<div class="img-mylogin-t">
|
</div>
|
</div>
|
<div class="login-form">
|
<div class="title-container">
|
权益品后台管理
|
</div>
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" auto-complete="on" label-position="left" v-if="!findPass">
|
<div class="login-cont">
|
<el-form-item prop="username">
|
<span class="svg-container">
|
<svg-icon icon-class="user" />
|
</span>
|
<el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" name="username" type="text" tabindex="1" auto-complete="on" />
|
</el-form-item>
|
<el-form-item prop="password">
|
<span class="svg-container">
|
<svg-icon icon-class="password" />
|
</span>
|
<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
|
<span class="show-pwd" @click="showPwd(1)">
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
</span>
|
</el-form-item>
|
<el-button :loading="loading" type="primary" style="width:100%;margin-top:12px;" @click.native.prevent="handleLogin">登录</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import md5 from "js-md5";
|
export default {
|
name: "Login",
|
data() {
|
var validatePass = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请输入密码"));
|
} else {
|
if (this.findPasswForm.newPwdT !== "") {
|
this.$refs.findPasswForm.validateField("newPwdT");
|
}
|
callback();
|
}
|
};
|
var validatePass2 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"));
|
} else if (value !== this.findPasswForm.newPwd) {
|
callback(new Error("两次输入密码不一致!"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
loginForm: {
|
username: "",
|
password: ""
|
},
|
loginRules: {
|
username: [
|
{ required: true, message: "请输入登录账号", trigger: "blur" },
|
],
|
password: [
|
{ required: true, message: "请输入登录密码", trigger: "blur" }
|
]
|
},
|
findPasswRules: {
|
mblNo: [
|
{ required: true, message: "请输入手机号", trigger: "blur" },
|
{ min: 11, max: 11, message: "长度11个字符", trigger: "blur" }
|
],
|
verCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
|
newPwd: [
|
{ required: true, message: "请输入新密码", trigger: "blur" },
|
{ min: 6, max: 20, message: "长度6至20个字符", trigger: "blur" },
|
{ validator: validatePass, trigger: "blur" }
|
],
|
newPwdT: [
|
{ required: true, message: "请再次确认密码", trigger: "blur" },
|
{ min: 6, max: 20, message: "长度6至20个字符", trigger: "blur" },
|
{ validator: validatePass2, trigger: "blur", required: true }
|
]
|
},
|
//忘记密码
|
findPasswForm: {
|
mblNo: "",
|
newPwd: "",
|
newPwdT: "",
|
verCode: ""
|
},
|
loading: false,
|
passwordType: "password",
|
setpasswordType: "password",
|
redirect: undefined,
|
checked: false, //是否记密码
|
show: true,
|
count: "", // 初始化次数
|
timer: null,
|
findPass: false
|
};
|
},
|
watch: {
|
$route: {
|
handler: function (route) {
|
this.redirect = route.query && route.query.redirect;
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
showPwd(type) {
|
if (type == 1) {
|
if (this.passwordType === "password") {
|
this.passwordType = "";
|
} else {
|
this.passwordType = "password";
|
}
|
this.$nextTick(() => {
|
this.$refs.password.focus();
|
});
|
} else {
|
if (this.setpasswordType === "password") {
|
this.setpasswordType = "";
|
} else {
|
this.setpasswordType = "password";
|
}
|
this.$nextTick(() => {
|
this.$refs.setpasswordType.focus();
|
});
|
}
|
},
|
handleLogin() {
|
this.$refs.loginForm.validate(valid => {
|
if (valid) {
|
this.loading = true;
|
this.$store.dispatch("user/login", this.loginForm).then((res) => {
|
this.loading = false;
|
let path = '';
|
if(this.$router.options.routes[0]&&this.$router.options.routes[0].children[0]){
|
path = this.$router.options.routes[0].children[0].path;
|
}else{
|
path = this.$router.options.routes[0].path;
|
}
|
this.$router.push({ path: path });
|
}).catch(() => {
|
this.loading = false;
|
});
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
getVerify() {
|
// 验证手机号
|
if (this.checkPhone() == false) {
|
return false;
|
} else {
|
sendMsg({ mblNo: this.findPasswForm.mblNo, verCodeType: 1 })
|
.then(res => {
|
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);
|
}
|
})
|
.catch(err => {
|
this.count = 0;
|
});
|
}
|
},
|
checkPhone() {
|
let phone = this.findPasswForm.mblNo;
|
if (!/^1[3456789]\d{9}$/.test(phone)) {
|
this.$message.error("请填写正确的手机号");
|
return false;
|
}
|
},
|
findPassMths(isActuve) {
|
this.findPass = isActuve;
|
if (!this.findPass) {
|
this.$refs.findPasswForm.clearValidate();
|
} else {
|
this.$refs.loginForm.clearValidate();
|
}
|
},
|
forgetPwd() {
|
//重置密码
|
this.$refs.findPasswForm.validate(valid => {
|
if (!valid) return this.$message.error("数据填写有误，请检查！");
|
var newPassForm = JSON.parse(JSON.stringify(this.findPasswForm));
|
newPassForm.newPwd = md5(
|
this.findPasswForm.mblNo + this.findPasswForm.newPwd
|
);
|
delete newPassForm.newPwdT;
|
newPassForm.verCodeType = 1;
|
forgetPwd(newPassForm).then(res => {
|
this.$refs.findPasswForm.resetFields();
|
this.findPass = false;
|
this.$message.success("密码重置成功！");
|
});
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
$bg: #2d3a4b;
|
$dark_gray: #889aa4;
|
$light_gray: #eee;
|
$cursor: #fff;
|
.login-container {
|
min-height: 100%;
|
width: 100%;
|
background-image: url("../../assets/img/loginbg.png");
|
overflow: hidden;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.login-title {
|
font-size: 24px;
|
font-family: Alibaba PuHuiTi;
|
font-weight: 400;
|
color: #243359;
|
line-height: 30px;
|
margin-right: -40px;
|
}
|
.login-card {
|
width: 60%;
|
min-width: 1000px;
|
height: 650px;
|
border-radius: 12px;
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
.img-mylogin {
|
width: 476px;
|
height: 326px;
|
.login-title {
|
height: 80px;
|
text-align: center;
|
line-height: 80px;
|
}
|
.img-mylogin-t {
|
// width: 476px;
|
height: 326px;
|
background-image: url("../../assets/img/img_Login.png");
|
overflow: hidden;
|
background-size: 100% 100%;
|
margin-top: 20px;
|
}
|
}
|
}
|
.login-form {
|
width: 300px;
|
min-height: 326px;
|
display: flex;
|
justify-content: center;
|
align-items: flex-start;
|
flex-direction: column;
|
box-sizing: border-box;
|
}
|
.el-input {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex: 1;
|
input {
|
background: transparent;
|
border: 0px;
|
-webkit-appearance: none;
|
border-radius: 0px;
|
padding: 12px 5px 12px 15px;
|
&:-webkit-autofill {
|
box-shadow: 0 0 0px 1000px $cursor inset !important;
|
}
|
}
|
}
|
.el-checkbox {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
.tips {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 14px;
|
margin-top: 15px;
|
}
|
|
.svg-container {
|
padding: 6px 5px 6px 15px;
|
color: $dark_gray;
|
vertical-align: middle;
|
width: 30px;
|
display: inline-block;
|
}
|
|
.title-container {
|
width: 100%;
|
font-size: 32px;
|
margin-bottom: 82px;
|
color: #333333;
|
text-align: center;
|
font-weight: bold;
|
}
|
.show-pwd {
|
position: absolute;
|
right: 10px;
|
top: 7px;
|
font-size: 16px;
|
color: $dark_gray;
|
cursor: pointer;
|
user-select: none;
|
}
|
.tips-1 {
|
text-align: center;
|
font-size: 14px;
|
margin-bottom: 10px;
|
}
|
.el-form {
|
width: 100%;
|
}
|
.el-form-item {
|
border-radius: 5px;
|
color: #454545;
|
border: solid 1px #d9d9d9;
|
}
|
.el-form-item__content {
|
line-height: 36px;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
.el-form-item {
|
margin-bottom: 32px;
|
}
|
.main-title {
|
font-size: 28px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #ffffff;
|
line-height: 40px;
|
position: absolute;
|
top: 8%;
|
left: 5%;
|
img {
|
width: 330px;
|
height: 45px;
|
}
|
}
|
// .login-cont1 {
|
// .el-form-item {
|
// margin-bottom: 24px;
|
// }
|
// }
|
}
|
</style>
|
