diff --git a/src/apis/user.ts b/src/apis/user.ts index c6ca5b5..98e69bd 100644 --- a/src/apis/user.ts +++ b/src/apis/user.ts @@ -51,6 +51,15 @@ export const getUserProfile = (id: number) => { }); }; +// 更新用户信息 +export const updateUserProfile = (data: Partial) => { + return http({ + url: "/user/update", + method: "put", + data, + }); +}; + // 获取用户地址列表 export const getAddressList = (userId: number) => { return http({ diff --git a/src/pages/user/ProfilePage.vue b/src/pages/user/ProfilePage.vue index 9830af0..623f0d1 100644 --- a/src/pages/user/ProfilePage.vue +++ b/src/pages/user/ProfilePage.vue @@ -8,17 +8,28 @@ import { ElTag, ElButton, ElMessage, + ElDialog, + ElForm, + ElFormItem, + ElInput, + ElSelect, + ElOption, + ElAvatar, } from "element-plus"; +import type { FormRules } from "element-plus"; import { Iphone, Message, Male, Female, UserFilled, + Edit, + Lock, } from "@element-plus/icons-vue"; -import { getUserProfile } from "@/apis/user"; +import { getUserProfile, updateUserProfile } from "@/apis/user"; import { useUserStore } from "@/stores/UserStore"; import type { UserInfo } from "@/types/user"; +import MainLayout from "@/layouts/MainLayout.vue"; // 用户信息 const userInfo = ref(null); @@ -26,6 +37,65 @@ const loading = ref(true); const router = useRouter(); const userStore = useUserStore(); +// 编辑信息相关 +const showEditDialog = ref(false); +const editForm = ref({ + nickname: "", + phone: "", + email: "", + gender: 0, + avatar: "", +}); + +// 修改密码相关 +const showPasswordDialog = ref(false); +const passwordForm = ref({ + oldPassword: "", + newPassword: "", + confirmPassword: "", +}); + +// 表单验证规则 +const editRules: FormRules = { + nickname: [ + { required: true, message: "请输入昵称", trigger: "blur" }, + { min: 2, max: 20, message: "昵称长度在2-20个字符之间", trigger: "blur" }, + ], + phone: [ + { + pattern: /^1[3-9]\d{9}$/, + message: "请输入正确的手机号", + trigger: "blur", + }, + ], + email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }], +}; + +const passwordRules: FormRules = { + oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }], + newPassword: [ + { required: true, message: "请输入新密码", trigger: "blur" }, + { min: 6, message: "密码长度至少6位", trigger: "blur" }, + ], + confirmPassword: [ + { required: true, message: "请再次输入新密码", trigger: "blur" }, + { + validator: ( + _rule: unknown, + value: string, + callback: (arg0?: Error) => void, + ) => { + if (value !== passwordForm.value.newPassword) { + callback(new Error("两次输入的密码不一致")); + } else { + callback(); + } + }, + trigger: "blur", + }, + ], +}; + // 性别映射 const genderMap: { [key: number]: string } = { 0: "未知", @@ -42,11 +112,19 @@ const statusMap: { }; // 格式化时间显示 -const formatDateTime = (dateTime: string | undefined | null): string => { +const formatDateTime = ( + dateTime: string | undefined | null | Array, +): string => { if (!dateTime) return "-"; + + // 如果是数组格式的日期时间 [2025, 12, 17, 15, 13, 19] + if (Array.isArray(dateTime)) { + const [year, month, day, hour, minute, second] = dateTime; + return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")} ${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:${String(second).padStart(2, "0")}`; + } + // 如果是完整的日期时间字符串，可以直接返回 - // 如果需要特定格式，可以使用 date-fns 或 dayjs 等库进行格式化 - return dateTime; + return dateTime.toString(); }; // 获取用户信息 @@ -74,12 +152,72 @@ const fetchUserProfile = async () => { // 编辑个人信息 const handleEditProfile = () => { - ElMessage.info("编辑功能开发中"); + if (userInfo.value) { + editForm.value = { + nickname: userInfo.value.nickname || "", + phone: userInfo.value.phone || "", + email: userInfo.value.email || "", + gender: userInfo.value.gender || 0, + avatar: userInfo.value.avatar || "", + }; + showEditDialog.value = true; + } +}; + +// 保存编辑的个人信息 +const saveEditProfile = async () => { + try { + // 添加用户ID到编辑表单数据中 + const updateData = { + ...editForm.value, + id: userStore.userInfo?.id, // 添加用户ID + }; + const response = await updateUserProfile(updateData); + if (response.code === 200) { + ElMessage.success("更新成功"); + showEditDialog.value = false; + fetchUserProfile(); // 重新获取用户信息 + } else { + ElMessage.error(response.message || "更新失败"); + } + } catch (err: unknown) { + console.error(err); + ElMessage.error("更新失败"); + } }; // 修改密码 const handleChangePassword = () => { - ElMessage.info("修改密码功能开发中"); + passwordForm.value = { + oldPassword: "", + newPassword: "", + confirmPassword: "", + }; + showPasswordDialog.value = true; +}; + +// 保存新密码 +const saveNewPassword = async () => { + try { + // 通过更新用户信息接口来修改密码 + const response = await updateUserProfile({ + id: userStore.userInfo?.id, // 确保ID已传递 + password: passwordForm.value.newPassword, + oldPassword: passwordForm.value.oldPassword, + }); + if (response.code === 200) { + ElMessage.success("密码修改成功"); + showPasswordDialog.value = false; + // 退出登录并跳转到登录页 + userStore.clearUserInfo(); + router.push("/user/login"); + } else { + ElMessage.error(response.message || "密码修改失败"); + } + } catch (err: unknown) { + console.error(err); + ElMessage.error("密码修改失败"); + } }; // 退出登录 @@ -109,108 +247,195 @@ onMounted(() => {