列表

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