feat:修改信息界面
This commit is contained in:
zhongzm
286
src/views/userInfo/profile/index.vue
Normal file
286
src/views/userInfo/profile/index.vue
Normal file
@@ -0,0 +1,286 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import type { RuleObject } from 'ant-design-vue/es/form';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import dayjs from 'dayjs';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
interface UserProfile {
|
||||
username: string;
|
||||
fullname: string;
|
||||
birthdate: string;
|
||||
email: string;
|
||||
phonenumber: string;
|
||||
sex: string;
|
||||
}
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const formRef = ref<FormInstance>();
|
||||
const loading = ref(false);
|
||||
|
||||
const formState = ref<UserProfile>({
|
||||
username: '',
|
||||
fullname: '',
|
||||
birthdate: '',
|
||||
email: '',
|
||||
phonenumber: '',
|
||||
sex: '0'
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const rules = computed<{ [k: string]: RuleObject | RuleObject[] }>(() => {
|
||||
const validateUsername = async (_rule: RuleObject, value: string) => {
|
||||
if (value && (value.length < 4 || value.length > 20)) {
|
||||
return Promise.reject(t('page.login.register.usernameLengthLimit'));
|
||||
}
|
||||
const currentUsername = authStore.userInfo?.user?.userName;
|
||||
if (value && value !== currentUsername) {
|
||||
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: RuleObject, 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 currentPhone = authStore.userInfo?.user?.phonenumber;
|
||||
if (value !== currentPhone) {
|
||||
const { exists } = await authStore.checkUserRepeat({ phonenumber: value, authType: 'u' });
|
||||
if (exists) {
|
||||
return Promise.reject(t('page.login.register.phoneExists'));
|
||||
}
|
||||
}
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
const validateEmail = async (_rule: RuleObject, 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 currentEmail = authStore.userInfo?.user?.email;
|
||||
if (value !== currentEmail) {
|
||||
const { exists } = await authStore.checkUserRepeat({ email: value, authType: 'u' });
|
||||
if (exists) {
|
||||
return Promise.reject(t('page.login.register.emailExists'));
|
||||
}
|
||||
}
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
return {
|
||||
username: [
|
||||
{ required: true, message: t('page.login.register.usernameRequired'), trigger: 'change' },
|
||||
{ validator: validateUsername, trigger: 'blur' }
|
||||
],
|
||||
fullname: [
|
||||
{ required: true, message: t('page.login.register.fullNameRequired'), trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: t('page.login.register.emailRequired'), trigger: 'change' },
|
||||
{ validator: validateEmail, trigger: 'blur' }
|
||||
],
|
||||
phonenumber: [{ validator: validatePhone, trigger: 'blur' }],
|
||||
birthdate: [
|
||||
{ required: true, message: t('page.login.register.birthDateRequired') },
|
||||
{
|
||||
validator: (_rule: RuleObject, value: string) => {
|
||||
if (value && dayjs(value).isAfter(dayjs())) {
|
||||
return Promise.reject(t('page.login.register.birthDateInvalid'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const userInfo = authStore.userInfo?.user;
|
||||
if (!userInfo) {
|
||||
message.error(t('page.profile.getUserInfoFailed'));
|
||||
return;
|
||||
}
|
||||
|
||||
formState.value = {
|
||||
username: userInfo.userName ?? '',
|
||||
fullname: userInfo.nickName ?? '',
|
||||
birthdate: '',
|
||||
email: userInfo.email ?? '',
|
||||
phonenumber: userInfo.phonenumber ?? '',
|
||||
sex: userInfo.sex ?? '0'
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Failed to get user info:', error);
|
||||
message.error(t('page.profile.updateFailed'));
|
||||
}
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
loading.value = true;
|
||||
|
||||
// 构建更新数据，只包含后端接受的字段
|
||||
// const updateData = {
|
||||
// userName: formState.value.username,
|
||||
// nickName: formState.value.fullname,
|
||||
// email: formState.value.email,
|
||||
// phonenumber: formState.value.phonenumber,
|
||||
// sex: formState.value.sex,
|
||||
// age: formState.value.birthdate ? dayjs().diff(dayjs(formState.value.birthdate), 'year') : undefined
|
||||
// };
|
||||
|
||||
// 这里需要调用后端 API 更新用户信息
|
||||
// await authStore.updateUserProfile(updateData);
|
||||
|
||||
message.success(t('page.profile.updateSuccess'));
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error);
|
||||
message.error(t('page.profile.updateFailed'));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleBack = () => {
|
||||
router.push('/userInfo/usercard');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="profile-container">
|
||||
<a-card :title="t('view.userInfo')" :bordered="false">
|
||||
<template #extra>
|
||||
<a-button @click="handleBack">
|
||||
{{ t('page.login.common.back') }}
|
||||
</a-button>
|
||||
</template>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
>
|
||||
<a-form-item :label="t('page.login.register.username')" name="username">
|
||||
<a-input
|
||||
v-model:value="formState.username"
|
||||
:placeholder="t('page.login.register.usernameLengthLimit')"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('page.login.register.fullName')" name="fullname">
|
||||
<a-input
|
||||
v-model:value="formState.fullname"
|
||||
:placeholder="t('page.login.register.fullName')"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('page.login.register.birthDate')" name="birthdate">
|
||||
<a-date-picker
|
||||
v-model:value="formState.birthdate"
|
||||
style="width: 100%"
|
||||
:format="'YYYY-MM-DD'"
|
||||
:placeholder="t('page.login.register.birthDatePlaceholder')"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('page.login.register.email')" name="email">
|
||||
<a-input
|
||||
v-model:value="formState.email"
|
||||
:placeholder="t('page.login.register.emailPlaceholder')"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('page.login.register.phone')" name="phonenumber">
|
||||
<a-input
|
||||
v-model:value="formState.phonenumber"
|
||||
:placeholder="t('page.login.register.phonePlaceholder')"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('page.login.register.gender')" name="sex">
|
||||
<a-radio-group v-model:value="formState.sex" class="w-full">
|
||||
<a-radio value="0">{{ t('page.login.register.male') }}</a-radio>
|
||||
<a-radio value="1">{{ t('page.login.register.female') }}</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :wrapper-col="{
|
||||
xs: { span: 24, offset: 0 }, // 移动端下占满宽度，不偏移
|
||||
sm: { span: 16, offset: 4 } // PC端保持原样
|
||||
}" class="text-center">
|
||||
<a-button type="primary" :loading="loading" @click="handleSubmit">
|
||||
{{ t('common.confirm') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
padding: 24px;
|
||||
background-color: #f5f5f7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head-title) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.ant-radio-group) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item:last-child .ant-form-item-control-input-content) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 576px) {
|
||||
:deep(.ant-form-item-control) {
|
||||
max-width: 100% !important; /* 覆盖 ant-design-vue 的默认样式 */
|
||||
}
|
||||
|
||||
:deep(.ant-form-item:last-child) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user