列表综合筛选

src/components/Menu/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/Menu/index.module.scss

@@ -1,33 +1,46 @@
 .menuWrap {
   position: static;
   padding: 5px 20px 10px;
+  --nutui-menu-title-padding: 0 6px 0 0;
+  $height: 26px;
+
   .menuItem {
     width: 100vw;
     left: 0;
     border-bottom-left-radius: 30px;
     border-bottom-right-radius: 30px;
   }
+
+  .menuIcon {
+    width: 16px;
+    height: 16px;
+
+    &.rotate {
+      transform: rotate(180deg);
+    }
+  }
+
+  .itemIcon {
+    width: 20px;
+    height: 20px;
+  }
+
   &.active {
     :global(.nut-menu-bar) {
       background-color: #000000;
       color: #ffffff;
     }
   }
+
   :global(.nut-menu-bar) {
     color: #000000;
-    line-height: 1;
     box-shadow: unset;
-    min-height: 28px;
-    min-width: 94px;
-    border-radius: 28px;
+    border-radius: $height;
+    line-height: $height;
+    height: $height;
     border: 1px solid #e5e5e5;
-    line-height: 28px;
     font-size: 14px;
-    width: max-content;
-
-    .nut-menu-title-text {
-      padding-left: 0;
-    }
+    width: 94px;
   }
 
   :global(.nut-menu-title) {
@@ -35,13 +48,18 @@
     font-weight: 600;
   }
 
+  :global(.nut-menu-title-text) {
+    --nutui-menu-title-padding: 0 6px 0 4px;
+  }
+
   :global(.nut-menu-container-item) {
     color: #3c3c43;
     font-weight: 600;
     font-size: 14px;
   }
+
   :global(.nut-menu-container-item.active) {
     flex-direction: row-reverse;
     justify-content: space-between;
   }
-}
+}

src/components/Menu/index.tsx

@@ -1,34 +1,55 @@
 import { Menu } from "@nutui/nutui-react-taro";
-import styles from "./index.module.scss";
 import { useState } from "react";
+import { Image } from "@tarojs/components";
+import img from "../../config/images";
+import { MenuFilterProps } from "../../../types/list/types";
+import styles from "./index.module.scss";
 
-interface IProps {
-  options: { text: string; value: string }[];
-  value: string;
-  onChange: (value: string) => void;
-  wrapperClassName?: string;
-  itemClassName?: string;
-}
-
-const MenuComponent = (props: IProps) => {
-  const { options, value, onChange, wrapperClassName, itemClassName } = props;
+const MenuComponent = (props: MenuFilterProps) => {
+  const { options, value, onChange, wrapperClassName, itemClassName, name } =
+    props;
   const [isChange, setIsChange] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const handleChange = (value: string) => {
+  const handleChange = (val: Record<string, string>) => {
     setIsChange(true);
-    onChange && onChange(value);
+    onChange && onChange(name, val.value);
+  };
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
   };
 
   return (
     <Menu
-      className={`${styles.menuWrap} ${wrapperClassName} ${isChange ? styles.active : ""}`}
+      className={`${styles.menuWrap} ${wrapperClassName} ${
+        isChange ? styles.active : ""
+      }`}
       activeColor="#000"
+      onOpen={handleOpen}
+      onClose={handleClose}
+      icon={
+        <Image
+          className={`${styles.menuIcon} ${isOpen ? styles.rotate : ""}`}
+          src={isChange ? img.ICON_ARROW_DOWN_WHITE : img.ICON_ARROW_DOWN}
+        />
+      }
     >
       <Menu.Item
         className={`${styles.menuItem} ${itemClassName}`}
         options={options}
         defaultValue={value}
         onChange={handleChange}
+        icon={
+          <Image
+            className={styles.itemIcon}
+            src={img.ICON_MENU_ITEM_SELECTED}
+          />
+        }
       />
     </Menu>
   );