筛选组件开发

src/components/CityFilter/example.tsx

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,59 @@
+.menuWrap {
+  padding: 5px 20px 10px;
+  .menuItem {
+    left: 0;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+  }
+  &.active {
+    .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: 80px;
+    border-radius: 28px;
+    border: 1px solid #e5e5e5;
+    line-height: 28px;
+    font-size: 14px;
+    width: max-content;
+    .nut-menu-title {
+      color: inherit !important;
+      font-weight: 600;
+    }
+
+    .nut-menu-title-text {
+      padding-left: 0;
+    }
+  }
+
+  .positionWrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .cityName {
+    font-size: 13px;
+    font-weight: 400;
+  }
+  .distanceWrap {
+    margin-bottom: 16px;
+    width: 100%;
+  }
+  .distanceBubbleItem {
+    width: auto;
+  }
+}

src/components/CityFilter/index.tsx

@@ -0,0 +1,64 @@
+import { Menu } from "@nutui/nutui-react-taro";
+import styles from "./index.module.scss";
+import { useState, useRef } from "react";
+import Bubble, { BubbleOption } from "../Bubble";
+
+interface IProps {
+  options: BubbleOption[];
+  value: string;
+  onChange: (value: string) => void;
+  wrapperClassName?: string;
+  itemClassName?: string;
+}
+
+const MenuComponent = (props: IProps) => {
+  const { value, onChange, wrapperClassName, itemClassName } = props;
+  const [isChange, setIsChange] = useState(false);
+  const itemRef = useRef(null);
+
+  const handleChange = (value: string) => {
+    console.log("===value", value);
+    setIsChange(true);
+    onChange && onChange(value);
+  };
+
+  const options: BubbleOption[] = [
+    { id: 0, label: "全城", value: "0" },
+    { id: 1, label: "3km", value: "3" },
+    { id: 2, label: "5km", value: "5" },
+    { id: 3, label: "10km", value: "10" },
+  ];
+
+  return (
+    <Menu
+      className={`${styles.menuWrap} ${wrapperClassName} ${
+        isChange ? styles.active : ""
+      }`}
+      activeColor="#000"
+    >
+      <Menu.Item
+        title="全城"
+        className={`${styles.menuItem} ${itemClassName}`}
+        ref={itemRef}
+      >
+        <div className={styles.positionWrap}>
+          <p className={styles.title}>当前位置</p>
+          <p className={styles.cityName}>上海市</p>
+        </div>
+        <div className={styles.distanceWrap}>
+          <Bubble
+            options={options}
+            value={value}
+            onChange={handleChange}
+            layout="grid"
+            size="small"
+            columns={4}
+            itemClassName={styles.distanceBubbleItem}
+          />
+        </div>
+      </Menu.Item>
+    </Menu>
+  );
+};
+
+export default MenuComponent;