feat: 添加登录，注册，忘记密码功能
This commit is contained in:
@@ -4,19 +4,24 @@ 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 type { FormInstance, FormItemProp } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { postGetCodeAPI, postResetPasswordAPI } from "@/api/login";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
import UserName from "@iconify-icons/ri/user-4-line";
|
||||
import Mail from "@iconify-icons/ri/mail-open-line";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
const timer = ref(null);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
verifyCode: "",
|
||||
username: "",
|
||||
email: "",
|
||||
code: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
@@ -26,11 +31,9 @@ const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.purePassWordSureReg"))));
|
||||
callback(new Error(transformI18n($t("login:PassWordSureReg"))));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(
|
||||
new Error(transformI18n($t("login.purePassWordDifferentReg")))
|
||||
);
|
||||
callback(new Error(transformI18n($t("login:PassWordDifferentReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -42,23 +45,67 @@ const repeatPasswordRule = [
|
||||
const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate(valid => {
|
||||
await formEl.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message(transformI18n($t("login.purePassWordUpdateReg")), {
|
||||
const res = await postResetPasswordAPI({
|
||||
username: ruleForm.username,
|
||||
password: ruleForm.password,
|
||||
code: ruleForm.code,
|
||||
mail: ruleForm.email
|
||||
});
|
||||
if (res.success) {
|
||||
message(res.msg, {
|
||||
type: "success"
|
||||
});
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
} else {
|
||||
message(res.msg, {
|
||||
type: "error"
|
||||
});
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const start = async (
|
||||
formEl: FormInstance | undefined,
|
||||
props: FormItemProp,
|
||||
time = 120
|
||||
) => {
|
||||
if (!formEl) return;
|
||||
const initTime = clone(time, true);
|
||||
await formEl.validateField(props, async isValid => {
|
||||
if (isValid) {
|
||||
const res = await postGetCodeAPI({
|
||||
username: ruleForm.username,
|
||||
title: "重置",
|
||||
mail: ruleForm.email
|
||||
});
|
||||
if (res.code === 200) {
|
||||
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);
|
||||
} else {
|
||||
message(res.msg, { type: "error" });
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
}
|
||||
</script>
|
||||
@@ -71,34 +118,70 @@ function onBack() {
|
||||
size="large"
|
||||
>
|
||||
<Motion>
|
||||
<el-form-item prop="phone">
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login:UsernameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
v-model="ruleForm.phone"
|
||||
v-model="ruleForm.username"
|
||||
clearable
|
||||
:placeholder="t('login.purePhone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
:placeholder="t('login:Username')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(UserName, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="verifyCode">
|
||||
<el-form-item prop="email">
|
||||
<el-input
|
||||
v-model="ruleForm.email"
|
||||
clearable
|
||||
:placeholder="t('login:Email')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Mail, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="code">
|
||||
<div class="w-full flex justify-between">
|
||||
<el-input
|
||||
v-model="ruleForm.verifyCode"
|
||||
v-model="ruleForm.code"
|
||||
clearable
|
||||
:placeholder="t('login.pureSmsVerifyCode')"
|
||||
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
|
||||
:placeholder="t('login:EmailVerifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
@click="start(ruleFormRef, 'email')"
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.pureInfo")
|
||||
: t("login.pureGetVerifyCode")
|
||||
? text + t("login:Info")
|
||||
: t("login:GetVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -111,8 +194,14 @@ function onBack() {
|
||||
v-model="ruleForm.password"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.purePassword')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
:placeholder="t('login:Password')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Lock, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -123,31 +212,42 @@ function onBack() {
|
||||
v-model="ruleForm.repeatPassword"
|
||||
clearable
|
||||
show-password
|
||||
:placeholder="t('login.pureSure')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
:placeholder="t('login:Sure')"
|
||||
:prefix-icon="
|
||||
useRenderIcon(Lock, {
|
||||
color: '#4380FF',
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
"
|
||||
/>
|
||||
</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.pureDefinite") }}
|
||||
</el-button>
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<el-button
|
||||
class="w-[75%]"
|
||||
size="default"
|
||||
type="primary"
|
||||
round
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
{{ t("login:Definite") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.pureBack") }}
|
||||
</el-button>
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<el-button class="w-[75%]" size="default" round @click="onBack">
|
||||
{{ t("login:Back") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
|
||||
Reference in New Issue
Block a user