列表

src/pages/list/FilterPopup.tsx

@@ -3,6 +3,8 @@ import Range from "../../components/Range";
 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" },
@@ -19,7 +21,14 @@ const locationOptions: BubbleOption[] = [
   { id: 3, label: "半室外", value: "3" },
 ];
 
-const FilterPopup = () => {
+interface IProps {
+  onCancel: () => void;
+  onConfirm: () => void;
+  loading: boolean;
+}
+
+const FilterPopup = (props: IProps) => {
+  const { loading, onCancel, onConfirm } = props;
   return (
     <>
       <Popup
@@ -28,9 +37,6 @@ const FilterPopup = () => {
         position="top"
         round
         closeOnOverlayClick={false}
-        onClose={() => {
-          // setShowTop(false)
-        }}
       >
         <div className={styles.filterPopupWrapper}>
           {/* 时间气泡选项 */}
@@ -63,6 +69,15 @@ const FilterPopup = () => {
               columns={3}
             />
           </div>
+          {/* 按钮 */}
+          <div className={styles.filterPopupBtnWrapper}>
+            <Button className={styles.btn} type="default" onClick={onCancel}>
+              清空全部
+            </Button>
+            <Button className={`${styles.btn} ${styles.confirm}`} type="default" loading={loading} onClick={onConfirm}>
+              显示 332 场球局
+            </Button>
+          </div>
         </div>
       </Popup>
     </>

src/pages/list/filterPopup.module.scss

@@ -1,8 +1,35 @@
 .filterPopupWrapper {
+  position: relative;
   $m18: 18px;
   padding: $m18;
+
   .filterPopupRange {
     margin-top: $m18;
     margin-bottom: $m18;
   }
+
+  .filterPopupBtnWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    position: sticky;
+    bottom: 0;
+    background-color: #ffffff;
+    padding: 8px 0;
+
+    .btn {
+      flex: 1;
+    }
+    
+    --nutui-button-border-width: 0.5px;
+    --nutui-button-default-border-color: #0000000F;
+    --nutui-button-border-radius: 16px;
+    --nutui-button-default-height: 44px;
+    --nutui-button-default-color: #000000;
+    .confirm {
+      --nutui-button-default-color: #ffffff;
+      --nutui-button-default-background-color: #000000;
+    }
+  }
 }

src/pages/list/index.module.scss

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

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>