//记住要跳转的地址
function handleLogin() {
loginFormRef.value.validate((valid: boolean) => {
if (valid) {
loading.value = true;
userStore
.login(loginData.value)
.then(() => {
const query: LocationQuery = route.query;
const redirect = (query.redirect as LocationQueryValue) ?? "/";
const otherQueryParams = Object.keys(query).reduce(
(acc: any, cur: string) => {
if (cur !== "redirect") {
acc[cur] = query[cur];
}
return acc;
},
{}
);
router.push({ path: redirect, query: otherQueryParams });
})
.catch(() => {
// 验证失败，重新生成验证码
getCaptcha();
})
.finally(() => {
loading.value = false;
});
}
});
}
/**
* 获取验证码
*/
function getCaptcha() {
getCaptchaApi().then(({ data }) => {
loginData.value.captchaKey = data.captchaKey;
captchaBase64.value = data.captchaBase64;
});
}
<!-- 登录表单 -->
<el-card
class="z-1 !border-none w-100 !bg-transparent !rounded-4% <sm:w-83"
>
<div class="text-center relative">
<h2>{ { title }}</h2>
<el-tag class="ml-2 absolute top-0 right-0">{ { version }}</el-tag>
</div>
<el-form
ref="loginFormRef"
:model="loginData"
:rules="loginRules"
class="login-form"
>
<el-form-item prop="username">
<div class="p-2">
<svg-icon icon-class="user" />
</div>
<el-input
ref="username"
v-model="loginData.username"
class="flex-1"
size="large"
:placeholder="$t('login.username')"
name="username"
/>
</el-form-item>
<el-tooltip
:disabled="isCapslock === false"
content="Caps lock is On"
placement="right"
>
<el-form-item prop="password">
<span class="p-2">
<svg-icon icon-class="password" />
</span>
<el-input
v-model="loginData.password"
class="flex-1"
:placeholder="$t('login.password')"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
name="password"
@keyup="checkCapslock"
@keyup.enter="handleLogin"
/>
<span class="mr-2" @click="passwordVisible = !passwordVisible">
<svg-icon
:icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
class="cursor-pointer"
/>
</span>
</el-form-item>
</el-tooltip>
<!-- 验证码 -->
<el-form-item prop="captchaCode">
<span class="p-2">
<svg-icon icon-class="captcha" />
</span>
<el-input
v-model="loginData.captchaCode"
auto-complete="off"
:placeholder="$t('login.captchaCode')"
class="w-[60%]"
@keyup.enter="handleLogin"
/>
<div class="captcha">
<el-image
:src="captchaBase64"
@click="getCaptcha"
class="w-[120px] h-[48px] cursor-pointer"
>
<template #error>
<div class="image-slot">
<i-ep-picture />
</div>
</template>
</el-image>
</div>
</el-form-item>
<el-button
:loading="loading"
type="primary"
class="w-full"
@click.prevent="handleLogin"
>{ { $t("login.login") }}
</el-button>
<!-- 账号密码提示 -->
<div class="mt-10 text-sm">
<span>{ { $t("login.username") }}: admin</span>
<span class="ml-4"> { { $t("login.password") }}: 123456</span>
</div>
</el-form>
</el-card>
