列表搜索页面

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;