列表综合筛选

src/pages/list/index.tsx

@@ -8,9 +8,12 @@ import styles from "./index.module.scss";
 import { useEffect } from "react";
 import Taro from "@tarojs/taro";
 import { useListStore } from "../../store/listStore";
+import { View } from "@tarojs/components";
 
 const ListPage = () => {
   // 从 store 获取数据和方法
+  const store = useListStore() || {};
+  console.log("===store===", store);
   const {
     isShowFilterPopup,
     error,
@@ -24,7 +27,10 @@ const ListPage = () => {
     updateFilterOptions, // 更新筛选条件
     filterOptions,
     clearFilterOptions,
-  } = useListStore() || {};
+    distanceData,
+    quickFilterData,
+    distanceQuickFilter,
+  } = store;
 
   useEffect(() => {
     // 页面加载时获取数据
@@ -155,98 +161,110 @@ const ListPage = () => {
     updateState(params);
   };
 
-  const cityOptions: BubbleOption[] = [
-    { id: 0, label: "全城", value: "0" },
-    { id: 1, label: "3km", value: "3" },
-    { id: 2, label: "5km", value: "5" },
-    { id: 3, label: "10km", value: "10" },
-  ];
-
-  const options = [
-    { text: "默认排序", value: "a" },
-    { text: "好评排序", value: "b" },
-    { text: "销量排序", value: "c" },
-  ];
-
+  /**
+   * @description 更新筛选条件
+   * @param {Record<string, any>} params 筛选项
+   */
   const handleUpdateFilterOptions = (params: Record<string, any>) => {
     updateFilterOptions(params);
   };
 
+  const handleSearchChange = () => {};
+
+  // 距离筛选
+  const handleDistanceOrQuickChange = (name, value) => {
+    updateState({
+      distanceQuickFilter: {
+        ...distanceQuickFilter,
+        [name]: value,
+      },
+    });
+  };
+  console.log("===visible", isShowFilterPopup);
   return (
-    <div className={styles.listPage}>
-      <SearchBar
-        handleFilterIcon={toggleShowPopup}
-        isSelect={filterCount > 0}
-        filterCount={filterCount}
-      />
-      {/* 综合筛选 */}
-      {isShowFilterPopup && (
-        <div>
-          <FilterPopup
-            loading={loading}
-            onCancel={toggleShowPopup}
-            onConfirm={toggleShowPopup}
-            onChange={handleUpdateFilterOptions}
-            filterOptions={filterOptions}
-            onClear={clearFilterOptions}
+    <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}
+            />
+          </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={cityOptions}
-          value="1"
-          onChange={() => {}}
-          wrapperClassName={styles.menuFilter}
-        />
-        {/* 智能排序 */}
-        <Menu
-          options={options}
-          value="a"
-          onChange={() => {}}
-          wrapperClassName={styles.menuFilter}
-        />
-      </div>
+      </View>
 
-      {/* 列表内容 */}
-      <List>
-        {matches.map((match, index) => (
-          <ListItem key={match.id || index} {...match} />
-        ))}
-      </List>
+      <View className={styles.listContentWrapper}>
+        {/* 列表内容 */}
+        <List>
+          {matches.map((match, index) => (
+            <ListItem key={match.id || index} {...match} />
+          ))}
+        </List>
 
-      {/* 空状态 */}
-      {!loading && matches.length === 0 && (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            height: "200px",
-            fontSize: "14px",
-            color: "#999",
-          }}
-        >
-          <div style={{ marginBottom: "10px" }}>暂无比赛数据</div>
-          <button
-            onClick={() => fetchMatches()}
+        {/* 空状态 */}
+        {!loading && matches.length === 0 && (
+          <div
             style={{
-              padding: "8px 16px",
-              fontSize: "12px",
-              color: "#fff",
-              backgroundColor: "#007aff",
-              border: "none",
-              borderRadius: "4px",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "200px",
+              fontSize: "14px",
+              color: "#999",
             }}
           >
-            重新加载
-          </button>
-        </div>
-      )}
-    </div>
+            <div style={{ marginBottom: "10px" }}>暂无比赛数据</div>
+            <button
+              onClick={() => fetchMatches()}
+              style={{
+                padding: "8px 16px",
+                fontSize: "12px",
+                color: "#fff",
+                backgroundColor: "#007aff",
+                border: "none",
+                borderRadius: "4px",
+              }}
+            >
+              重新加载
+            </button>
+          </div>
+        )}
+      </View>
+    </View>
   );
 };