474 lines
14 KiB
Vue
474 lines
14 KiB
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>
|