列表

src/pages/list/index.tsx

@@ -1,29 +1,26 @@
 import ListItem from "../../components/ListItem";
 import List from "../../components/List";
-import Bubble from "../../components/Bubble/example";
-import Range from "../../components/Range/example";
-import Menu from "../../components/Menu/example";
-import CityFilter from "../../components/CityFilter/example";
+import Menu from "../../components/Menu";
+import CityFilter from "../../components/CityFilter";
 import SearchBar from "../../components/SearchBar";
 import FilterPopup from "./FilterPopup";
-import "./index.scss";
+import styles from  "./index.module.scss";
 import { useEffect } from "react";
 import Taro from "@tarojs/taro";
-import {
-  useTennisMatches,
-  useTennisLoading,
-  useTennisError,
-  useTennisLastRefresh,
-  useTennisActions,
-} from "../../store/listStore";
+import { useListStore } from "../../store/listStore";
 
 const ListPage = () => {
   // 从 store 获取数据和方法
-  const matches = useTennisMatches();
-  const loading = useTennisLoading();
-  const error = useTennisError();
-  const lastRefreshTime = useTennisLastRefresh();
-  const { fetchMatches, refreshMatches, clearError } = useTennisActions();
+  const {
+    isShowFilterPopup,
+    error,
+    matches,
+    loading,
+    fetchMatches,
+    refreshMatches,
+    clearError,
+    updateState,
+  } = useListStore() || {};
 
   useEffect(() => {
     // 页面加载时获取数据
@@ -146,22 +143,43 @@ const ListPage = () => {
     );
   }
 
-  return (
-    <div>
-      <SearchBar />
-      {/* 综合筛选 */}
-      <div>
-        <FilterPopup />
-      </div>
-      {/* 筛选 */}
-      <div>
-        {/* 全城筛选 */}
-        <CityFilter />
-        {/* 智能排序 */}
-        <Menu />
-      </div>
+  const toggleShowPopup = () => {
+    updateState({ isShowFilterPopup: !isShowFilterPopup });
+  };
 
-      
+  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" },
+  ];
+
+  return (
+    <div className={styles.listPage}>
+      <SearchBar handleFilterIcon={toggleShowPopup} />
+      {/* 综合筛选 */}
+      {isShowFilterPopup && (
+        <div>
+          <FilterPopup
+            loading={loading}
+            onCancel={toggleShowPopup}
+            onConfirm={toggleShowPopup}
+          />
+        </div>
+      )}
+      {/* 筛选 */}
+      <div className={ styles.listTopFilterWrapper}>
+        {/* 全城筛选 */}
+        <CityFilter options={cityOptions} value="1" onChange={() => { }} wrapperClassName={styles.menuFilter} />
+        {/* 智能排序 */}
+        <Menu options={options} value="a" onChange={() => { }} wrapperClassName={styles.menuFilter} />
+      </div>
 
       {/* 列表内容 */}
       <List>