//记住要跳转的地址
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>