添加红点

src/main_pages/components/MessagePageContent.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { View, Text, Image, ScrollView } from "@tarojs/components";
 import { EmptyState } from "@/components";
 import noticeService from "@/services/noticeService";
+import messageService from "@/services/messageService";
 import { formatRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
 import { useGlobalState } from "@/store/global";
@@ -32,6 +33,8 @@ const MessagePageContent = () => {
   const [loading, setLoading] = useState(false);
   const [reachedBottom, setReachedBottom] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const [commentUnreadCount, setCommentUnreadCount] = useState(0);
+  const [followUnreadCount, setFollowUnreadCount] = useState(0);
 
   const getNoticeList = async () => {
     if (loading) return;
@@ -52,8 +55,22 @@ const MessagePageContent = () => {
     }
   };
 
+  // 获取红点信息
+  const getReddotInfo = async () => {
+    try {
+      const res = await messageService.getReddotInfo();
+      if (res.code === 0) {
+        setCommentUnreadCount(res.data.comment_unread_count || 0);
+        setFollowUnreadCount(res.data.follow_unread_count || 0);
+      }
+    } catch (e) {
+      console.error("获取红点信息失败:", e);
+    }
+  };
+
   useEffect(() => {
     getNoticeList();
+    getReddotInfo();
   }, []);
 
   const filteredMessages = messageList;
@@ -127,22 +144,36 @@ const MessagePageContent = () => {
           className={`tab-item ${activeTab === "comment" ? "active" : ""}`}
           onClick={() => handleTabClick("comment")}
         >
-          <Image
-            className="tab-icon"
-            src={require('@/static/message/comment-icon.svg')}
-            mode="aspectFit"
-          />
+          <View className="tab-icon-wrapper">
+            <Image
+              className="tab-icon"
+              src={require('@/static/message/comment-icon.svg')}
+              mode="aspectFit"
+            />
+            {commentUnreadCount > 0 && (
+              <View className="badge">
+                {commentUnreadCount > 99 ? '99+' : commentUnreadCount}
+              </View>
+            )}
+          </View>
           <Text className="tab-text">评论和回复</Text>
         </View>
         <View
           className={`tab-item ${activeTab === "follow" ? "active" : ""}`}
           onClick={() => handleTabClick("follow")}
         >
-          <Image
-            className="tab-icon"
-            src={require('@/static/message/follow-icon.svg')}
-            mode="aspectFit"
-          />
+          <View className="tab-icon-wrapper">
+            <Image
+              className="tab-icon"
+              src={require('@/static/message/follow-icon.svg')}
+              mode="aspectFit"
+            />
+            {followUnreadCount > 0 && (
+              <View className="badge">
+                {followUnreadCount > 99 ? '99+' : followUnreadCount}
+              </View>
+            )}
+          </View>
           <Text className="tab-text">新增关注</Text>
         </View>
       </View>