From df00bca905f99e2f8990a529fb2cce68c5ed7bc9 Mon Sep 17 00:00:00 2001
From: fdzcxy212206314 <2756115215@qq.com>
Date: Tue, 24 Dec 2024 19:50:54 +0800
Subject: [PATCH] ADD file via upload

---
 AdminMyInfo.vue | 208 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 AdminMyInfo.vue

diff --git a/AdminMyInfo.vue b/AdminMyInfo.vue
new file mode 100644
index 0000000..22c99e9
--- /dev/null
+++ b/AdminMyInfo.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="container">
+    <el-row class="top">
+      <el-col :span="20" class="col">个人信息</el-col>
+    </el-row>
+
+    <el-row class="body">
+      <el-col :span="6" class="avatar-col">
+        <el-image
+            class="user-img"
+            :src="userImgSrc"
+            @error="handleImageError"
+            fit="cover"
+        ></el-image>
+        <el-button class="upload-btn" type="text" @click="triggerFileUpload">更换头像</el-button>
+        <input type="file" @change="handleFileUpload" style="display: none;" />
+      </el-col>
+
+      <el-col :span="14" class="form-col">
+        <el-tag class="phone">{{ phoneNumber }}</el-tag>
+        <el-form label-width="auto" class="user-form" style="max-width: 600px">
+          <el-form-item label="昵称">
+            <el-input v-model="form.nickname" placeholder="请输入昵称"></el-input>
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-select v-model="form.sex" placeholder="选择性别">
+              <el-option label="男" value="男"></el-option>
+              <el-option label="女" value="女"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="生日">
+            <el-date-picker
+                v-model="form.birthday"
+                type="date"
+                placeholder="Pick a day"
+                style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item label="地区">
+            <el-input v-model="form.region" placeholder="请输入地区"></el-input>
+          </el-form-item>
+          <el-form-item label="电话号码">
+            <el-input v-model="form.phoneNumber" type="tel" placeholder="请输入电话号码"></el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" class="save-btn" @click="saveForm">保存</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userImgSrc: '/user.png', // 默认头像
+      form: {
+        nickname: '',
+        sex: '',
+        birthday: null,
+        region: '',
+        profileImage: null,
+        phoneNumber: '' // 新增电话号码字段
+      },
+    };
+  },
+  computed: {
+    phoneNumber() {
+      return this.form.phoneNumber;
+    }
+  },
+  created() {
+    this.fetchUserInfo();
+  },
+  methods: {
+    // 从 localStorage 中读取表单数据
+    fetchUserInfo() {
+      const storedForm = localStorage.getItem('userInfo');
+      if (storedForm) {
+        const parsedForm = JSON.parse(storedForm);
+        this.form = parsedForm;
+        this.userImgSrc = parsedForm.profileImage || '/user.png';
+      }
+    },
+
+    // 处理文件上传
+    handleFileUpload(event) {
+      const file = event.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          this.userImgSrc = e.target.result;
+          this.form.profileImage = e.target.result;
+        };
+        reader.readAsDataURL(file);
+      }
+    },
+
+    // 手动触发文件上传
+    triggerFileUpload() {
+      const fileInput = document.querySelector('input[type="file"]');
+      fileInput?.click();
+    },
+
+    // 保存表单数据
+    saveForm() {
+      localStorage.setItem('userInfo', JSON.stringify(this.form));
+      this.$message({
+        message: '保存成功',
+        type: 'success'
+      });
+    },
+
+    // 处理头像加载失败
+    handleImageError() {
+      this.userImgSrc = '/user.png'; // 使用默认头像
+    },
+  },
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 30px;
+  background-color: #f4f7f6;
+  min-height: 100vh;
+}
+
+.top {
+  margin-bottom: 30px;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.col {
+  font-size: 30px;
+  text-align: center;
+}
+
+.body {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 30px;
+}
+
+.avatar-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.user-img {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.upload-btn {
+  font-size: 12px;
+  color: #409eff;
+  margin-top: 10px;
+}
+
+.form-col {
+  flex: 1;
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.phone {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #666;
+}
+
+.user-form .el-form-item {
+  margin-bottom: 15px;
+}
+
+.user-form .el-input, .user-form .el-select, .user-form .el-date-picker {
+  border-radius: 8px;
+}
+
+.save-btn {
+  width: 100%;
+  padding: 10px 0;
+  font-size: 16px;
+}
+
+.el-button--primary {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+</style>