From 3a1933de583f2ebb2bfd6c9f2960f748fe8c3462 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期五, 12 七月 2024 17:40:26 +0800
Subject: [PATCH] “个人中心开发”
---
src/views/personal-center/index.vue | 195 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 195 insertions(+), 0 deletions(-)
diff --git a/src/views/personal-center/index.vue b/src/views/personal-center/index.vue
new file mode 100644
index 0000000..26980b4
--- /dev/null
+++ b/src/views/personal-center/index.vue
@@ -0,0 +1,195 @@
+<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"
+ >
+ <el-form-item label="鐪熷疄濮撳悕">
+ <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="鎵嬫満">
+ <el-input
+ v-model="informationForm.phone"
+ /> </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 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); // 灏嗘椂闂存埑杞崲涓篋ate瀵硅薄
+ 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>
--
Gitblit v1.8.0