列表搜索页面

src/components/CityFilter/index.tsx

@@ -9,7 +9,7 @@ import {DistanceFilterProps} from '../../../types/list/types'
 
 
 const MenuComponent = (props: DistanceFilterProps) => {
-  const { value, onChange, wrapperClassName, itemClassName, options, name } =
+  const { value, onChange, wrapperClassName, itemClassName, options, name, onOpen, onClose } =
     props;
   const [isChange, setIsChange] = useState(false);
   const [iOpen, setIsOpen] = useState(false);
@@ -23,10 +23,12 @@ const MenuComponent = (props: DistanceFilterProps) => {
 
   const handleOpen = () => {
     setIsOpen(true);
+    onOpen && typeof onOpen === "function" && onOpen();
   };
 
   const handleClose = () => {
     setIsOpen(false);
+    onClose && typeof onClose === "function" && onClose();
   };
 
   return (

src/components/DistanceQuickFilter/index.scss

@@ -0,0 +1,91 @@
+.distanceQuickFilterWrap {
+  width: 100%;
+
+  .nut-menu-bar {
+    background-color: unset;
+    box-shadow: unset;
+    padding: 0 15px;
+    gap: 5px;
+  }
+
+  .nut-menu-title {
+    flex: unset;
+    box-sizing: border-box;
+    display: flex;
+    height: 28px;
+    padding: 4px 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+    border-radius: 999px;
+    border: 0.5px solid rgba(0, 0, 0, 0.06);
+    background: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .nut-menu-title.active {
+    color: #000;
+  }
+
+  .nut-menu-container-wrap {
+    width: 100vw;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+  }
+
+  .nut-menu-container-item {
+    color: rgba(60, 60, 67, 0.60);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .nut-menu-container-item.active {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    color: #000;
+  }
+
+  .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;
+    color: #3c3c43;
+  }
+
+  .distanceWrap {
+    margin-bottom: 16px;
+    width: 100%;
+  }
+
+  .distanceBubbleItem {
+    display: flex;
+    width: 80px;
+    height: 28px;
+    padding: 4px 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+    border-radius: 999px;
+    border: 0.5px solid rgba(0, 0, 0, 0.06);
+  }
+
+  .itemIcon {
+    width: 20px;
+    height: 20px;
+  }
+}

src/components/DistanceQuickFilter/index.tsx

@@ -0,0 +1,81 @@
+import React, { useRef, useState } from "react";
+import { Menu, Button } from "@nutui/nutui-react-taro";
+import { Image } from "@tarojs/components";
+import img from "@/config/images";
+import Bubble from "../Bubble";
+import "./index.scss";
+
+const Demo3 = (props) => {
+  const {
+    cityOptions,
+    quickOptions,
+    onChange,
+    cityName,
+    quickName,
+    cityValue,
+    quickValue,
+  } = props;
+
+  const itemRef = useRef(null);
+
+  const handleChange = (name: string, value: string) => {
+    // setIsChange(true);
+    onChange && onChange(name, value);
+    (itemRef.current as any)?.toggle(false);
+  };
+
+  return (
+    <Menu
+      className="distanceQuickFilterWrap"
+    >
+      <Menu.Item
+        title={cityValue}
+        ref={itemRef}
+        icon={<Image src={img.ICON_MENU_ITEM_SELECTED} />}
+      >
+        <div className="positionWrap">
+          <p className="title">当前位置</p>
+          <p className="cityName">上海市</p>
+        </div>
+        <div className="distanceWrap">
+          <Bubble
+            options={cityOptions}
+            value={cityValue}
+            onChange={handleChange}
+            layout="grid"
+            size="small"
+            columns={4}
+            itemClassName="distanceBubbleItem"
+            name={cityName}
+          />
+        </div>
+      </Menu.Item>
+      <Menu.Item
+        options={quickOptions}
+        defaultValue={quickValue}
+        onChange={(value) => handleChange(quickName, value)}
+        icon={<Image className="itemIcon" src={img.ICON_MENU_ITEM_SELECTED} />}
+      />
+      {/* <Menu.Item title="筛选" ref={itemRef}>
+        <div
+          style={{
+            width: '50%',
+            lineHeight: '28px',
+            padding: '0 30px',
+          }}
+        >
+          自定义内容
+        </div>
+        <Button
+          size="small"
+          onClick={() => {
+            ;(itemRef.current as any)?.toggle(false)
+          }}
+        >
+          确认
+        </Button>
+      </Menu.Item> */}
+    </Menu>
+  );
+};
+export default Demo3;

src/components/Menu/index.tsx

@@ -6,7 +6,7 @@ import { MenuFilterProps } from "../../../types/list/types";
 import styles from "./index.module.scss";
 
 const MenuComponent = (props: MenuFilterProps) => {
-  const { options, value, onChange, wrapperClassName, itemClassName, name } =
+  const { options, value, onChange, wrapperClassName, itemClassName, name, onOpen, onClose,open } =
     props;
   const [isChange, setIsChange] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -18,10 +18,12 @@ const MenuComponent = (props: MenuFilterProps) => {
 
   const handleOpen = () => {
     setIsOpen(true);
+    onOpen && typeof onOpen === "function" && onOpen();
   };
 
   const handleClose = () => {
     setIsOpen(false);
+    onClose && typeof onClose === "function" && onClose();
   };
 
   return (

src/components/SearchBar/index.module.scss

@@ -5,6 +5,7 @@
   --nutui-searchbar-input-text-color: #000000;
   --nutui-searchbar-input-padding: 0 0 0 10px;
   --nutui-searchbar-padding: 10px 0 0 0;
+  background-color: unset;
 
   :global(.nut-searchbar-content) {
     box-shadow: 0 4px 48px #00000014;