列表

2025-09-14 01:18:23 +08:00
parent c44bd01613
commit 01aad920ad
17 changed files with 569 additions and 352 deletions
--- 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>
+    </>
  );
 };