成就

schoolNewsWeb/src/views/user/user-center/MyAchievementsView.vue

@@ -2,7 +2,7 @@
   <div class="my-achievements">
     <div class="level-achieve">
       <!-- 用户当前的等级成就和下级成就进度 -->
-       <h1>我的等级</h1>
+       <h3>我的等级</h3>
        <div class="level">
         <!-- 合并图标 -->
         <div class="level-icons">
@@ -27,7 +27,7 @@
     </div>
     <div class="badge-achieve">
       <!-- 用户已获得的勋章成就 -->
-       <h1>我的勋章</h1>
+       <h3>我的勋章</h3>
        <!-- 勋章列表 -->
        <div class="achievement-list">
             <!-- 单个勋章 -->
@@ -65,63 +65,30 @@ import { UserCenterLayout } from '@/views/user/user-center';
 
 // 响应式数据
 const loading = ref(false);
-const achievements = ref<AchievementVO[]>([]);
-const selectedType = ref<number | undefined>(undefined);
-const showOnlyEarned = ref(false);
+const currentLevelAch = ref<AchievementVO | undefined>(undefined);
+const nextLevelAch = ref<AchievementVO | undefined>(undefined);
+const badgeAchievements = ref<AchievementVO[]>([]);
+const showOnlyEarned = ref(true);
 
 // 枚举选项
 const achievementTypeOptions = AchievementEnumHelper.getAllAchievementTypeOptions();
 
-// 进度条颜色
+// 进度条颜色（按“完成度”配色：低完成度=红，高完成度=绿）
 const progressColor = [
   { color: '#f56c6c', percentage: 30 },
   { color: '#e6a23c', percentage: 60 },
   { color: '#5cb87a', percentage: 100 }
 ];
 
-// 已获得数量
+// 已获得数量（后端只返回已获得的勋章）
 const earnedCount = computed(() => {
-  return achievements.value.filter(a => a.obtained).length;
+  return badgeAchievements.value.length;
 });
 
-// 总数量
-const totalCount = computed(() => {
-  return achievements.value.length;
-});
-
-// 完成率
-const completionRate = computed(() => {
-  if (totalCount.value === 0) return 0;
-  return Math.round((earnedCount.value / totalCount.value) * 100);
-});
-
-// 等级类成就
-const levelAchievements = computed(() => {
-  return achievements.value.filter(a => a.type === AchievementType.LEVEL);
-});
-
-// 当前等级成就：优先已获得的最高等级，否则取最低等级
-const currentLevelAchievement = computed<AchievementVO | undefined>(() => {
-  if (levelAchievements.value.length === 0) return undefined;
-  const obtainedLevels = levelAchievements.value
-    .filter(a => a.obtained)
-    .sort((a, b) => (b.level || 0) - (a.level || 0));
-
-  if (obtainedLevels.length > 0) {
-    return obtainedLevels[0];
-  }
-
-  // 没有已获得等级时，取等级最低的作为当前目标
-  return [...levelAchievements.value].sort((a, b) => (a.level || 0) - (b.level || 0))[0];
-});
-
-// 下一级等级成就：当前等级的下一个等级
-const nextLevelAchievement = computed<AchievementVO | undefined>(() => {
-  if (!currentLevelAchievement.value) return undefined;
-  const currentLevel = currentLevelAchievement.value.level || 1;
-  const sortedLevels = [...levelAchievements.value].sort((a, b) => (a.level || 0) - (b.level || 0));
-  return sortedLevels.find(a => (a.level || 0) > currentLevel);
-});
+// ===== 等级成就部分 =====
+// 后端已返回计算好的当前和下一等级，直接使用
+const currentLevelAchievement = computed<AchievementVO | undefined>(() => currentLevelAch.value);
+const nextLevelAchievement = computed<AchievementVO | undefined>(() => nextLevelAch.value);
 
 // 当前等级数字与图标
 const currentLevel = computed(() => currentLevelAchievement.value?.level ?? 1);
@@ -135,9 +102,12 @@ const nextLevelDisplay = computed(() => {
   return nextLevelAchievement.value ? `Lv.${formatLevelNumber(nextLevelAchievement.value.level)}` : '满级';
 });
 const nextProgress = computed(() => {
-  if (!nextLevelAchievement.value) return 100;
+  // 使用“完成度”：0 -> 100
+  if (!nextLevelAchievement.value) return 100; // 无下一级视为已满级
   const p = nextLevelAchievement.value.progressPercentage;
-  if (typeof p === 'number') return Math.max(0, Math.min(100, p));
+  if (typeof p === 'number') {
+    return Math.max(0, Math.min(100, p));
+  }
   const cur = nextLevelAchievement.value.currentValue || 0;
   const tar = nextLevelAchievement.value.targetValue || 0;
   if (tar <= 0) return 0;
@@ -148,28 +118,17 @@ const nextDeltaText = computed(() => {
   const cur = nextLevelAchievement.value.currentValue || 0;
   const tar = nextLevelAchievement.value.targetValue || 0;
   const need = Math.max(0, tar - cur);
-  if (need <= 0) return '即将升级';
-  return `距离下级：还差 ${formatConditionValue(nextLevelAchievement.value.conditionType, need)}`;
+  const nextName = nextLevelAchievement.value.name || `Lv.${formatLevelNumber(nextLevelAchievement.value.level)}`;
+  if (need <= 0) return `即将升级至 ${nextName}`;
+  return `下一级：${nextName}，还差 ${formatConditionValue(nextLevelAchievement.value.conditionType, need)}`;
 });
 
-// 勋章类成就
-const badgeAchievements = computed(() => {
-  return achievements.value.filter(a => a.type === AchievementType.BADGE);
-});
+// ===== 勋章成就部分 =====
 
-// 右侧展示用的勋章成就（支持仅显示已获得）
+// 右侧展示用的勋章成就（后端已返回已获得的，前端只需排序）
 const filteredBadgeAchievements = computed(() => {
-  let result = badgeAchievements.value;
-
-  if (showOnlyEarned.value) {
-    result = result.filter(a => a.obtained);
-  }
-
-  // 排序：已获得的在前，按等级/ID 排序
-  return result.sort((a, b) => {
-    if (a.obtained !== b.obtained) {
-      return a.obtained ? -1 : 1;
-    }
+  // 后端已返回已获得的勋章，按等级/ID 排序即可
+  return [...badgeAchievements.value].sort((a, b) => {
     return (a.level || 0) - (b.level || 0);
   });
 });
@@ -193,8 +152,9 @@ function formatLevelNumber(level?: number | null): string {
   if (Number.isNaN(num)) {
     return String(level);
   }
-  // 保留两位小数，方便展示类似 Lv.1.20 的效果
-  return num.toFixed(2);
+  // 保留最多两位小数，但去掉多余的尾随 0（例如 1.2 而不是 1.20）
+  const fixed = num.toFixed(2);
+  return String(parseFloat(fixed));
 }
 
 // 格式化日期
@@ -216,15 +176,39 @@ function filterAchievements() {
   // 触发计算属性重新计算
 }
 
-// 加载成就数据
+// 加载等级状态（当前等级 + 下一等级）
+async function loadLevelStatus() {
+  try {
+    const result = await achievementApi.getMyLevelStatus();
+    if (result.success && result.data) {
+      currentLevelAch.value = result.data.current || undefined;
+      nextLevelAch.value = result.data.next || undefined;
+    }
+  } catch (error) {
+    console.error('加载等级状态失败:', error);
+    ElMessage.error('加载等级状态失败');
+  }
+}
+
+// 加载已获得的勋章成就
+async function loadObtainedBadges() {
+  try {
+    const result = await achievementApi.getMyObtainedAchievements(AchievementType.BADGE);
+    badgeAchievements.value = result.dataList || [];
+  } catch (error) {
+    console.error('加载勋章数据失败:', error);
+    ElMessage.error('加载勋章数据失败');
+  }
+}
+
+// 加载所有成就数据
 async function loadAchievements() {
   try {
     loading.value = true;
-    const result = await achievementApi.getMyAchievements();
-    achievements.value = result.dataList || [];
-  } catch (error) {
-    console.error('加载成就数据失败:', error);
-    ElMessage.error('加载成就数据失败');
+    await Promise.all([
+      loadLevelStatus(),
+      loadObtainedBadges()
+    ]);
   } finally {
     loading.value = false;
   }
@@ -271,6 +255,9 @@ onMounted(() => {
       .level-word{ height: 28px; }
       .next-tip{ color: #64748b; font-size: 13px; }
       .level-range{ width: 100%; display: flex; justify-content: space-between; font-size: 12px; color: #64748b; }
+      .el-progress{ width: 100%; }
+      :deep(.el-progress-bar__outer){ background-color: #e6effa; }
+      :deep(.el-progress-bar__inner){ background-color: #5cb87a; }
     }
   }
 

schoolNewsWeb/src/views/user/user-center/UserCenterLayout.vue

@@ -86,5 +86,6 @@ const menus = computed(() => {
   background: white;
   border-radius: 8px;
   padding: 20px;
+  min-height: 60vh;
 }
 </style>