465 lines
12 KiB
Vue
465 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div class="login-container" :style="{backgroundImage:'url('+bgImg+')'}">
|
|||
|
|
<div class="login-container-title">{{title}}</div>
|
|||
|
|
<img style=" position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
left: 40px;
|
|||
|
|
max-width: 200px;max-height: 55px;" :src="logo" alt="">
|
|||
|
|
<!-- <div class="login-container-left">
|
|||
|
|
<el-image
|
|||
|
|
:src="loginImg"
|
|||
|
|
fit="cover"
|
|||
|
|
/>
|
|||
|
|
</div> -->
|
|||
|
|
<div class="login-container-content">
|
|||
|
|
<el-form
|
|||
|
|
ref="loginFormRef"
|
|||
|
|
:model="loginData"
|
|||
|
|
:rules="loginRules"
|
|||
|
|
class="login-form"
|
|||
|
|
auto-complete="on"
|
|||
|
|
label-position="left"
|
|||
|
|
>
|
|||
|
|
<!-- <div class="mb-[30px]">
|
|||
|
|
<img src="@/assets/login/logo.png" style="display: inline-block;" alt="">
|
|||
|
|
</div> -->
|
|||
|
|
<div class="title-container">
|
|||
|
|
<h3 class="title">欢迎登录！</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-form-item prop="username" style="margin-bottom: 45px;">
|
|||
|
|
<!-- <span class="svg-container">
|
|||
|
|
<img src="@/assets/login/username.png" alt="">
|
|||
|
|
</span> -->
|
|||
|
|
<el-input
|
|||
|
|
ref="username"
|
|||
|
|
clearable
|
|||
|
|
v-model="loginData.username"
|
|||
|
|
:placeholder="$t('login.username')"
|
|||
|
|
name="username"
|
|||
|
|
type="text"
|
|||
|
|
tabindex="1"
|
|||
|
|
auto-complete="on"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-tooltip
|
|||
|
|
:disabled="capslockTooltipDisabled"
|
|||
|
|
content="Caps lock is On"
|
|||
|
|
placement="right"
|
|||
|
|
>
|
|||
|
|
<el-form-item prop="password" style="margin-bottom:20px;">
|
|||
|
|
<!-- <span class="svg-container">
|
|||
|
|
<img src="@/assets/login/password.png" alt="">
|
|||
|
|
</span> -->
|
|||
|
|
<el-input
|
|||
|
|
ref="passwordRef"
|
|||
|
|
:key="passwordType"
|
|||
|
|
v-model="loginData.password"
|
|||
|
|
:type="passwordType"
|
|||
|
|
:placeholder="$t('login.password')"
|
|||
|
|
name="password"
|
|||
|
|
tabindex="2"
|
|||
|
|
auto-complete="on"
|
|||
|
|
@keyup="checkCapslock"
|
|||
|
|
@blur="capslockTooltipDisabled = true"
|
|||
|
|
@keyup.enter="handleLogin"
|
|||
|
|
/>
|
|||
|
|
<span
|
|||
|
|
class="show-pwd"
|
|||
|
|
@click="showPwd"
|
|||
|
|
>
|
|||
|
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|||
|
|
</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<div style="text-align: left;margin-bottom: 40px;">
|
|||
|
|
<el-checkbox
|
|||
|
|
v-model="remember"
|
|||
|
|
:label="$t('login.remember')"
|
|||
|
|
size="large"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<el-button
|
|||
|
|
size="default"
|
|||
|
|
:loading="loading"
|
|||
|
|
type="primary"
|
|||
|
|
style="width: 100%;height: 50px; margin-bottom: 10px;background-color: rgb(8,186,124);border: none;border-radius: 100px;"
|
|||
|
|
@click.prevent="handleLogin"
|
|||
|
|
>{{ $t('login.login') }}
|
|||
|
|
</el-button>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
v-if="showCopyright == true"
|
|||
|
|
class="copyright"
|
|||
|
|
>
|
|||
|
|
<p>{{ $t('login.copyright') }}</p>
|
|||
|
|
<p>{{ $t('login.icp') }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="login-containe-footer">
|
|||
|
|
<div style="font-size: 16px;">{{ content1 }}</div>
|
|||
|
|
<div style="margin-top: 5px;">{{ content2 }}</div>
|
|||
|
|
<div style="margin-top: 5px;">{{ content3 }}</div>
|
|||
|
|
<!-- <div style="font-size: 16px;">杭州明眸慧眼科技有限公司</div>
|
|||
|
|
<div style="margin-top: 5px;">浙江省杭州市余杭区祥茂路166号华滋科欣设计创意园4号楼</div>
|
|||
|
|
<div style="margin-top: 5px;">400-6588695</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue';
|
|||
|
|
import loginImg from '@/assets/images/u287.gif';
|
|||
|
|
// 组件依赖
|
|||
|
|
import { ElForm, ElInput } from 'element-plus';
|
|||
|
|
import router from '@/router';
|
|||
|
|
import SvgIcon from '@/components/SvgIcon/index.vue';
|
|||
|
|
import Cookies from 'js-cookie';
|
|||
|
|
// API依赖
|
|||
|
|
import { useRoute } from 'vue-router';
|
|||
|
|
import { LoginData } from '@/api/auth/types';
|
|||
|
|
|
|||
|
|
//密码加密
|
|||
|
|
import { encrypt,decrypt } from '@/utils/rsaEncrypt';
|
|||
|
|
|
|||
|
|
// 状态管理依赖
|
|||
|
|
import { useUserStore } from '@/store/modules/user';
|
|||
|
|
|
|||
|
|
// 国际化
|
|||
|
|
import { useI18n } from 'vue-i18n';
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
|
|||
|
|
const userStore = useUserStore();
|
|||
|
|
const title = userStore.title
|
|||
|
|
|
|||
|
|
const content1 = userStore.content1
|
|||
|
|
const content2 = userStore.content2
|
|||
|
|
const content3 = userStore.content3
|
|||
|
|
const logo = userStore.webApiBaseHttp + "/image/"+ userStore.logo
|
|||
|
|
const bgImg = userStore.webApiBaseHttp + "/image/"+ userStore.bgImg
|
|||
|
|
|
|||
|
|
const route = useRoute();
|
|||
|
|
// 图片验证码
|
|||
|
|
const codeUrl = ref('');
|
|||
|
|
|
|||
|
|
const loginFormRef = ref(ElForm);
|
|||
|
|
const passwordRef = ref(ElInput);
|
|||
|
|
// 记住密码
|
|||
|
|
let remember = ref(false);
|
|||
|
|
|
|||
|
|
const state = reactive({
|
|||
|
|
redirect: '',
|
|||
|
|
loginData: {
|
|||
|
|
username: '',
|
|||
|
|
password: ''
|
|||
|
|
} as LoginData,
|
|||
|
|
loginRules: {
|
|||
|
|
username: [{ required: true, trigger: 'blur', message: t('login.rulesUsername') }],
|
|||
|
|
password: [{ required: true, trigger: 'blur', message: t('login.rulesPassword') }]
|
|||
|
|
},
|
|||
|
|
loginImg: loginImg[0],
|
|||
|
|
loading: false,
|
|||
|
|
passwordType: 'password',
|
|||
|
|
// 大写提示禁用
|
|||
|
|
capslockTooltipDisabled: true,
|
|||
|
|
otherQuery: {},
|
|||
|
|
clientHeight: document.documentElement.clientHeight,
|
|||
|
|
showCopyright: true,
|
|||
|
|
showDialog: false,
|
|||
|
|
|
|||
|
|
cookiePass: ''
|
|||
|
|
});
|
|||
|
|
const {
|
|||
|
|
loginData,
|
|||
|
|
loginRules,
|
|||
|
|
loading,
|
|||
|
|
passwordType,
|
|||
|
|
capslockTooltipDisabled,
|
|||
|
|
showCopyright
|
|||
|
|
} = toRefs(state);
|
|||
|
|
function checkCapslock(e: any) {
|
|||
|
|
const { key } = e;
|
|||
|
|
state.capslockTooltipDisabled =
|
|||
|
|
key && key.length === 1 && key >= 'A' && key <= 'Z';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showPwd() {
|
|||
|
|
if (passwordType.value === 'password') {
|
|||
|
|
passwordType.value = '';
|
|||
|
|
} else {
|
|||
|
|
passwordType.value = 'password';
|
|||
|
|
}
|
|||
|
|
nextTick(() => {
|
|||
|
|
passwordRef.value.focus();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 登录
|
|||
|
|
*/
|
|||
|
|
function handleLogin() {
|
|||
|
|
loginFormRef.value.validate((valid: boolean) => {
|
|||
|
|
if (valid) {
|
|||
|
|
const user = {
|
|||
|
|
username: state.loginData.username,
|
|||
|
|
password: state.loginData.password,
|
|||
|
|
};
|
|||
|
|
if (user.password !== state.cookiePass) {
|
|||
|
|
user.password = encrypt(user.password);
|
|||
|
|
}
|
|||
|
|
state.loading = true;
|
|||
|
|
userStore
|
|||
|
|
.login(user)
|
|||
|
|
.then(() => {
|
|||
|
|
Cookies.set('username', user.username);
|
|||
|
|
if (remember.value == true) {
|
|||
|
|
Cookies.set('password', user.password);
|
|||
|
|
Cookies.set('rememberMe', String(remember.value));
|
|||
|
|
}
|
|||
|
|
router.push({ path: state.redirect || '/', query: state.otherQuery });
|
|||
|
|
state.loading = false;
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
// getCode();
|
|||
|
|
state.loading = false;
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
route,
|
|||
|
|
() => {
|
|||
|
|
const query = route.query;
|
|||
|
|
if (query) {
|
|||
|
|
state.redirect = query.redirect as string;
|
|||
|
|
state.otherQuery = getOtherQuery(query);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
immediate: true
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
function getOtherQuery(query: any) {
|
|||
|
|
return Object.keys(query).reduce((acc: any, cur: any) => {
|
|||
|
|
if (cur !== 'redirect') {
|
|||
|
|
acc[cur] = query[cur];
|
|||
|
|
}
|
|||
|
|
return acc;
|
|||
|
|
}, {});
|
|||
|
|
}
|
|||
|
|
function getCookie() {
|
|||
|
|
const username = Cookies.get('username');
|
|||
|
|
let password = Cookies.get('password');
|
|||
|
|
const rememberMe = Cookies.get('rememberMe');
|
|||
|
|
rememberMe == 'true' ? (remember.value = Boolean(rememberMe)) : false;
|
|||
|
|
// 保存cookie里面的加密后的密码
|
|||
|
|
state.cookiePass = password === undefined ? '' : password;
|
|||
|
|
password = password === undefined ? state.loginData.password : password;
|
|||
|
|
state.loginData = {
|
|||
|
|
username: username === undefined ? state.loginData.username : username,
|
|||
|
|
password: decrypt(password)
|
|||
|
|
};
|
|||
|
|
remember.value = rememberMe === undefined ? false : Boolean(rememberMe)
|
|||
|
|
}
|
|||
|
|
onMounted(() => {
|
|||
|
|
getCookie();
|
|||
|
|
window.onresize = () => {
|
|||
|
|
if (state.clientHeight > document.documentElement.clientHeight) {
|
|||
|
|
state.showCopyright = false;
|
|||
|
|
} else {
|
|||
|
|
state.showCopyright = true;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
$bg: #fff;
|
|||
|
|
$dark_gray: #889aa4;
|
|||
|
|
$light_gray: #eee;
|
|||
|
|
.login-container-center {
|
|||
|
|
width: 25%;
|
|||
|
|
height:100vh;
|
|||
|
|
// min-height: 400px;
|
|||
|
|
background-color: $bg;
|
|||
|
|
display: flex;
|
|||
|
|
display: -webkit-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
-webkit-align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.login-container {
|
|||
|
|
background: url('../../assets/login/loginbg.jpg') no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center center;
|
|||
|
|
min-height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: $bg;
|
|||
|
|
overflow: hidden;
|
|||
|
|
// display: flex;
|
|||
|
|
// display: -webkit-flex;
|
|||
|
|
// align-items: center;
|
|||
|
|
// -webkit-align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
// justify-content: center;
|
|||
|
|
// -webkit-justify-content: center;
|
|||
|
|
.login-container-title{
|
|||
|
|
font-size: 36px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #000;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: 2%;
|
|||
|
|
width: 800px;
|
|||
|
|
letter-spacing: 5px;
|
|||
|
|
}
|
|||
|
|
.login-container-content {
|
|||
|
|
width: 450px;
|
|||
|
|
height: 550px;
|
|||
|
|
background: #fff;
|
|||
|
|
min-width: 350px;
|
|||
|
|
display: flex;
|
|||
|
|
display: -webkit-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
-webkit-justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
-webkit-align-items: center;
|
|||
|
|
text-align: center;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 56%;
|
|||
|
|
margin-top: 90px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
.title-container{
|
|||
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-size: 28px;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-bottom: 48px;
|
|||
|
|
.title{
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.login-form {
|
|||
|
|
width: 85%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.svg-container {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 15px;
|
|||
|
|
left: 5px;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
color: $dark_gray;
|
|||
|
|
vertical-align: text-bottom;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #cccccc;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
.svg-container-refresh {
|
|||
|
|
padding-right: 5px;
|
|||
|
|
padding-left: 0;
|
|||
|
|
font-size: 26px;
|
|||
|
|
color: rgb(64, 158, 255);
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.show-pwd {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
top: 7px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: $dark_gray;
|
|||
|
|
cursor: pointer;
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.captcha {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
height: 42px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.login-containe-footer{
|
|||
|
|
color: #000000;
|
|||
|
|
font-size: 14px;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20px;
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
left: 0;
|
|||
|
|
// text-align: center;
|
|||
|
|
text-align: left;
|
|||
|
|
padding-left: 40px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.thirdparty-button {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 40px;
|
|||
|
|
bottom: 6px;
|
|||
|
|
}
|
|||
|
|
:deep(.el-input){
|
|||
|
|
height:45px;
|
|||
|
|
}
|
|||
|
|
:deep(.el-form-item__content){
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
:deep(.el-input__wrapper){
|
|||
|
|
padding-left: 0px;
|
|||
|
|
box-shadow:none;
|
|||
|
|
// border-bottom: 1px solid rgb(8,186,124);
|
|||
|
|
|
|||
|
|
border-bottom: 1px solid #dcdfe6;
|
|||
|
|
border-radius: 0px;
|
|||
|
|
}
|
|||
|
|
:deep(.el-button>span){
|
|||
|
|
font-size:18px;
|
|||
|
|
}
|
|||
|
|
:deep(){
|
|||
|
|
.el-form-item.is-error .el-input__wrapper, .el-form-item.is-error .el-input__wrapper.is-focus, .el-form-item.is-error .el-input__wrapper:focus, .el-form-item.is-error .el-input__wrapper:hover, .el-form-item.is-error .el-select__wrapper, .el-form-item.is-error .el-select__wrapper.is-focus, .el-form-item.is-error .el-select__wrapper:focus, .el-form-item.is-error .el-select__wrapper:hover, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner.is-focus, .el-form-item.is-error .el-textarea__inner:focus, .el-form-item.is-error .el-textarea__inner:hover{
|
|||
|
|
box-shadow:none;
|
|||
|
|
border-bottom: 1px solid red;
|
|||
|
|
}
|
|||
|
|
.el-input__wrapper:hover{
|
|||
|
|
box-shadow:none;
|
|||
|
|
border-bottom: 1px solid rgb(8,186,124);
|
|||
|
|
}
|
|||
|
|
.el-checkbox__input.is-checked .el-checkbox__inner{
|
|||
|
|
background-color: rgb(8,186,124);
|
|||
|
|
border-color: rgb(8,186,124);
|
|||
|
|
}
|
|||
|
|
.el-checkbox__inner:hover {
|
|||
|
|
border-color: rgb(8,186,124);
|
|||
|
|
}
|
|||
|
|
.el-checkbox__input.is-checked+.el-checkbox__label{
|
|||
|
|
color: rgb(8,186,124);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@media only screen and (max-width: 470px) {
|
|||
|
|
.thirdparty-button {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@media only screen and (max-width: 1366px) {
|
|||
|
|
.title {
|
|||
|
|
margin: 0px auto 20px auto !important;
|
|||
|
|
}
|
|||
|
|
.login-code {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|