列表综合筛选

src/components/CityFilter/example.tsx

@@ -1,18 +0,0 @@
-import { useState } from "react";
-import MenuComponent from "./index";
-
-export default function Example() {
-  const [value, setValue] = useState("a");
-  const options = [
-    { text: "默认排序", value: "a" },
-    { text: "好评排序", value: "b" },
-    { text: "销量排序", value: "c" },
-  ];
-  return (
-    <MenuComponent
-      options={options}
-      value={value}
-      onChange={(val) => setValue(val)}
-    />
-  );
-}

src/components/CityFilter/index.module.scss

@@ -1,5 +1,15 @@
 .menuWrap {
   padding: 5px 20px 10px;
+  $height: 26px;
+
+  .menuIcon {
+    width: 16px;
+    height: 16px;
+
+    &.rotate {
+      transform: rotate(180deg);
+    }
+  }
 
   .menuItem {
     width: 100vw;
@@ -13,7 +23,7 @@
   }
 
   &.active {
-    .nut-menu-bar {
+    :global(.nut-menu-bar) {
       background-color: #000000;
       color: #ffffff;
     }
@@ -21,24 +31,23 @@
 
   :global(.nut-menu-bar) {
     color: #000000;
-    line-height: 1;
+    width: 66px;
+    height: $height;
+    border-radius: $height;
+    line-height: $height;
     box-shadow: unset;
-    min-height: 28px;
-    min-width: 80px;
-    border-radius: 28px;
     border: 1px solid #e5e5e5;
-    line-height: 28px;
     font-size: 14px;
-    width: max-content;
+    font-weight: 600;
+  }
 
-    .nut-menu-title {
-      color: inherit !important;
-      font-weight: 600;
-    }
+  :global(.nut-menu-title) {
+    color: inherit !important;
+    font-weight: 600;
+  }
 
-    .nut-menu-title-text {
-      padding-left: 0;
-    }
+  :global(.nut-menu-title-text) {
+    --nutui-menu-title-padding: 0 6px 0 0;
   }
 
   .positionWrap {

src/components/CityFilter/index.tsx

@@ -1,28 +1,33 @@
 import { Menu } from "@nutui/nutui-react-taro";
 import styles from "./index.module.scss";
 import { useState, useRef } from "react";
-import Bubble, { BubbleOption } from "../Bubble";
+import Bubble from "../Bubble";
+import { Image } from "@tarojs/components";
+import img from "../../config/images";
+import {DistanceFilterProps} from '../../../types/list/types'
 
-interface IProps {
-  options: BubbleOption[];
-  value: string;
-  onChange: (value: string) => void;
-  wrapperClassName?: string;
-  itemClassName?: string;
-}
 
-const MenuComponent = (props: IProps) => {
-  const { value, onChange, wrapperClassName, itemClassName, options } = props;
+
+const MenuComponent = (props: DistanceFilterProps) => {
+  const { value, onChange, wrapperClassName, itemClassName, options, name } =
+    props;
   const [isChange, setIsChange] = useState(false);
+  const [iOpen, setIsOpen] = useState(false);
   const itemRef = useRef(null);
 
-  const handleChange = (value: string) => {
-    console.log("===value", value);
+  const handleChange = (name: string, value: string) => {
     setIsChange(true);
-    onChange && onChange(value);
+    onChange && onChange(name, value);
+    (itemRef.current as any)?.toggle(false);
   };
 
-  
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
 
   return (
     <Menu
@@ -30,11 +35,25 @@ const MenuComponent = (props: IProps) => {
         isChange ? styles.active : ""
       }`}
       activeColor="#000"
+      onOpen={handleOpen}
+      onClose={handleClose}
+      icon={
+        <Image
+          className={`${styles.menuIcon} ${iOpen ? styles.rotate : ""}`}
+          src={isChange ? img.ICON_ARROW_DOWN_WHITE : img.ICON_ARROW_DOWN}
+        />
+      }
     >
       <Menu.Item
-        title="全城"
-        className={`${styles.menuItem} ${itemClassName ? itemClassName : ''}`}
+        title={value}
+        className={`${styles.menuItem} ${itemClassName ? itemClassName : ""}`}
         ref={itemRef}
+        icon={
+          <Image
+            className={styles.itemIcon}
+            src={img.ICON_MENU_ITEM_SELECTED}
+          />
+        }
       >
         <div className={styles.positionWrap}>
           <p className={styles.title}>当前位置</p>
@@ -49,6 +68,7 @@ const MenuComponent = (props: IProps) => {
             size="small"
             columns={4}
             itemClassName={styles.distanceBubbleItem}
+            name={name}
           />
         </div>
       </Menu.Item>