web-权限、文章

schoolNewsWeb/src/views/user-center/components/UserCard.vue

@@ -13,8 +13,8 @@
       <!-- 头像 -->
       <div class="avatar-wrapper">
         <img 
-          :src="userInfo?.avatar || defaultAvatar" 
-          :alt="userInfo?.nickname || userInfo?.username"
+          :src="userInfo?.avatar && userInfo.avatar!='default' ? userInfo.avatar : defaultAvatar" 
+          :alt="userInfo?.username"
           class="avatar"
         />
       </div>
@@ -23,21 +23,21 @@
       <div class="user-details">
         <!-- 用户名和性别 -->
         <div class="user-name-row">
-          <span class="username">{{ userInfo?.nickname || userInfo?.username || '未设置昵称' }}</span>
-          <div class="gender-tag" v-if="userInfo?.gender && genderIcon">
-            <img :src="genderIcon" :alt="genderText" class="gender-icon" />
-            <span class="gender-text">{{ genderText }}</span>
+          <span class="username">{{ userInfo?.username || '未设置昵称' }}</span>
+          <div class="gender-tag" v-if="userInfo?.gender">
+            <img :src="userInfo?.gender === 1 ? maleIcon : femaleIcon" :alt="userInfo?.gender === 1 ? '男' : '女'" class="gender-icon" />
+            <span class="gender-text">{{ userInfo?.gender === 1 ? '男' : '女' }}</span>
           </div>
         </div>
 
         <!-- 详细信息 -->
         <div class="info-row">
-          <span class="info-item">所属部门：{{ departmentName || '未分配部门' }}</span>
-          <span class="info-item">联系方式：{{ userInfo?.phone || '未设置' }}</span>
+          <span class="info-item">所属部门：{{ userInfo?.deptName || '未分配部门' }}</span>
+          <span class="info-item" v-if="userInfo?.phone">手机号：{{ userInfo?.phone || '未设置' }}</span>
+          <span class="info-item" v-if="userInfo?.email">邮箱：{{ userInfo?.email || '未设置' }}</span>
           <div class="level-item">
             <span class="info-label">学习等级：</span>
-            <img :src="arrowDownIcon" alt="等级" class="level-icon" />
-            <span class="level-text">等级</span>
+            <img :src="levelIcon" alt="等级" class="level-icon" />
           </div>
         </div>
       </div>
@@ -49,58 +49,45 @@
 
 <script setup lang="ts" name="UserCard">
 import { computed, ref, onMounted } from 'vue';
-import { useStore } from 'vuex';
-import { useRouter } from 'vue-router';
 import { UserVO } from '@/types';
-import {userApi} from '@/apis/system/user'
+import {userProfileApi} from '@/apis/usercenter/profile'
 import defaultAvatarImg from '@/assets/imgs/default-avatar.png';
 import maleIcon from '@/assets/imgs/male.svg';
 import femaleIcon from '@/assets/imgs/female.svg';
-import arrowDownIcon from '@/assets/imgs/arrow-down.svg';
+import V1Icon from '@/assets/imgs/v1.svg';
+import V2Icon from '@/assets/imgs/v2.svg';
+import V3Icon from '@/assets/imgs/v3.svg';
+import V4Icon from '@/assets/imgs/v4.svg';
+import { ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
 
-const store = useStore();
 const router = useRouter();
+const userInfo = ref<UserVO>();
 
 // 默认头像
 const defaultAvatar = defaultAvatarImg;
 
-// 从 store 获取用户信息
-const loginDomain = computed(() => store.state.auth.loginDomain);
-const userInfo = ref<UserVO>();
-
-// 获取部门名称
-const departmentName = computed(() => {
-  const roles = loginDomain.value?.roles || [];
-  if (roles.length > 0 && roles[0].dept) {
-    return roles[0].dept.name;
+const levelIcon = computed(() => {
+  switch(userInfo.value?.level){
+    case 1: return V1Icon;
+    case 2: return V2Icon;
+    case 3: return V3Icon;
+    case 4: return V4Icon;
   }
-  return '';
+  return V1Icon;
 });
 
-// 性别文本
-const genderText = computed(() => {
-  const gender = userInfo.value?.gender;
-  if (gender === 1) return '男';
-  if (gender === 2) return '女';
-  return '';
-});
-
-// 性别图标
-const genderIcon = computed(() => {
-  const gender = userInfo.value?.gender;
-  if (gender === 1) return maleIcon;
-  if (gender === 2) return femaleIcon;
-  return '';
-});
-
-// 编辑资料
-const handleEdit = () => {
-  router.push('/profile/personal-info');
-};
+function handleEdit() {
+  router.push('/profile');
+}
 
 onMounted(async () => {
-  const res = await userApi.getCurrentUser();
-  userInfo.value = res.data;
+  const res = await userProfileApi.getUserProfile();
+  if(res.success){
+    userInfo.value = res.data;
+  }else{
+    ElMessage.error(res.message || '获取用户信息失败'); 
+  }
 });
 </script>