web-模块、权限、成就

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

@@ -3,59 +3,257 @@
     <div class="achievements-header">
       <h2>我的成就</h2>
       <div class="achievement-stats">
-        <span>已获得 <strong>{{ earnedCount }}</strong> / {{ totalCount }} 个成就</span>
+        <div class="stat-item">
+          <span class="stat-label">已获得</span>
+          <span class="stat-value">{{ earnedCount }}</span>
+          <span class="stat-total"> / {{ totalCount }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">完成率</span>
+          <span class="stat-value">{{ completionRate }}%</span>
+        </div>
       </div>
     </div>
 
-    <div class="achievements-grid">
+    <!-- 成就类型筛选 -->
+    <div class="filter-tabs">
+      <el-radio-group v-model="selectedType" @change="filterAchievements">
+        <el-radio-button :label="undefined">全部</el-radio-button>
+        <el-radio-button 
+          v-for="option in achievementTypeOptions" 
+          :key="option.value" 
+          :label="option.value"
+        >
+          {{ option.label }}
+        </el-radio-button>
+      </el-radio-group>
+      
+      <el-checkbox v-model="showOnlyEarned" @change="filterAchievements">
+        仅显示已获得
+      </el-checkbox>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <el-skeleton :rows="3" animated />
+    </div>
+
+    <!-- 成就网格 -->
+    <div v-else class="achievements-grid">
       <div 
         class="achievement-item" 
-        v-for="achievement in achievements" 
-        :key="achievement.id"
-        :class="{ earned: achievement.earned, locked: !achievement.earned }"
+        v-for="achievement in filteredAchievements" 
+        :key="achievement.achievementID"
+        :class="{ earned: achievement.obtained, locked: !achievement.obtained }"
       >
         <div class="achievement-icon">
-          <img :src="achievement.icon" :alt="achievement.name" />
-          <div class="achievement-badge" v-if="achievement.earned">✓</div>
+          <el-image 
+            :src="getIconUrl(achievement.icon)" 
+            :alt="achievement.name"
+            fit="contain"
+          >
+            <template #error>
+              <div class="image-placeholder">
+                <el-icon><Trophy /></el-icon>
+              </div>
+            </template>
+          </el-image>
+          <div class="achievement-badge" v-if="achievement.obtained">
+            <el-icon><Check /></el-icon>
+          </div>
+          <div class="achievement-level" v-if="achievement.level">
+            Lv.{{ achievement.level }}
+          </div>
         </div>
         <div class="achievement-info">
-          <h3>{{ achievement.name }}</h3>
-          <p class="achievement-description">{{ achievement.description }}</p>
-          <div class="achievement-progress" v-if="!achievement.earned && achievement.progress">
-            <div class="progress-bar">
-              <div class="progress-fill" :style="{ width: achievement.progress + '%' }"></div>
-            </div>
-            <span class="progress-text">{{ achievement.progress }}%</span>
+          <div class="achievement-header">
+            <h3>{{ achievement.name }}</h3>
+            <el-tag 
+              :type="achievement.type === 1 ? 'success' : 'primary'" 
+              size="small"
+            >
+              {{ getAchievementTypeLabel(achievement.type) }}
+            </el-tag>
           </div>
-          <div class="achievement-date" v-if="achievement.earned">
-            获得时间：{{ achievement.earnedDate }}
+          <p class="achievement-description">{{ achievement.description }}</p>
+          
+          <!-- 条件说明 -->
+          <div class="achievement-condition">
+            <el-icon><InfoFilled /></el-icon>
+            <span>{{ formatConditionValue(achievement.conditionType, achievement.conditionValue) }}</span>
+          </div>
+          
+          <!-- 进度条 -->
+          <div class="achievement-progress" v-if="!achievement.obtained">
+            <div class="progress-info">
+              <span class="progress-label">进度</span>
+              <span class="progress-text">
+                {{ achievement.currentValue || 0 }} / {{ achievement.targetValue || achievement.conditionValue }}
+              </span>
+            </div>
+            <el-progress 
+              :percentage="achievement.progressPercentage || 0" 
+              :color="progressColor"
+              :show-text="false"
+            />
+          </div>
+          
+          <!-- 获得信息 -->
+          <div class="achievement-footer" v-if="achievement.obtained">
+            <div class="achievement-date">
+              <el-icon><Calendar /></el-icon>
+              <span>{{ formatDate(achievement.obtainTime) }}</span>
+            </div>
+            <div class="achievement-points" v-if="achievement.points">
+              <el-icon><Star /></el-icon>
+              <span>+{{ achievement.points }} 积分</span>
+            </div>
+          </div>
+          
+          <!-- 未获得时显示积分奖励 -->
+          <div class="achievement-reward" v-else-if="achievement.points">
+            <el-icon><Present /></el-icon>
+            <span>奖励 {{ achievement.points }} 积分</span>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- 空状态 -->
+    <el-empty 
+      v-if="!loading && filteredAchievements.length === 0" 
+      description="暂无成就数据"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Trophy, Check, InfoFilled, Calendar, Star, Present } from '@element-plus/icons-vue';
+import { achievementApi } from '@/apis/achievement';
+import type { AchievementVO } from '@/types';
+import { AchievementEnumHelper } from '@/types/enums/achievement-enums';
+import { PUBLIC_IMG_PATH } from '@/config';
 
-const achievements = ref<any[]>([]);
+// 响应式数据
+const loading = ref(false);
+const achievements = ref<AchievementVO[]>([]);
+const selectedType = ref<number | undefined>(undefined);
+const showOnlyEarned = ref(false);
 
+// 枚举选项
+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.earned).length;
+  return achievements.value.filter(a => a.obtained).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 filteredAchievements = computed(() => {
+  let result = achievements.value;
+  
+  // 按类型筛选
+  if (selectedType.value !== undefined) {
+    result = result.filter(a => a.type === selectedType.value);
+  }
+  
+  // 仅显示已获得
+  if (showOnlyEarned.value) {
+    result = result.filter(a => a.obtained);
+  }
+  
+  // 排序：已获得的在前，按等级排序
+  return result.sort((a, b) => {
+    if (a.obtained !== b.obtained) {
+      return a.obtained ? -1 : 1;
+    }
+    return (a.level || 0) - (b.level || 0);
+  });
+});
+
+// 获取成就类型标签
+function getAchievementTypeLabel(type?: number): string {
+  if (type === undefined) return '未知';
+  return AchievementEnumHelper.getAchievementTypeDescription(type);
+}
+
+// 格式化条件值显示
+function formatConditionValue(conditionType?: number, conditionValue?: number): string {
+  if (conditionType === undefined || conditionValue === undefined) return '';
+  return AchievementEnumHelper.formatConditionValue(conditionType, conditionValue);
+}
+
+// 格式化日期
+function formatDate(dateStr?: string): string {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('zh-CN', { 
+    year: 'numeric', 
+    month: '2-digit', 
+    day: '2-digit' 
+  });
+}
+
+// 获取图标完整路径
+function getIconUrl(icon?: string): string {
+  if (!icon) return '';
+  // 如果是http或https开头，直接返回
+  if (icon.startsWith('http://') || icon.startsWith('https://')) {
+    return icon;
+  }
+  // 否则拼接默认成就图标路径
+  const path = `${PUBLIC_IMG_PATH}/achievement`;
+  return icon.startsWith('/') ? `${path}${icon}` : `${path}/${icon}`;
+}
+
+// 筛选成就
+function filterAchievements() {
+  // 触发计算属性重新计算
+}
+
+// 加载成就数据
+async function loadAchievements() {
+  try {
+    loading.value = true;
+    const result = await achievementApi.getMyAchievements();
+    achievements.value = result.dataList || [];
+  } catch (error) {
+    console.error('加载成就数据失败:', error);
+    ElMessage.error('加载成就数据失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
 onMounted(() => {
-  // TODO: 加载成就数据
+  loadAchievements();
 });
 </script>
 
 <style lang="scss" scoped>
 .my-achievements {
+  padding: 20px 0;
+
   .achievements-header {
     display: flex;
     justify-content: space-between;
@@ -63,27 +261,60 @@ onMounted(() => {
     margin-bottom: 32px;
     
     h2 {
-      font-size: 24px;
+      font-size: 28px;
       font-weight: 600;
       color: #141F38;
+      margin: 0;
     }
   }
 }
 
 .achievement-stats {
-  font-size: 16px;
-  color: #666;
+  display: flex;
+  gap: 32px;
   
-  strong {
-    color: #C62828;
-    font-size: 20px;
+  .stat-item {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    
+    .stat-label {
+      font-size: 14px;
+      color: #666;
+    }
+    
+    .stat-value {
+      font-size: 24px;
+      font-weight: 600;
+      color: #C62828;
+    }
+    
+    .stat-total {
+      font-size: 16px;
+      color: #999;
+    }
   }
 }
 
+.filter-tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.loading-container {
+  padding: 40px 0;
+}
+
 .achievements-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
   gap: 20px;
+  margin-bottom: 20px;
 }
 
 .achievement-item {
@@ -91,110 +322,233 @@ onMounted(() => {
   gap: 16px;
   padding: 20px;
   border: 2px solid #e0e0e0;
-  border-radius: 8px;
+  border-radius: 12px;
   transition: all 0.3s;
+  background: white;
   
   &.earned {
-    border-color: #C62828;
-    background: linear-gradient(135deg, #fff5f5, #ffffff);
+    border-color: #52c41a;
+    background: linear-gradient(135deg, #f6ffed, #ffffff);
     
     .achievement-icon {
-      img {
+      :deep(.el-image__inner) {
         filter: none;
       }
     }
   }
   
   &.locked {
-    opacity: 0.6;
+    opacity: 0.75;
     
     .achievement-icon {
-      img {
+      :deep(.el-image__inner) {
         filter: grayscale(100%);
       }
     }
   }
   
   &:hover.earned {
-    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.2);
+    box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
+    transform: translateY(-2px);
+  }
+  
+  &:hover.locked {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
 }
 
 .achievement-icon {
   position: relative;
-  width: 64px;
-  height: 64px;
+  width: 80px;
+  height: 80px;
   flex-shrink: 0;
   
-  img {
+  :deep(.el-image) {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+  }
+  
+  .image-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f5f5f5;
+    border-radius: 8px;
+    color: #ccc;
+    font-size: 32px;
   }
 }
 
 .achievement-badge {
   position: absolute;
-  bottom: -4px;
+  top: -4px;
   right: -4px;
-  width: 24px;
-  height: 24px;
-  background: #4caf50;
+  width: 28px;
+  height: 28px;
+  background: #52c41a;
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 600;
+  border: 3px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.achievement-level {
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 2px 8px;
+  background: #1890ff;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 10px;
   border: 2px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .achievement-info {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   
-  h3 {
-    font-size: 16px;
-    font-weight: 600;
-    color: #141F38;
-    margin-bottom: 8px;
+  .achievement-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #141F38;
+      margin: 0;
+      flex: 1;
+    }
   }
 }
 
 .achievement-description {
   font-size: 14px;
   color: #666;
-  line-height: 1.5;
-  margin-bottom: 12px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.achievement-condition {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #999;
+  padding: 6px 12px;
+  background: #fafafa;
+  border-radius: 6px;
+  
+  :deep(.el-icon) {
+    font-size: 14px;
+  }
 }
 
 .achievement-progress {
-  margin-bottom: 8px;
-  
-  .progress-bar {
-    width: 100%;
-    height: 6px;
-    background: #f5f5f5;
-    border-radius: 3px;
-    overflow: hidden;
-    margin-bottom: 4px;
+  .progress-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    
+    .progress-label {
+      font-size: 13px;
+      color: #666;
+      font-weight: 500;
+    }
+    
+    .progress-text {
+      font-size: 13px;
+      color: #1890ff;
+      font-weight: 600;
+    }
   }
   
-  .progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #C62828, #E53935);
-    transition: width 0.3s;
-  }
-  
-  .progress-text {
-    font-size: 12px;
-    color: #999;
+  :deep(.el-progress) {
+    .el-progress-bar__outer {
+      background-color: #f0f0f0;
+    }
   }
 }
 
-.achievement-date {
-  font-size: 12px;
-  color: #999;
+.achievement-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 8px;
+  border-top: 1px solid #f0f0f0;
+  
+  .achievement-date,
+  .achievement-points {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: #666;
+    
+    :deep(.el-icon) {
+      font-size: 14px;
+    }
+  }
+  
+  .achievement-points {
+    color: #faad14;
+    font-weight: 600;
+  }
+}
+
+.achievement-reward {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #faad14;
+  font-weight: 600;
+  padding: 6px 12px;
+  background: #fffbe6;
+  border-radius: 6px;
+  
+  :deep(.el-icon) {
+    font-size: 14px;
+  }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .achievements-grid {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .achievements-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .achievement-stats {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .filter-tabs {
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+  }
 }
 </style>