style: add personal center
This commit is contained in:
@@ -20,6 +20,15 @@ export default {
|
|||||||
title: "管理端用户"
|
title: "管理端用户"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/auth/personalCenter",
|
||||||
|
name: "personalCenter",
|
||||||
|
component: () => import("@/views/auth/personalCenter/index.vue"),
|
||||||
|
meta: {
|
||||||
|
icon: "ri:admin-fill",
|
||||||
|
title: "个人中心"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/auth/company",
|
path: "/auth/company",
|
||||||
name: "company",
|
name: "company",
|
||||||
|
|||||||
385
src/views/auth/personalCenter/index.vue
Normal file
385
src/views/auth/personalCenter/index.vue
Normal file
@@ -0,0 +1,385 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { request, authApi } from "@/api/utils";
|
||||||
|
import { useUserStoreHook } from "@/store/modules/user";
|
||||||
|
import type { FormInstance } from "element-plus";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { Refresh } from "@element-plus/icons-vue";
|
||||||
|
import { id } from "element-plus/es/locales.mjs";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "personalCenter"
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义用户信息
|
||||||
|
const userInfo = ref({
|
||||||
|
id: "",
|
||||||
|
name: "",
|
||||||
|
nickName: "",
|
||||||
|
phoneNum: "",
|
||||||
|
email: "",
|
||||||
|
roleId: "",
|
||||||
|
avatar: "",
|
||||||
|
createTime: "",
|
||||||
|
updateTime: "",
|
||||||
|
lastVisitTime: "",
|
||||||
|
description: ""
|
||||||
|
});
|
||||||
|
|
||||||
|
// 是否显示修改密码对话框
|
||||||
|
const showPasswordDialog = ref(false);
|
||||||
|
|
||||||
|
// 表单引用
|
||||||
|
const passwordFormRef = ref<FormInstance>();
|
||||||
|
|
||||||
|
// 修改密码表单
|
||||||
|
const passwordForm = ref({
|
||||||
|
id: "",
|
||||||
|
oldPassword: "",
|
||||||
|
newPassword: "",
|
||||||
|
confirmPassword: ""
|
||||||
|
});
|
||||||
|
|
||||||
|
// 修改密码表单规则
|
||||||
|
const passwordRules = {
|
||||||
|
oldPassword: [
|
||||||
|
{ required: true, message: "请输入原密码", trigger: "blur" },
|
||||||
|
{ min: 6, message: "密码长度不能小于6位", trigger: "blur" }
|
||||||
|
],
|
||||||
|
newPassword: [
|
||||||
|
{ required: true, message: "请输入新密码", trigger: "blur" },
|
||||||
|
{ min: 6, message: "密码长度不能小于6位", trigger: "blur" }
|
||||||
|
],
|
||||||
|
confirmPassword: [
|
||||||
|
{ required: true, message: "请确认新密码", trigger: "blur" },
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
if (value !== passwordForm.value.newPassword) {
|
||||||
|
callback(new Error("两次输入的密码不一致"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加表单引用
|
||||||
|
const userFormRef = ref<FormInstance>();
|
||||||
|
|
||||||
|
// 添加表单验证规则
|
||||||
|
const userFormRules = {
|
||||||
|
phoneNum: [
|
||||||
|
{ required: true, message: "请输入手机号", trigger: "blur" },
|
||||||
|
{
|
||||||
|
pattern: /^1[3-9]\d{9}$/,
|
||||||
|
message: "请输入正确的手机号格式",
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
email: [
|
||||||
|
{ required: true, message: "请输入邮箱", trigger: "blur" },
|
||||||
|
{
|
||||||
|
pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
||||||
|
message: "请输入正确的邮箱格式",
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取用户信息
|
||||||
|
const getUserInfo = async () => {
|
||||||
|
try {
|
||||||
|
const res = await request(authApi("getUserInfo"), {
|
||||||
|
method: "POST"
|
||||||
|
});
|
||||||
|
if (res.status === 200) {
|
||||||
|
// 格式化时间
|
||||||
|
const data = {
|
||||||
|
...res.data,
|
||||||
|
createTime: res.data.createTime
|
||||||
|
? dayjs(res.data.createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
: "",
|
||||||
|
updateTime: res.data.updateTime
|
||||||
|
? dayjs(res.data.updateTime).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
: "",
|
||||||
|
lastVisitTime: res.data.lastVisitTime
|
||||||
|
? dayjs(res.data.lastVisitTime).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
: ""
|
||||||
|
};
|
||||||
|
userInfo.value = data;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("获取用户信息失败:", error);
|
||||||
|
ElMessage.error("获取用户信息失败");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改更新用户信息方法
|
||||||
|
const updateUserInfo = async () => {
|
||||||
|
if (!userFormRef.value) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 先进行表单验证
|
||||||
|
await userFormRef.value.validate();
|
||||||
|
|
||||||
|
// 创建一个新对象，只包含需要更新的字段
|
||||||
|
const updateData = {
|
||||||
|
id: userInfo.value.id,
|
||||||
|
name: userInfo.value.name,
|
||||||
|
nickName: userInfo.value.nickName,
|
||||||
|
phoneNum: userInfo.value.phoneNum,
|
||||||
|
email: userInfo.value.email,
|
||||||
|
roleId: userInfo.value.roleId,
|
||||||
|
avatar: userInfo.value.avatar,
|
||||||
|
description: userInfo.value.description
|
||||||
|
};
|
||||||
|
|
||||||
|
const res = await request(authApi("updateManagerUserInfo"), {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(updateData)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.status === 200) {
|
||||||
|
ElMessage.success("更新成功");
|
||||||
|
// 更新 store 中的用户信息
|
||||||
|
const userStore = useUserStoreHook();
|
||||||
|
await userStore.setUserInfo(res.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (error.message) {
|
||||||
|
ElMessage.error(error.message);
|
||||||
|
} else {
|
||||||
|
console.error("更新用户信息失败:", error);
|
||||||
|
ElMessage.error("更新用户信息失败");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改密码
|
||||||
|
const handleChangePassword = async (formEl: FormInstance | undefined) => {
|
||||||
|
if (!formEl) return;
|
||||||
|
|
||||||
|
await formEl.validate(async (valid: boolean) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
const res = await request(authApi("updateManagerPassword"), {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({
|
||||||
|
oldPassword: passwordForm.value.oldPassword,
|
||||||
|
newPassword: passwordForm.value.newPassword
|
||||||
|
})
|
||||||
|
});
|
||||||
|
if (res.status === 200) {
|
||||||
|
ElMessage.success("密码修改成功，请重新登录");
|
||||||
|
showPasswordDialog.value = false;
|
||||||
|
// 退出登录
|
||||||
|
const userStore = useUserStoreHook();
|
||||||
|
await userStore.logOut();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("修改密码失败:", error);
|
||||||
|
ElMessage.error("修改密码失败");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置密码表单
|
||||||
|
const resetPasswordForm = () => {
|
||||||
|
if (passwordFormRef.value) {
|
||||||
|
passwordFormRef.value.resetFields();
|
||||||
|
}
|
||||||
|
passwordForm.value = {
|
||||||
|
id: "",
|
||||||
|
oldPassword: "",
|
||||||
|
newPassword: "",
|
||||||
|
confirmPassword: ""
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getUserInfo();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="personal-center-container">
|
||||||
|
<el-card class="info-card">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<span>个人信息</span>
|
||||||
|
<el-button
|
||||||
|
class="refresh-btn"
|
||||||
|
:icon="Refresh"
|
||||||
|
circle
|
||||||
|
@click="getUserInfo"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="header-buttons">
|
||||||
|
<el-button type="primary" @click="updateUserInfo"
|
||||||
|
>保存修改</el-button
|
||||||
|
>
|
||||||
|
<el-button @click="showPasswordDialog = true">修改密码</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<el-form
|
||||||
|
ref="userFormRef"
|
||||||
|
:model="userInfo"
|
||||||
|
:rules="userFormRules"
|
||||||
|
label-width="100px"
|
||||||
|
class="user-form"
|
||||||
|
>
|
||||||
|
<el-form-item label="账号">
|
||||||
|
<el-input v-model="userInfo.name" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="昵称">
|
||||||
|
<el-input v-model="userInfo.nickName" placeholder="请输入昵称" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="手机号" prop="phoneNum">
|
||||||
|
<el-input
|
||||||
|
v-model="userInfo.phoneNum"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
maxlength="11"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="邮箱" prop="email">
|
||||||
|
<el-input
|
||||||
|
v-model="userInfo.email"
|
||||||
|
placeholder="请输入邮箱"
|
||||||
|
type="email"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="上次登录时间">
|
||||||
|
<el-input v-model="userInfo.lastVisitTime" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="创建时间">
|
||||||
|
<el-input v-model="userInfo.createTime" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="更新时间">
|
||||||
|
<el-input v-model="userInfo.updateTime" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="描述">
|
||||||
|
<el-input
|
||||||
|
v-model="userInfo.description"
|
||||||
|
type="textarea"
|
||||||
|
:rows="4"
|
||||||
|
placeholder="请输入描述信息"
|
||||||
|
maxlength="500"
|
||||||
|
show-word-limit
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 修改密码对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="showPasswordDialog"
|
||||||
|
title="修改密码"
|
||||||
|
width="500px"
|
||||||
|
@close="resetPasswordForm"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="passwordFormRef"
|
||||||
|
:model="passwordForm"
|
||||||
|
:rules="passwordRules"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-form-item label="原密码" prop="oldPassword">
|
||||||
|
<el-input
|
||||||
|
v-model="passwordForm.oldPassword"
|
||||||
|
type="password"
|
||||||
|
placeholder="请输入原密码"
|
||||||
|
show-password
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="新密码" prop="newPassword">
|
||||||
|
<el-input
|
||||||
|
v-model="passwordForm.newPassword"
|
||||||
|
type="password"
|
||||||
|
placeholder="请输入新密码"
|
||||||
|
show-password
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="确认密码" prop="confirmPassword">
|
||||||
|
<el-input
|
||||||
|
v-model="passwordForm.confirmPassword"
|
||||||
|
type="password"
|
||||||
|
placeholder="请确认新密码"
|
||||||
|
show-password
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="showPasswordDialog = false">取消</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="handleChangePassword(passwordFormRef)"
|
||||||
|
>
|
||||||
|
确认修改
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.personal-center-container {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.refresh-btn {
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-form {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
:deep(.el-input),
|
||||||
|
:deep(.el-textarea) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-textarea__inner) {
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user