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

feat: 更新表单和按钮样式，优化验证码组件逻辑

Browse Source 
- 在 `App.vue` 中添加 `autoInsertSpaceInButton` 属性
- 更新 `login/style.scss` 和 `styles/components/ant-input.scss` 样式文件
- 优化 `verification-code/index.vue` 组件的验证逻辑和样式
- 更新 `styles/components/ant-button.scss` 样式文件
- 优化 `register-form/index.vue` 和 `change-password-modal/index.vue` 组件的密码输入逻辑和样式
This commit is contained in:
rd
2025-09-16 17:59:18 +08:00
parent c357e4a885 730d1ab227
commit 7c85582564
8 changed files with 174 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,11 +2,13 @@
<template>
<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">
<div class="flex items-center mb-24px w-full cursor-pointer" @click="onBack">
<icon-left size="24" class="mr-4px color-#000" />
<span class="color-#000 text-20px font-500 lh-28px font-family-medium">{{
isResetPassword ? '重置密码' : '手机注册'
}}</span>
<div class="flex items-center mb-24px w-full">
<div class="flex items-center cursor-pointer" @click="onBack">
<icon-left class="mr-4px color-#000" size="24" />
<span class="color-#000 text-20px font-500 lh-28px font-family-medium">{{
isResetPassword ? '重置密码' : '手机注册'
}}</span>
</div>
</div>
<Form ref="formRef" :model="formData" :rules="formRules" auto-label-width class="w-320 form-wrap">
<FormItem name="mobile">
@ -19,14 +21,14 @@
/>
</FormItem>
<FormItem name="password" class="password-form-item">
<Input.Password v-model:value="formData.password" placeholder="新密码" @change="clearErrorMsg">
<Input.Password v-model:value="formData.password" placeholder="新密码" @change="onPasswordChange">
<template #iconRender="visible">
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
</template>
</Input.Password>
</FormItem>
<FormItem name="confirm_password" class="password-form-item">
<Input.Password v-model:value="formData.confirm_password" placeholder="密码确认" @change="clearErrorMsg">
<Input.Password v-model:value="formData.confirm_password" placeholder="密码确认" @change="onPasswordChange">
<template #iconRender="visible">
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
</template>
@ -48,12 +50,12 @@
</div>
</template>
</Input>
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
<p class="color-#F64B31 text-12px font-400 lh-20px h-20px font-family-regular">
{{ errMsg }}
</p>
</FormItem>
<FormItem class="mt-52px">
<FormItem class="mt-32px">
<div class="text-12px flex justify-center items-center mb-16px">
<Checkbox v-model:checked="hasCheck" class="mr-8px"></Checkbox>
<span class="text-12px color-#737478 font-400 lh-20px font-family-regular"
@ -186,7 +188,7 @@ const formRules = {
// if (value.length < 6) {
// return Promise.reject('密码长度不能小于6位');
// }
if (value !== formData.value.password) {
if (value && value !== formData.value.password) {
return Promise.reject('确认密码与设置的密码不同');
}
return Promise.resolve();
@ -229,13 +231,20 @@ const canGetCaptcha = computed(() => {
});
const disabledSubmitBtn = computed(() => {
return !isPassPassword.value || !hasCheck.value || !isLegalMobile.value || !formData.value.password.trim();
return !isPassPassword.value || !hasCheck.value || !isLegalMobile.value || !formData.value.password.trim() || !formData.value.captcha;
});
const clearErrorMsg = () => {
errMsg.value = '';
};
const onPasswordChange = () => {
clearErrorMsg();
nextTick(() => {
formRef.value.clearValidate('confirm_password');
});
};
const validateField = (field) => {
formRef.value.validateFields(field);
};