列晒筛选

src/components/Bubble/bubbleItem.module.scss

@@ -4,7 +4,6 @@
   outline: none; // 移除浏览器默认的outline
   background: #ffffff;
   color: #333333;
-  font-size: 14px;
   font-weight: 400;
   text-align: center;
   cursor: pointer;
@@ -12,9 +11,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
   white-space: nowrap;
-  font-size: 14px;
+  font-size: 12px;
   border-radius: 28px;
   margin: 0;
   width: 116px;

src/components/Bubble/index.module.scss

@@ -20,5 +20,8 @@
   .bubbleGrid {
     display: grid;
     width: 100%;
+    .bubbleOption {
+      width: 100%;
+    }
   }
 }

src/components/Bubble/index.tsx

@@ -122,7 +122,7 @@ const Bubble: React.FC<BubbleProps> = ({
       className={styles.bubbleGrid}
       style={{
         gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: size === "small" ? "8px" : size === "large" ? "16px" : "12px",
+        gap: size === "small" ? "6px" : size === "large" ? "16px" : "12px",
       }}
     >
       {options.map((option) => (
@@ -133,7 +133,7 @@ const Bubble: React.FC<BubbleProps> = ({
           size={size}
           disabled={disabled}
           onClick={handleOptionClick}
-          itemClassName={itemClassName}
+          itemClassName={itemClassName || styles.bubbleOption}
         />
       ))}
     </div>

src/components/CityFilter/index.module.scss

@@ -48,6 +48,7 @@
   .cityName {
     font-size: 13px;
     font-weight: 400;
+    color: #3C3C43;
   }
   .distanceWrap {
     margin-bottom: 16px;

src/components/Range/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Range } from "@nutui/nutui-react-taro";
 import styles from "./index.module.scss";
+import TitleComponent from "../Title";
 
 interface RangeProps {
   min?: number;
@@ -9,6 +10,7 @@ interface RangeProps {
   value?: [number, number];
   onChange?: (value: [number, number]) => void;
   disabled?: boolean;
+  className?: string;
 }
 
 const NtrpRange: React.FC<RangeProps> = ({
@@ -18,15 +20,15 @@ const NtrpRange: React.FC<RangeProps> = ({
   value = [min, max],
   onChange,
   disabled = false,
+  className,
 }) => {
   const [currentValue, setCurrentValue] = useState<[number, number]>(value);
 
   useEffect(() => {
-    setCurrentValue(value);
-  }, [value]);
+    value && setCurrentValue(value);
+  }, [JSON.stringify(value || [])]);
 
   const handleChange = (val: [number, number]) => {
-    console.log("Range value changed:", val);
     setCurrentValue(val);
     onChange?.(val);
   };
@@ -41,32 +43,33 @@ const NtrpRange: React.FC<RangeProps> = ({
 
   const rangContent = useMemo(() => {
     const [start, end] = currentValue || [];
-    if (start === min && end === max) {
+    if (Number(start) === Number(min) && Number(end) === Number(max)) {
       return "不限";
     }
     return `${start.toFixed(1)} - ${end.toFixed(1)}之间`;
-  }, [currentValue, min, max]);
+  }, [JSON.stringify(currentValue || []), min, max]);
 
   return (
-    <div className={styles.nutRange}>
+    <div className={`${styles.nutRange} ${className ? className : ''} `}>
       <div className={styles.nutRangeHeader}>
-        <div className={styles.nutRangeHeaderLeft}>
+        {/* <div className={styles.nutRangeHeaderLeft}>
           <div className="ntrp-range__icon">icon</div>
           <h3 className={styles.nutRangeHeaderTitle}>NTRP水平区间</h3>
-        </div>
+        </div> */}
+        <TitleComponent title='NTRP水平区间'/>
         <p className={styles.nutRangeHeaderContent}>{rangContent}</p>
       </div>
 
       <div>
         <div className={styles.rangeWrapper}>
-          <span className={styles.rangeWrapperMin}>{min}</span>
+          <span className={styles.rangeWrapperMin}>{min.toFixed(1)}</span>
           <Range
             range
             min={min}
             max={max}
             step={step}
-            value={currentValue}
-            onChange={handleChange}
+            // value={currentValue}
+            onEnd={handleChange}
             disabled={disabled}
             defaultValue={[min, max]}
             className={styles.rangeHandle}
@@ -74,16 +77,10 @@ const NtrpRange: React.FC<RangeProps> = ({
             minDescription={null}
             currentDescription={null}
             marks={marks}
-            style={{ color: "gold" }}
           />
-          <span className={styles.rangeWrapperMax}>{max}</span>
+          <span className={styles.rangeWrapperMax}>{max.toFixed(1)}</span>
         </div>
       </div>
-
-      {/* 调试信息 */}
-      <div style={{ marginTop: "10px", fontSize: "12px", color: "#666" }}>
-        当前值: {currentValue[0].toFixed(1)} - {currentValue[1].toFixed(1)}
-      </div>
     </div>
   );
 };

src/components/SearchBar/index.module.scss

@@ -0,0 +1,23 @@
+.searchBar {
+  --nutui-searchbar-padding: 10px 15px;
+  --nutui-searchbar-font-size: 16px;
+  --nutui-searchbar-input-height: 44px;
+  --nutui-searchbar-content-border-radius: 44px;
+  --nutui-searchbar-input-text-color: #000000;
+  --nutui-searchbar-input-padding: 0 0 0 10px;
+  --nutui-searchbar-padding:0 15px;
+  // --nutui-searchbar-background: #ffffff;
+  :global(.nut-searchbar-content) {
+    box-shadow: 0 4px 48px #00000014;
+  }
+  .searchBarRight {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: 1px solid #0000000F;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/components/SearchBar/index.tsx

@@ -0,0 +1,22 @@
+
+import { SearchBar } from '@nutui/nutui-react-taro'
+import styles from './index.module.scss'
+
+const SearchBarComponent = () => {
+  return (
+    <>
+    <SearchBar
+        // leftIn={
+        //   <div>123</div>
+        // }
+        right={
+          <div className={styles.searchBarRight}>筛</div>
+        }
+        className={styles.searchBar}
+        placeholder='搜索上海的球局和场地'
+      />
+    </>
+  )
+}
+
+export default SearchBarComponent

src/components/Title/index.module.scss

@@ -0,0 +1,11 @@
+.titleContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  gap: 6px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+}

src/components/Title/index.tsx

@@ -0,0 +1,19 @@
+import styles from "./index.module.scss";
+interface IProps {
+  title: string;
+  className?: string;
+}
+const TitleComponent = (props: IProps) => {
+  const { title, className } = props;
+  return (
+    <>
+      <div
+        className={`${styles.titleContainer} ${className ? className : ""} `}
+      >
+        <div>图</div>
+        <h1 className={styles.title}>{title}</h1>
+      </div>
+    </>
+  );
+};
+export default TitleComponent;

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}{" "}
-          场比赛
+      <SearchBar />
+      {/* 综合筛选 */}
+      <div>
+        <FilterPopup />
       </div>
-      )}
-
+      {/* 筛选 */}
+      <div>
         {/* 全城筛选 */}
         <CityFilter />
-
-      {/* 菜单 */}
+        {/* 智能排序 */}
         <Menu />
+      </div>
 
-      {/* 范围选择 */}
-      <Range />
       
-      {/* 气泡 */}
-      <Bubble />
 
       {/* 列表内容 */}
       <List>