列表综合筛选

src/pages/list/FilterPopup.tsx

@@ -1,60 +1,52 @@
 import { Popup } from "@nutui/nutui-react-taro";
 import Range from "../../components/Range";
-import Bubble, { BubbleOption } from "../../components/Bubble";
+import Bubble from "../../components/Bubble";
 import styles from "./filterPopup.module.scss";
 import TitleComponent from "src/components/Title";
 import { Button } from "@nutui/nutui-react-taro";
+import { Image } from "@tarojs/components";
+import img from "../../config/images";
+import { useListStore } from "src/store/listStore";
+import {FilterPopupProps} from '../../../types/list/types'
 
-const timeOptions: BubbleOption[] = [
-  { id: 1, label: "晨间 6:00-10:00", value: "1" },
-  { id: 2, label: "上午 10:00-12:00", value: "2" },
-  { id: 3, label: "中午 12:00-14:00", value: "3" },
-  { id: 4, label: "下午 14:00-18:00", value: "4" },
-  { id: 5, label: "晚上 18:00-22:00", value: "5" },
-  { id: 6, label: "夜间 22:00-24:00", value: "6" },
-];
-
-const locationOptions: BubbleOption[] = [
-  { id: 1, label: "室内", value: "1" },
-  { id: 2, label: "室外", value: "2" },
-  { id: 3, label: "半室外", value: "3" },
-];
-
-interface IProps {
-  onCancel: () => void;
-  onConfirm: () => void;
-  onChange: (params: Record<string, string>) => void;
-  loading: boolean;
-  filterOptions: Record<string, any>;
-  onClear: () => void;
-}
-
-const FilterPopup = (props: IProps) => {
-  const { loading, onCancel, onConfirm, onChange, filterOptions, onClear } = props;
-  console.log('===filterOptions', filterOptions)
+const FilterPopup = (props: FilterPopupProps) => {
+  const {
+    loading,
+    onCancel,
+    onConfirm,
+    onChange,
+    filterOptions,
+    onClear,
+    visible,
+    onClose,
+  } = props;
+  
+  const store = useListStore() || {};
+  const { timeBubbleData, locationOptions } = store;
 
   const handleFilterChange = (name, value) => {
     onChange({ [name]: value });
   };
 
   const handleClearFilter = () => {
-    onClear()
+    onClear();
     onCancel();
-  }
+  };
 
   return (
     <>
       <Popup
-        visible={true}
         destroyOnClose
         position="top"
         round
-        closeOnOverlayClick={true}
+        visible={visible}
+        onClose={onClose}
+        // closeOnOverlayClick={true}
       >
         <div className={styles.filterPopupWrapper}>
           {/* 时间气泡选项 */}
           <Bubble
-            options={timeOptions}
+            options={timeBubbleData}
             value={filterOptions?.time}
             onChange={handleFilterChange}
             layout="grid"
@@ -71,12 +63,15 @@ const FilterPopup = (props: IProps) => {
             className={styles.filterPopupRange}
             onChange={handleFilterChange}
             value={filterOptions?.ntrp}
-            name='ntrp'
+            name="ntrp"
           />
 
           {/* 场次气泡选项 */}
           <div>
-            <TitleComponent title="场地类型" />
+            <TitleComponent
+              title="场地类型"
+              icon={<Image src={img.ICON_SITE} />}
+            />
             <Bubble
               options={locationOptions}
               value={filterOptions?.site}
@@ -84,12 +79,16 @@ const FilterPopup = (props: IProps) => {
               layout="grid"
               size="small"
               columns={3}
-              name='site'
+              name="site"
             />
           </div>
           {/* 按钮 */}
           <div className={styles.filterPopupBtnWrapper}>
-            <Button className={styles.btn} type="default" onClick={handleClearFilter}>
+            <Button
+              className={styles.btn}
+              type="default"
+              onClick={handleClearFilter}
+            >
               清空全部
             </Button>
             <Button

src/pages/list/index.module.scss

@@ -1,15 +1,23 @@
 .listPage {
   background-color: #fafafa;
-  padding: 0 15px;
+
+  .listTopSearchWrapper {
+    padding: 0 15px;
+  }
 
   .listTopFilterWrapper {
     display: flex;
     align-items: center;
-    padding: 5px 0 10px;
+    margin-top: 5px;
+    margin-bottom: 10px;
     gap: 5px;
   }
 
+  .listContentWrapper {
+    padding: 0 5px;
+  }
+
   .menuFilter {
     padding: 0;
   }
-}
+}

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