renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 错误信息提示调整

Browse Source
This commit is contained in:
rd
2025-09-08 17:19:56 +08:00
parent 0217d92bc0
commit b8a58091ad
2 changed files with 99 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/login/components/login-form/index.vue
View File

@ -3,16 +3,22 @@
<div class="flex items-center w-400 h-100%">
<div class="w-full bg-#fff rounded-16px px-40px py-32px flex flex-col items-center">
<img src="@/assets/img/icon-logo.png" alt="" width="144" height="36" class="mb-24px" />
<Tabs v-model:activeKey="activeKey" class="mb-24px">
<Tabs v-model:activeKey="activeKey" class="mb-24px" @change="onTabChange">
<TabPane tab="密码登录" key="1" />
<TabPane tab="短信登录" key="2" />
</Tabs>
<Form ref="formRef" :model="loginForm" :rules="formRules" class="w-320 form-wrap">
<FormItem name="mobile">
<Input v-model:value="loginForm.mobile" placeholder="请输入手机号" allowClear :maxlength="11" />
<Input
v-model:value="loginForm.mobile"
placeholder="请输入手机号"
allowClear
:maxlength="11"
@change="clearErrorMsg"
/>
</FormItem>
<FormItem v-if="isCaptchaLogin" name="captcha" class="captcha-form-item">
<Input v-model:value="loginForm.captcha" placeholder="请输入验证码" :maxlength="6">
<Input v-model:value="loginForm.captcha" placeholder="请输入验证码" :maxlength="6" @change="clearErrorMsg">
<template #suffix>
<div class="w-79px flex justify-center whitespace-nowrap">
<span
@ -27,13 +33,19 @@
</div>
</template>
</Input>
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-if="errMsg">
{{ errMsg }}
</p>
</FormItem>
<FormItem v-else name="password" class="password-form-item">
<Input.Password v-model:value="loginForm.password" placeholder="请输入密码">
<Input.Password v-model:value="loginForm.password" placeholder="请输入密码" @change="clearErrorMsg">
<template #iconRender="visible">
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
</template>
</Input.Password>
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-if="errMsg">
{{ errMsg }}
</p>
</FormItem>
<FormItem class="mt-52px">
@ -134,6 +146,7 @@ const selectAccountModalRef = ref(null);
const accounts = ref([]);
const activeKey = ref('1');
const isLegalMobile = ref(false);
const errMsg = ref('');
const loginForm = reactive({
mobile: '',
@ -149,9 +162,9 @@ const formRules = {
validator: (_rule: any, value: string) => {
if (!value) {
isLegalMobile.value = false;
return Promise.reject('手机号不能为空');
// return Promise.reject('手机号不能为空');
}
if (!/^1[3-9]\d{9}$/.test(value)) {
if (value && !/^1[3-9]\d{9}$/.test(value)) {
isLegalMobile.value = false;
return Promise.reject('手机号格式不正确');
} else {
@ -164,33 +177,33 @@ const formRules = {
],
password: [
{
required: true,
validator: (_rule: any, value: string) => {
if (!value) {
return Promise.reject('请输入密码');
}
if (value.length < 6) {
return Promise.reject('密码长度不能小于6位');
}
return Promise.resolve();
},
trigger: ['blur'],
// required: true,
// validator: (_rule: any, value: string) => {
// if (!value) {
// return Promise.reject('请输入密码');
// }
// if (value.length < 6) {
// return Promise.reject('密码长度不能小于6位');
// }
// return Promise.resolve();
// },
// trigger: ['blur'],
},
],
captcha: [
{
required: true,
validator: (_rule: any, value: string) => {
if (!value) {
return Promise.reject('请输入验证码');
}
if (!/^\d{6}$/.test(value)) {
return Promise.reject('验证码必须是6位数字');
} else {
return Promise.resolve();
}
},
trigger: ['blur'],
// required: true,
// validator: (_rule: any, value: string) => {
// if (!value) {
// return Promise.reject('请输入验证码');
// }
// if (!/^\d{6}$/.test(value)) {
// return Promise.reject('验证码必须是6位数字');
// } else {
// return Promise.resolve();
// }
// },
// trigger: ['blur'],
},
],
};
@ -202,6 +215,10 @@ const canGetCaptcha = computed(() => {
return isLegalMobile.value && countdown.value === 0;
});
const clearErrorMsg = () => {
errMsg.value = '';
};
const disabledSubmitBtn = computed(() => {
if (isCaptchaLogin.value) {
return !hasCheck.value || !isLegalMobile.value || !loginForm.captcha.trim() || !/^\d{6}$/.test(loginForm.captcha);
@ -243,6 +260,10 @@ const handleVerificationSubmit = async () => {
}
};
const onTabChange = () => {
errMsg.value = '';
};
// 获取用户信息
const getProfileInfo = async () => {
const { code, data } = await fetchProfileInfo();
@ -280,7 +301,7 @@ const handleSubmit = async () => {
submitting.value = true;
const _fn = isCaptchaLogin.value ? fetchAuthorizationsCaptcha : postLoginPassword;
const { code, data } = await _fn(loginForm);
const { code, data, message: errorInfo } = await _fn(loginForm);
if (code === 200) {
// 处理登录成功逻辑
@ -298,7 +319,9 @@ const handleSubmit = async () => {
getProfileInfo();
}
} catch (error) {
// 错误信息会显示在输入框下方
if (error?.status === 400) {
errMsg.value = error.data?.message;
}
} finally {
submitting.value = false;
}