更新公告完善

src/views/MainPage.vue

@@ -79,6 +79,7 @@
       :show-close="true"
       :close-on-click-modal="true"
       :close-on-press-escape="true"
+      @close="closeWelcomeDialog"
       center
       class="welcome-dialog"
     >
@@ -86,10 +87,10 @@
         <div class="welcome-icon">🎉</div>
         <h3>融汇通更新</h3>
         <div class="welcome-features">
-          <div class="announcements-container" v-if="announcements.length > 0">
+          <div class="announcements-container" v-if="unreadAnnouncements.length > 0">
             <div 
               class="announcement-item" 
-              v-for="announcement in announcements" 
+              v-for="announcement in unreadAnnouncements" 
               :key="announcement.id"
             >
               <div class="announcement-header">
@@ -104,13 +105,13 @@
             </div>
           </div>
           <div v-else class="no-announcements">
-            <span>暂无更新信息</span>
+            <span>暂无未读更新信息</span>
           </div>
         </div>
       </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="showWelcomeDialog = false">关闭</el-button>
+          <el-button @click="closeWelcomeDialog">已读</el-button>
         </span>
       </template>
     </el-dialog>
@@ -197,6 +198,16 @@ export default {
       }
     };
 
+    // 计算未读公告
+    const unreadAnnouncements = computed(() => {
+      return announcements.value.filter(announcement => !announcement.is_read);
+    });
+
+    // 计算是否应该显示弹窗
+    const shouldShowDialog = computed(() => {
+      return unreadAnnouncements.value.length > 0;
+    });
+
     const getUpdateNotice = async () => {
       try {
         const response = await api.get('/announcements');
@@ -217,17 +228,19 @@ export default {
     // 定时刷新积分
     let refreshInterval;
 
-    onMounted(() => {
+    onMounted(async () => {
       getUserPoints();
 
-      getUpdateNotice();
+      await getUpdateNotice();
 
       // 每5分钟刷新一次积分（可根据需求调整时间）
       refreshInterval = setInterval(getUserPoints, 5 * 60 * 1000);
       
-      // 显示欢迎弹窗
+      // 根据是否有未读公告决定是否显示欢迎弹窗
       setTimeout(() => {
-        showWelcomeDialog.value = true;
+        if (shouldShowDialog.value) {
+          showWelcomeDialog.value = true;
+        }
       }, 500); // 延迟500ms显示，让页面先加载完成
     });
 
@@ -247,6 +260,28 @@ export default {
       });
     };
 
+    // 标记公告为已读
+    const markAnnouncementAsRead = async (announcementId) => {
+      try {
+        await api.post(`/announcements/${announcementId}/read`);
+        console.log(`公告 ${announcementId} 已标记为已读`);
+      } catch (error) {
+        console.error('标记公告已读失败:', error);
+        ElMessage.error('标记公告已读失败，请稍后重试');
+      }
+    };
+
+    // 关闭欢迎弹窗并标记所有未读公告为已读
+    const closeWelcomeDialog = async () => {
+      await markAllAnnouncementsAsRead();
+      showWelcomeDialog.value = false;
+    };
+
+    // 点击已读按钮
+    const handleReadClick = () => {
+      showWelcomeDialog.value = false;
+    };
+
     return {
       modules: [Autoplay, Pagination],
       userPoints,
@@ -257,8 +292,12 @@ export default {
       showWelcomeDialog,
       updateNotice,
       announcements,
+      unreadAnnouncements,
+      shouldShowDialog,
       formatDate,
       getUserPoints, // 如果需要外部调用可以暴露
+      closeWelcomeDialog,
+      handleReadClick,
     };
   },
 };