<template>
|
<div
|
class="exam-list-container w-screen h-screen bg-slate-50 flex flex-col items-center"
|
>
|
<NormalHeader class="shrink-0"></NormalHeader>
|
|
<div class="list-container container grow relative">
|
<div
|
class="personal-center-box list-content absolute top-0 bottom-0 left-0 right-0 py-4"
|
>
|
<div class="information">
|
<el-card class="h-full" :body-style="{ height: '50%' }">
|
<div
|
class="card-wrapper w-full h-full flex flex-col px-8 box-border"
|
>
|
<div>个人信息</div>
|
<div class="img-box">
|
<input
|
type="file"
|
@change="changeHeadPortrait"
|
accept=".jpg, .png"
|
style="display: none"
|
ref="fileHeadPortrait"
|
id="fileHeadPortrait"
|
/>
|
<img
|
class="img"
|
id="headPortrait"
|
@click="uploadImage"
|
:src="'api/files/' + userData.imagePath"
|
/>
|
<span>{{ userData.userName }}</span>
|
</div>
|
<div>
|
<el-form label-width="auto" style="max-width: 600px">
|
<el-form-item label="姓名">
|
{{ userData.realName }}
|
</el-form-item>
|
<el-form-item label="班级">
|
{{ userData.className.join(",") }}
|
</el-form-item>
|
<el-form-item label="注册时间">
|
{{ timestampToDate(userData.createTime) }}
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
<div class="list-wrapper w-full h-full">
|
<el-card class="h-full" :body-style="{ height: '100%' }">
|
<el-tabs v-model="activeName" class="demo-tabs">
|
<el-tab-pane label="资料修改" name="information">
|
<el-form
|
:model="informationForm"
|
label-width="auto"
|
style="max-width: 600px"
|
:rules="informationRules"
|
>
|
<el-form-item label="真实姓名" prop="name">
|
<el-input v-model="informationForm.name" />
|
</el-form-item>
|
<el-form-item label="年龄">
|
<el-input v-model="informationForm.age" />
|
</el-form-item>
|
<el-form-item label="性别">
|
<el-select
|
v-model="informationForm.sex"
|
style="width: 100px"
|
>
|
<el-option label="男" :value="1" />
|
<el-option label="女" :value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="出生年月">
|
<el-date-picker
|
v-model="informationForm.birthDay"
|
type="date"
|
placeholder="Pick a day"
|
:size="size"
|
/>
|
</el-form-item>
|
<el-form-item label="手机" prop="phone">
|
<el-input v-model="informationForm.phone" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit">更新</el-button>
|
</el-form-item></el-form
|
></el-tab-pane
|
>
|
<el-tab-pane label="密码修改" name="password">
|
<el-form
|
:model="passwordForm"
|
label-width="auto"
|
style="max-width: 600px"
|
>
|
<el-form-item label="旧密码">
|
<el-input v-model="passwordForm.name" />
|
</el-form-item>
|
<el-form-item label="新密码">
|
<el-input v-model="passwordForm.name" />
|
</el-form-item>
|
<el-form-item label="确认密码">
|
<el-input v-model="passwordForm.name" />
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
import { uploadImg } from "@/api/modules/personalCenter.js";
|
import { ElMessage } from "element-plus";
|
|
const activeName = ref("information");
|
const userData = ref(JSON.parse(localStorage.getItem("user")).userInfo);
|
const informationForm = ref({
|
name: userData.value.realName,
|
sex: userData.value.sex,
|
age: userData.value.age,
|
phone: userData.value.phone,
|
birthDay: userData.value.birthDay,
|
});
|
// 手机号验证逻辑
|
const validatePhone = (rule, value, callback) => {
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
if (!phoneRegex.test(value)) {
|
callback(new Error("手机号格式不正确"));
|
} else {
|
callback();
|
}
|
};
|
|
const informationRules = {
|
name: [{ required: true, message: "请填写真实姓名", trigger: "blur" }],
|
phone: [
|
{ validator: validatePhone, trigger: "blur" },
|
{ required: true, message: "请输入手机号", trigger: "blur" },
|
],
|
};
|
const passwordForm = ref({ name: "" });
|
//头像上传
|
let formData = new FormData();
|
const uploadImage = () => {
|
let logoFile = document.getElementById("fileHeadPortrait");
|
if (logoFile) {
|
logoFile.click();
|
}
|
};
|
const changeHeadPortrait = (e) => {
|
// let platformLogo = document.getElementById("headPortrait");
|
if (e.target.files[0]) {
|
// let reader = new FileReader();
|
// reader.onload = function (e) {
|
// if (platformLogo) {
|
// platformLogo.setAttribute("src", e.target.result);
|
// }
|
// };
|
// reader.readAsDataURL(e.target.files[0]);
|
formData.set("file", e.target.files[0]);
|
uploadImg(formData).then(
|
() => {
|
ElMessage({
|
showClose: true,
|
message: "上传成功",
|
type: "success",
|
});
|
// window.location.reload();
|
},
|
(err) => {
|
ElMessage.error(err.data.errorMsg);
|
}
|
);
|
}
|
};
|
function timestampToDate(timestamp) {
|
const date = new Date(timestamp); // 将时间戳转换为Date对象
|
const options = { year: "numeric", month: "long", day: "numeric" }; // 定义日期格式
|
return new Intl.DateTimeFormat("zh-CN", options).format(date); // 使用Intl.DateTimeFormat进行格式化
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.el-tabs__nav-wrap:after) {
|
display: none;
|
}
|
.personal-center-box {
|
display: flex;
|
justify-content: space-between;
|
}
|
.information {
|
width: 500px;
|
margin-right: 20px;
|
}
|
.img-box {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
margin-top: 30px;
|
margin-bottom: 30px;
|
}
|
.img {
|
height: 150px;
|
width: 150px;
|
border-radius: 100px;
|
overflow: hidden;
|
object-fit: cover;
|
}
|
</style>
|
