处理列表

src/game_pages/list/index.tsx

@@ -1,7 +1,7 @@
 import SearchBar from "@/components/SearchBar";
 import FilterPopup from "@/components/FilterPopup";
 import styles from "./index.module.scss";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import Taro, { usePageScroll } from "@tarojs/taro";
 import { useListStore } from "@/store/listStore";
 import { useGlobalState } from "@/store/global";
@@ -12,11 +12,6 @@ import ListContainer from "@/container/listContainer";
 import DistanceQuickFilter from "@/components/DistanceQuickFilter";
 import { withAuth } from "@/components";
 import { updateUserLocation } from "@/services/userService";
-// import img from "@/config/images";
-// import ShareCardCanvas from "@/components/ShareCardCanvas/example";
-
-
-
 
 const ListPage = () => {
 
@@ -46,23 +41,28 @@ const ListPage = () => {
     isShowInputCustomerNavBar,
     initialFilterSearch,
     loadMoreMatches,
-    dateRangeOptions
+    fetchGetGamesCount
   } = store;
 
+  // 简化的滚动处理函数
   usePageScroll((res) => {
-    if (res?.scrollTop >= totalHeight) {
-      !isShowInputCustomerNavBar &&
+    const shouldShowInputNav = res?.scrollTop >= totalHeight;
+
+    // 只有当状态需要改变时才更新
+    if (shouldShowInputNav && !isShowInputCustomerNavBar) {
         updateState({ isShowInputCustomerNavBar: true });
-    } else {
-      isShowInputCustomerNavBar &&
+    } else if (!shouldShowInputNav && isShowInputCustomerNavBar) {
         updateState({ isShowInputCustomerNavBar: false });
     }
   });
 
+  const scrollContextRef = useRef(null)
+
   useEffect(() => {
     getLocation()
   }, []);
 
+
   // 监听距离和排序方式变化，自动调用接口
   useEffect(() => {
     // 只有当 distanceQuickFilter 有值时才调用接口
@@ -89,6 +89,7 @@ const ListPage = () => {
         console.error('更新用户位置失败:', error);
       }
     }
+    fetchGetGamesCount();
 
     // 页面加载时获取数据
     getMatchesData();
@@ -104,35 +105,45 @@ const ListPage = () => {
   // }
 
   // 下拉刷新处理函数 - 使用Taro生命周期钩子
-  Taro.usePullDownRefresh(() => {
-    console.log("===触发下拉刷新");
-    clearFilterOptions()
+  Taro.usePullDownRefresh(async () => {
+    try {
+      // 调用刷新方法
+      await refreshMatches();
 
-    // 调用 store 的刷新方法
-    // refreshMatches()
-    //   .then(() => {
-    //     // 刷新完成后停止下拉刷新动画
-    //     Taro.stopPullDownRefresh();
+      // 刷新完成后停止下拉刷新动画
+      Taro.stopPullDownRefresh();
 
-    //     // 显示刷新成功提示
-    //     Taro.showToast({
-    //       title: "刷新成功",
-    //       icon: "success",
-    //       duration: 1500,
-    //     });
-    //   })
-    //   .catch(() => {
-    //     // 刷新失败时也停止动画
-    //     Taro.stopPullDownRefresh();
+      // 显示刷新成功提示
+      Taro.showToast({
+        title: "刷新成功",
+        icon: "success",
+        duration: 1500,
+      });
+    } catch (error) {
+      // 刷新失败时也停止动画
+      Taro.stopPullDownRefresh();
 
-    //     Taro.showToast({
-    //       title: "刷新失败",
-    //       icon: "error",
-    //       duration: 1500,
-    //     });
-    //   });
+      Taro.showToast({
+        title: "刷新失败，请重试",
+        icon: "error",
+        duration: 1500,
+      });
+    }
   });
 
+  /**
+   * @description 综合筛选确认
+   * @returns
+   */
+  const handleFilterConfirm = () => {
+    toggleShowPopup();
+    getMatchesData();
+  }
+
+  /**
+   * @description 综合筛选弹框
+   * @returns
+   */
   const toggleShowPopup = () => {
     updateState({ isShowFilterPopup: !isShowFilterPopup });
   };
@@ -164,9 +175,10 @@ const ListPage = () => {
   };
 
   return (
-    <View>
+    <View ref={scrollContextRef}>
       {/* 自定义导航 */}
       <CustomerNavBar />
+
       {/* <ShareCardCanvas /> */}
       <View className={styles.listPage}>
         <View
@@ -187,7 +199,7 @@ const ListPage = () => {
               <FilterPopup
                 loading={loading}
                 onCancel={toggleShowPopup}
-                onConfirm={toggleShowPopup}
+                onConfirm={handleFilterConfirm}
                 onChange={handleUpdateFilterOptions}
                 filterOptions={filterOptions}
                 onClear={clearFilterOptions}
@@ -199,7 +211,10 @@ const ListPage = () => {
           )}
         </View>
         {/* 筛选 */}
-        <View className={styles.listTopFilterWrapper}>
+        <View className={styles.listTopFilterWrapper}
+          style={{
+            top: totalHeight -1,
+          }}>
           <DistanceQuickFilter
             cityOptions={distanceData}
             quickOptions={quickFilterData}
@@ -221,7 +236,6 @@ const ListPage = () => {
           loadMoreMatches={loadMoreMatches}
         />
       </View>
-
       <GuideBar currentPage="list" />
     </View>
   );