列表综合筛选

src/components/Bubble/index.tsx

@@ -15,6 +15,7 @@ export interface BubbleProps {
   options: BubbleOption[];
   value?: string | number | (string | number)[];
   onChange?: (
+    name: string,
     value: string | number | (string | number)[],
     option: BubbleOption | BubbleOption[]
   ) => void;
@@ -26,6 +27,7 @@ export interface BubbleProps {
   itemClassName?: string;
   style?: React.CSSProperties;
   disabled?: boolean;
+  name: string;
 }
 
 const Bubble: React.FC<BubbleProps> = ({
@@ -40,6 +42,7 @@ const Bubble: React.FC<BubbleProps> = ({
   itemClassName = "",
   style = {},
   disabled = false,
+  name,
 }) => {
   const [selectedValues, setSelectedValues] = useState<(string | number)[]>([]);
 
@@ -74,9 +77,9 @@ const Bubble: React.FC<BubbleProps> = ({
         const selectedOptions = options.filter((opt) =>
           newSelectedValues.includes(opt.value)
         );
-        onChange(newSelectedValues, selectedOptions);
+        onChange(name, newSelectedValues, selectedOptions);
       } else {
-        onChange(option.value, option);
+        onChange(name, option.value, option);
       }
     }
   };

src/components/CityFilter/index.module.scss

@@ -1,17 +1,24 @@
 .menuWrap {
   padding: 5px 20px 10px;
+
   .menuItem {
     width: 100vw;
     left: 0;
     border-bottom-left-radius: 30px;
     border-bottom-right-radius: 30px;
   }
+
+  .menuItem {
+    position: fixed;
+  }
+
   &.active {
     .nut-menu-bar {
       background-color: #000000;
       color: #ffffff;
     }
   }
+
   :global(.nut-menu-bar) {
     color: #000000;
     line-height: 1;
@@ -23,6 +30,7 @@
     line-height: 28px;
     font-size: 14px;
     width: max-content;
+
     .nut-menu-title {
       color: inherit !important;
       font-weight: 600;
@@ -49,13 +57,15 @@
   .cityName {
     font-size: 13px;
     font-weight: 400;
-    color: #3C3C43;
+    color: #3c3c43;
   }
+
   .distanceWrap {
     margin-bottom: 16px;
     width: 100%;
   }
+
   .distanceBubbleItem {
     width: auto;
   }
-}
+}

src/components/List/index.scss

@@ -1,6 +1,5 @@
 .list {
   background: #fafafa;
-  margin-top: 12px;
   display: flex;
   flex-direction: column;
   gap: 5px;

src/components/Range/index.tsx

@@ -8,9 +8,10 @@ interface RangeProps {
   max?: number;
   step?: number;
   value?: [number, number];
-  onChange?: (value: [number, number]) => void;
+  onChange?: (name: string, value: [number, number]) => void;
   disabled?: boolean;
   className?: string;
+  name: string;
 }
 
 const NtrpRange: React.FC<RangeProps> = ({
@@ -21,16 +22,18 @@ const NtrpRange: React.FC<RangeProps> = ({
   onChange,
   disabled = false,
   className,
+  name,
 }) => {
   const [currentValue, setCurrentValue] = useState<[number, number]>(value);
-
+console.log('===currentValue', currentValue)
   useEffect(() => {
+    console.log('===rrr', value)
     value && setCurrentValue(value);
   }, [JSON.stringify(value || [])]);
 
   const handleChange = (val: [number, number]) => {
     setCurrentValue(val);
-    onChange?.(val);
+    onChange?.(name, val);
   };
 
   const marks = useMemo(() => {
@@ -50,13 +53,9 @@ const NtrpRange: React.FC<RangeProps> = ({
   }, [JSON.stringify(currentValue || []), min, max]);
 
   return (
-    <div className={`${styles.nutRange} ${className ? className : ''} `}>
+    <div className={`${styles.nutRange} ${className ? className : ""} `}>
       <div className={styles.nutRangeHeader}>
-        {/* <div className={styles.nutRangeHeaderLeft}>
-          <div className="ntrp-range__icon">icon</div>
-          <h3 className={styles.nutRangeHeaderTitle}>NTRP水平区间</h3>
-        </div> */}
-        <TitleComponent title='NTRP水平区间'/>
+        <TitleComponent title="NTRP水平区间" />
         <p className={styles.nutRangeHeaderContent}>{rangContent}</p>
       </div>
 
@@ -68,7 +67,7 @@ const NtrpRange: React.FC<RangeProps> = ({
             min={min}
             max={max}
             step={step}
-            // value={currentValue}
+            value={currentValue}
             onEnd={handleChange}
             disabled={disabled}
             defaultValue={[min, max]}

src/components/SearchBar/index.module.scss

@@ -5,18 +5,45 @@
   --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-padding: 10px 0 0 0;
   :global(.nut-searchbar-content) {
     box-shadow: 0 4px 48px #00000014;
   }
   .searchBarRight {
+    position: relative;
     width: 44px;
     height: 44px;
     border-radius: 50%;
-    border: 1px solid #0000000F;
+    border: 1px solid #0000000f;
     background-color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
+    &.active {
+      background-color: #000000;
+    }
   }
-}
+  .filterIcon {
+    width: 20px;
+    height: 20px;
+  }
+  .filterCount {
+    background-color: #000000;
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    right: -5px;
+    bottom: -5px;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+  }
+  .searchIcon {
+    width: 20px;
+    height: 20px;
+  }
+}

src/components/SearchBar/index.tsx

@@ -1,21 +1,38 @@
 import { SearchBar } from "@nutui/nutui-react-taro";
-// import {ICON_FILTER} from '../../config/images.js'
+import { View, Text, Image } from "@tarojs/components";
+import img from "../../config/images";
 import styles from "./index.module.scss";
 
+interface IProps {
+  handleFilterIcon: () => void;
+  isSelect: boolean;
+  filterCount: number;
+}
+
 const SearchBarComponent = (props: IProps) => {
-  // console.log('===', ICON_FILTER)
-  const { handleFilterIcon } = props;
+  const { handleFilterIcon, isSelect, filterCount } = props;
   return (
     <>
       <SearchBar
-        // leftIn={
-        //   <div>123</div>
-        // }
-        right={
-          <div className={styles.searchBarRight} onClick={handleFilterIcon}>
-            筛
+        leftIn={
+          <div>
+            <Image className={styles.searchIcon} src={img.ICON_SEARCH} />
           </div>
         }
+        right={
+          <View
+            className={`${styles.searchBarRight} ${
+              isSelect ? styles.active : ""
+            }`}
+            onClick={handleFilterIcon}
+          >
+            <Image
+              src={isSelect ? img.ICON_FILTER_SELECTED : img.ICON_FILTER}
+              className={styles.filterIcon}
+            />
+            <Text className={styles.filterCount}>{filterCount}</Text>
+          </View>
+        }
         className={styles.searchBar}
         placeholder="搜索上海的球局和场地"
       />