331 lines
7.8 KiB
Vue
331 lines
7.8 KiB
Vue
<script lang="ts" setup>
|
|
import { GlobalFooter } from '@ant-design-vue/pro-layout';
|
|
import { message } from 'ant-design-vue/lib';
|
|
import { reactive, onMounted } from 'vue';
|
|
import useUserStore from '@/store/modules/user';
|
|
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';
|
|
const { t, changeLocale } = useI18n();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
/**登录后重定向页面 */
|
|
const redirectPath =
|
|
(route.query && (route.query.redirect as string)) || '/index';
|
|
|
|
let state = reactive({
|
|
/**表单属性 */
|
|
from: {
|
|
/**账号 */
|
|
username: 'admin',
|
|
/**密码 */
|
|
password: 'rootaa',
|
|
/**验证码 */
|
|
code: '',
|
|
/**验证码uuid */
|
|
uuid: '',
|
|
},
|
|
/**表单提交点击状态 */
|
|
fromClick: false,
|
|
/**验证码状态 */
|
|
captcha: {
|
|
/**验证码开关 */
|
|
enabled: false,
|
|
/**验证码图片地址 */
|
|
codeImg: '',
|
|
},
|
|
/**验证码点击状态 */
|
|
captchaClick: false,
|
|
});
|
|
|
|
/**表单验证通过 */
|
|
function fnFinish() {
|
|
state.fromClick = true;
|
|
// 账号密码登录
|
|
// let form = {
|
|
// userName: state.from.username,
|
|
// value: state.from.password,
|
|
// grantType: 'password',
|
|
// };
|
|
|
|
// 发送请求
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
fnGetCaptcha();
|
|
});
|
|
|
|
/**改变多语言 */
|
|
function fnChangeLocale(e: any) {
|
|
changeLocale(e.key);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="top">
|
|
<div class="header">
|
|
<a href="/" target="_self"
|
|
><img src="@/assets/logo.png" class="logo" alt="logo" />
|
|
<span class="title">{{ t('common.title') }}</span>
|
|
</a>
|
|
</div>
|
|
<div class="desc">{{ t('common.desc') }}</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<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">
|
|
<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"
|
|
>
|
|
<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 key="zh_CN">中文</a-menu-item>
|
|
<a-menu-item key="en_US">English</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
|
|
<GlobalFooter
|
|
class="footer"
|
|
:links="[
|
|
{ blankTarget: false, title: t('globalFooter.help'), href: '/' },
|
|
{ blankTarget: false, title: t('globalFooter.privacy'), href: '/' },
|
|
{ blankTarget: false, title: t('globalFooter.term'), href: '/' },
|
|
]"
|
|
copyright="Copyright ©2023 For AGrand 千通"
|
|
>
|
|
</GlobalFooter>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
padding: 110px 0 144px;
|
|
background-image: url(../assets/background.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center 110px;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.top {
|
|
text-align: center;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.header {
|
|
height: 44px;
|
|
line-height: 44px;
|
|
.logo {
|
|
height: 44px;
|
|
margin-right: 16px;
|
|
vertical-align: top;
|
|
border-style: none;
|
|
border-radius: 6.66px;
|
|
}
|
|
.title {
|
|
position: relative;
|
|
top: 2px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
font-weight: 600;
|
|
font-size: 33px;
|
|
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 12px;
|
|
margin-bottom: 40px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
width: 368px;
|
|
min-width: 260px;
|
|
margin: 0 auto;
|
|
|
|
.prefix-icon {
|
|
color: #8c8c8c;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
</style>
|