列表

2025-09-14 01:18:23 +08:00
parent c44bd01613
commit 01aad920ad
17 changed files with 569 additions and 352 deletions
--- a/src/app.ts
+++ b/src/app.ts
@@ -5,8 +5,6 @@ import "qweather-icons/font/qweather-icons.css";
 import { useDictionaryStore } from "./store/dictionaryStore";
 import { useGlobalStore } from "./store/global";

-// import { getNavbarHeight } from "@/utils/getNavbarHeight";
-
 interface AppProps {
  children: ReactNode;
 }
--- a/src/components/CustomNavbar/index.module.scss
+++ b/src/components/CustomNavbar/index.module.scss
@@ -1,8 +1,10 @@
 .customerNavbar {
-  position: sticky;
+  position: fixed;
  top: 0;
+  left: 0;
  z-index: 999;
-  background-color: #ffffff;
  overflow: hidden;
  z-index: 999;
+  width: 100%;
+  background-color: #fff;
 }
--- a/src/components/CustomNavbar/index.tsx
+++ b/src/components/CustomNavbar/index.tsx
@@ -9,12 +9,12 @@ interface IProps {
 const CustomNavbar = (props: IProps) => {
  const { children } = props;
  const { statusNavbarHeightInfo } = useGlobalState();
-  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
+  const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo;

  return (
    <View
      className={styles.customerNavbar}
-      style={{ height: `${navbarHeight}px`, paddingTop: `${statusBarHeight}px`, }}
+      style={{ height: `${navBarHeight}px`, paddingTop: `${statusBarHeight}px`, }}
    >
      {children}
    </View>
--- a/src/components/CustomerNavbarBack/index.tsx
+++ b/src/components/CustomerNavbarBack/index.tsx
@@ -6,7 +6,7 @@ import Taro from "@tarojs/taro";

 const ListHeader = () => {
  const { statusNavbarHeightInfo } = useGlobalState();
-  const { statusBarHeight, navbarHeight, totalHeight } = statusNavbarHeightInfo;
+  const { statusBarHeight, navBarHeight, totalHeight } = statusNavbarHeightInfo;
  const handleBack = () => {
    Taro.navigateBack();
  }
@@ -19,7 +19,7 @@ const ListHeader = () => {
      <View
        className={styles.container}
        style={{
-          height: `${navbarHeight}px`,
+          height: `${navBarHeight}px`,
          paddingTop: `${statusBarHeight}px`,
        }}
      >
--- a/src/components/SearchBar/index.module.scss
+++ b/src/components/SearchBar/index.module.scss
@@ -4,7 +4,7 @@
  --nutui-searchbar-content-border-radius: 44px;
  --nutui-searchbar-input-text-color: #000000;
  --nutui-searchbar-input-padding: 0 0 0 10px;
-  --nutui-searchbar-padding: 10px 0 0 0;
+  --nutui-searchbar-padding: 10px 0 10px 0;
  background-color: unset;

  :global(.nut-searchbar-content) {
--- a/src/container/inputCustomerNavbar/index.scss
+++ b/src/container/inputCustomerNavbar/index.scss
@@ -1,6 +1,6 @@
  .inputCustomerNavbarContainer {
-    padding-left: 17px;
    display: flex;
+    align-items: center;
    gap: 8px;


@@ -15,6 +15,7 @@
    }

    .navContent {
+      padding-left: 17px;
      display: flex;
      align-items: center;
      gap: 4px;
--- a/src/container/inputCustomerNavbar/index.tsx
+++ b/src/container/inputCustomerNavbar/index.tsx
@@ -1,8 +1,6 @@
 import { View, Image } from "@tarojs/components";
 import img from "@/config/images";
-import { getCurrentLocation } from "@/utils/locationUtils";
 import "./index.scss";
-import { useEffect } from "react";
 import { useGlobalState } from "@/store/global";
 import { useListState } from "@/store/listStore";
 import CustomNavbar from "@/components/CustomNavbar";
@@ -15,25 +13,9 @@ interface IProps {

 const ListHeader = (props: IProps) => {
  const { icon } = props;
-  const { updateState, statusNavbarHeightInfo } = useGlobalState();
+  const { statusNavbarHeightInfo } = useGlobalState();
  const { searchValue } = useListState();
-  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
-
-  // 获取位置信息
-  // const getCurrentLocal = () => {
-  //   updateState({
-  //     getLocationLoading: true,
-  //   });
-  //   getCurrentLocation().then((res) => {
-  //     updateState({
-  //       getLocationLoading: false,
-  //       location: res || {},
-  //     });
-  //   });
-  // };
-  // useEffect(() => {
-  //   getCurrentLocal();
-  // }, []);
+  const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo;

  const handleInputClick = () => {
    Taro.navigateTo({
@@ -46,7 +28,7 @@ const ListHeader = (props: IProps) => {
      <View
        className="inputCustomerNavbarContainer"
        style={{
-          height: `${navbarHeight}px`,
+          height: `${navBarHeight}px`,
          paddingTop: `${statusBarHeight}px`,
        }}
      >
--- a/src/container/listContainer/index.scss
+++ b/src/container/listContainer/index.scss
@@ -5,6 +5,7 @@
  flex-direction: column;
  gap: 5px;
  padding-bottom: 34px;
+  min-height: 100vh;

  .recommendTextWrapper {
    display: flex;
--- a/src/container/listCustomNavbar/index.scss
+++ b/src/container/listCustomNavbar/index.scss
@@ -3,6 +3,9 @@
 }

 .listNavContainer {
+  display: flex;
+  align-items: center;
+
  .listNavLine {
    width: 1px;
    height: 25px;
@@ -51,6 +54,7 @@
 .inputCustomerNavbarContainer {
  padding-left: 17px;
  display: flex;
+  align-items: center;
  gap: 8px;

  .logo {
@@ -99,6 +103,7 @@

 .inputCustomerNavbarShowInput {
  padding-left: 10px;
+
  .logo {
    width: 32px;
    height: 32px;
@@ -117,27 +122,26 @@
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
-  
+
  /* 优化过渡动画，使用更平滑的缓动函数和更短的动画时间 */
-  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
-              transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 /* 第一个元素样式 */
-.firstElement {
-}
+.firstElement {}

 /* 第二个元素样式 */
 .secondElement {
  /* 初始状态：透明且稍微偏移 */
  opacity: 0;
-  transform: translateY(5px);
+  transform: translateY(-5px);
 }

 /* 隐藏状态 */
 .hidden {
  opacity: 0;
-  transform: translateY(5px);
+  transform: translateY(-5px);
 }

 /* 可见状态 */
--- a/src/container/listCustomNavbar/index.tsx
+++ b/src/container/listCustomNavbar/index.tsx
@@ -7,14 +7,13 @@ import CustomNavbar from "@/components/CustomNavbar";
 import { Input } from "@nutui/nutui-react-taro";
 import Taro from "@tarojs/taro";
 import "./index.scss";
-import { useMemo } from "react";

 interface IProps {
  config?: {
    showInput: boolean;
-    inputLeftIcon: string;
+    inputLeftIcon?: string;
    iconPath?: string;
-    leftIconClick: () => void;
+    leftIconClick?: () => void;
  };
 }

@@ -29,10 +28,12 @@ const ListHeader = (props: IProps) => {
    getLocationLoading,
    statusNavbarHeightInfo,
  } = useGlobalState();
-  const { gamesNum, searchValue, isShowInputCustomerNavBar } = useListState();
-  const { navbarHeight } = statusNavbarHeightInfo;
+  const { gamesNum, searchValue } = useListState();
+  const { navBarHeight } = statusNavbarHeightInfo;

-  const { city,district } = useUserInfo()
+  const userInfo = useUserInfo()
+  const city = (userInfo as any)?.city || ''
+  const district = (userInfo as any)?.district || ''

  console.log("useUserInfo",city,district )

@@ -67,23 +68,17 @@ const ListHeader = (props: IProps) => {
  };

  const navbarStyle = {
-    height: `${navbarHeight}px`,
-    paddingTop: `4px`,
+    height: `${navBarHeight}px`,
  };

-  const showInputNavBar = useMemo(() => {
-    return isShowInputCustomerNavBar || showInput;
-  }, [isShowInputCustomerNavBar, showInput]);
-
-  console.log("===showInputNavBar",showInputNavBar)

  return (
    <CustomNavbar>
      <View className="listNavWrapper">
        {/* 首页logo 导航*/}
        <View
-          className={`listNavContainer toggleElement firstElement hidden ${(!showInputNavBar && !showInput) && "visible"
-            }`}
+          className={`listNavContainer toggleElement firstElement hidden 
+            ${!showInput ? "visible" : ""}`}
          style={navbarStyle}
        >
          <View className="listNavContentWrapper">
@@ -110,8 +105,8 @@ const ListHeader = (props: IProps) => {
        </View>
        {/* 搜索导航 */}
        <View
-          className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${(showInputNavBar || showInput) && "visible"
-            } ${showInput && "inputCustomerNavbarShowInput"}`}
+          className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${showInput && "visible"
+            } ${showInput ? "inputCustomerNavbarShowInput" : ""}`}
          style={navbarStyle}
        >
          <View className="navContent">
@@ -128,8 +123,9 @@ const ListHeader = (props: IProps) => {
                src={img.ICON_LIST_SEARCH_SEARCH}
              />
              <Input
-                placeholder="搜索上海的球局和场地"
-                clearable={false}
+                placeholder="搜索上球局和场地"
+                // clearable={false}
+                disabled
                value={searchValue}
                onClick={handleInputClick}
              />
--- a/src/game_pages/list/index.tsx
+++ b/src/game_pages/list/index.tsx
@@ -22,51 +22,59 @@ const ListPage = () => {

  const { totalHeight } = statusNavbarHeightInfo || {};
  const {
-    isShowFilterPopup,
-    error,
-    matches,
-    recommendList,
+    listPageState,
    loading,
-    getMatchesData,
-    updateState,
-    filterCount,
-    updateFilterOptions, // 更新筛选条件
-    filterOptions,
-    clearFilterOptions,
+    error,
+    searchValue,
    distanceData,
    quickFilterData,
-    distanceQuickFilter,
-    isScrollTop,
-    searchValue,
-    isShowInputCustomerNavBar,
+    getMatchesData,
+    updateState,
+    updateListPageState,
+    updateFilterOptions, // 更新筛选条件
+    clearFilterOptions,
    initialFilterSearch,
    loadMoreMatches,
    fetchGetGamesCount
  } = store;

+  const {
+    isShowFilterPopup,
+    data: matches,
+    recommendList,
+    filterCount,
+    filterOptions,
+    distanceQuickFilter,
+    isShowInputCustomerNavBar,
+  } = listPageState || {};
+
  // 防抖的滚动处理函数
  const handleScroll = useCallback((res) => {
    const currentScrollTop = res?.scrollTop || 0;
-    
+
    // 添加缓冲区，避免临界点频繁切换
    const buffer = 10; // 10px 缓冲区
    const shouldShowInputNav = currentScrollTop >= (totalHeight + buffer);
    const shouldHideInputNav = currentScrollTop < (totalHeight - buffer);
-    
+
    // 清除之前的定时器
    if (scrollTimeoutRef.current) {
      clearTimeout(scrollTimeoutRef.current);
    }
-    
+
    // 防抖处理，避免频繁更新状态
    scrollTimeoutRef.current = setTimeout(() => {
      // 只有在状态真正需要改变时才更新
      if (shouldShowInputNav && !isShowInputCustomerNavBar) {
-        updateState({ isShowInputCustomerNavBar: true });
+        updateListPageState({
+          isShowInputCustomerNavBar: true
+        });
      } else if (shouldHideInputNav && isShowInputCustomerNavBar) {
-        updateState({ isShowInputCustomerNavBar: false });
+        updateListPageState({
+          isShowInputCustomerNavBar: false
+        });
      }
-      
+
      lastScrollTopRef.current = currentScrollTop;
    }, 16); // 约60fps的防抖间隔
  }, [totalHeight, isShowInputCustomerNavBar, updateState]);
@@ -173,7 +181,9 @@ const ListPage = () => {
   * @returns
   */
  const toggleShowPopup = () => {
-    updateState({ isShowFilterPopup: !isShowFilterPopup });
+    updateListPageState({
+      isShowFilterPopup: !isShowFilterPopup
+    });
  };

  /**
@@ -188,7 +198,7 @@ const ListPage = () => {

  // 距离筛选
  const handleDistanceOrQuickChange = (name, value) => {
-    updateState({
+    updateListPageState({
      distanceQuickFilter: {
        ...distanceQuickFilter,
        [name]: value,
@@ -203,69 +213,75 @@ const ListPage = () => {
  };

  return (
-    <View ref={scrollContextRef}>
+    <>
      {/* 自定义导航 */}
-      <CustomerNavBar />
-
-      {/* <ShareCardCanvas /> */}
-      <View className={styles.listPage}>
-        <View
-          className={`${styles.listTopSearchWrapper} ${isScrollTop ? styles.isScroll : ""
-            }`}
-        >
-          <SearchBar
-            handleFilterIcon={toggleShowPopup}
-            isSelect={filterCount > 0}
-            filterCount={filterCount}
-            onChange={handleSearchChange}
-            value={searchValue}
-            onInputClick={handleSearchClick}
-          />
-          {/* 综合筛选 */}
-          {isShowFilterPopup && (
-            <View>
-              <FilterPopup
-                loading={loading}
-                onCancel={toggleShowPopup}
-                onConfirm={handleFilterConfirm}
-                onChange={handleUpdateFilterOptions}
-                filterOptions={filterOptions}
-                onClear={clearFilterOptions}
-                visible={isShowFilterPopup}
-                onClose={toggleShowPopup}
-                statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
-              />
-            </View>
-          )}
-        </View>
-        {/* 筛选 */}
-        <View className={styles.listTopFilterWrapper}
-          style={{
-            top: totalHeight -1,
-          }}>
-          <DistanceQuickFilter
-            cityOptions={distanceData}
-            quickOptions={quickFilterData}
-            onChange={handleDistanceOrQuickChange}
-            cityName="distance"
-            quickName="quick"
-            cityValue={distanceQuickFilter?.distance}
-            quickValue={distanceQuickFilter?.quick}
-          />
-        </View>
-
+      <CustomerNavBar
+        config={{
+          showInput: isShowInputCustomerNavBar,
+        }}
+      />
+      <View ref={scrollContextRef}>
+        {/* <ShareCardCanvas /> */}
+        {/* 综合筛选 */}
+        {isShowFilterPopup && (
+          <View>
+            <FilterPopup
+              loading={loading}
+              onCancel={toggleShowPopup}
+              onConfirm={handleFilterConfirm}
+              onChange={handleUpdateFilterOptions}
+              filterOptions={filterOptions}
+              onClear={clearFilterOptions}
+              visible={isShowFilterPopup}
+              onClose={toggleShowPopup}
+              statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+            />
+          </View>
+        )}
        {/* 列表内容 */}
-        <ListContainer
-          data={matches}
-          recommendList={recommendList}
-          loading={loading}
-          error={error}
-          reload={refreshMatches}
-          loadMoreMatches={loadMoreMatches}
-        />
+        <View className={styles.listPage} style={{ paddingTop: totalHeight }}>
+          <View
+            className={`${styles.listTopSearchWrapper}`}
+          >
+            <SearchBar
+              handleFilterIcon={toggleShowPopup}
+              isSelect={filterCount > 0}
+              filterCount={filterCount}
+              onChange={handleSearchChange}
+              value={searchValue}
+              onInputClick={handleSearchClick}
+            />
+
+          </View>
+          {/* 筛选 */}
+          <View className={styles.listTopFilterWrapper}
+            style={{
+              top: totalHeight - 1,
+            }}>
+            <DistanceQuickFilter
+              cityOptions={distanceData}
+              quickOptions={quickFilterData}
+              onChange={handleDistanceOrQuickChange}
+              cityName="distance"
+              quickName="quick"
+              cityValue={distanceQuickFilter?.distance}
+              quickValue={distanceQuickFilter?.quick}
+            />
+          </View>
+
+          {/* 列表内容 */}
+          <ListContainer
+            data={matches}
+            recommendList={recommendList}
+            loading={loading}
+            error={error}
+            reload={refreshMatches}
+            loadMoreMatches={loadMoreMatches}
+          />
+        </View>
      </View>
      <GuideBar currentPage="list" />
-    </View>
+    </>
  );
 };

--- a/src/game_pages/search/index.tsx
+++ b/src/game_pages/search/index.tsx
@@ -1,4 +1,3 @@
-// import CustomerNavbarBack from "@/components/CustomerNavbarBack";
 import { View, Image, Text } from "@tarojs/components";
 import { Input } from "@nutui/nutui-react-taro";
 import { useEffect, useMemo, useRef } from "react";
@@ -12,13 +11,17 @@ const ListSearch = () => {
  const {
    searchValue,
    updateState,
+    updateSearchPageState,
    getSearchHistory,
-    searchHistory = [],
    clearHistory,
    searchSuggestion,
+  } = useListState() || {};
+
+  const {
+    searchHistory = [],
    suggestionList,
    isShowSuggestion,
-  } = useListState() || {};
+  } = useListState()?.searchPageState || {};
  const ref = useRef<any>(null);

  useEffect(() => {
@@ -53,7 +56,7 @@ const ListSearch = () => {
    if (value) {
      searchSuggestion(value);
    } else {
-      updateState({
+      updateSearchPageState({
        isShowSuggestion: false,
      });
    }
@@ -63,7 +66,10 @@ const ListSearch = () => {
   * @description 点击清空输入内容
   */
  const handleClear = () => {
-    updateState({ searchValue: "", isShowSuggestion: false });
+    updateState({ searchValue: "" });
+    updateSearchPageState({
+      isShowSuggestion: false 
+    });
  };

  /**
@@ -86,8 +92,8 @@ const ListSearch = () => {
   * @description 点击联想词
   */
  const handleSuggestionSearch = (val: string) => {
-    updateState({
-      searchValue: val,
+    updateState({ searchValue: val });
+    updateSearchPageState({
      isShowSuggestion: false,
    });
    handleSearch(val);
--- a/src/game_pages/searchResult/index.tsx
+++ b/src/game_pages/searchResult/index.tsx
@@ -13,22 +13,27 @@ import Taro from "@tarojs/taro";

 const SearchResult = () => {
  const {
-    isShowFilterPopup,
-    error,
-    distanceQuickFilter,
-    searchResultData,
-    recommendList,
+    searchPageState,
    loading,
-    updateState,
-    filterCount,
-    updateFilterOptions, // 更新筛选条件
-    filterOptions,
-    clearFilterOptions,
+    error,
    distanceData,
    quickFilterData,
+    updateState,
+    updateSearchPageState,
+    updateFilterOptions, // 更新筛选条件
+    clearFilterOptions,
    loadMoreMatches,
    getMatchesData
  } = useListStore() || {};
+
+  const {
+    isShowFilterPopup,
+    distanceQuickFilter,
+    searchResultData,
+    recommendList,
+    filterCount,
+    filterOptions,
+  } = searchPageState || {};
  const { statusNavbarHeightInfo } = useGlobalState() || {};
  const { totalHeight } = statusNavbarHeightInfo || {};
  const isSelect = filterCount > 0;
@@ -36,11 +41,17 @@ const SearchResult = () => {
  useEffect(() => {
    const pages = Taro.getCurrentPages()
    const currentPage = pages?.[pages.length - 1];
-    updateState({currentPage, isSearchResult: true})
-      getMatchesData();
+    updateState({ 
+      currentPage,
+      isSearchResult: true
+    })
+    getMatchesData();

    return () => {
-      updateState({currentPage: '', isSearchResult: false})
+      updateState({ 
+        currentPage: '',
+        isSearchResult: false
+      })
    }
  }, []);

@@ -53,12 +64,23 @@ const SearchResult = () => {
  };

  const toggleShowPopup = () => {
-    updateState({ isShowFilterPopup: !isShowFilterPopup });
+    updateSearchPageState({ 
+      isShowFilterPopup: !isShowFilterPopup 
+    });
  };

+  /**
+   * @description 综合筛选确认
+   * @returns
+   */
+  const handleFilterConfirm = () => {
+    toggleShowPopup();
+    getMatchesData();
+  }
+
  // 距离筛选
  const handleDistanceOrQuickChange = (name, value) => {
-    updateState({
+    updateSearchPageState({
      distanceQuickFilter: {
        ...distanceQuickFilter,
        [name]: value,
@@ -75,7 +97,7 @@ const SearchResult = () => {
  }

  return (
-    <View className="searchResultPage">
+    <>
      {/* 自定义导航 */}
      <CustomerNavBar
        config={{
@@ -84,65 +106,65 @@ const SearchResult = () => {
          leftIconClick: handleLeftIconClick
        }}
      />
-      {/* 筛选 */}
-      <View
-        className="searchResultFilterWrapper"
-        style={
-          {
-            top: `${totalHeight}px`
-          }
-        }
-      >
-        <DistanceQuickFilter
-          cityOptions={distanceData}
-          quickOptions={quickFilterData}
-          onChange={handleDistanceOrQuickChange}
-          cityName="distance"
-          quickName="quick"
-          cityValue={distanceQuickFilter?.distance}
-          quickValue={distanceQuickFilter?.quick}
-        />
-        {/* 筛选 icon */}
+      <View className="searchResultPage" style={{ paddingTop: totalHeight }}>
+        {/* 筛选 */}
        <View
-          className={`filterIconWrapper ${isSelect && "active"}`}
-          onClick={toggleShowPopup}
+          className="searchResultFilterWrapper"
+          style={
+            {
+              top: `${totalHeight}px`
+            }
+          }
        >
-          <Image
-            src={isSelect ? img.ICON_FILTER_SELECTED : img.ICON_FILTER}
-            className={`filterIcon ${isSelect && "active"}`}
+          <DistanceQuickFilter
+            cityOptions={distanceData}
+            quickOptions={quickFilterData}
+            onChange={handleDistanceOrQuickChange}
+            cityName="distance"
+            quickName="quick"
+            cityValue={distanceQuickFilter?.distance}
+            quickValue={distanceQuickFilter?.quick}
          />
-          {isSelect && <Text className="filterCount">{filterCount}</Text>}
-        </View>
-        {/* 筛选弹框 */}
-        {/* 综合筛选 */}
-        {isShowFilterPopup && (
-          <View>
-            <FilterPopup
-              loading={loading}
-              onCancel={toggleShowPopup}
-              onConfirm={toggleShowPopup}
-              onChange={handleUpdateFilterOptions}
-              filterOptions={filterOptions}
-              onClear={clearFilterOptions}
-              visible={isShowFilterPopup}
-              onClose={toggleShowPopup}
-              // statusNavbarHeigh={0}
-              statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+          {/* 筛选 icon */}
+          <View
+            className={`filterIconWrapper ${isSelect && "active"}`}
+            onClick={toggleShowPopup}
+          >
+            <Image
+              src={isSelect ? img.ICON_FILTER_SELECTED : img.ICON_FILTER}
+              className={`filterIcon ${isSelect && "active"}`}
            />
+            {isSelect && <Text className="filterCount">{filterCount}</Text>}
          </View>
-        )}
-      </View>
+          {/* 综合筛选 */}
+          {isShowFilterPopup && (
+            <View>
+              <FilterPopup
+                loading={loading}
+                onCancel={toggleShowPopup}
+                onConfirm={handleFilterConfirm}
+                onChange={handleUpdateFilterOptions}
+                filterOptions={filterOptions}
+                onClear={clearFilterOptions}
+                visible={isShowFilterPopup}
+                onClose={toggleShowPopup}
+                statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+              />
+            </View>
+          )}
+        </View>

-      {/* 列表内容 */}
-      <ListContainer
-        data={searchResultData}
-        recommendList={recommendList}
-        loading={loading}
-        error={error}
-        reload={refreshMatches}
-        loadMoreMatches={loadMoreMatches}
-      />
-    </View>
+        {/* 列表内容 */}
+        <ListContainer
+          data={searchResultData}
+          recommendList={recommendList}
+          loading={loading}
+          error={error}
+          reload={refreshMatches}
+          loadMoreMatches={loadMoreMatches}
+        />
+      </View>
+    </>
  );
 };

--- a/src/store/global.ts
+++ b/src/store/global.ts
@@ -8,7 +8,7 @@ interface GlobalState {
  getLocationText: string;
  statusNavbarHeightInfo: {
    statusBarHeight: number;
-    navbarHeight: number;
+    navBarHeight: number;
    totalHeight: number;
  };
 }
@@ -33,18 +33,18 @@ export const useGlobalStore = create<GlobalStore>()((set, get) => ({
  // 状态栏和导航栏高度信息
  statusNavbarHeightInfo: {
    statusBarHeight: 0,
-    navbarHeight: 0,
+    navBarHeight: 0,
    totalHeight: 0,
  },

  // 获取导航栏高度信息
  getNavbarHeightInfo: () => {
-    const { statusBarHeight, navbarHeight } = getNavbarHeight();
+    const { statusBarHeight, navBarHeight } = getNavbarHeight();
    set({
      statusNavbarHeightInfo: {
        statusBarHeight,
-        navbarHeight,
-        totalHeight: statusBarHeight + navbarHeight,
+        navBarHeight,
+        totalHeight: statusBarHeight + navBarHeight,
      },
    });
  },
--- a/src/store/listStore.ts
+++ b/src/store/listStore.ts
@@ -40,32 +40,73 @@ const defaultPageOption = {
  pageSize: 20,
 };

-// 创建 store
-const now = new Date();
-export const useListStore = create<TennisStore>()((set, get) => ({
-  currentPage: "",
-  isSearchResult: false,
-  searchResultData: [],
-  dateRange: [now, new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)], // 日期区间
-  // 初始状态
-  matches: [],
+// 页面状态默认值
+const pageStateDefaultValue = {
+  // 列表数据
+  data: [],
  // 推荐列表
  recommendList: [],
-  location: {
-    latitude: 0,
-    longitude: 0,
-  }, // 位置
-  // 是否加载中
-  loading: true,
-  error: null,
-  // 搜索的value
-  searchValue: "",
  // 是否展示综合筛选弹窗
  isShowFilterPopup: false,
  // 综合筛选项
  filterOptions: defaultFilterOptions,
+  // 距离筛选和快捷筛选
+  distanceQuickFilter: defaultDistanceQuickFilter,
  // 综合筛选 选择的筛选数量
  filterCount: 0,
+  // 分页
+  pageOption: defaultPageOption,
+  // 球局数量
+  gamesNum: 0,
+  // 是否还有更多数据
+  isHasMoreData: true,
+}
+
+// 列表页状态
+const listPageStateDefaultValue = {
+  ...pageStateDefaultValue,
+  // 列表页是否显示搜索框自定义导航
+  isShowInputCustomerNavBar: false,
+}
+
+// 搜索页状态
+const searchPageStateDefaultValue = {
+  ...pageStateDefaultValue,
+  // 搜索结果数据
+  searchResultData: [],
+  // 联想词
+  suggestionList: [],
+  // 是否显示联想词
+  isShowSuggestion: false,
+  // 搜索历史数据
+  searchHistory: [],
+  // 搜索历史数据默认 Top 15
+  searchHistoryParams: {
+    page: 1,
+    pageSize: 15,
+  },
+}
+
+// const now = new Date();
+
+// 公共属性
+const commonStateDefaultValue = {
+  // 是否是搜索结果页
+  isSearchResult: false,
+  // 是否加载中
+  loading: true,
+  // 错误信息
+  error: null,
+  // 位置
+  location: {
+    latitude: 0,
+    longitude: 0,
+  },
+  // 搜索的value
+  searchValue: "",
+  // 日期区间
+  // dateRange: [now, new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)],
+
  // 距离筛选数据
  distanceData: [
    { id: 0, label: "全城", value: "" },
@@ -79,8 +120,6 @@ export const useListStore = create<TennisStore>()((set, get) => ({
    { label: "距离更近", value: "1" },
    { label: "时间更近", value: "2" },
  ],
-  // 距离筛选和快捷筛选
-  distanceQuickFilter: defaultDistanceQuickFilter,

  // 气泡日期范围
  dateRangeOptions: [
@@ -97,42 +136,28 @@ export const useListStore = create<TennisStore>()((set, get) => ({
    { id: 5, label: "晚上 18:00-22:00", value: "18:00-22:00" },
    { id: 6, label: "夜间 22:00-24:00", value: "22:00-24:00" },
  ],
-  // 球局数量
+}
+
+// 创建 store
+export const useListStore = create<TennisStore>()((set, get) => ({
+  currentPage: "",
+  // 列表页
+  listPageState: listPageStateDefaultValue,
+  // 搜索及搜索结果页
+  searchPageState: searchPageStateDefaultValue,
+
+  ...commonStateDefaultValue,
  gamesNum: 0,
-  // 是否还有更多数据
-  isHasMoreData: true,
-  // 页面滚动距离顶部距离 是否大于0
-  isScrollTop: false,
-  // 搜索历史数据
-  searchHistory: [],
-  // 搜索历史数据默认 Top 15
-  searchHistoryParams: {
-    page: 1,
-    pageSize: 15,
-  },
-  // 联想词
-  suggestionList: [],
-  // 是否显示联想词
-  isShowSuggestion: false,
-  // 列表页是否显示搜索框自定义导航
-  isShowInputCustomerNavBar: false,
-  // 结果页是否显示搜索框自定义导航
-  isShowResultInputCustomerNavBar: false,
-  // 打开距离筛选框
-  isOpenDistancePopup: false,
-  // 打开快捷筛选框
-  isOpenQuickFilterPopup: false,
-  // 分页
-  pageOption: defaultPageOption,

  // 组装搜索数据
  getSearchParams: () => {
    const state = get();
-    const filterOptions = state?.filterOptions || {};
-    const distanceQuickFilter = state?.distanceQuickFilter || {};
-    
+    const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState;
+    const filterOptions = currentPageState?.filterOptions || {};
+    const distanceQuickFilter = currentPageState?.distanceQuickFilter || {};
+
    const params = {
-      pageOption: state.pageOption,
+      pageOption: currentPageState?.pageOption,
      seachOption: {
        ...filterOptions,
        title: state.searchValue,
@@ -147,30 +172,45 @@ export const useListStore = create<TennisStore>()((set, get) => ({
    return params;
  },

-  // 设置搜索的列表结果
+  // 设置列表结果
  setListData: (payload: IPayload & { isAppend?: boolean }) => {
-    const { isSearchResult } = get();
+    const state = get();
    const { error, data, loading, count, isAppend = false } = payload;
-    const saveKey = isSearchResult ? "searchResultData" : "matches";
    const isHasMoreData = count > 0;
-    
-    if (isAppend) {
-      // 追加数据到现有数组
-      const currentData = get()[saveKey] || [];
-      const newData = [...currentData, ...(data || [])];
-      const saveData = { error, loading, count, isHasMoreData, [saveKey]: newData };
-      set({...saveData});
+
+    if (state.isSearchResult) {
+      // 更新搜索页状态
+      const currentData = state.searchPageState?.searchResultData || [];
+      const newData = isAppend ? [...currentData, ...(data || [])] : (data || []);
+      set({
+        searchPageState: {
+          ...state.searchPageState,
+          searchResultData: newData,
+          isHasMoreData,
+        },
+        error,
+        loading,
+      });
    } else {
-      // 替换整个数组
-      const saveData = { error, loading, count, isHasMoreData, [saveKey]: data };
-      set({...saveData});
+      // 更新列表页状态
+      const currentData = state.listPageState?.data || [];
+      const newData = isAppend ? [...currentData, ...(data || [])] : (data || []);
+      set({
+        listPageState: {
+          ...state.listPageState,
+          data: newData,
+          isHasMoreData,
+        },
+        error,
+        loading,
+      });
    }
  },

  // 获取列表数据(常规搜索)
  fetchMatches: async (params, isFirstLoad = false, isAppend = false) => {
    set({ loading: true, error: null });
-    const { getSearchParams, setListData, distanceQuickFilter } = get();
+    const { getSearchParams, setListData } = get();

    try {
      const searchParams = getSearchParams() || {};
@@ -179,6 +219,12 @@ export const useListStore = create<TennisStore>()((set, get) => ({
        ...params,
      };

+      // 获取当前页面的距离筛选
+      const state = get();
+      const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState;
+      console.log("===当前页面状态:", state.isSearchResult, currentPageState);
+      const distanceQuickFilter = currentPageState?.distanceQuickFilter || {};
+
      // 是否选择了智能排序
      const isIntegrate = distanceQuickFilter?.quick === "0";
      let fetchFn = getGamesList;
@@ -186,14 +232,14 @@ export const useListStore = create<TennisStore>()((set, get) => ({
      if (isIntegrate) {
        reqParams.order = "";
        fetchFn = getGamesIntegrateList;
-        
+
        // 第一次进入页面时传入 isRefresh 参数
        if (isFirstLoad) {
          reqParams.seachOption.isRefresh = true;
        }
      }

-      console.log("===fetchMatches 获取列表数据参数：", reqParams);
+      console.log("===获取列表数据参数：", reqParams);
      const resData = (await fetchFn(reqParams)) || {};
      const { data = {}, code } = resData;
      if (code !== 0) {
@@ -245,11 +291,15 @@ export const useListStore = create<TennisStore>()((set, get) => ({
  // 获取历史搜索数据
  getSearchHistory: async () => {
    try {
-      const params = get()?.searchHistoryParams || {};
+      const state = get();
+      const params = state.searchPageState?.searchHistoryParams || {};
      const resData = (await getSearchHistory(params)) || {};
      const searchHistory = resData?.data?.records || [];
      set({
-        searchHistory,
+        searchPageState: {
+          ...state.searchPageState,
+          searchHistory,
+        },
      });
    } catch (error) { }
  },
@@ -257,11 +307,15 @@ export const useListStore = create<TennisStore>()((set, get) => ({
  // 清空历史记录
  clearHistory: async () => {
    try {
+      const state = get();
      const params = {};
      const resData = (await clearHistory(params)) || {};
      if (resData?.code === 0) {
        set({
-          searchHistory: [],
+          searchPageState: {
+            ...state.searchPageState,
+            searchHistory: [],
+          },
        });
      }
    } catch (error) { }
@@ -270,17 +324,25 @@ export const useListStore = create<TennisStore>()((set, get) => ({
  // 获取联想
  searchSuggestion: async (val: string) => {
    try {
+      const state = get();
      const resData = (await searchSuggestion({ val, limit: 10 })) || {};
      const recommendations = resData?.data?.recommendations || [];
      const total = resData?.data?.total;
      set({
-        suggestionList: recommendations,
-        isShowSuggestion: total > 0,
+        searchPageState: {
+          ...state.searchPageState,
+          suggestionList: recommendations,
+          isShowSuggestion: total > 0,
+        },
      });
    } catch (error) {
+      const state = get();
      set({
-        suggestionList: [],
-        isShowSuggestion: true,
+        searchPageState: {
+          ...state.searchPageState,
+          suggestionList: [],
+          isShowSuggestion: true,
+        },
      });
    }
  },
@@ -292,67 +354,154 @@ export const useListStore = create<TennisStore>()((set, get) => ({

  // 更新综合筛选项
  updateFilterOptions: (payload: Record<string, any>) => {
-    const { filterOptions: preFilterOptions, fetchGetGamesCount } = get() || {};
-    const filterOptions = { ...preFilterOptions, ...payload };
+    const state = get();
+    const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState;
+    const filterOptions = { ...currentPageState?.filterOptions, ...payload };
    const filterCount = Object.values(filterOptions).filter(Boolean).length;
-    console.log("===更新综合筛选项", filterOptions, filterCount);
-    set({
-      filterOptions,
-      filterCount,
-      pageOption: defaultPageOption,
-    });
+    
+    if (state.isSearchResult) {
+      set({
+        searchPageState: {
+          ...state.searchPageState,
+          filterOptions,
+          filterCount,
+          pageOption: defaultPageOption,
+        },
+      });
+    } else {
+      set({
+        listPageState: {
+          ...state.listPageState,
+          filterOptions,
+          filterCount,
+          pageOption: defaultPageOption,
+        },
+      });
+    }
    // 获取球局数量
-    fetchGetGamesCount();
+    state.fetchGetGamesCount();
  },

  // 清空综合筛选选项
  clearFilterOptions: () => {
-    const { getMatchesData, fetchGetGamesCount } = get() || {};
-    set({
-      filterOptions: defaultFilterOptions,
-      filterCount: 0,
-      pageOption: defaultPageOption,
-    });
+    const state = get();
+    const { getMatchesData, fetchGetGamesCount } = state;
+    
+    if (state.isSearchResult) {
+      set({
+        searchPageState: {
+          ...state.searchPageState,
+          filterOptions: defaultFilterOptions,
+          filterCount: 0,
+          pageOption: defaultPageOption,
+        },
+      });
+    } else {
+      set({
+        listPageState: {
+          ...state.listPageState,
+          filterOptions: defaultFilterOptions,
+          filterCount: 0,
+          pageOption: defaultPageOption,
+        },
+      });
+    }
    getMatchesData();
    fetchGetGamesCount();
  },

  // 加载更多数据
  loadMoreMatches: () => {
-    const { pageOption, fetchMatches, isHasMoreData } = get() || {};
+    const state = get();
+    const currentPageState = state.isSearchResult ? state.searchPageState : state.listPageState;
+    const { pageOption, isHasMoreData } = currentPageState || {};
+    
    if (!isHasMoreData) {
      return;
    }
-    set({
-      pageOption: {
-        page: pageOption?.page + 1,
-        pageSize: 20,
-      },
-    });
+    
+    const newPageOption = {
+      page: (pageOption?.page || 1) + 1,
+      pageSize: 20,
+    };
+    
+    if (state.isSearchResult) {
+      set({
+        searchPageState: {
+          ...state.searchPageState,
+          pageOption: newPageOption,
+        },
+      });
+    } else {
+      set({
+        listPageState: {
+          ...state.listPageState,
+          pageOption: newPageOption,
+        },
+      });
+    }
    // 加载更多时追加数据到现有数组
-    fetchMatches({}, false, true);
+    state.fetchMatches({}, false, true);
  },

  // 初始化搜索条件 重新搜索
  initialFilterSearch: async () => {
-    const { getMatchesData, fetchGetGamesCount } = get();
-    set({
-      distanceQuickFilter: defaultDistanceQuickFilter,
-      filterOptions: defaultFilterOptions,
-      pageOption: defaultPageOption,
-    });
+    const state = get();
+    const { getMatchesData, fetchGetGamesCount } = state;
+    
+    if (state.isSearchResult) {
+      set({
+        searchPageState: {
+          ...state.searchPageState,
+          distanceQuickFilter: defaultDistanceQuickFilter,
+          filterOptions: defaultFilterOptions,
+          pageOption: defaultPageOption,
+        },
+      });
+    } else {
+      set({
+        listPageState: {
+          ...state.listPageState,
+          distanceQuickFilter: defaultDistanceQuickFilter,
+          filterOptions: defaultFilterOptions,
+          pageOption: defaultPageOption,
+        },
+      });
+    }
    fetchGetGamesCount();
    return await getMatchesData();
  },

  // 更新store数据
  updateState: (payload: Record<string, any>) => {
-    const state = get();
-    console.log("Store: 更新数据:", state);
    set({
      ...(payload || {}),
    });
  },
+
+  // 更新列表页状态中的特定字段
+  updateListPageState: (payload: Record<string, any>) => {
+    const state = get();
+    set({
+      listPageState: {
+        ...state.listPageState,
+        ...payload,
+      },
+    });
+    console.log("===更新列表页状态:", state);
+  },
+
+  // 更新搜索页状态中的特定字段
+  updateSearchPageState: (payload: Record<string, any>) => {
+    const state = get();
+    set({
+      searchPageState: {
+        ...state.searchPageState,
+        ...payload,
+      },
+    });
+    console.log("===更新搜索页状态:", state);
+  },
 }));

 // 导出便捷的 hooks
--- a/src/utils/getNavbarHeight.ts
+++ b/src/utils/getNavbarHeight.ts
@@ -1,13 +1,39 @@
 import Taro from "@tarojs/taro";

-export const getNavbarHeight = (): { statusBarHeight: number; navbarHeight: number; totalHeight: number; } => {
+export const getNavbarHeight = (): { statusBarHeight: number; navBarHeight: number; totalHeight: number; } => {
+  // 1. 获取系统信息，包含状态栏高度
  const systemInfo = Taro.getSystemInfoSync();
-  const statusBarHeight = systemInfo?.statusBarHeight || 0;
+  const statusBarHeight = systemInfo.statusBarHeight || 0;
+
+
  const isIOS = systemInfo.platform === "ios";
-  const navbarHeight = isIOS ? 44 : 48;
+  const isIPad = systemInfo.model?.toLowerCase().includes('ipad') ||
+    (systemInfo.platform === 'ios' && systemInfo.screenWidth >= 768);
+
+  // 2. 获取胶囊按钮位置信息（用于计算导航栏高度）
+  const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
+
+  let navBarHeight = 44 // 默认导航栏高度
+
+  if (menuButtonInfo && menuButtonInfo.top) {
+    // 计算导航栏高度公式
+    navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
+  } else {
+    // 胶囊按钮信息不可用时，使用默认值
+    if (isIPad) {
+      navBarHeight = 50; // iPad 上的导航栏高度通常更高
+    } else if (isIOS) {
+      navBarHeight = 44; // iPhone 导航栏高度
+    } else {
+      navBarHeight = 48; // Android 导航栏高度
+    }
+  }
+
+  const totalHeight = statusBarHeight + navBarHeight;
+
  return {
    statusBarHeight,
-    navbarHeight,
-    totalHeight: statusBarHeight + navbarHeight,
+    navBarHeight,
+    totalHeight,
  };
 };