fix: 注册功能接口变更

2024-11-30 17:31:47 +08:00
parent 8f198f789d
commit 5e54aaf24d
5 changed files with 231 additions and 213 deletions
--- a/src/hooks/business/captcha.ts
+++ b/src/hooks/business/captcha.ts
@@ -1,8 +1,8 @@
 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 { REG_EMAIL } from '@/constants/reg';
+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);
+    const valid = isEmailValid(email);
    if (!valid || loading.value) {
-      return;
+      return null;
    }

    startLoading();

-    await authStore.captcha(
-      email,
-    );
+    const data = await authStore.captcha(email);
    await new Promise(resolve => {
      setTimeout(resolve, 500);
    });
@@ -62,6 +59,7 @@ export function useCaptcha() {
    start();

    endLoading();
+    return data;
  }

  return {
--- a/src/service/api/auth.ts
+++ b/src/service/api/auth.ts
@@ -13,21 +13,24 @@ export function fetchLogin(body: Api.Auth.LoginBody) {
    data: body
  });
 }
+
 //邮箱验证码接口
-export function sendCaptcha(body:Api.Auth.EmailCaptcha){
+export function sendCaptcha(body: Api.Auth.EmailCaptcha) {
  return request({
-    url:`/system/email/code?email=${body.email}`,
-    method:'get',
-  })
+    url: `/code?email=${body.email}`,
+    method: 'get'
+  });
 }
+
 //验证注册
-export function doCheckUserRepeat(body:Api.Auth.CheckBody){
+export function doCheckUserRepeat(body: Api.Auth.CheckBody) {
  return request<boolean>({
-    url:'/u/user/checkRepeat',
-    method:'post',
-    data:body
-  })
+    url: '/auth/checkRepeat',
+    method: 'post',
+    data: body
+  });
 }
+
 //添加注册
 export function fetchRegister(body: Api.Auth.RegisterBody) {
  return request({
@@ -36,6 +39,7 @@ export function fetchRegister(body: Api.Auth.RegisterBody) {
    data: body
  });
 }
+
 /** logout */
 export function doDeleteLogout() {
  return request<App.Service.Response<null>>({
--- a/src/store/modules/auth/index.ts
+++ b/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 {doCheckUserRepeat, sendCaptcha} from "@/service/api/auth";
+import { doCheckUserRepeat, sendCaptcha } from '@/service/api/auth';

 export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
  const routeStore = useRouteStore();
@@ -122,12 +122,11 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
    }
    return false;
  }
-  //check User

  /**
   * 检查用户信息是否已存在
   */
-  async function checkUserRepeat(checkForm:Api.Auth.CheckBody) {
+  async function checkUserRepeat(checkForm: Api.Auth.CheckBody) {
    const { data, error } = await doCheckUserRepeat(checkForm);
    return { exists: data, error };
  }
@@ -149,16 +148,13 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
    endLoading();
    return !error;
  }
-  async function captcha(email:string){
+
+  async function captcha(email: string) {
    if (!email) {
-      return;
-    }
-
-    try {
-      await sendCaptcha({ email }); // 这里调用后端接口发送验证码
-    } catch (error) {
-
+      return null;
    }
+    const { data, error } = await sendCaptcha({ email }); // 这里调用后端接口发送验证码
+    return { data, error };
  }

  return {
@@ -173,6 +169,6 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
    refreshUserInfo,
    register,
    captcha,
-    checkUserRepeat,
+    checkUserRepeat
  };
 });
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -156,6 +156,7 @@ declare namespace Api {
      username?: string;
      email?: string;
      phonenumber?:string;
+      authType: string;
    }
  }

--- a/src/views/_builtin/login/modules/register.vue
+++ b/src/views/_builtin/login/modules/register.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import {computed, reactive, ref} from 'vue';
-import {useI18n} from 'vue-i18n';
-import {useAuthStore} from '@/store/modules/auth';
-import {useRouterPush} from '@/hooks/common/router';
-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';
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAuthStore } from '@/store/modules/auth';
+import { useRouterPush } from '@/hooks/common/router';
+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';
 import dayjs from 'dayjs';
-import type {Rule} from 'ant-design-vue/es/form';
+import type { Rule } from 'ant-design-vue/es/form';

 const { t } = useI18n();
 const authStore = useAuthStore();
@@ -31,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;
 }

@@ -51,11 +53,12 @@ const model = reactive<RegisterModel>({
  password: '',
  email: '',
  fullName: '',
-  age:0,
+  age: 0,
  gender: '',
  phone: '',
  address: '',
  code: '',
+  uuid: '',
  authType: 'u'
 });

@@ -82,6 +85,7 @@ const basicModel = reactive<BasicFormModel>({
 interface SecurityFormModel {
  email: string;
  code: string;
+  uuid: string;
  password: string;
  confirmPassword: string;
 }
@@ -89,6 +93,7 @@ interface SecurityFormModel {
 const securityModel = reactive<SecurityFormModel>({
  email: '',
  code: '',
+  uuid: '',
  password: '',
  confirmPassword: ''
 });
@@ -100,7 +105,7 @@ const basicRules = computed<Record<string, Rule | Rule[]>>(() => {
      return Promise.reject(t('page.login.register.usernameLengthLimit'));
    }
    if (value) {
-      const { exists } = await authStore.checkUserRepeat({ username: value });
+      const { exists } = await authStore.checkUserRepeat({ username: value, authType: 'u' });
      if (exists) {
        return Promise.reject(t('page.login.register.usernameExists'));
      }
@@ -117,7 +122,7 @@ const basicRules = computed<Record<string, Rule | Rule[]>>(() => {
      return Promise.reject(t('page.login.register.phoneInvalid'));
    }

-    const { exists } = await authStore.checkUserRepeat({ phonenumber: value });
+    const { exists } = await authStore.checkUserRepeat({ phonenumber: value, authType: 'u' });
    if (exists) {
      return Promise.reject(t('page.login.register.phoneExists'));
    }
@@ -150,7 +155,7 @@ const securityRules = computed<Record<string, Rule | Rule[]>>(() => {
      return Promise.reject(t('page.login.register.emailInvalid'));
    }

-    const { exists } = await authStore.checkUserRepeat({ email: value });
+    const { exists } = await authStore.checkUserRepeat({ email: value, authType: 'u' });
    if (exists) {
      return Promise.reject(t('page.login.register.emailExists'));
    }
@@ -197,11 +202,23 @@ async function nextStep() {
    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 securityFormRef.value?.validate();
@@ -209,18 +226,19 @@ async function handleSubmit() {
    // 整合表单数据
    model.username = basicModel.username;
    model.password = securityModel.password;
-    model.email = securityModel.email;  // 使用第三步的 email
+    model.email = securityModel.email; // 使用第三步的 email
    model.fullName = basicModel.fullName;
    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,
-      phonenumber: model.phone,
+      phonenumber: model.phone
    });

    if (success) {
@@ -238,179 +256,179 @@ const showSteps = computed(() => !isMobile.value);

 <template>
  <div class="register-container">
-  <ASteps
-    v-if="showSteps"
-    :current="currentStep"
-    size="small"
-    class="max-w-full mb-16px"
-    direction="horizontal"
-    :responsive="false"
-  >
-    <AStep :title="t('page.login.register.basicInfo')" />
-    <AStep :title="t('page.login.register.terms')" />
-    <AStep :title="t('page.login.register.security')" />
-  </ASteps>
+    <ASteps
+      v-if="showSteps"
+      :current="currentStep"
+      size="small"
+      class="max-w-full mb-16px"
+      direction="horizontal"
+      :responsive="false"
+    >
+      <AStep :title="t('page.login.register.basicInfo')" />
+      <AStep :title="t('page.login.register.terms')" />
+      <AStep :title="t('page.login.register.security')" />
+    </ASteps>

-  <div v-else class="mobile-step-indicator mb-16px text-center">
-    {{ currentStep + 1 }}/3: {{
-      currentStep === 0
-        ? t('page.login.register.basicInfo')
-        : currentStep === 1
-          ? t('page.login.register.terms')
-          : t('page.login.register.security')
-    }}
-  </div>
+    <div v-else class="mobile-step-indicator mb-16px text-center">
+      {{ currentStep + 1 }}/3: {{
+        currentStep === 0
+          ? t('page.login.register.basicInfo')
+          : currentStep === 1
+            ? t('page.login.register.terms')
+            : t('page.login.register.security')
+      }}
+    </div>

-  <div class="step-content">
-    <!-- 第一步：基本信息 -->
-    <div v-show="currentStep === 0">
-      <AForm
-        ref="basicFormRef"
-        :model="basicModel"
-        :rules="basicRules"
-        :label-wrap="true"
-        :label-col="{ span: 8 }"
-        :wrapper-col="{ span: 16 }"
-      >
-        <ARow :gutter="[8,2]">
-          <ACol :span="24" :lg="24">
-            <AFormItem name="username" :label="t('page.login.register.username')">
-              <AInput v-model:value="basicModel.username" />
-            </AFormItem>
-          </ACol>
-          <ACol :span="24" :lg="24">
-            <AFormItem name="fullName" :label="t('page.login.register.fullName')">
-              <AInput v-model:value="basicModel.fullName" />
-            </AFormItem>
-          </ACol>
-          <ACol :xs="12" :sm="12" :lg="24">
-            <AFormItem name="birthDate" :label="t('page.login.register.birthDate')">
-              <ADatePicker
-                v-model:value="basicModel.birthDate"
-                class="!w-full birth-date-picker"
-                :placeholder="t('page.login.register.birthDatePlaceholder')"
-                :disabled-date="(current: dayjs.Dayjs) => current && current.isAfter(dayjs())"
+    <div class="step-content">
+      <!-- 第一步：基本信息 -->
+      <div v-show="currentStep === 0">
+        <AForm
+          ref="basicFormRef"
+          :model="basicModel"
+          :rules="basicRules"
+          :label-wrap="true"
+          :label-col="{ span: 8 }"
+          :wrapper-col="{ span: 16 }"
+        >
+          <ARow :gutter="[8,2]">
+            <ACol :span="24" :lg="24">
+              <AFormItem name="username" :label="t('page.login.register.username')">
+                <AInput v-model:value="basicModel.username" />
+              </AFormItem>
+            </ACol>
+            <ACol :span="24" :lg="24">
+              <AFormItem name="fullName" :label="t('page.login.register.fullName')">
+                <AInput v-model:value="basicModel.fullName" />
+              </AFormItem>
+            </ACol>
+            <ACol :xs="12" :sm="12" :lg="24">
+              <AFormItem name="birthDate" :label="t('page.login.register.birthDate')">
+                <ADatePicker
+                  v-model:value="basicModel.birthDate"
+                  class="!w-full birth-date-picker"
+                  :placeholder="t('page.login.register.birthDatePlaceholder')"
+                  :disabled-date="(current: dayjs.Dayjs) => current && current.isAfter(dayjs())"
+                />
+              </AFormItem>
+            </ACol>
+            <ACol :xs="12" :sm="12" :lg="24">
+              <AFormItem name="gender" :label="t('page.login.register.gender')">
+                <ASelect v-model:value="basicModel.gender">
+                  <ASelectOption value="0">{{ t('page.login.register.male') }}</ASelectOption>
+                  <ASelectOption value="1">{{ t('page.login.register.female') }}</ASelectOption>
+                </ASelect>
+              </AFormItem>
+            </ACol>
+            <ACol :lg="24" :span="24">
+              <AFormItem name="phone" :label="t('page.login.register.phone')">
+                <AInput v-model:value="basicModel.phone" />
+              </AFormItem>
+            </ACol>
+            <ACol :lg="24" :span="24">
+              <AFormItem name="address" :label="t('page.login.register.address')">
+                <ATextarea v-model:value="basicModel.address" :rows="2" />
+              </AFormItem>
+            </ACol>
+            <ACol :lg="24" :span="24">
+              <ASpace direction="vertical" size="small" class="w-full">
+                <AButton type="primary" block size="small" @click="nextStep">
+                  {{ t('page.login.register.next') }}
+                </AButton>
+                <AButton block size="small" @click="toggleLoginModule('pwd-login')">
+                  {{ t('page.login.common.back') }}
+                </AButton>
+              </ASpace>
+            </ACol>
+          </ARow>
+        </AForm>
+      </div>
+
+      <!-- 第二步：协议 -->
+      <div v-show="currentStep === 1">
+        <ATextarea
+          :value="terms"
+          :rows="12"
+          readonly
+          class="mb-16px"
+          size="small"
+          :style="{ fontSize: '14px', lineHeight: '1.6' }"
+        />
+        <div class="mb-16px">
+          <ACheckbox
+            v-model:checked="agreeTerms"
+            class="terms-checkbox"
+          >
+            {{ t('page.login.register.agreeTerms') }}
+          </ACheckbox>
+        </div>
+        <ASpace direction="vertical" size="small" class="w-full">
+          <AButton type="primary" block size="small" :disabled="!agreeTerms" @click="nextStep">
+            {{ t('page.login.register.next') }}
+          </AButton>
+          <AButton block size="small" @click="prevStep">
+            {{ t('page.login.register.prev') }}
+          </AButton>
+        </ASpace>
+      </div>
+
+      <!-- 第三步：安全信息 -->
+      <div v-show="currentStep === 2">
+        <AForm
+          ref="securityFormRef"
+          :model="securityModel"
+          :rules="securityRules"
+          :label-wrap="true"
+          :label-col="{ span: 8 }"
+          :wrapper-col="{ span: 16 }"
+          class="compact-form"
+        >
+          <AFormItem name="email" :label="t('page.login.register.email')">
+            <AInput
+              v-model:value="securityModel.email"
+              :placeholder="t('page.login.common.emailPlaceholder')"
+            />
+          </AFormItem>
+          <AFormItem name="code" :label="t('page.login.register.code')">
+            <div class="w-full flex-y-center gap-8px">
+              <AInput
+                v-model:value="securityModel.code"
+                :placeholder="t('page.login.common.codePlaceholder')"
              />
-            </AFormItem>
-          </ACol>
-          <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="female">{{ t('page.login.register.female') }}</ASelectOption>
-              </ASelect>
-            </AFormItem>
-          </ACol>
-          <ACol :lg="24" :span="24">
-            <AFormItem name="phone" :label="t('page.login.register.phone')">
-              <AInput v-model:value="basicModel.phone" />
-            </AFormItem>
-          </ACol>
-          <ACol :lg="24" :span="24">
-            <AFormItem name="address" :label="t('page.login.register.address')">
-              <ATextarea v-model:value="basicModel.address" :rows="2" />
-            </AFormItem>
-          </ACol>
-          <ACol :lg="24" :span="24">
-            <ASpace direction="vertical" size="small" class="w-full">
-              <AButton type="primary" block size="small" @click="nextStep">
-                {{ t('page.login.register.next') }}
+              <AButton
+                size="small"
+                :disabled="isCounting"
+                :loading="loading"
+                @click="handleCaptcha()"
+              >
+                {{ label }}
              </AButton>
-              <AButton block size="small" @click="toggleLoginModule('pwd-login')">
-                {{ t('page.login.common.back') }}
+            </div>
+          </AFormItem>
+          <AFormItem name="password" :label="t('page.login.register.password')">
+            <AInputPassword
+              v-model:value="securityModel.password"
+              :placeholder="t('page.login.common.passwordPlaceholder')"
+            />
+          </AFormItem>
+          <AFormItem name="confirmPassword" :label="t('page.login.register.confirmPassword')">
+            <AInputPassword
+              v-model:value="securityModel.confirmPassword"
+              :placeholder="t('page.login.common.confirmPasswordPlaceholder')"
+            />
+          </AFormItem>
+          <AFormItem :wrapper-col="{ xs: { span: 24 }, sm: { span: 24 } }">
+            <ASpace direction="vertical" size="small" class="w-full">
+              <AButton type="primary" block size="small" @click="handleSubmit">
+                {{ t('common.confirm') }}
+              </AButton>
+              <AButton block size="small" @click="prevStep">
+                {{ t('page.login.register.prev') }}
              </AButton>
            </ASpace>
-          </ACol>
-        </ARow>
-      </AForm>
-    </div>
-
-    <!-- 第二步：协议 -->
-    <div v-show="currentStep === 1">
-      <ATextarea
-        :value="terms"
-        :rows="12"
-        readonly
-        class="mb-16px"
-        size="small"
-        :style="{ fontSize: '14px', lineHeight: '1.6' }"
-      />
-      <div class="mb-16px">
-        <ACheckbox
-          v-model:checked="agreeTerms"
-          class="terms-checkbox"
-        >
-          {{ t('page.login.register.agreeTerms') }}
-        </ACheckbox>
+          </AFormItem>
+        </AForm>
      </div>
-      <ASpace direction="vertical" size="small" class="w-full">
-        <AButton type="primary" block size="small" :disabled="!agreeTerms" @click="nextStep">
-          {{ t('page.login.register.next') }}
-        </AButton>
-        <AButton block size="small" @click="prevStep">
-          {{ t('page.login.register.prev') }}
-        </AButton>
-      </ASpace>
    </div>
-
-    <!-- 第三步：安全信息 -->
-    <div v-show="currentStep === 2">
-      <AForm
-        ref="securityFormRef"
-        :model="securityModel"
-        :rules="securityRules"
-        :label-wrap="true"
-        :label-col="{ span: 8 }"
-        :wrapper-col="{ span: 16 }"
-        class="compact-form"
-      >
-        <AFormItem name="email" :label="t('page.login.register.email')">
-          <AInput
-            v-model:value="securityModel.email"
-            :placeholder="t('page.login.common.emailPlaceholder')"
-          />
-        </AFormItem>
-        <AFormItem name="code" :label="t('page.login.register.code')">
-          <div class="w-full flex-y-center gap-8px">
-            <AInput
-              v-model:value="securityModel.code"
-              :placeholder="t('page.login.common.codePlaceholder')"
-            />
-            <AButton
-              size="small"
-              :disabled="isCounting"
-              :loading="loading"
-              @click="getCaptcha(securityModel.email)"
-            >
-              {{ label }}
-            </AButton>
-          </div>
-        </AFormItem>
-        <AFormItem name="password" :label="t('page.login.register.password')">
-          <AInputPassword
-            v-model:value="securityModel.password"
-            :placeholder="t('page.login.common.passwordPlaceholder')"
-          />
-        </AFormItem>
-        <AFormItem name="confirmPassword" :label="t('page.login.register.confirmPassword')">
-          <AInputPassword
-            v-model:value="securityModel.confirmPassword"
-            :placeholder="t('page.login.common.confirmPasswordPlaceholder')"
-          />
-        </AFormItem>
-        <AFormItem :wrapper-col="{ xs: { span: 24 }, sm: { span: 24 } }">
-          <ASpace direction="vertical" size="small" class="w-full">
-            <AButton type="primary" block size="small" @click="handleSubmit">
-              {{ t('common.confirm') }}
-            </AButton>
-            <AButton block size="small" @click="prevStep">
-              {{ t('page.login.register.prev') }}
-            </AButton>
-          </ASpace>
-        </AFormItem>
-      </AForm>
-    </div>
-  </div>
  </div>
 </template>

@@ -504,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;