公告栏显示最新校园活动信息

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue

@@ -2,19 +2,20 @@
     <div class="notice-board">
         <h2 class="notice-title">公告栏</h2>
         <div class="notice-list">
-            <!-- 左箭头按钮 -->
             <button class="arrow-button left-arrow" @click="prevImage">←</button>
             <div class="notice-item">
                 <img
+                    v-if="images.length"
                     :src="images[currentIndex].src"
                     :alt="images[currentIndex].alt"
                     class="notice-image"
+                    style="cursor:pointer"
+                    @click="goToPostDetail(images[currentIndex].postId)"
                 />
+                <div v-else class="notice-empty">暂无活动公告</div>
             </div>
-            <!-- 右箭头按钮 -->
             <button class="arrow-button right-arrow" @click="nextImage">→</button>
         </div>
-        <!-- 圆形按钮 -->
         <div class="indicator-container">
             <button
                 v-for="(image, index) in images"
@@ -29,26 +30,54 @@
 
 <script setup lang="js" name="NoticeBoard">
 import { ref, onMounted, onUnmounted } from 'vue';
+import request from '@/utils/request';
+import { useRouter } from 'vue-router';
 
-const images = ref([
+const images = ref([]);
-  { src: require('@/assets/whu1.jpg'), alt: '公告图片1' },
-  { src: require('@/assets/whu2.jpg'), alt: '公告图片2' },
-  { src: require('@/assets/whu3.jpg'), alt: '公告图片3' },
-  { src: require('@/assets/whu4.jpg'), alt: '公告图片4' },
-  { src: require('@/assets/whu5.jpg'), alt: '公告图片5' },       
-]);
-
 const currentIndex = ref(0);
+const router = useRouter();
+
+// 获取校园活动分类前5个帖子图片
+const fetchImages = async () => {
+  try {
+    // 假设后端接口支持 size 参数
+    const lastVal = Date.now();
+    const offset = 0;
+    const size = 5;
+    let url = `/post/list?lastVal=${lastVal}&offset=${offset}&size=${size}`;
+    url += `&categoryId=1`;
+    const res = await request.get(url);
+    if (res.code === 200 && res.data.records) {
+      images.value = res.data.records
+        .filter(post => post.image) // 只要有图片的帖子
+        .map(post => ({
+          src: post.image,
+          alt: post.title || '校园活动',
+          postId: post.id
+        }));
+    }
+  } catch (e) {
+    images.value = [];
+  }
+};
+
+//跳转到帖子详情
+const goToPostDetail = (postId) => {
+  if (postId) {
+    router.push({ name: 'PostDetail', params: { id: postId } });
+  }
+};
 
 // 切换到下一张图片
 const nextImage = () => {
-  currentIndex.value = (currentIndex.value + 1) % images.value.length;
+  if (images.value.length)
+    currentIndex.value = (currentIndex.value + 1) % images.value.length;
 };
 
 // 切换到上一张图片
 const prevImage = () => {
-  currentIndex.value =
+  if (images.value.length)
-    (currentIndex.value - 1 + images.value.length) % images.value.length;
+    currentIndex.value = (currentIndex.value - 1 + images.value.length) % images.value.length;
 };
 
 // 跳转到指定图片
@@ -59,7 +88,8 @@ const goToImage = (index) => {
 // 定时器
 let interval = null;
 
-onMounted(() => {
+onMounted(async () => {
+  await fetchImages();
   interval = setInterval(nextImage, 5000);
 });
 
@@ -113,6 +143,16 @@ onUnmounted(() => {
     border-radius: 8px;
 }
 
+.notice-empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    font-size: 36px;
+}
+
 .arrow-button {
     position: absolute;
     top: 50%;