WFC/fe.wfc.user
2
0
Fork 0
Code Activity

fix:添加查询是否注册，页面问题修复

Browse Source
This commit is contained in:
zhongzm
2024-11-29 18:07:43 +08:00
parent 4cbdc12f90
commit 8f198f789d
7 changed files with 155 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/views/_builtin/login/modules/register.vue
View File

@@ -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();
@@ -64,7 +66,6 @@ interface BasicFormModel {
birthDate: string;
gender: string;
phone: string;
email: string;
address: string;
}
@@ -74,7 +75,6 @@ const basicModel = reactive<BasicFormModel>({
birthDate: '',
gender: '',
phone: '',
email: '',
address: ''
});
@@ -95,21 +95,78 @@ const securityModel = reactive<SecurityFormModel>({
// 第一步表单验证规则
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 });
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 });
if (exists) {
return Promise.reject(t('page.login.register.phoneExists'));
}
return Promise.resolve();
};
return {
username: formRules.username,
email: formRules.email,
username: [
{ 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 });
if (exists) {
return Promise.reject(t('page.login.register.emailExists'));
}
return Promise.resolve();
};
return {
code: formRules.code,
password: formRules.pwd,
email: [
{ 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,34 +179,39 @@ const terms = computed(() => {
// 步骤控制函数
async function nextStep() {
if (currentStep.value === 0) {
await validate();
// 复制电话号码到第三步
securityModel.email = basicModel.email;
}
if (currentStep.value === 1) {
if (!agreeTerms.value) {
window.$message?.error(t('page.login.register.agreeTermsFirst'));
return;
try {
if (currentStep.value === 0) {
// 验证第一步表单
await basicFormRef.value?.validate();
}
if (currentStep.value === 1) {
if (!agreeTerms.value) {
window.$message?.error(t('page.login.register.agreeTermsFirst'));
return;
}
}
// 验证通过后增加步骤
currentStep.value += 1;
} catch (error) {
// 验证失败时不增加步骤
console.error('Validation failed:', error);
}
currentStep.value += 1;
}
//返回
function prevStep() {
currentStep.value -= 1;
}
//注册按钮
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;
@@ -157,7 +219,7 @@ async function handleSubmit() {
const success = await authStore.register({
...model,
age: dayjs().diff(dayjs(basicModel.birthDate), 'year'),
sex: model.gender, // 直接使用 gender 值，不需要转换
sex: model.gender,
phonenumber: model.phone,
});
@@ -175,6 +237,7 @@ const showSteps = computed(() => !isMobile.value);
</script>
<template>
<div class="register-container">
<ASteps
v-if="showSteps"
:current="currentStep"
@@ -200,9 +263,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"
@@ -243,11 +306,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 +326,7 @@ const showSteps = computed(() => !isMobile.value);
</div>
<!-- 第二步：协议 -->
<div v-if="currentStep === 1">
<div v-show="currentStep === 1">
<ATextarea
:value="terms"
:rows="12"
@@ -296,9 +354,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"
@@ -353,9 +411,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 {