mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-11-11 05:03:39 +08:00
perf: 优化登录页面
This commit is contained in:
pan
105
src/views/login/components/phone.vue
Normal file
105
src/views/login/components/phone.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { phoneRules } from "../utils/rule";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
verifyCode: ""
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
|
||||
const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
// 模拟登录请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message(transformI18n($t("login.loginSuccess")), { type: "success" });
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
|
||||
<Motion>
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="ruleForm.phone"
|
||||
clearable
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="verifyCode">
|
||||
<div class="w-full flex justify-between">
|
||||
<el-input
|
||||
v-model="ruleForm.verifyCode"
|
||||
clearable
|
||||
:placeholder="t('login.smsVerifyCode')"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.info")
|
||||
: t("login.getVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.login") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</template>
|
||||
25
src/views/login/components/qrCode.vue
Normal file
25
src/views/login/components/qrCode.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Motion from "../utils/motion";
|
||||
import ReQrcode from "@/components/ReQrcode";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Motion class="-mt-2 -mb-2"> <ReQrcode :text="t('login.test')" /> </Motion>
|
||||
<Motion :delay="100">
|
||||
<el-divider>
|
||||
<p class="text-gray-500 text-xs">{{ t("login.tip") }}</p>
|
||||
</el-divider>
|
||||
</Motion>
|
||||
<Motion :delay="150">
|
||||
<el-button
|
||||
class="w-full mt-4"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(0)"
|
||||
>
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</Motion>
|
||||
</template>
|
||||
192
src/views/login/components/regist.vue
Normal file
192
src/views/login/components/regist.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
|
||||
const { t } = useI18n();
|
||||
const checked = ref(false);
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
username: "",
|
||||
phone: "",
|
||||
verifyCode: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.passwordSureReg"))));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
];
|
||||
|
||||
const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (checked.value) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message(transformI18n($t("login.registerSuccess")), {
|
||||
type: "success"
|
||||
});
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
message(transformI18n($t("login.tickPrivacy")), { type: "warning" });
|
||||
}
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="updateRules"
|
||||
size="large"
|
||||
>
|
||||
<Motion>
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login.usernameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
v-model="ruleForm.username"
|
||||
clearable
|
||||
:placeholder="t('login.username')"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="ruleForm.phone"
|
||||
clearable
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="verifyCode">
|
||||
<div class="w-full flex justify-between">
|
||||
<el-input
|
||||
v-model="ruleForm.verifyCode"
|
||||
clearable
|
||||
:placeholder="t('login.smsVerifyCode')"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.info")
|
||||
: t("login.getVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="ruleForm.password"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
|
||||
<el-input
|
||||
v-model="ruleForm.repeatPassword"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.sure')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked">
|
||||
{{ t("login.readAccept") }}
|
||||
</el-checkbox>
|
||||
<el-button link type="primary">
|
||||
{{ t("login.privacyPolicy") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="350">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.definite") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="400">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</template>
|
||||
153
src/views/login/components/update.vue
Normal file
153
src/views/login/components/update.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
verifyCode: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.passwordSureReg"))));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
];
|
||||
|
||||
const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message(transformI18n($t("login.passwordUpdateReg")), {
|
||||
type: "success"
|
||||
});
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="updateRules"
|
||||
size="large"
|
||||
>
|
||||
<Motion>
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="ruleForm.phone"
|
||||
clearable
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="verifyCode">
|
||||
<div class="w-full flex justify-between">
|
||||
<el-input
|
||||
v-model="ruleForm.verifyCode"
|
||||
clearable
|
||||
:placeholder="t('login.smsVerifyCode')"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.info")
|
||||
: t("login.getVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="ruleForm.password"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
|
||||
<el-input
|
||||
v-model="ruleForm.repeatPassword"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.sure')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.definite") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</template>
|
||||
@@ -4,15 +4,24 @@ import Motion from "./utils/motion";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "@/utils/message";
|
||||
import { loginRules } from "./utils/rule";
|
||||
import phone from "./components/phone.vue";
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
import { debounce } from "@pureadmin/utils";
|
||||
import qrCode from "./components/qrCode.vue";
|
||||
import regist from "./components/regist.vue";
|
||||
import update from "./components/update.vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { useEventListener } from "@vueuse/core";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { operates, thirdParty } from "./utils/enums";
|
||||
import { useLayout } from "@/layout/hooks/useLayout";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { initRouter, getTopMenu } from "@/router/utils";
|
||||
import { bg, avatar, illustration } from "./utils/static";
|
||||
import { ReImageVerify } from "@/components/ReImageVerify";
|
||||
import { ref, toRaw, reactive, watch, computed } from "vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
|
||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
|
||||
@@ -22,64 +31,84 @@ import globalization from "@/assets/svg/globalization.svg?component";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
import Info from "@iconify-icons/ri/information-line";
|
||||
|
||||
defineOptions({
|
||||
name: "Login"
|
||||
});
|
||||
|
||||
const imgCode = ref("");
|
||||
const loginDay = ref(7);
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const checked = ref(false);
|
||||
const disabled = ref(false);
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
|
||||
const { initStorage } = useLayout();
|
||||
initStorage();
|
||||
const currentPage = computed(() => {
|
||||
return useUserStoreHook().currentPage;
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { dataTheme, dataThemeChange } = useDataThemeChange();
|
||||
dataThemeChange();
|
||||
const { initStorage } = useLayout();
|
||||
initStorage();
|
||||
const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
|
||||
dataThemeChange(overallStyle.value);
|
||||
const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
|
||||
const { locale, translationCh, translationEn } = useTranslationLang();
|
||||
|
||||
const ruleForm = reactive({
|
||||
username: "admin",
|
||||
password: "admin123"
|
||||
password: "admin123",
|
||||
verifyCode: ""
|
||||
});
|
||||
|
||||
const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
useUserStoreHook()
|
||||
.loginByUsername({ username: ruleForm.username, password: "admin123" })
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
// 获取后端路由
|
||||
initRouter().then(() => {
|
||||
router.push(getTopMenu(true).path);
|
||||
message("登录成功", { type: "success" });
|
||||
return initRouter().then(() => {
|
||||
disabled.value = true;
|
||||
router
|
||||
.push(getTopMenu(true).path)
|
||||
.then(() => {
|
||||
message("登录成功", { type: "success" });
|
||||
})
|
||||
.finally(() => (disabled.value = false));
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 使用公共函数，避免`removeEventListener`失效 */
|
||||
function onkeypress({ code }: KeyboardEvent) {
|
||||
if (code === "Enter") {
|
||||
onLogin(ruleFormRef.value);
|
||||
}
|
||||
}
|
||||
const immediateDebounce: any = debounce(
|
||||
formRef => onLogin(formRef),
|
||||
1000,
|
||||
true
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
window.document.addEventListener("keypress", onkeypress);
|
||||
useEventListener(document, "keypress", ({ code }) => {
|
||||
if (code === "Enter" && !disabled.value && !loading.value)
|
||||
immediateDebounce(ruleFormRef.value);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.document.removeEventListener("keypress", onkeypress);
|
||||
watch(imgCode, value => {
|
||||
useUserStoreHook().SET_VERIFYCODE(value);
|
||||
});
|
||||
watch(checked, bool => {
|
||||
useUserStoreHook().SET_ISREMEMBERED(bool);
|
||||
});
|
||||
watch(loginDay, value => {
|
||||
useUserStoreHook().SET_LOGINDAY(value);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -136,10 +165,15 @@ onBeforeUnmount(() => {
|
||||
<div class="login-form">
|
||||
<avatar class="avatar" />
|
||||
<Motion>
|
||||
<h2 class="outline-none">{{ title }}</h2>
|
||||
<h2 class="outline-none">
|
||||
<TypeIt
|
||||
:options="{ strings: [title], cursor: false, speed: 100 }"
|
||||
/>
|
||||
</h2>
|
||||
</Motion>
|
||||
|
||||
<el-form
|
||||
v-if="currentPage === 0"
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="loginRules"
|
||||
@@ -177,21 +211,130 @@ onBeforeUnmount(() => {
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item prop="verifyCode">
|
||||
<el-input
|
||||
v-model="ruleForm.verifyCode"
|
||||
clearable
|
||||
:placeholder="t('login.verifyCode')"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<ReImageVerify v-model:code="imgCode" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-button
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.login") }}
|
||||
</el-button>
|
||||
<el-form-item>
|
||||
<div class="w-full h-[20px] flex justify-between items-center">
|
||||
<el-checkbox v-model="checked">
|
||||
<span class="flex">
|
||||
<select
|
||||
v-model="loginDay"
|
||||
:style="{
|
||||
width: loginDay < 10 ? '10px' : '16px',
|
||||
outline: 'none',
|
||||
background: 'none',
|
||||
appearance: 'none'
|
||||
}"
|
||||
>
|
||||
<option value="1">1</option>
|
||||
<option value="7">7</option>
|
||||
<option value="30">30</option>
|
||||
</select>
|
||||
{{ t("login.remember") }}
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:content="t('login.rememberInfo')"
|
||||
>
|
||||
<IconifyIconOffline :icon="Info" class="ml-1" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</el-checkbox>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
|
||||
>
|
||||
{{ t("login.forget") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
:disabled="disabled"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.login") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<div class="w-full h-[20px] flex justify-between items-center">
|
||||
<el-button
|
||||
v-for="(item, index) in operates"
|
||||
:key="index"
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(index + 1)"
|
||||
>
|
||||
{{ t(item.title) }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
|
||||
<Motion v-if="currentPage === 0" :delay="350">
|
||||
<el-form-item>
|
||||
<el-divider>
|
||||
<p class="text-gray-500 text-xs">{{ t("login.thirdLogin") }}</p>
|
||||
</el-divider>
|
||||
<div class="w-full flex justify-evenly">
|
||||
<span
|
||||
v-for="(item, index) in thirdParty"
|
||||
:key="index"
|
||||
:title="t(item.title)"
|
||||
>
|
||||
<IconifyIconOnline
|
||||
:icon="`ri:${item.icon}-fill`"
|
||||
width="20"
|
||||
class="cursor-pointer text-gray-500 hover:text-blue-400"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<!-- 手机号登录 -->
|
||||
<phone v-if="currentPage === 1" />
|
||||
<!-- 二维码登录 -->
|
||||
<qrCode v-if="currentPage === 2" />
|
||||
<!-- 注册 -->
|
||||
<regist v-if="currentPage === 3" />
|
||||
<!-- 忘记密码 -->
|
||||
<update v-if="currentPage === 4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full flex-c absolute bottom-3 text-sm text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
|
||||
>
|
||||
Copyright © 2020-present
|
||||
<a
|
||||
class="hover:text-primary"
|
||||
href="https://github.com/pure-admin"
|
||||
target="_blank"
|
||||
>
|
||||
{{ title }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
34
src/views/login/utils/enums.ts
Normal file
34
src/views/login/utils/enums.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
|
||||
const operates = [
|
||||
{
|
||||
title: $t("login.phoneLogin")
|
||||
},
|
||||
{
|
||||
title: $t("login.qRCodeLogin")
|
||||
},
|
||||
{
|
||||
title: $t("login.register")
|
||||
}
|
||||
];
|
||||
|
||||
const thirdParty = [
|
||||
{
|
||||
title: $t("login.weChatLogin"),
|
||||
icon: "wechat"
|
||||
},
|
||||
{
|
||||
title: $t("login.alipayLogin"),
|
||||
icon: "alipay"
|
||||
},
|
||||
{
|
||||
title: $t("login.qqLogin"),
|
||||
icon: "qq"
|
||||
},
|
||||
{
|
||||
title: $t("login.weiboLogin"),
|
||||
icon: "weibo"
|
||||
}
|
||||
];
|
||||
|
||||
export { operates, thirdParty };
|
||||
@@ -1,13 +1,110 @@
|
||||
import { reactive } from "vue";
|
||||
import { isPhone } from "@pureadmin/utils";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
/** 6位数字验证码正则 */
|
||||
export const REGEXP_SIX = /^\d{6}$/;
|
||||
|
||||
/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
|
||||
export const REGEXP_PWD =
|
||||
/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
|
||||
|
||||
/** 登录校验 */
|
||||
const loginRules = reactive(<FormRules>{
|
||||
const loginRules = reactive<FormRules>({
|
||||
password: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.passwordReg"))));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.passwordRuleReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
|
||||
} else if (useUserStoreHook().verifyCode !== value) {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/** 手机登录校验 */
|
||||
const phoneRules = reactive<FormRules>({
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.phoneReg"))));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/** 忘记密码校验 */
|
||||
const updateRules = reactive<FormRules>({
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.phoneReg"))));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
@@ -24,4 +121,4 @@ const loginRules = reactive(<FormRules>{
|
||||
]
|
||||
});
|
||||
|
||||
export { loginRules };
|
||||
export { loginRules, phoneRules, updateRules };
|
||||
|
||||
50
src/views/login/utils/verifyCode.ts
Normal file
50
src/views/login/utils/verifyCode.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import type { FormInstance, FormItemProp } from "element-plus";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { ref } from "vue";
|
||||
|
||||
const isDisabled = ref(false);
|
||||
const timer = ref(null);
|
||||
const text = ref("");
|
||||
|
||||
export const useVerifyCode = () => {
|
||||
const start = async (
|
||||
formEl: FormInstance | undefined,
|
||||
props: FormItemProp,
|
||||
time = 60
|
||||
) => {
|
||||
if (!formEl) return;
|
||||
const initTime = clone(time, true);
|
||||
await formEl.validateField(props, isValid => {
|
||||
if (isValid) {
|
||||
clearInterval(timer.value);
|
||||
isDisabled.value = true;
|
||||
text.value = `${time}`;
|
||||
timer.value = setInterval(() => {
|
||||
if (time > 0) {
|
||||
time -= 1;
|
||||
text.value = `${time}`;
|
||||
} else {
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
time = initTime;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const end = () => {
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
};
|
||||
|
||||
return {
|
||||
isDisabled,
|
||||
timer,
|
||||
text,
|
||||
start,
|
||||
end
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user