fix:密码重置界面修改

src/views/_builtin/login/modules/reset-pwd.vue

@@ -1,25 +1,27 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
-import { $t } from '@/locales';
 import { useRouterPush } from '@/hooks/common/router';
 import { useAntdForm, useFormRules } from '@/hooks/common/form';
+import {useCaptcha} from "@/hooks/business/captcha";
+import {useI18n} from "vue-i18n";
 
 defineOptions({
   name: 'ResetPwd'
 });
-
+const { t } = useI18n();
 const { toggleLoginModule } = useRouterPush();
 const { formRef, validate } = useAntdForm();
+const { label, isCounting, loading, getCaptcha } = useCaptcha();
 
 interface FormModel {
-  phone: string;
+  email: string;
   code: string;
   password: string;
   confirmPassword: string;
 }
 
 const model: FormModel = reactive({
-  phone: '',
+  email: '',
   code: '',
   password: '',
   confirmPassword: ''
@@ -31,7 +33,9 @@ const rules = computed<RuleRecord>(() => {
   const { formRules, createConfirmPwdRule } = useFormRules();
 
   return {
-    phone: formRules.phone,
+    //phone: formRules.phone,
+    email:formRules.email,
+    code:formRules.code,
     password: formRules.pwd,
     confirmPassword: createConfirmPwdRule(model.password)
   };
@@ -40,38 +44,48 @@ const rules = computed<RuleRecord>(() => {
 async function handleSubmit() {
   await validate();
   // request to reset password
-  $message?.success($t('page.login.common.validateSuccess'));
+  $message?.success(t('page.login.common.validateSuccess'));
 }
 </script>
 
 <template>
   <AForm ref="formRef" :model="model" :rules="rules">
-    <AFormItem name="phone">
-      <AInput v-model:value="model.phone" size="large" :placeholder="$t('page.login.common.phonePlaceholder')" />
+    <AFormItem name="email">
+      <AInput v-model:value="model.email" size="large" :placeholder="t('page.login.common.emailPlaceholder')" />
     </AFormItem>
-    <AFormItem name="code">
-      <AInput v-model:value="model.code" size="large" :placeholder="$t('page.login.common.codePlaceholder')" />
+    <AFormItem name="code" >
+      <div class="w-full flex-y-center gap-8px">
+      <AInput v-model:value="model.code" size="large" :placeholder="t('page.login.common.codePlaceholder')" />
+      <AButton
+        size="small"
+        :disabled="isCounting"
+        :loading="loading"
+        @click="getCaptcha(model.email)"
+      >
+        {{ label }}
+      </AButton>
+      </div>
     </AFormItem>
     <AFormItem name="password">
       <AInputPassword
         v-model:value="model.password"
         size="large"
-        :placeholder="$t('page.login.common.passwordPlaceholder')"
+        :placeholder="t('page.login.common.passwordPlaceholder')"
       />
     </AFormItem>
     <AFormItem name="confirmPassword">
       <AInputPassword
         v-model:value="model.confirmPassword"
         size="large"
-        :placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
+        :placeholder="t('page.login.common.confirmPasswordPlaceholder')"
       />
     </AFormItem>
     <ASpace direction="vertical" size="large" class="w-full">
       <AButton type="primary" block size="large" shape="round" @click="handleSubmit">
-        {{ $t('common.confirm') }}
+        {{ t('common.confirm') }}
       </AButton>
       <AButton block size="large" shape="round" @click="toggleLoginModule('pwd-login')">
-        {{ $t('page.login.common.back') }}
+        {{ t('page.login.common.back') }}
       </AButton>
     </ASpace>
   </AForm>