添加红点

src/components/GuideBar/index.scss

@@ -33,6 +33,7 @@
     backdrop-filter: blur(16px);
 
     &-item {
+      position: relative;
       display: flex;
       width: 76px;
       height: 48px;
@@ -46,6 +47,21 @@
       font-style: normal;
       font-weight: 600;
       line-height: 20px; /* 125% */
+
+      .reddot {
+        position: absolute;
+        top: 10px;
+        right: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        // padding: 0 2px;
+        width: 8px;
+        height: 8px;
+        background: #FF2541;
+        border-radius: 10px;
+      }
     }
 
     &-item-active {

src/components/GuideBar/index.tsx

@@ -1,12 +1,36 @@
+import { useState, useEffect } from "react";
 import { View, Text } from "@tarojs/components";
-import Taro from "@tarojs/taro";
+import Taro, { useDidShow } from "@tarojs/taro";
 import { redirectTo } from "@/utils/navigation";
+import messageService from "@/services/messageService";
 import "./index.scss";
 import PublishMenu from "../PublishMenu";
 export type currentPageType = "games" | "message" | "personal";
 
 const GuideBar = (props) => {
   const { currentPage, guideBarClassName, onPublishMenuVisibleChange, onTabChange } = props;
+  const [hasReddot, setHasReddot] = useState(false);
+
+  // 获取红点状态
+  const checkReddot = async () => {
+    try {
+      const res = await messageService.getReddotInfo();
+      if (res.code === 0) {
+        setHasReddot(res.data.has_reddot || false);
+      }
+    } catch (e) {
+      console.error("获取红点状态失败:", e);
+    }
+  };
+
+  useEffect(() => {
+    checkReddot();
+  }, []);
+
+  // 每次页面显示时刷新红点状态
+  useDidShow(() => {
+    checkReddot();
+  });
 
   const guideItems = [
     {
@@ -64,8 +88,12 @@ const GuideBar = (props) => {
             <View
               className={`guide-bar-pages-item ${currentPage === item.code ? "guide-bar-pages-item-active" : ""}`}
               onClick={() => handlePageChange(item.code)}
+              key={item.code}
             >
               <Text>{item.text}</Text>
+              {/* {item.code === "message" && hasReddot && (
+                <View className="reddot"></View>
+              )} */}
             </View>
           ))}
         </View>