<style scoped>
|
.enter {
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
background-image: url("../../static/img/登录.png");
|
background-size: 100% 100%;
|
}
|
|
.left {
|
width: calc(100% - 500px);
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.left img {
|
width: 100%;
|
min-height: 100%;
|
}
|
|
.right {
|
width: 600px;
|
overflow-y: auto;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.title_big {
|
color: #004ea2;
|
font-size: 40px;
|
margin-bottom: 8px;
|
}
|
|
.title_small {
|
color: #004ea2;
|
font-size: 24px;
|
}
|
|
.elform {
|
margin-top: 50px;
|
}
|
|
.sao {
|
font-size: 14px;
|
color: #004ea2;
|
width: 100%;
|
text-align: right;
|
}
|
</style>
|
|
<style>
|
.enter .el-form-item__label {
|
font-size: 20px;
|
color: #333;
|
line-height: 48px;
|
}
|
|
.enter .el-form-item {
|
margin-bottom: 30px;
|
}
|
|
.enter .el-input__inner {
|
height: 48px;
|
}
|
|
.enter .el-button {
|
background-color: #1763eb;
|
color: #fff;
|
border: 0;
|
border-radius: 16px;
|
width: 100%;
|
height: 48px;
|
}
|
|
.enter input::-webkit-input-placeholder,
|
.enter textarea::-webkit-input-placeholder {
|
font-size: 14px;
|
}
|
|
.enter input::-moz-placeholder,
|
.enter textarea::-moz-placeholder {
|
font-size: 10px;
|
}
|
|
.enter input:-ms-input-placeholder,
|
.enter textarea:-ms-input-placeholder {
|
font-size: 10px;
|
}
|
|
.enter input:-moz-placeholder,
|
.enter textarea:-moz-placeholder {
|
font-size: 10px;
|
}
|
</style>
|
|
<template>
|
<div class="enter">
|
<div class="left">
|
<img src="../../static/img/登录背景.png" />
|
</div>
|
<div class="right">
|
<div style="width: calc(100% - 100px * 2);">
|
<div class="title_big">欢迎您登录！</div>
|
<div class="title_small">电缆附件新一代mom系统</div>
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
ref="ruleForm"
|
class="elform"
|
:hide-required-asterisk="true"
|
>
|
<el-form-item label="用户名" prop="account">
|
<el-input
|
v-model="ruleForm.account"
|
placeholder="请输入账号"
|
clearable
|
></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="pwd">
|
<el-input
|
v-model="ruleForm.pwd"
|
placeholder="请输入密码"
|
clearable
|
show-password
|
></el-input>
|
</el-form-item>
|
<el-form-item style="margin-bottom: 8px;">
|
<el-col :span="12"
|
><el-checkbox v-model="ruleForm.remumberme"
|
>记住密码</el-checkbox
|
></el-col
|
>
|
<el-col :span="12" style="text-align: right;"
|
><el-checkbox v-model="ruleForm.autoenter"
|
>自动登录</el-checkbox
|
></el-col
|
>
|
</el-form-item>
|
<el-form-item style="margin-bottom: 15px;">
|
<el-button
|
type="primary"
|
@click="submitForm('ruleForm')"
|
:loading="btnload"
|
>立即登录</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<div class="sao">微信扫码登录</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
ruleForm: {
|
account: null,
|
pwd: null,
|
remumberme: false,
|
autoenter: false
|
},
|
rules: {
|
account: [
|
{
|
required: true,
|
message: "请输入账号",
|
trigger: ["blur", "change"]
|
}
|
],
|
pwd: [
|
{
|
required: true,
|
message: "请输入密码",
|
trigger: ["blur", "change"]
|
}
|
]
|
},
|
btnload: false
|
};
|
},
|
mounted() {
|
this.ruleForm.remumberme =
|
JSON.parse(localStorage.getItem("rememberme")) == null
|
? false
|
: JSON.parse(localStorage.getItem("rememberme"));
|
this.ruleForm.autoenter =
|
JSON.parse(localStorage.getItem("autoenter")) == null
|
? false
|
: JSON.parse(localStorage.getItem("autoenter"));
|
var user = JSON.parse(localStorage.getItem("user"));
|
if (user != null && user != undefined) {
|
if (this.ruleForm.remumberme == true) {
|
this.ruleForm.account = user.account;
|
this.ruleForm.pwd = user.password;
|
}
|
if (this.ruleForm.autoenter == true) {
|
this.submitForm("ruleForm");
|
}
|
}
|
},
|
methods: {
|
submitForm(formName) {
|
this.btnload = true;
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
this.axios
|
.post(this.$api.url.enter, {
|
account: this.ruleForm.account,
|
password: this.ruleForm.pwd
|
})
|
.then(res => {
|
this.btnload = false;
|
if (res.data == null) {
|
this.$message.error("账号或密码错误");
|
return;
|
}
|
localStorage.setItem("rememberme", this.ruleForm.remumberme);
|
localStorage.setItem("autoenter", this.ruleForm.autoenter);
|
if (
|
this.ruleForm.remumberme == true ||
|
this.ruleForm.autoenter == true
|
)
|
localStorage.setItem(
|
"user",
|
JSON.stringify({
|
account: this.ruleForm.account,
|
password: this.ruleForm.pwd,
|
name: res.data.name
|
})
|
);
|
sessionStorage.setItem("token", res.data.token);
|
sessionStorage.setItem("reToken", res.data.reToken);
|
this.$message.success("登录成功");
|
this.$router.push("/");
|
})
|
.catch(e => {
|
this.btnload = false;
|
this.$message.error("登录失败, 请联系管理员");
|
});
|
} else {
|
this.btnload = false;
|
this.$message.error("账号或密码未输入！");
|
return false;
|
}
|
});
|
}
|
}
|
};
|
</script>
|
