430 lines
10 KiB
Vue
430 lines
10 KiB
Vue
<script lang="ts" setup>
|
|
import { message } from 'ant-design-vue/lib';
|
|
import { reactive, onMounted, computed } from 'vue';
|
|
import useUserStore from '@/store/modules/user';
|
|
import useAppStore from '@/store/modules/app';
|
|
import { getCaptchaImage } from '@/api/login';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import { toRaw } from 'vue';
|
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
import { parseUrlPath } from '@/plugins/file-static-url';
|
|
const { t, changeLocale, optionsLocale, currentLocale } = useI18n();
|
|
const appStore = useAppStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
/**登录后重定向页面 */
|
|
const redirectPath =
|
|
(route.query && (route.query.redirect as string)) || '/index';
|
|
|
|
let state = reactive({
|
|
/**表单属性 */
|
|
from: {
|
|
/**账号 */
|
|
username: '',
|
|
/**密码 */
|
|
password: '',
|
|
/**验证码 */
|
|
code: '',
|
|
/**验证码uuid */
|
|
uuid: '',
|
|
},
|
|
/**表单提交点击状态 */
|
|
fromClick: false,
|
|
/**验证码状态 */
|
|
captcha: {
|
|
/**验证码开关 */
|
|
enabled: false,
|
|
/**验证码图片地址 */
|
|
codeImg: '',
|
|
},
|
|
/**验证码点击状态 */
|
|
captchaClick: false,
|
|
});
|
|
|
|
/**表单验证通过 */
|
|
function fnFinish() {
|
|
state.fromClick = true;
|
|
// 发送请求
|
|
useUserStore()
|
|
.fnLogin(toRaw(state.from))
|
|
.then(res => {
|
|
if (res.code === RESULT_CODE_SUCCESS) {
|
|
message.success(t('views.login.loginSuccess'), 3);
|
|
router.push({ path: redirectPath });
|
|
} else {
|
|
message.error(`${res.msg}`, 3);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
state.fromClick = false;
|
|
// 刷新验证码
|
|
if (state.captcha.enabled) {
|
|
state.from.code = '';
|
|
fnGetCaptcha();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 获取验证码
|
|
*/
|
|
function fnGetCaptcha() {
|
|
if (state.captchaClick) return;
|
|
state.captchaClick = true;
|
|
getCaptchaImage().then(res => {
|
|
state.captchaClick = false;
|
|
if (res.code != 1) {
|
|
message.warning(`${res.msg}`, 3);
|
|
return;
|
|
}
|
|
state.captcha.enabled = Boolean(res.captchaEnabled);
|
|
if (state.captcha.enabled) {
|
|
state.captcha.codeImg = res.img;
|
|
state.from.uuid = res.uuid;
|
|
}
|
|
});
|
|
}
|
|
|
|
// LOGO地址
|
|
const logoUrl = computed(() => {
|
|
let url =
|
|
appStore.logoType === 'brand'
|
|
? parseUrlPath(appStore.filePathBrand)
|
|
: parseUrlPath(appStore.filePathIcon);
|
|
|
|
if (url.indexOf('{language}') === -1) {
|
|
return url;
|
|
}
|
|
// 语言参数替换
|
|
const local = currentLocale.value;
|
|
const lang = local.split('_')[0];
|
|
return url.replace('{language}', lang);
|
|
});
|
|
|
|
// 判断是否有背景地址
|
|
const calcBG = computed(() => {
|
|
const bgURL = parseUrlPath(appStore.loginBackground);
|
|
if (bgURL && bgURL !== '#') {
|
|
return {
|
|
backgroundImage: `url(${bgURL})`,
|
|
backgroundPosition: 'center',
|
|
backgroundSize: 'cover',
|
|
};
|
|
}
|
|
return undefined;
|
|
});
|
|
|
|
/**
|
|
* 国际化翻译转换
|
|
*/
|
|
function fnLocale() {
|
|
let title = route.meta.title as string;
|
|
if (title.indexOf('router.') !== -1) {
|
|
title = t(title);
|
|
}
|
|
appStore.setTitle(title);
|
|
}
|
|
|
|
onMounted(() => {
|
|
fnLocale();
|
|
fnGetCaptcha();
|
|
});
|
|
|
|
/**改变多语言 */
|
|
function fnChangeLocale(e: any) {
|
|
changeLocale(e.key);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container" :style="calcBG">
|
|
<section v-show="!calcBG">
|
|
<div class="animation animation1"></div>
|
|
<div class="animation animation2"></div>
|
|
<div class="animation animation3"></div>
|
|
<div class="animation animation4"></div>
|
|
<div class="animation animation5"></div>
|
|
</section>
|
|
|
|
<header class="header">
|
|
<template v-if="appStore.logoType === 'icon'">
|
|
<img :src="logoUrl" class="logo-icon" :alt="appStore.appName" />
|
|
<span class="title">{{ appStore.appName }}</span>
|
|
</template>
|
|
<template v-if="appStore.logoType === 'brand'">
|
|
<img :src="logoUrl" class="logo-brand" :alt="appStore.appName" />
|
|
</template>
|
|
</header>
|
|
|
|
<a-card :bordered="false" class="login-card">
|
|
<div class="desc">
|
|
{{ t('common.desc') }}
|
|
</div>
|
|
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
|
<a-form-item
|
|
name="username"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
min: 2,
|
|
max: 30,
|
|
message: t('valid.userNamePlease'),
|
|
},
|
|
]"
|
|
>
|
|
<a-input
|
|
v-model:value="state.from.username"
|
|
size="large"
|
|
:placeholder="t('valid.userNameHit')"
|
|
:maxlength="30"
|
|
>
|
|
<template #prefix>
|
|
<UserOutlined class="prefix-icon" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
name="password"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
min: 6,
|
|
max: 26,
|
|
message: t('valid.passwordPlease'),
|
|
},
|
|
]"
|
|
>
|
|
<a-input-password
|
|
v-model:value="state.from.password"
|
|
size="large"
|
|
:placeholder="t('valid.passwordHit')"
|
|
:maxlength="26"
|
|
>
|
|
<template #prefix>
|
|
<LockOutlined class="prefix-icon" />
|
|
</template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
|
|
<a-row :gutter="8" v-if="state.captcha.enabled">
|
|
<a-col :span="16">
|
|
<a-form-item
|
|
name="code"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
min: 1,
|
|
message: t('valid.codePlease'),
|
|
},
|
|
]"
|
|
>
|
|
<a-input
|
|
v-model:value="state.from.code"
|
|
size="large"
|
|
:placeholder="t('valid.codeHit')"
|
|
:maxlength="6"
|
|
>
|
|
<template #prefix>
|
|
<RobotOutlined class="prefix-icon" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-image
|
|
:alt="t('valid.codeHit')"
|
|
style="cursor: pointer; border-radius: 2px"
|
|
width="120px"
|
|
height="40px"
|
|
:preview="false"
|
|
:src="state.captcha.codeImg"
|
|
@click="fnGetCaptcha"
|
|
/>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row
|
|
:gutter="8"
|
|
justify="space-between"
|
|
align="middle"
|
|
style="margin-bottom: 16px"
|
|
>
|
|
<a-col :span="12" v-if="appStore.registerUser">
|
|
<a-button
|
|
type="link"
|
|
target="_self"
|
|
:title="t('views.login.registerBtn')"
|
|
@click="() => router.push({ name: 'Register' })"
|
|
>
|
|
{{ t('views.login.registerBtn') }}
|
|
</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-button
|
|
block
|
|
type="primary"
|
|
size="large"
|
|
html-type="submit"
|
|
:loading="state.fromClick"
|
|
>
|
|
{{ t('views.login.loginBtn') }}
|
|
</a-button>
|
|
|
|
<a-row
|
|
:gutter="8"
|
|
justify="space-between"
|
|
align="middle"
|
|
style="margin-top: 18px"
|
|
v-if="appStore.i18nOpen"
|
|
>
|
|
<a-col :offset="18" :span="6">
|
|
<a-dropdown :trigger="['click', 'hover']">
|
|
<a-button size="small" type="default">
|
|
{{ t('i18n') }}
|
|
<DownOutlined />
|
|
</a-button>
|
|
<template #overlay>
|
|
<a-menu @click="fnChangeLocale">
|
|
<a-menu-item v-for="opt in optionsLocale" :key="opt.value">
|
|
{{ opt.label }}
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-card>
|
|
|
|
<footer class="footer">
|
|
<div class="footer-copyright">{{ appStore.copyright }}</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
padding-top: 164px;
|
|
|
|
background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
|
|
.animation {
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: #1be1f6;
|
|
|
|
&.animation1 {
|
|
left: 15%;
|
|
top: 70%;
|
|
animation: slashStar 2s ease-in-out 0.3s infinite;
|
|
}
|
|
&.animation2 {
|
|
left: 34%;
|
|
top: 35%;
|
|
animation: slashStar 2s ease-in-out 1.2s infinite;
|
|
}
|
|
&.animation3 {
|
|
left: 10%;
|
|
top: 8%;
|
|
animation: slashStar 2s ease-in-out 0.5s infinite;
|
|
}
|
|
&.animation4 {
|
|
left: 68%;
|
|
top: 55%;
|
|
animation: slashStar 2s ease-in-out 0.8s infinite;
|
|
}
|
|
&.animation5 {
|
|
left: 87%;
|
|
top: 30%;
|
|
animation: slashStar 2s ease-in-out 1.5s infinite;
|
|
}
|
|
}
|
|
@keyframes slashStar {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
background-color: transparent;
|
|
padding: 16px;
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
|
|
.logo-icon {
|
|
height: 48px;
|
|
width: 48px;
|
|
margin-right: 16px;
|
|
vertical-align: top;
|
|
border-style: none;
|
|
border-radius: 6.66px;
|
|
}
|
|
.logo-brand {
|
|
height: 48px;
|
|
width: 174px;
|
|
vertical-align: top;
|
|
border-style: none;
|
|
border-radius: 2px;
|
|
}
|
|
.title {
|
|
position: relative;
|
|
top: 2px;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 28px;
|
|
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
|
}
|
|
}
|
|
|
|
.login-card {
|
|
width: 368px;
|
|
min-width: 260px;
|
|
margin: 0 auto;
|
|
border-radius: 4px;
|
|
|
|
& .desc {
|
|
text-align: center;
|
|
margin-bottom: 18px;
|
|
color: #666;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
}
|
|
& .prefix-icon {
|
|
color: #8c8c8c;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
margin: 12px auto 30px;
|
|
text-align: center;
|
|
|
|
&-copyright {
|
|
opacity: 0.8;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|