成就等界面接口调整

schoolNewsWeb/src/views/public/article/card/HotArticleCard.vue

@@ -1,27 +1,56 @@
 <template>
-  <div class="article-card">
+  <div class="article-card" @click="handleClick">
     <div class="article-image">
-      <div class="image-placeholder"></div>
+      <img v-if="resource?.coverImage" :src="FILE_DOWNLOAD_URL + resource.coverImage" :alt="resource.title" />
+      <div v-else class="image-placeholder"></div>
       <div class="article-tag">精选文章</div>
     </div>
     <div class="article-content">
-      <h3 class="article-title">新时代中国特色社会主义发展历程</h3>
+      <h3 class="article-title">{{ resource?.title || '标题' }}</h3>
       <p class="article-desc">
-        习近平新时代中国特色社会主义思想是当代中国马克思主义、二十一世纪马克思主义，是中华文化和中国精神的时代精华，其核心要义与实践要求内涵丰富、意义深远。
+        {{ resource?.summary || '暂无简介' }}
       </p>
       <div class="article-footer">
         <div class="meta-tag">
           <el-icon><Document /></el-icon>
           <span>热门文章</span>
         </div>
-        <span class="view-count">2.1w次浏览</span>
+        <span class="view-count">{{ formatViewCount(resource?.viewCount || 0) }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { Document } from '@element-plus/icons-vue';
+import type { ResourceRecommendVO } from '@/types';
+import { FILE_DOWNLOAD_URL } from '@/config';
+
+const props = defineProps<{
+  resource?: ResourceRecommendVO;
+}>();
+
+const router = useRouter();
+
+// 格式化浏览量
+function formatViewCount(count: number): string {
+  if (count < 1000) {
+    return `${count}次浏览`;
+  } else if (count < 10000) {
+    return `${(count / 1000).toFixed(1)}k次浏览`;
+  } else {
+    return `${(count / 10000).toFixed(1)}w次浏览`;
+  }
+}
+
+// 点击卡片
+function handleClick() {
+  if (props.resource?.resourceID) {
+    router.push(`/article/show?articleId=${props.resource.resourceID}`);
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -47,6 +76,12 @@ import { Document } from '@element-plus/icons-vue';
     overflow: hidden;
     flex-shrink: 0;
 
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
     .image-placeholder {
       width: 100%;
       height: 100%;