From 3fba8ac8fc9ecb0ea1ebd2e1c50eeab9d30d08e2 Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Tue, 16 Sep 2025 11:23:43 +0800 Subject: [PATCH 1/3] =?UTF-8?q?perf(verification-code):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E9=AA=8C=E8=AF=81=E7=A0=81=E8=BE=93=E5=85=A5=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E9=80=BB=E8=BE=91=E5=92=8C=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../change-password-modal/index.vue | 23 +++--- .../change-password-modal/style.scss | 6 +- .../components/verification-code/index.vue | 80 +++++++++---------- .../login/components/register-form/index.vue | 3 +- 4 files changed, 55 insertions(+), 57 deletions(-) diff --git a/src/views/components/management/person/components/change-password-modal/index.vue b/src/views/components/management/person/components/change-password-modal/index.vue index c9eba78..3ecc1ae 100644 --- a/src/views/components/management/person/components/change-password-modal/index.vue +++ b/src/views/components/management/person/components/change-password-modal/index.vue @@ -20,7 +20,7 @@ - + 完成更改 @@ -54,7 +54,9 @@

{{ countdown }} 秒后您可以再次发送验证码

- + @@ -79,6 +81,11 @@ import icon2 from '@/assets/img/login/icon-open.png'; const emit = defineEmits(['success', 'cancel']); +const INITIAL_FORM_DATA = { + captcha: '', + password: '', + confirm_password: '', +}; const visible = ref(false); const phone = ref(''); const isCheckPass = ref(false); @@ -90,11 +97,7 @@ const timer = ref(null); const hasGetCode = ref(false); const submitLoading = ref(false); const verificationCodeRef = ref(null); -const formData = ref({ - captcha: '', - password: '', - confirm_password: '', -}); +const formData = ref(cloneDeep(INITIAL_FORM_DATA)); const formRules = { password: [ @@ -113,7 +116,7 @@ const formRules = { { required: true, validator: (_rule, value) => { - if (value !== formData.value.password) { + if (value && value !== formData.value.password) { return Promise.reject('确认密码与设置的密码不同'); } return Promise.resolve(); @@ -216,6 +219,8 @@ const onClose = () => { countdown.value = 0; hasGetCode.value = false; submitLoading.value = false; + isCheckPass.value = false; + formData.valu = cloneDeep(INITIAL_FORM_DATA); formRef.value?.resetFields(); formRef.value?.clearValidate(); clearTimer(); diff --git a/src/views/components/management/person/components/change-password-modal/style.scss b/src/views/components/management/person/components/change-password-modal/style.scss index b1fb1dc..a10f2b8 100644 --- a/src/views/components/management/person/components/change-password-modal/style.scss +++ b/src/views/components/management/person/components/change-password-modal/style.scss @@ -39,14 +39,10 @@ .ant-form { .ant-form-item { - &:not(:last-child) { - margin-bottom: 24px !important; - } + margin-bottom: 24px !important; .ant-input-affix-wrapper { border-radius: 8px !important; - - } } } diff --git a/src/views/components/management/person/components/verification-code/index.vue b/src/views/components/management/person/components/verification-code/index.vue index 0e2b762..2bf3462 100644 --- a/src/views/components/management/person/components/verification-code/index.vue +++ b/src/views/components/management/person/components/verification-code/index.vue @@ -7,10 +7,8 @@ ref="inputRef" :key="index" :value="item.value" - :class="{ error: item.error, fill: item.value }" + :class="{ error: isError, fill: item.value }" @input="handleInput(index, $event.target.value)" - @focus="handleFocus(index)" - @blur="handleBlur(index)" :maxlength="1" placeholder="" /> @@ -34,11 +32,17 @@ const emits = defineEmits(['success']); const codeArray = ref([]); const activeIndex = ref(0); // 当前激活的输入框索引 const errorMessage = ref(''); +const isError = ref(false); const inputRef = ref(null); // 处理输入事件 const handleInput = (index, value) => { - if (!value || !/^\d$/.test(value)) return; + if (!value) { + return; + } + + isError.value = false; + errorMessage.value = ''; codeArray.value[index].value = value; @@ -48,45 +52,36 @@ const handleInput = (index, value) => { } }; -const handleFocus = (index) => { - activeIndex.value = index; -}; - -const handleBlur = (index) => { - const _value = codeArray.value[index].value; - if (!_value || !/^\d$/.test(_value)) { - codeArray.value[index].error = true; - } else { - if (errorMessage.value) { - codeArray.value.forEach((item) => { - item.error = false; - }); - } - errorMessage.value = ''; - codeArray.value[index].error = false; - } -}; - // 验证验证码逻辑 const validateCode = async () => { - const captcha = codeArray.value.map((item) => item.value).join(''); - const { code } = await postCheckUpdatePasswordCaptcha({ captcha }); - if (code === 200) { - emits('success', captcha); - } else { - activeIndex.value = 0; - inputRef.value?.[activeIndex.value]?.focus?.(); - errorMessage.value = '验证码错误，请检查后重试'; - codeArray.value.forEach((item) => { - item.error = true; - item.value = ''; - }); - } + return new Promise((resolve, reject) => { + isError.value = codeArray.value.some((_value) => !_value); + isError.value ? reject() : resolve(); + }); +}; + +const onSubmit = () => { + validateCode().then(async () => { + const captcha = codeArray.value.map((item) => item.value).join(''); + const { code } = await postCheckUpdatePasswordCaptcha({ captcha }); + if (code === 200) { + emits('success', captcha); + } else { + activeIndex.value = 0; + inputRef.value?.[activeIndex.value]?.focus?.(); + errorMessage.value = '验证码错误，请检查后重试'; + isError.value = true; + codeArray.value.forEach((item) => { + item.value = ''; + }); + } + }); }; const init = () => { activeIndex.value = 0; errorMessage.value = ''; + isError.value = false; inputRef.value = null; codeArray.value = new Array(6).fill().map(() => ({ value: '', error: false })); @@ -100,7 +95,7 @@ watch( () => codeArray.value, (newVal) => { if (newVal.every((item) => item.value)) { - validateCode(); + onSubmit(); } }, { deep: true }, @@ -129,17 +124,20 @@ defineExpose({ init }); caret-color: #6d4cfe; + &.error { + border-color: #f64b31 !important; + } &:hover { border-color: #6d4cfe !important; } + &:focus-within { + border-color: #6d4cfe !important; + } + &.fill { color: #6d4cfe; } - - &.error { - border-color: #f64b31 !important; - } } } } diff --git a/src/views/login/components/register-form/index.vue b/src/views/login/components/register-form/index.vue index b2851db..964b1b8 100644 --- a/src/views/login/components/register-form/index.vue +++ b/src/views/login/components/register-form/index.vue @@ -182,14 +182,13 @@ const formRules = { { required: true, validator: (_rule, value) => { - console.log('validator'); // if (!value) { // return Promise.reject('请输入密码确认'); // } // 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(); From 37e6887e93520cf0451ee7406084e93703982364 Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Tue, 16 Sep 2025 11:25:04 +0800 Subject: [PATCH 2/3] =?UTF-8?q?perf(change-password-modal):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E9=87=8D=E7=BD=AE=E5=AF=86=E7=A0=81=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../person/components/change-password-modal/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/components/management/person/components/change-password-modal/index.vue b/src/views/components/management/person/components/change-password-modal/index.vue index 3ecc1ae..5c062ae 100644 --- a/src/views/components/management/person/components/change-password-modal/index.vue +++ b/src/views/components/management/person/components/change-password-modal/index.vue @@ -220,7 +220,7 @@ const onClose = () => { hasGetCode.value = false; submitLoading.value = false; isCheckPass.value = false; - formData.valu = cloneDeep(INITIAL_FORM_DATA); + formData.value = cloneDeep(INITIAL_FORM_DATA); formRef.value?.resetFields(); formRef.value?.clearValidate(); clearTimer(); From 473a6e62298e0007ecaf1e0c039337b90d192e5e Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Tue, 16 Sep 2025 11:27:18 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(person):=20=E4=BC=98=E5=8C=96=E9=AA=8C?= =?UTF-8?q?=E8=AF=81=E7=A0=81=E8=BE=93=E5=85=A5=E9=94=99=E8=AF=AF=E5=A4=84?= =?UTF-8?q?=E7=90=86=E9=80=BB=E8=BE=91=E8=AE=BE=E7=BD=AE=E7=84=A6=E7=82=B9?= =?UTF-8?q?=E5=88=B0=E7=AC=AC=E4=B8=80=E4=B8=AA=E8=BE=93=E5=85=A5=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../management/person/components/verification-code/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/components/management/person/components/verification-code/index.vue b/src/views/components/management/person/components/verification-code/index.vue index 2bf3462..40b0d43 100644 --- a/src/views/components/management/person/components/verification-code/index.vue +++ b/src/views/components/management/person/components/verification-code/index.vue @@ -67,8 +67,8 @@ const onSubmit = () => { if (code === 200) { emits('success', captcha); } else { + inputRef.value?.[activeIndex.value]?.blur?.(); activeIndex.value = 0; - inputRef.value?.[activeIndex.value]?.focus?.(); errorMessage.value = '验证码错误，请检查后重试'; isError.value = true; codeArray.value.forEach((item) => {