用户信息变更

2025-11-26 12:03:34 +08:00
parent 8ff849d050
commit 8d8ecf8763
15 changed files with 203 additions and 88 deletions
--- a/schoolNewsWeb/src/views/user/user-center/components/UserCard.vue
+++ b/schoolNewsWeb/src/views/user/user-center/components/UserCard.vue
@@ -13,7 +13,7 @@
      <!-- 头像 -->
      <div class="avatar-wrapper">
        <img 
-          :src="userInfo?.avatar && userInfo.avatar!='default' ? userInfo.avatar : defaultAvatar" 
+          :src="userInfo?.avatar && userInfo.avatar!='default' ? FILE_DOWNLOAD_URL + userInfo.avatar : defaultAvatar" 
          :alt="userInfo?.username"
          class="avatar"
        />
@@ -57,6 +57,7 @@ import femaleIcon from '@/assets/imgs/female.svg';
 import { ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
 import { getLevelWordIconUrl } from '@/utils/iconUtils';
+import { FILE_DOWNLOAD_URL } from '@/config';

 const router = useRouter();
 const userInfo = ref<UserVO>();
--- a/schoolNewsWeb/src/views/user/user-center/profile/PersonalInfoView.vue
+++ b/schoolNewsWeb/src/views/user/user-center/profile/PersonalInfoView.vue
@@ -1,20 +1,21 @@
 <template>
-
-      <div class="personal-info">
-        <el-form :model="userForm" label-width="120px" class="info-form">
-          <el-form-item label="头像">
-            <div class="avatar-upload">
-              <img :src="userForm.avatar || defaultAvatar" alt="头像" class="avatar-preview" />
-              <el-button size="small" @click="handleAvatarUpload">更换头像</el-button>
-            </div>
-          </el-form-item>
+  <div class="personal-info">
+    <el-form :model="userForm" label-width="120px" class="info-form" v-loading="loading">
+      <el-form-item label="头像">
+        <FileUpload
+          :as-dialog="false"
+          list-type="cover"
+          v-model:cover-url="userForm.avatar"
+          accept="image/*"
+          :max-size="5"
+          tip="点击上传头像"
+          module="avatar"
+          @success="handleAvatarSuccess"
+        />
+      </el-form-item>

          <el-form-item label="用户名">
-            <el-input v-model="userForm.username" disabled />
-          </el-form-item>
-
-          <el-form-item label="姓名">
-            <el-input v-model="userForm.realName" />
+            <el-input v-model="userForm.username" />
          </el-form-item>

          <el-form-item label="性别">
@@ -36,71 +37,142 @@
            <el-input v-model="userForm.deptName" disabled />
          </el-form-item>

-          <el-form-item label="个人简介">
-            <el-input v-model="userForm.bio" type="textarea" :rows="4" placeholder="介绍一下自己吧..." />
+          <el-form-item label="学号">
+            <el-input v-model="userForm.studentId" placeholder="请输入学号" />
          </el-form-item>

-          <el-form-item>
-            <el-button type="primary" @click="handleSave">保存</el-button>
-            <el-button @click="handleCancel">取消</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-

+      <el-form-item>
+        <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>

 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { ElForm, ElFormItem, ElInput, ElButton, ElRadio, ElRadioGroup, ElMessage } from 'element-plus';
-import { UserCenterLayout } from '@/views/user/user-center';
-// 默认头像
-const defaultAvatar = new URL('@/assets/imgs/default-avatar.png', import.meta.url).href;
+import { ElMessage } from 'element-plus';
+import { userProfileApi } from '@/apis/usercenter';
+import { FILE_DOWNLOAD_URL } from '@/config';
+import { FileUpload } from '@/components/file';
+import type { SysFile, UserVO } from '@/types';
+
+const loading = ref(false);
+const saving = ref(false);
+const originalUserInfo = ref<any>(null);

 const userForm = ref({
  avatar: '',
  username: '',
-  realName: '',
  gender: 1,
  phone: '',
  email: '',
  deptName: '',
-  bio: ''
+  studentId: ''
 });

-onMounted(() => {
-  // TODO: 加载用户信息
-  loadUserInfo();
-});
+// 接口返回的用户ID，用于提交更新
+const profileUserId = ref<string | undefined>(undefined);

-function loadUserInfo() {
-  // 模拟数据
-  userForm.value = {
-    avatar: '',
-    username: '平台用户bc7a1b',
-    realName: '张三',
-    gender: 1,
-    phone: '15268425987',
-    email: 'zhangsan@example.com',
-    deptName: '机械学院',
-    bio: ''
-  };
+// 加载用户信息
+async function loadUserInfo() {
+  loading.value = true;
+  try {
+    const result = await userProfileApi.getUserProfile();
+    if (result.code === 200 && result.data) {
+      const info: UserVO = result.data;
+      profileUserId.value = info.userID;
+
+      // 保存原始数据用于取消操作
+      let avatarVal = info.avatar || '';
+      if (avatarVal === 'default') {
+        avatarVal = '';
+      } else if (avatarVal && FILE_DOWNLOAD_URL && avatarVal.startsWith(FILE_DOWNLOAD_URL)) {
+        avatarVal = avatarVal.substring(FILE_DOWNLOAD_URL.length);
+      }
+
+      originalUserInfo.value = {
+        avatar: avatarVal,
+        username: info.username || '',
+        gender: info.gender ?? 1,
+        phone: info.phone || '',
+        email: info.email || '',
+        deptName: info.deptName || '',
+        studentId: info.studentId || ''
+      };
+
+      // 填充表单
+      userForm.value = { ...originalUserInfo.value };
+    } else {
+      ElMessage.error(result.message || '获取个人信息失败');
+    }
+  } catch (error: any) {
+    console.error('加载用户信息失败:', error);
+    ElMessage.error('加载用户信息失败: ' + (error.message || '未知错误'));
+  } finally {
+    loading.value = false;
+  }
 }

-function handleAvatarUpload() {
-  // TODO: 上传头像
-  ElMessage.info('上传头像功能开发中');
+/**
+ * 头像上传成功回调
+ */
+function handleAvatarSuccess(files: SysFile[]) {
+  if (files && files.length > 0) {
+    ElMessage.success('头像上传成功');
+  }
 }

-function handleSave() {
-  // TODO: 保存用户信息
-  ElMessage.success('保存成功');
+/**
+ * 保存用户信息
+ */
+async function handleSave() {
+  if (!profileUserId.value) {
+    ElMessage.warning('未获取到用户ID');
+  }
+
+  saving.value = true;
+  try {
+    const userInfo: UserVO = {
+      userID: profileUserId.value,
+      avatar: userForm.value.avatar,
+      gender: userForm.value.gender,
+      studentId: userForm.value.studentId,
+      username: userForm.value.username,
+      phone: userForm.value.phone,
+      email: userForm.value.email,
+    };
+
+    const result = await userProfileApi.updateUserProfile(userInfo);
+    
+    if (result.code === 200) {
+      ElMessage.success('保存成功');
+      await loadUserInfo();
+      originalUserInfo.value = { ...userForm.value };
+    } else {
+      ElMessage.error(result.message || '保存失败');
+    }
+  } catch (error: any) {
+    console.error('保存用户信息失败:', error);
+    ElMessage.error('保存失败: ' + (error.message || '未知错误'));
+  } finally {
+    saving.value = false;
+  }
 }

+/**
+ * 取消编辑
+ */
 function handleCancel() {
-  // 重置表单
-  loadUserInfo();
+  if (originalUserInfo.value) {
+    userForm.value = { ...originalUserInfo.value };
+    ElMessage.info('已取消修改');
+  }
 }
+onMounted(() => {
+  loadUserInfo();
+});
 </script>

 <style lang="scss" scoped>
@@ -111,18 +183,4 @@ function handleCancel() {
 .info-form {
  padding: 20px 0;
 }
-
-.avatar-upload {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.avatar-preview {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid #e0e0e0;
-}
 </style>