Merge branch 'feature/juguohong/20250816'

src/pages/list/FilterPopup.tsx

@@ -8,6 +8,9 @@ import { Image } from "@tarojs/components";
 import img from "../../config/images";
 import { useListStore } from "src/store/listStore";
 import { FilterPopupProps } from "../../../types/list/types";
+// 场地
+import CourtType from "@/components/CourtType";
+// 玩法
 import GamePlayType from "@/components/GamePlayType";
 
 const FilterPopup = (props: FilterPopupProps) => {
@@ -20,10 +23,11 @@ const FilterPopup = (props: FilterPopupProps) => {
     onClear,
     visible,
     onClose,
+    statusNavbarHeigh,
   } = props;
 
   const store = useListStore() || {};
-  const { timeBubbleData, locationOptions } = store;
+  const { timeBubbleData, locationOptions, gamePlayOptions } = store;
 
   const handleFilterChange = (name, value) => {
     onChange({ [name]: value });
@@ -42,7 +46,8 @@ const FilterPopup = (props: FilterPopupProps) => {
         round
         visible={visible}
         onClose={onClose}
-        // closeOnOverlayClick={true}
+        style={{ marginTop: statusNavbarHeigh + "px" }}
+        overlayStyle={{ marginTop: statusNavbarHeigh + "px" }}
       >
         <div className={styles.filterPopupWrapper}>
           {/* 时间气泡选项 */}
@@ -68,7 +73,7 @@ const FilterPopup = (props: FilterPopupProps) => {
           />
 
           {/* 场次气泡选项 */}
-          <div>
+          {/* <div>
             <TitleComponent
               title="场地类型"
               icon={<Image src={img.ICON_SITE} />}
@@ -82,9 +87,21 @@ const FilterPopup = (props: FilterPopupProps) => {
               columns={3}
               name="site"
             />
-          </div>
+          </div> */}
+          {/* CourtType */}
+          <CourtType
+            onChange={handleFilterChange}
+            name="court_type"
+            options={locationOptions}
+            value={filterOptions?.site}
+          />
           {/* 玩法 */}
-          <GamePlayType />
+          <GamePlayType
+            onChange={handleFilterChange}
+            name="game_play"
+            options={gamePlayOptions}
+            value={filterOptions?.game_play}
+          />
           {/* 按钮 */}
           <div className={styles.filterPopupBtnWrapper}>
             <Button

src/pages/list/index.config.ts

@@ -1,5 +1,6 @@
 export default definePageConfig({
   navigationBarTitleText: '',
   enablePullDownRefresh: true,
-  backgroundTextStyle: 'dark'
+  backgroundTextStyle: 'dark',
+  navigationStyle: 'custom',
 })

src/pages/list/index.tsx

@@ -7,14 +7,19 @@ import SearchBar from "../../components/SearchBar";
 import FilterPopup from "./FilterPopup";
 import styles from "./index.module.scss";
 import { useEffect } from "react";
-import Taro from "@tarojs/taro";
-import { useListStore } from "../../store/listStore";
+import Taro, { useReachBottom } from "@tarojs/taro";
+import { useListStore } from "@/store/listStore";
+import {useGlobalState} from '@/store/global'
 import { View } from "@tarojs/components";
+import CustomerNavBar from "@/components/CustomNavbar";
 
 const ListPage = () => {
   // 从 store 获取数据和方法
   const store = useListStore() || {};
-  console.log("===store===", store);
+  
+    const {statusNavbarHeightInfo } = useGlobalState() || {}
+    // console.log("===store===", store);
+    // console.log('===statusNavbarHeightInfo', statusNavbarHeightInfo)
   const {
     isShowFilterPopup,
     error,
@@ -33,6 +38,12 @@ const ListPage = () => {
     distanceQuickFilter,
   } = store;
 
+  useReachBottom(() => {
+    console.log("触底了");
+    // 调用 store 的加载更多方法
+    // loadMoreMatches();
+  });
+
   useEffect(() => {
     // 页面加载时获取数据
     fetchMatches();
@@ -143,10 +154,6 @@ const ListPage = () => {
     updateState({ isShowFilterPopup: !isShowFilterPopup });
   };
 
-  const updateFilterSelect = (params) => {
-    updateState(params);
-  };
-
   /**
    * @description 更新筛选条件
    * @param {Record<string, any>} params 筛选项
@@ -166,69 +173,75 @@ const ListPage = () => {
       },
     });
   };
-  console.log("===visible", isShowFilterPopup);
+
   return (
-    <View className={styles.listPage}>
-      <View className={styles.listTopSearchWrapper}>
-        <SearchBar
-          handleFilterIcon={toggleShowPopup}
-          isSelect={filterCount > 0}
-          filterCount={filterCount}
-          onChange={handleSearchChange}
-        />
-        {/* 综合筛选 */}
-        {isShowFilterPopup && (
-          <div>
-            <FilterPopup
-              loading={loading}
-              onCancel={toggleShowPopup}
-              onConfirm={toggleShowPopup}
-              onChange={handleUpdateFilterOptions}
-              filterOptions={filterOptions}
-              onClear={clearFilterOptions}
-              visible={isShowFilterPopup}
-              onClose={toggleShowPopup}
+    <>
+      <CustomerNavBar />
+
+      <View className={styles.listPage}>
+        <View className={styles.listTopSearchWrapper}>
+          <SearchBar
+            handleFilterIcon={toggleShowPopup}
+            isSelect={filterCount > 0}
+            filterCount={filterCount}
+            onChange={handleSearchChange}
+          />
+          {/* 综合筛选 */}
+          {isShowFilterPopup && (
+            <div>
+              <FilterPopup
+                loading={loading}
+                onCancel={toggleShowPopup}
+                onConfirm={toggleShowPopup}
+                onChange={handleUpdateFilterOptions}
+                filterOptions={filterOptions}
+                onClear={clearFilterOptions}
+                visible={isShowFilterPopup}
+                onClose={toggleShowPopup}
+                statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+              />
+            </div>
+          )}
+          {/* 筛选 */}
+          <div className={styles.listTopFilterWrapper}>
+            {/* 全城筛选 */}
+            <CityFilter
+              options={distanceData}
+              value={distanceQuickFilter?.distance}
+              wrapperClassName={styles.menuFilter}
+              onChange={handleDistanceOrQuickChange}
+              name="distance"
+            />
+            {/* 智能排序 */}
+            <Menu
+              options={quickFilterData}
+              value={distanceQuickFilter?.quick}
+              onChange={handleDistanceOrQuickChange}
+              wrapperClassName={styles.menuFilter}
+              name="quick"
             />
           </div>
-        )}
-        {/* 筛选 */}
-        <div className={styles.listTopFilterWrapper}>
-          {/* 全城筛选 */}
-          <CityFilter
-            options={distanceData}
-            value={distanceQuickFilter?.distance}
-            wrapperClassName={styles.menuFilter}
-            onChange={handleDistanceOrQuickChange}
-            name="distance"
-          />
-          {/* 智能排序 */}
-          <Menu
-            options={quickFilterData}
-            value={distanceQuickFilter?.quick}
-            onChange={handleDistanceOrQuickChange}
-            wrapperClassName={styles.menuFilter}
-            name="quick"
-          />
-        </div>
-      </View>
+        </View>
 
-      <View className={styles.listContentWrapper}>
-        {/* 列表内容 */}
-        <List>
-          {!loading &&
-            matches.length > 0 &&
-            matches.map((match, index) => (
-              <ListCard key={match.id || index} {...match} />
-            ))}
-        </List>
+        <View className={styles.listContentWrapper}>
+          {/* 列表内容 */}
+          <List>
+            {!loading &&
+              matches.length > 0 &&
+              matches.map((match, index) => (
+                <ListCard key={match.id || index} {...match} />
+              ))}
+          </List>
 
-        {/* 空状态 */}
-        {loading &&
-          new Array(10).fill(0).map(() => {
-            return <ListCardSkeleton />;
-          })}
+          {/* 空状态 */}
+          {loading &&
+            matches.length === 0 &&
+            new Array(10).fill(0).map(() => {
+              return <ListCardSkeleton />;
+            })}
+        </View>
       </View>
-    </View>
+    </>
   );
 };