<template>
|
<div class="bgImg">
|
<div class="login_box">
|
<div class="logo">
|
<img src="@/assets/logo.png" alt="" />
|
<div class="fs--25 fw-bold" style="letter-spacing: 4px">
|
射洪市 两客一危 监管平台
|
</div>
|
</div>
|
<div class="txt-center pb--20 px--20">
|
<div class="mt--20">
|
<el-input
|
class="w100"
|
prefix-icon="el-icon-user"
|
placeholder="账号"
|
v-model="username"
|
/>
|
</div>
|
<div class="mt--20">
|
<el-input
|
prefix-icon="el-icon-lock"
|
placeholder="密码"
|
v-model="password"
|
show-password
|
/>
|
</div>
|
<div class="mt--20 flex a-center code_box">
|
<div class="flex1">
|
<el-input placeholder="请输入验证码" v-model="code" />
|
</div>
|
<div @click="resetCodeStr" class="fs--18 lh--40 border1 pointer">
|
{{ codeStr }}
|
</div>
|
</div>
|
<el-button
|
:loading="loginLoading"
|
@click="login"
|
class="mt--40 w100 br--5 pointer bgcolor1 color1"
|
>登录</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { generateVerificationCode, generateRandomString } from "@/utils/utils";
|
import { mapMutations } from "vuex";
|
import { loginPwd } from "./service";
|
import CryptoJS from "crypto-js";
|
import { getRoleInfo } from "@/view/systemManage/role/service";
|
|
import { Message } from "element-ui";
|
export default {
|
components: {},
|
props: {},
|
data() {
|
return {
|
loginLoading: false, //登录loading
|
username: "",
|
password: "",
|
code: "",
|
codeStr: "",
|
};
|
},
|
created() {
|
this.resetCodeStr();
|
},
|
mounted() {
|
document.addEventListener("keydown", this.handleKeyDown);
|
},
|
beforeDestroy() {
|
document.removeEventListener("keydown", this.handleKeyDown);
|
},
|
methods: {
|
...mapMutations(["setToken", "setUserInfo"]),
|
login() {
|
if (!this.rulesLogin()) return;
|
this.loginLoading = true;
|
loginPwd({
|
username: this.username,
|
password: CryptoJS.MD5(this.password).toString(),
|
})
|
.then((res) => {
|
localStorage.setItem("client", generateRandomString(16));
|
this.loginLoading = false;
|
this.setToken(res.token.access_token);
|
this.setUserInfo(JSON.stringify(res.info.sysUser));
|
getRoleInfo({ id: res.info.sysUser.roles[0].roleId }).then((res) => {
|
this.$store.commit("SET_PERMISSON", res.menus);
|
this.$router.push("/home");
|
});
|
})
|
.catch(() => {
|
this.resetCodeStr();
|
this.loginLoading = false;
|
});
|
},
|
rulesLogin() {
|
if (!this.username) {
|
Message({
|
message: "请输入账号",
|
type: "warning",
|
duration: 2000,
|
});
|
return false;
|
}
|
if (!this.password) {
|
Message({
|
message: "请输入密码",
|
type: "warning",
|
duration: 2000,
|
});
|
return false;
|
}
|
if (!this.code) {
|
Message({
|
message: "请输入验证码",
|
type: "warning",
|
duration: 2000,
|
});
|
return false;
|
}
|
if (!this.matchCaseInsensitive(this.codeStr, this.code)) {
|
Message({
|
message: "验证码错误",
|
type: "warning",
|
duration: 1500,
|
});
|
this.resetCodeStr();
|
return false;
|
}
|
return true;
|
},
|
handleKeyDown(event) {
|
if (event.key === "Enter") {
|
this.login();
|
}
|
},
|
// 校验验证码
|
matchCaseInsensitive(str, pattern) {
|
return str.toLowerCase() === pattern.toLowerCase();
|
},
|
resetCodeStr() {
|
this.codeStr = generateVerificationCode();
|
},
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
.bgImg {
|
background-image: url("../../assets/loginBG.png");
|
background-size: cover;
|
background-position: center;
|
background-repeat: no-repeat;
|
width: 100%;
|
height: 100%;
|
}
|
|
.login_box {
|
width: 25%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #fff;
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
border-radius: 10px;
|
padding: 20px;
|
|
.logo {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 50px;
|
height: 50px;
|
margin-right: 15px;
|
}
|
}
|
}
|
|
.code_box {
|
border-radius: 4px;
|
border: 1px solid #dcdfe6;
|
|
::v-deep .el-input__inner {
|
border: unset !important;
|
}
|
}
|
|
.bgcolor1 {
|
background: #0e6efd;
|
}
|
|
.color1 {
|
color: #fff;
|
}
|
|
.border1 {
|
border-left: 1px solid #dcdfe6;
|
min-width: 100px;
|
}
|
</style>
|
