列表

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>
+    </>
   );
 };