列表综合筛选

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>
 
       {/* 列表内容 */}