列表综合筛选

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