列晒筛选

src/pages/list/FilterPopup.tsx

@@ -0,0 +1,72 @@
+import { Popup } from "@nutui/nutui-react-taro";
+import Range from "../../components/Range";
+import Bubble, { BubbleOption } from "../../components/Bubble";
+import styles from "./filterPopup.module.scss";
+import TitleComponent from "src/components/Title";
+
+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" },
+];
+
+const locationOptions: BubbleOption[] = [
+  { id: 1, label: "室内", value: "1" },
+  { id: 2, label: "室外", value: "2" },
+  { id: 3, label: "半室外", value: "3" },
+];
+
+const FilterPopup = () => {
+  return (
+    <>
+      <Popup
+        visible={true}
+        destroyOnClose
+        position="top"
+        round
+        closeOnOverlayClick={false}
+        onClose={() => {
+          // setShowTop(false)
+        }}
+      >
+        <div className={styles.filterPopupWrapper}>
+          {/* 时间气泡选项 */}
+          <Bubble
+            options={timeOptions}
+            value={(value) => {}}
+            onChange={(value) => {}}
+            layout="grid"
+            size="small"
+            columns={3}
+          />
+
+          {/* 范围选择 */}
+          <Range
+            min={1.0}
+            max={5.0}
+            step={0.5}
+            className={styles.filterPopupRange}
+          />
+
+          {/* 场次气泡选项 */}
+          <div>
+            <TitleComponent title="场地类型" />
+            <Bubble
+              options={locationOptions}
+              value={(value) => {}}
+              onChange={(value) => {}}
+              layout="grid"
+              size="small"
+              columns={3}
+            />
+          </div>
+        </div>
+      </Popup>
+    </>
+  );
+};
+
+export default FilterPopup;

src/pages/list/filterPopup.module.scss

@@ -0,0 +1,8 @@
+.filterPopupWrapper {
+  $m18: 18px;
+  padding: $m18;
+  .filterPopupRange {
+    margin-top: $m18;
+    margin-bottom: $m18;
+  }
+}

src/pages/list/index.config.ts

@@ -1,5 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '列表',
+  navigationBarTitleText: '',
   enablePullDownRefresh: true,
   backgroundTextStyle: 'dark'
 })

src/pages/list/index.tsx

@@ -4,6 +4,8 @@ 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 SearchBar from "../../components/SearchBar";
+import FilterPopup from "./FilterPopup";
 import "./index.scss";
 import { useEffect } from "react";
 import Taro from "@tarojs/taro";
@@ -146,33 +148,20 @@ const ListPage = () => {
 
   return (
     <div>
-      {/* 状态信息栏 */}
-      {lastRefreshTime && (
-        <div
-          style={{
-            padding: "8px 16px",
-            fontSize: "12px",
-            color: "#999",
-            backgroundColor: "#f8f8f8",
-            borderBottom: "1px solid #eee",
-          }}
-        >
-          最后更新: {formatRefreshTime(lastRefreshTime)} | 共 {matches.length}{" "}
-          场比赛
-        </div>
-      )}
+      <SearchBar />
+      {/* 综合筛选 */}
+      <div>
+        <FilterPopup />
+      </div>
+      {/* 筛选 */}
+      <div>
+        {/* 全城筛选 */}
+        <CityFilter />
+        {/* 智能排序 */}
+        <Menu />
+      </div>
 
-      {/* 全城筛选 */}
-      <CityFilter />
-
-      {/* 菜单 */}
-      <Menu />
-
-      {/* 范围选择 */}
-      <Range />
-
-      {/* 气泡 */}
-      <Bubble />
+      
 
       {/* 列表内容 */}
       <List>