列表综合筛选

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="搜索上海的球局和场地"
       />