添加红点

src/other_pages/message/index.tsx

@@ -3,8 +3,9 @@ import { View, Text, Image, ScrollView } from "@tarojs/components";
 import GuideBar from "@/components/GuideBar";
 import { withAuth, EmptyState, GeneralNavbar } from "@/components";
 import noticeService from "@/services/noticeService";
+import messageService from "@/services/messageService";
 import { formatRelativeTime } from "@/utils/timeUtils";
-import Taro from "@tarojs/taro";
+import Taro, { useDidShow } from "@tarojs/taro";
 import "./index.scss";
 
 // 消息类型定义
@@ -30,6 +31,8 @@ const Message = () => {
   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 () => {
@@ -51,10 +54,29 @@ const Message = () => {
     }
   };
 
+  // 获取红点信息
+  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();
   }, []);
 
+  // 每次页面显示时刷新红点信息
+  useDidShow(() => {
+    getReddotInfo();
+  });
+
   // 过滤系统消息
   const filteredMessages = messageList;
 
@@ -140,22 +162,36 @@ const Message = () => {
           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>