列表综合筛选

src/pages/list/FilterPopup.tsx

@@ -4,15 +4,14 @@ import Bubble, { BubbleOption } from "../../components/Bubble";
 import styles from "./filterPopup.module.scss";
 import TitleComponent from "src/components/Title";
 import { Button } from "@nutui/nutui-react-taro";
-import { useListStore } from "../../store/listStore";
 
 const timeOptions: BubbleOption[] = [
-  { id: 1, label: "晨间 6:00-10:00", value: "morning" },
-  { id: 2, label: "上午 10:00-12:00", value: "forenoon" },
-  { id: 3, label: "中午 12:00-14:00", value: "noon" },
-  { id: 4, label: "下午 14:00-18:00", value: "afternoon" },
-  { id: 5, label: "晚上 18:00-22:00", value: "evening" },
-  { id: 6, label: "夜间 22:00-24:00", value: "night" },
+  { 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[] = [
@@ -24,11 +23,25 @@ const locationOptions: BubbleOption[] = [
 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 } = props;
+  const { loading, onCancel, onConfirm, onChange, filterOptions, onClear } = props;
+  console.log('===filterOptions', filterOptions)
+
+  const handleFilterChange = (name, value) => {
+    onChange({ [name]: value });
+  };
+
+  const handleClearFilter = () => {
+    onClear()
+    onCancel();
+  }
+
   return (
     <>
       <Popup
@@ -36,17 +49,18 @@ const FilterPopup = (props: IProps) => {
         destroyOnClose
         position="top"
         round
-        closeOnOverlayClick={false}
+        closeOnOverlayClick={true}
       >
         <div className={styles.filterPopupWrapper}>
           {/* 时间气泡选项 */}
           <Bubble
             options={timeOptions}
-            value={(value) => {}}
-            onChange={(value) => {}}
+            value={filterOptions?.time}
+            onChange={handleFilterChange}
             layout="grid"
             size="small"
             columns={3}
+            name="time"
           />
 
           {/* 范围选择 */}
@@ -55,6 +69,9 @@ const FilterPopup = (props: IProps) => {
             max={5.0}
             step={0.5}
             className={styles.filterPopupRange}
+            onChange={handleFilterChange}
+            value={filterOptions?.ntrp}
+            name='ntrp'
           />
 
           {/* 场次气泡选项 */}
@@ -62,19 +79,25 @@ const FilterPopup = (props: IProps) => {
             <TitleComponent title="场地类型" />
             <Bubble
               options={locationOptions}
-              value={(value) => {}}
-              onChange={(value) => {}}
+              value={filterOptions?.site}
+              onChange={handleFilterChange}
               layout="grid"
               size="small"
               columns={3}
+              name='site'
             />
           </div>
           {/* 按钮 */}
           <div className={styles.filterPopupBtnWrapper}>
-            <Button className={styles.btn} type="default" onClick={onCancel}>
+            <Button className={styles.btn} type="default" onClick={handleClearFilter}>
               清空全部
             </Button>
-            <Button className={`${styles.btn} ${styles.confirm}`} type="default" loading={loading} onClick={onConfirm}>
+            <Button
+              className={`${styles.btn} ${styles.confirm}`}
+              type="default"
+              loading={loading}
+              onClick={onConfirm}
+            >
               显示 332 场球局
             </Button>
           </div>

src/pages/list/index.tsx

@@ -4,7 +4,7 @@ import Menu from "../../components/Menu";
 import CityFilter from "../../components/CityFilter";
 import SearchBar from "../../components/SearchBar";
 import FilterPopup from "./FilterPopup";
-import styles from  "./index.module.scss";
+import styles from "./index.module.scss";
 import { useEffect } from "react";
 import Taro from "@tarojs/taro";
 import { useListStore } from "../../store/listStore";
@@ -20,6 +20,10 @@ const ListPage = () => {
     refreshMatches,
     clearError,
     updateState,
+    filterCount,
+    updateFilterOptions, // 更新筛选条件
+    filterOptions,
+    clearFilterOptions,
   } = useListStore() || {};
 
   useEffect(() => {
@@ -147,6 +151,10 @@ const ListPage = () => {
     updateState({ isShowFilterPopup: !isShowFilterPopup });
   };
 
+  const updateFilterSelect = (params) => {
+    updateState(params);
+  };
+
   const cityOptions: BubbleOption[] = [
     { id: 0, label: "全城", value: "0" },
     { id: 1, label: "3km", value: "3" },
@@ -154,15 +162,23 @@ const ListPage = () => {
     { id: 3, label: "10km", value: "10" },
   ];
 
- const options = [
+  const options = [
     { text: "默认排序", value: "a" },
     { text: "好评排序", value: "b" },
     { text: "销量排序", value: "c" },
   ];
 
+  const handleUpdateFilterOptions = (params: Record<string, any>) => {
+    updateFilterOptions(params);
+  };
+
   return (
     <div className={styles.listPage}>
-      <SearchBar handleFilterIcon={toggleShowPopup} />
+      <SearchBar
+        handleFilterIcon={toggleShowPopup}
+        isSelect={filterCount > 0}
+        filterCount={filterCount}
+      />
       {/* 综合筛选 */}
       {isShowFilterPopup && (
         <div>
@@ -170,15 +186,28 @@ const ListPage = () => {
             loading={loading}
             onCancel={toggleShowPopup}
             onConfirm={toggleShowPopup}
+            onChange={handleUpdateFilterOptions}
+            filterOptions={filterOptions}
+            onClear={clearFilterOptions}
           />
         </div>
       )}
       {/* 筛选 */}
-      <div className={ styles.listTopFilterWrapper}>
+      <div className={styles.listTopFilterWrapper}>
         {/* 全城筛选 */}
-        <CityFilter options={cityOptions} value="1" onChange={() => { }} wrapperClassName={styles.menuFilter} />
+        <CityFilter
+          options={cityOptions}
+          value="1"
+          onChange={() => {}}
+          wrapperClassName={styles.menuFilter}
+        />
         {/* 智能排序 */}
-        <Menu options={options} value="a" onChange={() => { }} wrapperClassName={styles.menuFilter} />
+        <Menu
+          options={options}
+          value="a"
+          onChange={() => {}}
+          wrapperClassName={styles.menuFilter}
+        />
       </div>
 
       {/* 列表内容 */}