414 lines
11 KiB
Vue
414 lines
11 KiB
Vue
<template>
|
||
<div class="login">
|
||
<div class="banner-box">
|
||
<img src="@/assets/images/blue-black-white/banner.png" alt="DRGYEN"/>
|
||
</div>
|
||
<div class="login-box">
|
||
<div class="login-header">
|
||
<img src="@/assets/logo/drgy/logo168.png" alt="Logo"/>
|
||
<span>{{systemName}}</span>
|
||
</div>
|
||
<div class="form-wrap">
|
||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||
<div class="title-tags-wrap">
|
||
<div
|
||
@click="userTypeClick('system')"
|
||
:class="formTitleType === 'system' ? 'tags-div tags-checked' : 'tags-div'"
|
||
>
|
||
<h3>运营登录</h3>
|
||
<span></span>
|
||
</div>
|
||
<div
|
||
@click="userTypeClick('enter')"
|
||
:class="formTitleType === 'enter' ? 'tags-div tags-checked' : 'tags-div'"
|
||
>
|
||
<h3>企业登录</h3>
|
||
<span></span>
|
||
</div>
|
||
<!-- <div-->
|
||
<!-- @click="userTypeClick('personal')"-->
|
||
<!-- :class="formTitleType === 'personal' ? 'tags-div tags-checked' : 'tags-div'"-->
|
||
<!-- >-->
|
||
<!-- <h3>个人登录</h3>-->
|
||
<!-- <span></span>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
<el-form-item prop="username">
|
||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||
<svg-icon slot="prefix" icon-class="A_loginUser" class="el-input__icon input-icon" />
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="password">
|
||
<el-input
|
||
v-model="loginForm.password"
|
||
type="password"
|
||
auto-complete="off"
|
||
placeholder="密码"
|
||
@keyup.enter.native="handleLogin"
|
||
>
|
||
<svg-icon slot="prefix" icon-class="A_loginPassword" class="el-input__icon input-icon" />
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="code" class="code-box">
|
||
<el-input
|
||
v-model="loginForm.code"
|
||
auto-complete="off"
|
||
placeholder="验证码"
|
||
style="width: 63%"
|
||
@keyup.enter.native="handleLogin"
|
||
>
|
||
<svg-icon slot="prefix" icon-class="A_loginCode" class="el-input__icon input-icon" />
|
||
</el-input>
|
||
<div class="login-code">
|
||
<img :src="codeUrl" @click="getCode" class="login-code-img" />
|
||
</div>
|
||
</el-form-item>
|
||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px; margin-left: 25px;color: #5E6B82;">记住密码</el-checkbox>
|
||
<el-form-item style="width:100%;">
|
||
<el-button
|
||
:loading="loading"
|
||
size="medium"
|
||
type="primary"
|
||
style="width:100%; height: 46px;background: linear-gradient(87deg, #09ADF9 0%, #4650FB 100%);border-radius: 23px;border: none;font-size: 18px;font-weight: 500;"
|
||
@click.native.prevent="handleLogin"
|
||
>
|
||
<span v-if="!loading">登 录</span>
|
||
<span v-else>登 录 中...</span>
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<!-- 底部 -->
|
||
<!-- <div class="el-login-footer">
|
||
<span>Copyright © 2018-2021 smartpower.vip All Rights Reserved.</span>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getCodeImg } from "@/api/login";
|
||
import Cookies from "js-cookie";
|
||
import { encrypt, decrypt } from "@/utils/jsencrypt";
|
||
|
||
export default {
|
||
name: "Login",
|
||
data() {
|
||
return {
|
||
logoUrl: '',
|
||
systemName: '',
|
||
formTitle: {
|
||
enter: "企业登录",
|
||
personal: "个人登录"
|
||
},
|
||
formTitleType: "enter",
|
||
codeUrl: "",
|
||
cookiePassword: "",
|
||
loginForm: {
|
||
username: "",
|
||
password: "",
|
||
rememberMe: false,
|
||
code: "",
|
||
uuid: ""
|
||
},
|
||
loginRules: {
|
||
username: [
|
||
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
||
],
|
||
password: [
|
||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||
],
|
||
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
|
||
},
|
||
loading: false,
|
||
redirect: undefined
|
||
};
|
||
},
|
||
watch: {
|
||
$route: {
|
||
handler: function(route) {
|
||
this.redirect = route.query && route.query.redirect;
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
created() {
|
||
this.logoUrl = window._SYSTEMCONFIG["logoURL"];
|
||
this.systemName = window._SYSTEMCONFIG["systemName"];
|
||
this.getCode();
|
||
this.getCookie();
|
||
},
|
||
methods: {
|
||
userTypeClick(val) {
|
||
this.formTitleType = val;
|
||
},
|
||
getCode() {
|
||
getCodeImg().then(res => {
|
||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||
this.loginForm.uuid = res.uuid;
|
||
});
|
||
},
|
||
getCookie() {
|
||
const username = Cookies.get("username");
|
||
const password = Cookies.get("password");
|
||
const rememberMe = Cookies.get("rememberMe");
|
||
this.loginForm = {
|
||
username: username === undefined ? this.loginForm.username : username,
|
||
password:
|
||
password === undefined ? this.loginForm.password : decrypt(password),
|
||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||
};
|
||
},
|
||
handleLogin() {
|
||
this.$refs.loginForm.validate(valid => {
|
||
if (valid) {
|
||
this.loading = true;
|
||
if (this.loginForm.rememberMe) {
|
||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||
Cookies.set("password", encrypt(this.loginForm.password), {
|
||
expires: 30
|
||
});
|
||
Cookies.set("rememberMe", this.loginForm.rememberMe, {
|
||
expires: 30
|
||
});
|
||
} else {
|
||
Cookies.remove("username");
|
||
Cookies.remove("password");
|
||
Cookies.remove("rememberMe");
|
||
}
|
||
switch(this.formTitleType) {
|
||
case 'enter':
|
||
this.loginForm["userType"] = 'TENANT'
|
||
break;
|
||
case 'system':
|
||
this.loginForm["userType"] = 'SYSTEM'
|
||
break;
|
||
case 'personal':
|
||
this.loginForm["userType"] = 'PERSONAL'
|
||
break;
|
||
};
|
||
// this.loginForm["userType"] =
|
||
// this.formTitleType === "enter" ? undefined : "PERSONAL";
|
||
this.$store
|
||
.dispatch("Login", this.loginForm)
|
||
.then(() => {
|
||
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
this.getCode();
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style rel="stylesheet/scss" lang="scss">
|
||
.login {
|
||
display: flex;
|
||
//flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
background: url("../assets/images/blue-black-white/login-bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.banner-box{
|
||
padding: 62px 160px 48px 0;
|
||
img{
|
||
width: 500px;
|
||
height: 580px;
|
||
}
|
||
}
|
||
.login-box{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
.login-header{
|
||
-webkit-user-select: none; /* Chrome, Safari, Opera */
|
||
-moz-user-select: none; /* Firefox */
|
||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||
user-select: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 34px;
|
||
img{
|
||
height: 80px;
|
||
width: 80px;
|
||
}
|
||
span{
|
||
font-family: SimSun;
|
||
font-weight: 400;
|
||
font-size: 28px;
|
||
margin-left: 20px;
|
||
//line-height: 80px;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.form-wrap {
|
||
width: 500px;
|
||
height: 480px;
|
||
margin-bottom: 110px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0px 18px 0px rgba(222,234,255,0.88);
|
||
-webkit-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
-webkit-box-align: center;
|
||
-ms-flex-align: center;
|
||
border-radius: 20px;
|
||
border: 0;
|
||
.el-form-item__error {
|
||
left: 25px;
|
||
}
|
||
}
|
||
.login-form {
|
||
//border-radius: 6px;
|
||
//background: #ffffff00;
|
||
width: 357px;
|
||
//padding: 25px 25px 5px 25px;
|
||
.title-tags-wrap {
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
display: flex;
|
||
width: 100%;
|
||
height: 70px;
|
||
justify-content: center;
|
||
align-items: baseline;
|
||
cursor: default;
|
||
.tags-div {
|
||
display: flex;
|
||
width: 50%;
|
||
align-items: center;
|
||
height: 100%;
|
||
font-family: "Source Han Sans CN";
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
line-height: 46px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
padding-bottom: 20px;
|
||
color: #444;
|
||
cursor: pointer;
|
||
> h3 {
|
||
width: 100%;
|
||
margin: 0px;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
}
|
||
> span {
|
||
display: none;
|
||
width: 70px;
|
||
height: 3px;
|
||
background: #1890FF;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
.tags-checked {
|
||
color: #1890FF;
|
||
> span {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||
margin-left: 3px;
|
||
}
|
||
.el-input {
|
||
input {
|
||
height: 45px;
|
||
border: none;
|
||
border-radius: 30px;
|
||
padding-left: 56px;
|
||
font-size: 16px;
|
||
//color: #e4e2e2;
|
||
}
|
||
input:-webkit-autofill,
|
||
textarea:-webkit-autofill,
|
||
select:-webkit-autofill {
|
||
//-webkit-text-fill-color: #ededed !important;
|
||
-webkit-box-shadow: 0 0 0px 1000px #06060600 inset !important;
|
||
background-color: #06060657;
|
||
background-image: none;
|
||
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
|
||
}
|
||
input {
|
||
height: 46px;
|
||
background-color: #F6F6F6;
|
||
border-radius: 23px;
|
||
}
|
||
|
||
}
|
||
.input-icon {
|
||
height: 42px;
|
||
width: 26px;
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
.code-box{
|
||
background-color: #F6F6F6;
|
||
border-radius: 23px;
|
||
}
|
||
.login-tip {
|
||
font-size: 13px;
|
||
text-align: center;
|
||
color: #bfbfbf;
|
||
}
|
||
.login-code {
|
||
//width: 120px;
|
||
//height: 44px;
|
||
float: right;
|
||
img {
|
||
width: 122px;
|
||
height: 46px;
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
border-radius: 0 23px 23px 0;
|
||
}
|
||
}
|
||
.el-login-footer {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-family: Arial;
|
||
font-size: 12px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.login-code-img {
|
||
height: 38px;
|
||
}
|
||
|
||
|
||
}
|
||
.el-form-item{
|
||
margin-bottom: 15px;
|
||
}
|
||
.el-checkbox__input.is-checked + .el-checkbox__label{
|
||
color: #1890FF;
|
||
}
|
||
.el-checkbox__input.is-checked .el-checkbox__inner{
|
||
background-color: #1890FF;
|
||
border-color: #1890FF;
|
||
}
|
||
|
||
@media screen and (max-width: 1160px) {
|
||
/* 选择对应的元素，这里假设是body作为示例 */
|
||
.banner-box {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|