个人信息界面编辑信息功能完善
This commit is contained in:
puzvv
@@ -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>
|
<template>
|
||||||
<UserLayout>
|
<UserLayout>
|
||||||
<div class="profile-page">
|
<div class="profile-page">
|
||||||
@@ -387,7 +139,21 @@ onMounted(() => {
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="头像" prop="avatar">
|
<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-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
@@ -438,6 +204,304 @@ onMounted(() => {
|
|||||||
</UserLayout>
|
</UserLayout>
|
||||||
</template>
|
</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>
|
<style scoped>
|
||||||
.profile-page {
|
.profile-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -470,4 +534,11 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.avatar-uploader .avatar {
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
display: block;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user