82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { useEffect } from "react";
|
|
import { View, Text } from "@tarojs/components";
|
|
import Taro, { useDidShow } from "@tarojs/taro";
|
|
import { redirectTo } from "@/utils/navigation";
|
|
import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
|
|
import "./index.scss";
|
|
import PublishMenu from "../PublishMenu";
|
|
export type currentPageType = "games" | "message" | "personal";
|
|
|
|
const GuideBar = (props) => {
|
|
const { currentPage, guideBarClassName, onPublishMenuVisibleChange, onTabChange } = props;
|
|
const reddotInfo = useReddotInfo();
|
|
const fetchReddotInfo = useFetchReddotInfo();
|
|
|
|
useEffect(() => {
|
|
fetchReddotInfo();
|
|
}, []);
|
|
|
|
// 每次页面显示时刷新红点状态
|
|
useDidShow(() => {
|
|
fetchReddotInfo();
|
|
});
|
|
|
|
const guideItems = [
|
|
{
|
|
code: "list",
|
|
text: "球局",
|
|
},
|
|
{
|
|
code: "message",
|
|
text: "消息",
|
|
},
|
|
{
|
|
code: "personal",
|
|
text: "我的",
|
|
},
|
|
];
|
|
|
|
const handlePageChange = (code: string) => {
|
|
if (code === currentPage) {
|
|
return;
|
|
}
|
|
|
|
// 如果提供了 onTabChange 回调，优先使用（单页面模式）
|
|
if (onTabChange) {
|
|
onTabChange(code);
|
|
return;
|
|
}
|
|
|
|
|
|
};
|
|
|
|
return (
|
|
<View className="guide-bar-container">
|
|
<View className={`guide-bar ${guideBarClassName}`}>
|
|
{/* guide area on the left */}
|
|
<View className="guide-bar-pages">
|
|
{guideItems.map((item) => (
|
|
<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" && reddotInfo?.has_reddot && (
|
|
<View className="reddot"></View>
|
|
)}
|
|
</View>
|
|
))}
|
|
</View>
|
|
{/* publish button on the right */}
|
|
{/* <View className='guide-bar-publish' onClick={handlePublish}>
|
|
<Image className='guide-bar-publish-icon' src={img.ICON_GUIDE_BAR_PUBLISH} />
|
|
</View> */}
|
|
<PublishMenu onVisibleChange={onPublishMenuVisibleChange} />
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default GuideBar;
|