fix: 注册功能接口变更

src/hooks/business/captcha.ts

@@ -2,7 +2,7 @@ import { computed } from 'vue';
 import { useCountDown, useLoading } from '@sa/hooks';
 import { $t } from '@/locales';
 import { REG_EMAIL } from '@/constants/reg';
-import {useAuthStore} from "@/store/modules/auth";
+import { useAuthStore } from '@/store/modules/auth';
 
 export function useCaptcha() {
   const { loading, startLoading, endLoading } = useLoading();
@@ -39,20 +39,17 @@ export function useCaptcha() {
 
     return true;
   }
+
   //获取验证码方法
   async function getCaptcha(email: string) {
-    console.log(email)
-    //const valid = isPhoneValid(phone);
     const valid = isEmailValid(email);
     if (!valid || loading.value) {
-      return;
+      return null;
     }
 
     startLoading();
 
-    await authStore.captcha(
+    const data = await authStore.captcha(email);
-      email,
-    );
     await new Promise(resolve => {
       setTimeout(resolve, 500);
     });
@@ -62,6 +59,7 @@ export function useCaptcha() {
     start();
 
     endLoading();
+    return data;
   }
 
   return {

src/locales/langs/en-us.ts

@@ -228,6 +228,17 @@ const local: any = {
         birthDate: 'Birth Date',
         birthDatePlaceholder: 'Please select birth date',
         birthDateRequired: 'Please select birth date',
+        usernameLengthLimit:"Username is too short",
+        usernameExists:"The username is already registered",
+        usernameRequired:"The username cannot be empty",
+        phoneInvalid:"The mobile phone number is incorrect",
+        phoneExists:"The mobile phone number has been registered",
+        emailInvalid:"The email is incorrect",
+        emailExists:"The email has been registered",
+        emailRequired:"The email cannot be empty",
+        codeRequired:"The code cannot be empty",
+        passwordRequired:"The password cannot be empty",
+        passwordLength:"The password is too short",
       },
       resetPwd: {
         title: 'Reset Password'

src/locales/langs/zh-cn.ts

@@ -228,6 +228,17 @@ const local:any = {
         birthDate: '出生日期',
         birthDatePlaceholder: '请选择出生日期',
         birthDateRequired: '请选择出生日期',
+        usernameLengthLimit:"用户名太短",
+        usernameExists:"用户名已经注册",
+        usernameRequired:"用户名不能为空",
+        phoneInvalid:"手机号格式不正确",
+        phoneExists:"手机号已经注册",
+        emailInvalid:"邮箱格式不正确",
+        emailExists:"邮箱已经注册",
+        emailRequired:"邮箱不能为空",
+        codeRequired:"验证码不能为空",
+        passwordRequired:"密码不能为空",
+        passwordLength:"密码太短",
       },
       resetPwd: {
         title: '重置密码'

src/service/api/auth.ts

@@ -13,14 +13,23 @@ export function fetchLogin(body: Api.Auth.LoginBody) {
     data: body
   });
 }
+
 //邮箱验证码接口
 export function sendCaptcha(body: Api.Auth.EmailCaptcha) {
   return request({
-    url:`/system/email/code?email=${body.email}`,
+    url: `/code?email=${body.email}`,
-    method:'get',
+    method: 'get'
-  })
+  });
 }
+
 //验证注册
+export function doCheckUserRepeat(body: Api.Auth.CheckBody) {
+  return request<boolean>({
+    url: '/auth/checkRepeat',
+    method: 'post',
+    data: body
+  });
+}
 
 //添加注册
 export function fetchRegister(body: Api.Auth.RegisterBody) {
@@ -30,6 +39,7 @@ export function fetchRegister(body: Api.Auth.RegisterBody) {
     data: body
   });
 }
+
 /** logout */
 export function doDeleteLogout() {
   return request<App.Service.Response<null>>({

src/store/modules/auth/index.ts

@@ -7,7 +7,7 @@ import { localStg } from '@/utils/storage';
 import { $t } from '@/locales';
 import { useRouteStore } from '../route';
 import { clearAuthStorage, emptyInfo, getToken } from './shared';
-import {sendCaptcha} from "@/service/api/auth";
+import { doCheckUserRepeat, sendCaptcha } from '@/service/api/auth';
 
 export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
   const routeStore = useRouteStore();
@@ -122,6 +122,15 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
     }
     return false;
   }
+
+  /**
+   * 检查用户信息是否已存在
+   */
+  async function checkUserRepeat(checkForm: Api.Auth.CheckBody) {
+    const { data, error } = await doCheckUserRepeat(checkForm);
+    return { exists: data, error };
+  }
+
   /**
    * Register new user
    */
@@ -139,16 +148,13 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
     endLoading();
     return !error;
   }
+
   async function captcha(email: string) {
     if (!email) {
-      return;
+      return null;
-    }
-
-    try {
-      await sendCaptcha({ email }); // 这里调用后端接口发送验证码
-    } catch (error) {
-
     }
+    const { data, error } = await sendCaptcha({ email }); // 这里调用后端接口发送验证码
+    return { data, error };
   }
 
   return {
@@ -163,5 +169,6 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
     refreshUserInfo,
     register,
     captcha,
+    checkUserRepeat
   };
 });

src/typings/api.d.ts

@@ -152,6 +152,12 @@ declare namespace Api {
     interface EmailCaptcha{
       email:string;
     }
+    interface CheckBody{
+      username?: string;
+      email?: string;
+      phonenumber?:string;
+      authType: string;
+    }
   }
 
   /**

src/typings/auto-imports.d.ts

@@ -53,6 +53,7 @@ declare global {
   const doAddDict: typeof import('../service/api/dict')['doAddDict']
   const doAddMenu: typeof import('../service/api/menu')['doAddMenu']
   const doAddPost: typeof import('../service/api/post')['doAddPost']
+  const doCheckUserRepeat: typeof import('../service/api/auth')['doCheckUserRepeat']
   const doDeleteDept: typeof import('../service/api/dept')['doDeleteDept']
   const doDeleteDict: typeof import('../service/api/dict')['doDeleteDict']
   const doDeleteLogout: typeof import('../service/api/auth')['doDeleteLogout']

src/views/_builtin/login/modules/register.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
-import {useI18n} from 'vue-i18n'; // 添加这行
+import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '@/store/modules/auth';
 import { useRouterPush } from '@/hooks/common/router';
-import {useAntdForm, useFormRules} from '@/hooks/common/form';
+import { useFormRules } from '@/hooks/common/form';
 import { useCaptcha } from '@/hooks/business/captcha';
 import { useWindowSize } from '@vueuse/core';
 import { registerTerms } from '@/views/_builtin/login/modules/terms';
@@ -12,13 +12,15 @@ import type {Rule} from 'ant-design-vue/es/form';
 
 const { t } = useI18n();
 const authStore = useAuthStore();
+// 添加两个表单引用
+const basicFormRef = ref();
+const securityFormRef = ref();
 
 defineOptions({
   name: 'Register'
 });
 
 const { toggleLoginModule } = useRouterPush();
-const { formRef, validate } = useAntdForm();
 const { label, isCounting, loading, getCaptcha } = useCaptcha();
 
 const { width } = useWindowSize();
@@ -29,17 +31,19 @@ const currentStep = ref(0);
 
 // 是否同意协议
 const agreeTerms = ref(false);
+
 // 定义一个统一的数据模型
 interface RegisterModel {
   username: string;
   password: string;
   email: string;
   fullName: string;
-  age:0,
+  age: 0;
   gender: string;
   phone: string;
   address: string;
   code: string;
+  uuid: string;
   authType: string;
 }
 
@@ -54,6 +58,7 @@ const model = reactive<RegisterModel>({
   phone: '',
   address: '',
   code: '',
+  uuid: '',
   authType: 'u'
 });
 
@@ -64,7 +69,6 @@ interface BasicFormModel {
   birthDate: string;
   gender: string;
   phone: string;
-  email: string;
   address: string;
 }
 
@@ -74,7 +78,6 @@ const basicModel = reactive<BasicFormModel>({
   birthDate: '',
   gender: '',
   phone: '',
-  email: '',
   address: ''
 });
 
@@ -82,6 +85,7 @@ const basicModel = reactive<BasicFormModel>({
 interface SecurityFormModel {
   email: string;
   code: string;
+  uuid: string;
   password: string;
   confirmPassword: string;
 }
@@ -89,27 +93,85 @@ interface SecurityFormModel {
 const securityModel = reactive<SecurityFormModel>({
   email: '',
   code: '',
+  uuid: '',
   password: '',
   confirmPassword: ''
 });
 
 // 第一步表单验证规则
 const basicRules = computed<Record<string, Rule | Rule[]>>(() => {
-  const { formRules } = useFormRules();
+  const validateUsername = async (_rule: Rule, value: string) => {
+    if (value && (value.length < 4 || value.length > 20)) {
+      return Promise.reject(t('page.login.register.usernameLengthLimit'));
+    }
+    if (value) {
+      const { exists } = await authStore.checkUserRepeat({ username: value, authType: 'u' });
+      if (exists) {
+        return Promise.reject(t('page.login.register.usernameExists'));
+      }
+    }
+    return Promise.resolve();
+  };
+
+  const validatePhone = async (_rule: Rule, value: string) => {
+    if (!value) return Promise.resolve();
+
+    const phonePattern = /^1[3-9]\d{9}$/;
+
+    if (!phonePattern.test(value)) {
+      return Promise.reject(t('page.login.register.phoneInvalid'));
+    }
+
+    const { exists } = await authStore.checkUserRepeat({ phonenumber: value, authType: 'u' });
+    if (exists) {
+      return Promise.reject(t('page.login.register.phoneExists'));
+    }
+    return Promise.resolve();
+  };
+
   return {
-    username: formRules.username,
+    username: [
-    email: formRules.email,
+      { required: true, message: t('page.login.register.usernameRequired'), trigger: 'change' },
+      { validator: validateUsername, trigger: 'blur' }
+    ],
+    phone: [{ validator: validatePhone, trigger: 'blur' }],
     birthDate: [{ required: true, message: t('page.login.register.birthDateRequired') }],
-    phone: [{ pattern: /^1[3-9]\d{9}$/, message: t('form.phone.invalid'), trigger: 'blur' }]
+    fullName: []
   };
 });
 
 // 第三步表单验证规则
 const securityRules = computed<Record<string, Rule | Rule[]>>(() => {
-  const { formRules, createConfirmPwdRule } = useFormRules();
+  const { createConfirmPwdRule } = useFormRules();
+
+  const validateEmail = async (_rule: Rule, value: string) => {
+    if (!value) {
+      return Promise.reject(t('page.login.register.emailRequired'));
+    }
+
+    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+
+    if (!emailPattern.test(value)) {
+      return Promise.reject(t('page.login.register.emailInvalid'));
+    }
+
+    const { exists } = await authStore.checkUserRepeat({ email: value, authType: 'u' });
+    if (exists) {
+      return Promise.reject(t('page.login.register.emailExists'));
+    }
+    return Promise.resolve();
+  };
+
   return {
-    code: formRules.code,
+    email: [
-    password: formRules.pwd,
+      { required: true, message: t('page.login.register.emailRequired'), trigger: 'change' },
+      { validator: validateEmail, trigger: 'blur' }
+    ],
+    code: [{ required: true, message: t('page.login.register.codeRequired') }],
+    password: [
+      { required: true, message: t('page.login.register.passwordRequired') },
+      { min: 6, message: t('page.login.register.passwordLength') }
+    ],
     confirmPassword: createConfirmPwdRule(securityModel.password)
   };
 });
@@ -122,10 +184,10 @@ const terms = computed(() => {
 
 // 步骤控制函数
 async function nextStep() {
+  try {
     if (currentStep.value === 0) {
-    await validate();
+      // 验证第一步表单
-    // 复制电话号码到第三步
+      await basicFormRef.value?.validate();
-    securityModel.email = basicModel.email;
     }
     if (currentStep.value === 1) {
       if (!agreeTerms.value) {
@@ -133,32 +195,50 @@ async function nextStep() {
         return;
       }
     }
+    // 验证通过后增加步骤
     currentStep.value += 1;
+  } catch (error) {
+    // 验证失败时不增加步骤
+    console.error('Validation failed:', error);
+  }
 }
 
+// 返回
 function prevStep() {
   currentStep.value -= 1;
 }
+
+async function handleCaptcha() {
+  const res = await getCaptcha(securityModel.email);
+  if (res) {
+    securityModel.uuid = res.data.uuid;
+    if (res.data?.text) {
+      securityModel.code = res.data.text;
+    }
+  }
+}
+
 // 注册按钮
 async function handleSubmit() {
   try {
-    await validate();
+    await securityFormRef.value?.validate();
 
     // 整合表单数据
     model.username = basicModel.username;
     model.password = securityModel.password;
-    model.email = securityModel.email;
+    model.email = securityModel.email; // 使用第三步的 email
     model.fullName = basicModel.fullName;
-    model.gender = basicModel.gender;  // 直接使用 gender 值
+    model.gender = basicModel.gender;
     model.phone = basicModel.phone;
     model.address = basicModel.address;
     model.code = securityModel.code;
+    model.uuid = securityModel.uuid;
 
     const success = await authStore.register({
       ...model,
       age: dayjs().diff(dayjs(basicModel.birthDate), 'year'),
-      sex: model.gender,  // 直接使用 gender 值，不需要转换
+      sex: model.gender,
-      phonenumber: model.phone,
+      phonenumber: model.phone
     });
 
     if (success) {
@@ -175,6 +255,7 @@ const showSteps = computed(() => !isMobile.value);
 </script>
 
 <template>
+  <div class="register-container">
     <ASteps
       v-if="showSteps"
       :current="currentStep"
@@ -200,9 +281,9 @@ const showSteps = computed(() => !isMobile.value);
 
     <div class="step-content">
       <!-- 第一步：基本信息 -->
-    <div v-if="currentStep === 0">
+      <div v-show="currentStep === 0">
         <AForm
-        ref="formRef"
+          ref="basicFormRef"
           :model="basicModel"
           :rules="basicRules"
           :label-wrap="true"
@@ -233,8 +314,8 @@ const showSteps = computed(() => !isMobile.value);
             <ACol :xs="12" :sm="12" :lg="24">
               <AFormItem name="gender" :label="t('page.login.register.gender')">
                 <ASelect v-model:value="basicModel.gender">
-                <ASelectOption value="male">{{ t('page.login.register.male') }}</ASelectOption>
+                  <ASelectOption value="0">{{ t('page.login.register.male') }}</ASelectOption>
-                <ASelectOption value="female">{{ t('page.login.register.female') }}</ASelectOption>
+                  <ASelectOption value="1">{{ t('page.login.register.female') }}</ASelectOption>
                 </ASelect>
               </AFormItem>
             </ACol>
@@ -243,11 +324,6 @@ const showSteps = computed(() => !isMobile.value);
                 <AInput v-model:value="basicModel.phone" />
               </AFormItem>
             </ACol>
-          <ACol :lg="24" :span="24">
-            <AFormItem name="email" :label="t('page.login.register.email')">
-              <AInput v-model:value="basicModel.email" />
-            </AFormItem>
-          </ACol>
             <ACol :lg="24" :span="24">
               <AFormItem name="address" :label="t('page.login.register.address')">
                 <ATextarea v-model:value="basicModel.address" :rows="2" />
@@ -268,7 +344,7 @@ const showSteps = computed(() => !isMobile.value);
       </div>
 
       <!-- 第二步：协议 -->
-    <div v-if="currentStep === 1">
+      <div v-show="currentStep === 1">
         <ATextarea
           :value="terms"
           :rows="12"
@@ -296,9 +372,9 @@ const showSteps = computed(() => !isMobile.value);
       </div>
 
       <!-- 第三步：安全信息 -->
-    <div v-if="currentStep === 2">
+      <div v-show="currentStep === 2">
         <AForm
-        ref="formRef"
+          ref="securityFormRef"
           :model="securityModel"
           :rules="securityRules"
           :label-wrap="true"
@@ -322,7 +398,7 @@ const showSteps = computed(() => !isMobile.value);
                 size="small"
                 :disabled="isCounting"
                 :loading="loading"
-              @click="getCaptcha(securityModel.email)"
+                @click="handleCaptcha()"
               >
                 {{ label }}
               </AButton>
@@ -353,9 +429,22 @@ const showSteps = computed(() => !isMobile.value);
         </AForm>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
+.register-container {
+  width: 100%;
+}
+
+.step-content {
+  position: relative;
+}
+
+.step-form {
+  width: 100%;
+}
+
 @media (max-width: 640px) {
   :deep(.ant-form) {
     .ant-form-item {
@@ -433,6 +522,7 @@ const showSteps = computed(() => !isMobile.value);
 :deep(.ant-form-item-label) {
   white-space: normal;
   text-align: left;
+
   > label {
     height: auto !important;
     padding-bottom: 4px;