Market-Front/src/pages/user/ProfilePage.vue

<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">
      <div class="container mx-auto px-4 py-8">
        <el-card class="profile-card">
          <template #header>
            <div
              class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4"
            >
              <span class="text-xl font-bold">个人中心</span>
              <div class="flex flex-wrap gap-2">
                <el-button @click="handleEditProfile" size="small">
                  <el-icon :size="14" class="mr-1"><edit /></el-icon>
                  编辑信息
                </el-button>
                <el-button
                  type="primary"
                  @click="handleChangePassword"
                  size="small"
                >
                  <el-icon :size="14" class="mr-1"><lock /></el-icon>
                  修改密码
                </el-button>
                <el-button type="danger" @click="handleLogout" size="small">
                  退出登录
                </el-button>
              </div>
            </div>
          </template>

          <div v-if="loading" class="text-center py-10">
            <i class="el-icon-loading text-2xl"></i>
            <p class="mt-2">加载中...</p>
          </div>

          <div v-else-if="userInfo" class="profile-content">
            <div
              class="flex flex-col md:flex-row items-center mb-8 pb-6 border-b"
            >
              <el-avatar :size="80" class="mb-4 md:mb-0 md:mr-6">
                <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="头像" />
                <user-filled v-else />
              </el-avatar>
              <div class="text-center md:text-left">
                <h2 class="text-2xl font-bold mb-2">
                  {{ userInfo.nickname || userInfo.username }}
                </h2>
                <p class="text-gray-600 mb-2 text-sm">
                  @{{ userInfo.username }}
                </p>
                <el-tag
                  :type="getStatusInfo(userInfo.status).type"
                  size="small"
                >
                  {{ getStatusInfo(userInfo.status).label }}
                </el-tag>
              </div>
            </div>

            <el-descriptions title="基本信息" :column="1" border>
              <el-descriptions-item label="用户ID">
                {{ userInfo.id }}
              </el-descriptions-item>
              <el-descriptions-item label="用户名">
                {{ userInfo.username }}
              </el-descriptions-item>
              <el-descriptions-item label="昵称">
                {{ userInfo.nickname || "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                <div class="flex items-center">
                  <male
                    v-if="userInfo.gender === 1"
                    class="text-blue-500 mr-1"
                    :size="14"
                  />
                  <female
                    v-else-if="userInfo.gender === 2"
                    class="text-pink-500 mr-1"
                    :size="14"
                  />
                  <span>{{ getGenderText(userInfo.gender) }}</span>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="手机号">
                <div class="flex items-center">
                  <iphone class="mr-2 text-gray-500" :size="14" />
                  <span>{{ userInfo.phone || "-" }}</span>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="邮箱">
                <div class="flex items-center">
                  <message class="mr-2 text-gray-500" :size="14" />
                  <span>{{ userInfo.email || "-" }}</span>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">
                {{ formatDateTime(userInfo.createTime) }}
              </el-descriptions-item>
              <el-descriptions-item label="更新时间">
                {{ formatDateTime(userInfo.updateTime) }}
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <div v-else class="text-center py-10">
            <p>无法加载用户信息</p>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 编辑信息对话框 -->
    <el-dialog
      v-model="showEditDialog"
      title="编辑个人信息"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="editForm" :rules="editRules" label-width="80px">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="editForm.nickname" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select
            v-model="editForm.gender"
            placeholder="请选择性别"
            style="width: 100%"
          >
            <el-option :value="0" label="未知" />
            <el-option :value="1" label="男" />
            <el-option :value="2" label="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-input v-model="editForm.avatar" placeholder="请输入头像URL" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showEditDialog = false">取消</el-button>
          <el-button type="primary" @click="saveEditProfile">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="showPasswordDialog"
      title="修改密码"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="passwordForm" :rules="passwordRules" label-width="100px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            placeholder="请输入原密码"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            placeholder="请输入新密码"
          />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showPasswordDialog = false">取消</el-button>
          <el-button type="primary" @click="saveNewPassword">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </UserLayout>
</template>

<style scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.profile-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

.profile-content {
  padding: 20px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.el-descriptions__label) {
  width: 100px !important;
  font-weight: 500;
}

:deep(.el-descriptions__content) {
  display: flex;
  align-items: center;
}
</style>