fix:注册界面及相关功能
This commit is contained in:
zhongzm
@@ -1,17 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n'; // 添加这行
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { useAntdForm, 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 {useAntdForm, 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';
|
||||
|
||||
const { t } = useI18n();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
defineOptions({
|
||||
name: 'Register'
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { toggleLoginModule } = useRouterPush();
|
||||
const { formRef, validate } = useAntdForm();
|
||||
const { label, isCounting, loading, getCaptcha } = useCaptcha();
|
||||
@@ -24,12 +29,39 @@ const currentStep = ref(0);
|
||||
|
||||
// 是否同意协议
|
||||
const agreeTerms = ref(false);
|
||||
// 定义一个统一的数据模型
|
||||
interface RegisterModel {
|
||||
username: string;
|
||||
password: string;
|
||||
email: string;
|
||||
fullName: string;
|
||||
age:0,
|
||||
gender: string;
|
||||
phone: string;
|
||||
address: string;
|
||||
code: string;
|
||||
authType: string;
|
||||
}
|
||||
|
||||
// 使用一个统一的 model
|
||||
const model = reactive<RegisterModel>({
|
||||
username: '',
|
||||
password: '',
|
||||
email: '',
|
||||
fullName: '',
|
||||
age:0,
|
||||
gender: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
code: '',
|
||||
authType: 'u'
|
||||
});
|
||||
|
||||
// 第一步表单数据
|
||||
interface BasicFormModel {
|
||||
username: string;
|
||||
fullName: string;
|
||||
age: number | undefined;
|
||||
birthDate: string;
|
||||
gender: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
@@ -39,7 +71,7 @@ interface BasicFormModel {
|
||||
const basicModel = reactive<BasicFormModel>({
|
||||
username: '',
|
||||
fullName: '',
|
||||
age: undefined,
|
||||
birthDate: '',
|
||||
gender: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
@@ -62,20 +94,20 @@ const securityModel = reactive<SecurityFormModel>({
|
||||
});
|
||||
|
||||
// 第一步表单验证规则
|
||||
const basicRules = computed(() => {
|
||||
const basicRules = computed<Record<string, Rule | Rule[]>>(() => {
|
||||
const { formRules } = useFormRules();
|
||||
return {
|
||||
username: formRules.username,
|
||||
phone: formRules.phone,
|
||||
email: formRules.email
|
||||
email: formRules.email,
|
||||
birthDate: [{ required: true, message: t('page.login.register.birthDateRequired') }],
|
||||
phone: [{ pattern: /^1[3-9]\d{9}$/, message: t('form.phone.invalid'), trigger: 'blur' }]
|
||||
};
|
||||
});
|
||||
|
||||
// 第三步表单验证规则
|
||||
const securityRules = computed(() => {
|
||||
const securityRules = computed<Record<string, Rule | Rule[]>>(() => {
|
||||
const { formRules, createConfirmPwdRule } = useFormRules();
|
||||
return {
|
||||
phone: formRules.phone,
|
||||
code: formRules.code,
|
||||
password: formRules.pwd,
|
||||
confirmPassword: createConfirmPwdRule(securityModel.password)
|
||||
@@ -92,7 +124,7 @@ const terms = computed(() => {
|
||||
async function nextStep() {
|
||||
if (currentStep.value === 0) {
|
||||
await validate();
|
||||
// 复制邮箱到第三步
|
||||
// 复制电话号码到第三步
|
||||
securityModel.email = basicModel.email;
|
||||
}
|
||||
if (currentStep.value === 1) {
|
||||
@@ -107,11 +139,35 @@ async function nextStep() {
|
||||
function prevStep() {
|
||||
currentStep.value -= 1;
|
||||
}
|
||||
|
||||
//注册按钮
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
// request to register
|
||||
$message?.success(t('page.login.common.validateSuccess'));
|
||||
try {
|
||||
await validate();
|
||||
|
||||
// 整合表单数据
|
||||
model.username = basicModel.username;
|
||||
model.password = securityModel.password;
|
||||
model.email = securityModel.email;
|
||||
model.fullName = basicModel.fullName;
|
||||
model.gender = basicModel.gender; // 直接使用 gender 值
|
||||
model.phone = basicModel.phone;
|
||||
model.address = basicModel.address;
|
||||
model.code = securityModel.code;
|
||||
|
||||
const success = await authStore.register({
|
||||
...model,
|
||||
age: dayjs().diff(dayjs(basicModel.birthDate), 'year'),
|
||||
sex: model.gender, // 直接使用 gender 值，不需要转换
|
||||
phonenumber: model.phone,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
window.$message?.success(t('page.login.register.registerSuccess'));
|
||||
toggleLoginModule('pwd-login');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Form validation failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 在script setup部分添加一个新的计算属性
|
||||
@@ -165,8 +221,13 @@ const showSteps = computed(() => !isMobile.value);
|
||||
</AFormItem>
|
||||
</ACol>
|
||||
<ACol :xs="12" :sm="12" :lg="24">
|
||||
<AFormItem name="age" :label="t('page.login.register.age')">
|
||||
<AInputNumber v-model:value="basicModel.age" class="!w-full" />
|
||||
<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">
|
||||
@@ -296,6 +357,52 @@ const showSteps = computed(() => !isMobile.value);
|
||||
|
||||
<style scoped>
|
||||
@media (max-width: 640px) {
|
||||
:deep(.ant-form) {
|
||||
.ant-form-item {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.ant-form-item-label {
|
||||
padding: 0 !important;
|
||||
line-height: 28px !important;
|
||||
|
||||
> label {
|
||||
font-size: 13px !important;
|
||||
height: 28px !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-input-password,
|
||||
.ant-select,
|
||||
.ant-input-number,
|
||||
.ant-btn {
|
||||
font-size: 13px !important;
|
||||
height: 28px !important;
|
||||
line-height: 28px !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.ant-select-selector {
|
||||
height: 28px !important;
|
||||
padding: 0 8px !important;
|
||||
|
||||
.ant-select-selection-item {
|
||||
line-height: 26px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
height: 32px !important;
|
||||
|
||||
input {
|
||||
height: 30px !important;
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-step-indicator {
|
||||
font-size: 13px;
|
||||
@@ -331,4 +438,8 @@ const showSteps = computed(() => !isMobile.value);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.birth-date-picker {
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user