From dc520a14c43e5b867819534c230e7d1ea2a5dfac Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 15 Jan 2025 18:15:17 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E9=87=8D=E7=BD=AE=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E7=95=8C=E9=9D=A2=E4=BF=AE=E6=94=B9=E9=87=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/langs/en-us.ts            |  10 +-
 src/locales/langs/zh-cn.ts            |  10 +-
 src/views/userInfo/resetpwd/index.vue | 129 +++++++++++++++++++++++---
 3 files changed, 134 insertions(+), 15 deletions(-)

diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index fd9d07b..be14e25 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -271,7 +271,15 @@ const local: any = {
         validationError: 'Validation failed, please try again'
       },
       resetPwd: {
-        title: 'Reset Password'
+        title: 'Reset Password',
+        oldPassword: 'Current Password',
+        oldPasswordPlaceholder: 'Please enter current password',
+        oldPasswordRequired: 'Please enter current password',
+        newPassword: 'New Password',
+        passwordSameAsOld: 'New password cannot be the same as current password',
+        passwordLength: 'Password must be at least 6 characters',
+        byPassword: 'Reset by Password',
+        byEmail: 'Reset by Email Code'
       },
       bindWeChat: {
         title: 'Bind WeChat'
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 41500e5..f233d37 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -271,7 +271,15 @@ const local:any = {
         validationError: '验证失败，请重试'
       },
       resetPwd: {
-        title: '重置密码'
+        title: '重置密码',
+        oldPassword: '原密码',
+        oldPasswordPlaceholder: '请输入原密码',
+        oldPasswordRequired: '请输入原密码',
+        newPassword: '新密码',
+        passwordSameAsOld: '新密码不能与原密码相同',
+        passwordLength: '密码长度不能小于6位',
+        byPassword: '通过原密码重置',
+        byEmail: '通过邮箱验证码重置'
       },
       bindWeChat: {
         title: '绑定微信'
diff --git a/src/views/userInfo/resetpwd/index.vue b/src/views/userInfo/resetpwd/index.vue
index 6c3b2b9..eb108d8 100644
--- a/src/views/userInfo/resetpwd/index.vue
+++ b/src/views/userInfo/resetpwd/index.vue
@@ -2,48 +2,103 @@
 import { reactive, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useFormRules } from '@/hooks/common/form';
+import { useCaptcha } from '@/hooks/business/captcha';
 import type { Rule } from 'ant-design-vue/es/form';
 import {
   Form as AForm,
   FormItem as AFormItem,
   Input,
   Button as AButton,
-  Card as ACard
+  Card as ACard,
+  Radio,
 } from 'ant-design-vue';
 import { useRouter } from 'vue-router';
 
 const AInputPassword = Input.Password;
+const ARadioGroup = Radio.Group;
 
 const { t } = useI18n();
 const formRef = ref();
+const { label, isCounting, loading, getCaptcha } = useCaptcha();
+
+// 重置方式：password-原密码方式，email-邮箱验证码方式
+const resetType = ref<'password' | 'email'>('password');
 
 interface FormModel {
+  oldPassword: string;
   password: string;
   confirmPassword: string;
+  email: string;
+  code: string;
+  uuid: string;
 }
 
 const formModel = reactive<FormModel>({
+  oldPassword: '',
   password: '',
-  confirmPassword: ''
+  confirmPassword: '',
+  email: '',
+  code: '',
+  uuid: ''
 });
 
-// 复用注册界面的密码验证规则
+// 表单验证规则
 const formRules = computed<Record<string, Rule | Rule[]>>(() => {
   const { createConfirmPwdRule } = useFormRules();
 
-  return {
+  const baseRules = {
     password: [
       { required: true, message: t('page.login.register.passwordRequired') },
-      { min: 6, message: t('page.login.register.passwordLength') }
+      { min: 6, message: t('page.login.resetPwd.passwordLength') }
     ],
     confirmPassword: createConfirmPwdRule(formModel.password)
   };
+
+  if (resetType.value === 'password') {
+    return {
+      ...baseRules,
+      oldPassword: [
+        { required: true, message: t('page.login.resetPwd.oldPasswordRequired') },
+        { min: 6, message: t('page.login.resetPwd.passwordLength') },
+      ],
+      password: [
+        ...baseRules.password,
+        {
+          validator: (_rule: Rule, value: string) => {
+            if (value && value === formModel.oldPassword) {
+              return Promise.reject(t('page.login.resetPwd.passwordSameAsOld'));
+            }
+            return Promise.resolve();
+          }
+        }
+      ]
+    };
+  } else {
+    return {
+      ...baseRules,
+      email: [
+        { required: true, message: t('page.login.register.emailRequired') },
+        { type: 'email', message: t('page.login.register.emailInvalid') }
+      ],
+      code: [{ required: true, message: t('page.login.register.codeRequired') }]
+    };
+  }
 });
 
+async function handleCaptcha() {
+  const res = await getCaptcha(formModel.email);
+  if (res) {
+    formModel.uuid = res.data.uuid;
+    if (res.data?.text) {
+      formModel.code = res.data.text;
+    }
+  }
+}
+
 async function handleSubmit() {
   try {
     await formRef.value?.validate();
-//
+    //
     window.$message?.success(t('common.success'));
   } catch (error) {
     console.error('Form validation failed:', error);
@@ -65,33 +120,77 @@ const handleBack = () => {
           {{ t('page.login.common.back') }}
         </a-button>
       </template>
+
+      <a-radio-group v-model:value="resetType" class="mb-24px">
+        <a-radio value="password">{{ t('page.login.resetPwd.byPassword') }}</a-radio>
+        <a-radio value="email">{{ t('page.login.resetPwd.byEmail') }}</a-radio>
+      </a-radio-group>
+
       <a-form
         ref="formRef"
         :model="formModel"
         :rules="formRules"
         :label-col="{
-          xs: { span: 24 },  // 移动端占满宽度
-          sm: { span: 8 },   // 小屏幕占8格
-          md: { span: 6 }    // 中等及以上屏幕占6格
+          xs: { span: 24 },
+          sm: { span: 8 },
+          md: { span: 6 }
         }"
         :wrapper-col="{
-          xs: { span: 24 },  // 移动端占满宽度
-          sm: { span: 16 },  // 小屏幕占16格
-          md: { span: 18 }   // 中等及以上屏幕占18格
+          xs: { span: 24 },
+          sm: { span: 16 },
+          md: { span: 18 }
         }"
       >
-        <a-form-item name="password" :label="t('page.login.register.password')">
+        <template v-if="resetType === 'password'">
+          <a-form-item name="oldPassword" :label="t('page.login.resetPwd.oldPassword')">
+            <a-input-password
+              v-model:value="formModel.oldPassword"
+              :placeholder="t('page.login.resetPwd.oldPasswordPlaceholder')"
+            />
+          </a-form-item>
+        </template>
+
+        <template v-else>
+          <a-form-item name="email" :label="t('page.login.register.email')">
+            <a-input
+              v-model:value="formModel.email"
+              :placeholder="t('page.login.common.emailPlaceholder')"
+            />
+          </a-form-item>
+
+          <a-form-item name="code" :label="t('page.login.register.code')">
+            <a-space>
+              <a-input
+                v-model:value="formModel.code"
+                :placeholder="t('page.login.common.codePlaceholder')"
+                style="width: 200px"
+              />
+              <a-button
+                type="primary"
+                :loading="loading"
+                :disabled="isCounting"
+                @click="handleCaptcha"
+              >
+                {{ label }}
+              </a-button>
+            </a-space>
+          </a-form-item>
+        </template>
+
+        <a-form-item name="password" :label="t('page.login.resetPwd.newPassword')">
           <a-input-password
             v-model:value="formModel.password"
             :placeholder="t('page.login.common.passwordPlaceholder')"
           />
         </a-form-item>
+
         <a-form-item name="confirmPassword" :label="t('page.login.register.confirmPassword')">
           <a-input-password
             v-model:value="formModel.confirmPassword"
             :placeholder="t('page.login.common.confirmPasswordPlaceholder')"
           />
         </a-form-item>
+
         <a-form-item
           :wrapper-col="{
             xs: { span: 24, offset: 0 },
@@ -186,4 +285,8 @@ const handleBack = () => {
     padding: 12px;
   }
 }
+
+.mb-24px {
+  margin-bottom: 24px;
+}
 </style>