From 980acdd55b63dd6b555bb9554d8f3861b7831a66 Mon Sep 17 00:00:00 2001
From: puzvv <1@>
Date: Wed, 31 Dec 2025 00:12:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E7=BC=96=E8=BE=91=E4=BF=A1=E6=81=AF=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/user/ProfilePage.vue | 569 ++++++++++++++++++---------------
 1 file changed, 320 insertions(+), 249 deletions(-)

diff --git a/src/pages/user/ProfilePage.vue b/src/pages/user/ProfilePage.vue
index ec5c5a6..4f58946 100644
--- a/src/pages/user/ProfilePage.vue
+++ b/src/pages/user/ProfilePage.vue
@@ -1,251 +1,3 @@
-<script lang="ts" setup>
-import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import {
-  ElCard,
-  ElDescriptions,
-  ElDescriptionsItem,
-  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, updateUserProfile } from "@/apis/user";
-import { useUserStore } from "@/stores/UserStore";
-import type { UserInfo } from "@/types/user";
-import UserLayout from "@/layouts/UserLayout.vue";
-
-// 用户信息
-const userInfo = ref<UserInfo | null>(null);
-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: "未知",
-  1: "男",
-  2: "女",
-};
-
-// 状态映射
-const statusMap: {
-  [key: number]: { label: string; type: "danger" | "success" | "info" };
-} = {
-  0: { label: "禁用", type: "danger" },
-  1: { label: "正常", type: "success" },
-};
-
-// 格式化时间显示
-const formatDateTime = (
-  dateTime: string | undefined | null | Array<number>,
-): 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")}`;
-  }
-
-  // 如果是完整的日期时间字符串，可以直接返回
-  return dateTime.toString();
-};
-
-// 获取用户信息
-const fetchUserProfile = async () => {
-  try {
-    if (!userStore.userInfo?.id) {
-      ElMessage.error("用户信息不存在");
-      router.push("/user/login");
-      return;
-    }
-
-    const response = await getUserProfile(userStore.userInfo.id);
-    if (response.code === 200) {
-      userInfo.value = response.data;
-    } else {
-      ElMessage.error(response.message || "获取用户信息失败");
-    }
-  } catch (err: unknown) {
-    console.error(err);
-    ElMessage.error("获取用户信息失败");
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 编辑个人信息
-const handleEditProfile = () => {
-  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 = () => {
-  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("密码修改失败");
-  }
-};
-
-// 退出登录
-const handleLogout = () => {
-  userStore.clearUserInfo();
-  ElMessage.success("退出登录成功");
-  router.push("/user/login");
-};
-
-// 获取性别文本
-const getGenderText = (gender: number | undefined | null): string => {
-  if (gender === undefined || gender === null) return "-";
-  return genderMap[gender] || "未知";
-};
-
-// 获取状态标签信息
-const getStatusInfo = (
-  status: number | undefined,
-): { label: string; type: "danger" | "success" | "info" } => {
-  if (status === undefined) return { label: "未知", type: "info" };
-  return statusMap[status] || { label: "未知", type: "info" };
-};
-
-onMounted(() => {
-  fetchUserProfile();
-});
-</script>
-
 <template>
   <UserLayout>
     <div class="profile-page">
@@ -387,7 +139,21 @@ onMounted(() => {
           </el-select>
         </el-form-item>
         <el-form-item label="头像" prop="avatar">
-          <el-input v-model="editForm.avatar" placeholder="请输入头像URL" />
+          <el-upload
+            class="avatar-uploader"
+            :auto-upload="false"
+            :show-file-list="false"
+            :on-change="handleAvatarChange"
+            :before-upload="beforeAvatarUpload"
+            accept="image/*"
+          >
+            <template v-if="editForm.avatar">
+              <img :src="editForm.avatar" class="avatar" alt="头像预览" />
+            </template>
+            <template v-else>
+              <el-button type="primary" plain>选择头像</el-button>
+            </template>
+          </el-upload>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -438,6 +204,304 @@ onMounted(() => {
   </UserLayout>
 </template>
 
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import {
+  ElCard,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElTag,
+  ElButton,
+  ElMessage,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElSelect,
+  ElOption,
+  ElAvatar,
+  ElUpload,
+} from "element-plus";
+import type { FormRules, UploadFile } from "element-plus";
+import {
+  Iphone,
+  Message,
+  Male,
+  Female,
+  UserFilled,
+  Edit,
+  Lock,
+} from "@element-plus/icons-vue";
+import { getUserProfile, updateUserProfile } from "@/apis/user";
+import { uploadFile } from "@/apis/product";
+import { useUserStore } from "@/stores/UserStore";
+import type { UserInfo } from "@/types/user";
+import UserLayout from "@/layouts/UserLayout.vue";
+
+// 用户信息
+const userInfo = ref<UserInfo | null>(null);
+const loading = ref(true);
+const router = useRouter();
+const userStore = useUserStore();
+
+// 编辑信息相关
+const showEditDialog = ref(false);
+const editForm = ref({
+  nickname: "",
+  phone: "",
+  email: "",
+  gender: 0,
+  avatar: "",
+});
+const pendingAvatarFile = ref<File | null>(null); // 暂存待上传的头像文件
+
+// 修改密码相关
+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: "未知",
+  1: "男",
+  2: "女",
+};
+
+// 状态映射
+const statusMap: {
+  [key: number]: { label: string; type: "danger" | "success" | "info" };
+} = {
+  0: { label: "禁用", type: "danger" },
+  1: { label: "正常", type: "success" },
+};
+
+// 格式化时间显示
+const formatDateTime = (
+  dateTime: string | undefined | null | Array<number>,
+): 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")}`;
+  }
+
+  // 如果是完整的日期时间字符串，可以直接返回
+  return dateTime.toString();
+};
+
+// 获取用户信息
+const fetchUserProfile = async () => {
+  try {
+    if (!userStore.userInfo?.id) {
+      ElMessage.error("用户信息不存在");
+      router.push("/user/login");
+      return;
+    }
+
+    const response = await getUserProfile(userStore.userInfo.id);
+    if (response.code === 200) {
+      userInfo.value = response.data;
+    } else {
+      ElMessage.error(response.message || "获取用户信息失败");
+    }
+  } catch (err: unknown) {
+    console.error(err);
+    ElMessage.error("获取用户信息失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 编辑个人信息
+const handleEditProfile = () => {
+  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 || "",
+    };
+    pendingAvatarFile.value = null; // 重置暂存的头像文件
+    showEditDialog.value = true;
+  }
+};
+
+// 上传头像前的钩子
+const beforeAvatarUpload = (file: File) => {
+  const isImage = file.type.startsWith("image/");
+  const isLt2M = file.size / 1024 / 1024 < 2;
+
+  if (!isImage) {
+    ElMessage.error("上传头像只能是图片格式!");
+  }
+  if (!isLt2M) {
+    ElMessage.error("上传头像大小不能超过 2MB!");
+  }
+  return isImage && isLt2M;
+};
+
+// 处理头像选择变化
+const handleAvatarChange = (uploadFile: UploadFile) => {
+  if (!uploadFile.raw || !beforeAvatarUpload(uploadFile.raw)) {
+    return;
+  }
+
+  // 暂存文件，等待提交时上传
+  pendingAvatarFile.value = uploadFile.raw;
+
+  // 创建预览URL用于显示
+  const previewUrl = URL.createObjectURL(uploadFile.raw);
+  editForm.value.avatar = previewUrl;
+};
+
+// 保存编辑的个人信息
+const saveEditProfile = async () => {
+  try {
+    // 如果有待上传的头像文件，先上传
+    if (pendingAvatarFile.value) {
+      try {
+        const response = await uploadFile(pendingAvatarFile.value);
+        if (response.code === 200) {
+          editForm.value.avatar = response.data.fileUrl;
+          ElMessage.success("头像上传成功");
+        } else {
+          ElMessage.error(response.message || "头像上传失败");
+          return;
+        }
+      } catch (error) {
+        console.error("头像上传错误:", error);
+        ElMessage.error("头像上传失败");
+        return;
+      }
+    }
+
+    // 添加用户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 = () => {
+  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("密码修改失败");
+  }
+};
+
+// 退出登录
+const handleLogout = () => {
+  userStore.clearUserInfo();
+  ElMessage.success("退出登录成功");
+  router.push("/user/login");
+};
+
+// 获取性别文本
+const getGenderText = (gender: number | undefined | null): string => {
+  if (gender === undefined || gender === null) return "-";
+  return genderMap[gender] || "未知";
+};
+
+// 获取状态标签信息
+const getStatusInfo = (
+  status: number | undefined,
+): { label: string; type: "danger" | "success" | "info" } => {
+  if (status === undefined) return { label: "未知", type: "info" };
+  return statusMap[status] || { label: "未知", type: "info" };
+};
+
+onMounted(() => {
+  fetchUserProfile();
+});
+</script>
+
 <style scoped>
 .profile-page {
   min-height: 100vh;
@@ -470,4 +534,11 @@ onMounted(() => {
   display: flex;
   align-items: center;
 }
+
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+  object-fit: cover;
+}
 </style>