diff --git a/src/components/GeneralNavbar/index.tsx b/src/components/GeneralNavbar/index.tsx index 2a93272..9c17322 100644 --- a/src/components/GeneralNavbar/index.tsx +++ b/src/components/GeneralNavbar/index.tsx @@ -28,7 +28,7 @@ const GeneralNavbar: React.FC = ({ titleClassName = '', leftContent, rightContent, - backgroundColor = '#fafafa', // 默认背景色改为 #fafafa + backgroundColor = 'transparent', // 默认背景色为透明 showBack = true, showLeft = true, showAvatar = false, @@ -106,11 +106,16 @@ const GeneralNavbar: React.FC = ({ className={`${styles.customNavbar} ${className}`} style={{ height: `${totalHeight}px`, - paddingTop: `${statusBarHeight}px`, backgroundColor: backgroundColor || 'transparent' }} > - + {renderLeftContent()} {titlePosition === 'left' && renderTitle()} diff --git a/src/container/listCustomNavbar/index.scss b/src/components/HomeNavbar/index.scss similarity index 100% rename from src/container/listCustomNavbar/index.scss rename to src/components/HomeNavbar/index.scss diff --git a/src/container/listCustomNavbar/index.tsx b/src/components/HomeNavbar/index.tsx similarity index 85% rename from src/container/listCustomNavbar/index.tsx rename to src/components/HomeNavbar/index.tsx index 74acb5b..74c7b1c 100644 --- a/src/container/listCustomNavbar/index.tsx +++ b/src/components/HomeNavbar/index.tsx @@ -4,7 +4,6 @@ import img from "@/config/images"; import { useGlobalState } from "@/store/global"; import { useUserInfo } from "@/store/userStore"; import { useListState } from "@/store/listStore"; -import CustomNavbar from "@/components/CustomNavbar"; import { Input } from "@nutui/nutui-react-taro"; import Taro from "@tarojs/taro"; import "./index.scss"; @@ -52,12 +51,19 @@ function CityPicker(props) { ); } -const ListHeader = (props: IProps) => { +/** + * 首页专用导航栏组件 + * 支持三种模式: + * 1. Logo + 城市选择 + 球局数量(默认模式) + * 2. 搜索输入框模式(showInput = true) + * 3. 标题模式(showTitle = true,用于"我的"页面等) + */ +const HomeNavbar = (props: IProps) => { const { config, onCityPickerVisibleChange, onScrollToTop } = props; const { showInput = false, inputLeftIcon, leftIconClick, title, showTitle = false } = config || {}; const { getLocationLoading, statusNavbarHeightInfo } = useGlobalState(); - const { gamesNum, searchValue, cities, area, updateArea, getMatchesData, fetchGetGamesCount, refreshBothLists } = useListState(); - const { navBarHeight } = statusNavbarHeightInfo; + const { gamesNum, searchValue, cities, area, updateArea, fetchGetGamesCount, refreshBothLists } = useListState(); + const { statusBarHeight = 0, navBarHeight = 44 } = statusNavbarHeightInfo || {}; const [cityPopupVisible, setCityPopupVisible] = useState(false); @@ -80,9 +86,9 @@ const ListHeader = (props: IProps) => { const handleInputClick = () => { const currentPagePath = getCurrentFullPath(); if (currentPagePath === "/game_pages/searchResult/index") { - Taro.navigateBack(); + (Taro as any).navigateBack(); } else { - Taro.navigateTo({ + (Taro as any).navigateTo({ url: "/game_pages/search/index", }); } @@ -97,13 +103,13 @@ const ListHeader = (props: IProps) => { onScrollToTop(); } else { // 降级方案:使用页面滚动(兼容旧版本) - Taro.pageScrollTo({ + (Taro as any).pageScrollTo({ scrollTop: 0, duration: 300, }); } } - Taro.redirectTo({ + (Taro as any).redirectTo({ url: "game_pages/list/index", // 列表页 }); }; @@ -127,7 +133,7 @@ const ListHeader = (props: IProps) => { const area_city = area.at(-1); // 处理城市切换 - const handleCityChange = async (newArea: any) => { + const handleCityChange = async (_newArea: any) => { // 切换城市后,同时更新两个列表接口获取数据 if (refreshBothLists) { await refreshBothLists(); @@ -139,7 +145,19 @@ const ListHeader = (props: IProps) => { }; return ( - + {/* 标题模式(用于"我的"页面等) */} {showTitle && ( @@ -203,7 +221,7 @@ const ListHeader = (props: IProps) => { src={img.ICON_LIST_SEARCH_SEARCH} /> { onCityChange={handleCityChange} /> )} - + ); }; -export default ListHeader; +export default HomeNavbar; diff --git a/src/game_pages/list/index.tsx b/src/game_pages/list/index.tsx index e8dadef..502ff3a 100644 --- a/src/game_pages/list/index.tsx +++ b/src/game_pages/list/index.tsx @@ -6,7 +6,7 @@ import Taro from "@tarojs/taro"; import { useListStore } from "@/store/listStore"; import { useGlobalState } from "@/store/global"; import { View, Image, Text, ScrollView } from "@tarojs/components"; -import CustomerNavBar from "@/container/listCustomNavbar"; +import HomeNavbar from "@/components/HomeNavbar"; import GuideBar from "@/components/GuideBar"; import ListContainer from "@/container/listContainer"; import DistanceQuickFilter from "@/components/DistanceQuickFilter"; @@ -435,7 +435,7 @@ const ListPage = () => { <> {/* 自定义导航 */} - { return ( <> {/* 自定义导航 */} - { // 渲染自定义导航栏(参考原始页面的实现) const renderCustomNavbar = () => { if (currentTab === "list") { - // 列表页:使用 CustomerNavBar(与原始列表页一致) + // 列表页:使用 HomeNavbar(与原始列表页一致) return ( - { ); } else if (currentTab === "personal") { - // 我的页:使用 CustomerNavBar 显示标题 + // 我的页:使用 GeneralNavbar 显示标题 return ( - ); }