列表联调

src/components/DistanceQuickFilter/index.scss

@@ -35,18 +35,18 @@
     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 {
+  //   color: rgba(60, 60, 67, 0.6);
+  //   font-size: 14px;
+  //   font-weight: 600;
+  //   line-height: 20px;
+  // }
 
-  .nut-menu-container-item.active {
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    color: #000;
-  }
+  // .nut-menu-container-item.active {
+  //   flex-direction: row-reverse;
+  //   justify-content: space-between;
+  //   color: #000;
+  // }
 
   .positionWrap {
     display: flex;
@@ -88,4 +88,40 @@
     width: 20px;
     height: 20px;
   }
-}
+
+  .quickOptionsWrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .quickItem {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 0;
+      color: rgba(60, 60, 67, 0.6);
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      &.active {
+        color: #000;
+      }
+    }
+  }
+}
+
+.distanceQuickFilterWrap_0 .nut-menu-title-0 {
+  background-color: #000;
+  color: #fff;
+  &.active {
+    color: #ffffff;
+  }
+}
+
+.distanceQuickFilterWrap_1 .nut-menu-title-1 {
+  background-color: #000;
+  color: #fff;
+  &.active {
+    color: #ffffff;
+  }
+}

src/components/DistanceQuickFilter/index.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Menu, Button } from "@nutui/nutui-react-taro";
-import { Image } from "@tarojs/components";
+import { Image, View, Text } from "@tarojs/components";
 import img from "@/config/images";
 import Bubble from "../Bubble";
 import "./index.scss";
@@ -15,23 +15,46 @@ const Demo3 = (props) => {
     cityValue,
     quickValue,
   } = props;
+  const cityRef = useRef(null);
+  const quickRef = useRef(null);
+  const [changePosition, setChangePosition] = useState<number[]>([]);
 
-  const itemRef = useRef(null);
+  // 全城筛选显示的标题
+  const cityTitle = cityOptions.find((item) => item.value === cityValue)?.label;
 
-  const handleChange = (name: string, value: string) => {
+  // 快捷筛选显示的标题
+  const quickTitle = quickOptions.find(
+    (item) => item.value === quickValue
+  )?.label;
+
+  // className
+  const filterWrapperClassName = changePosition.reduce((pre, cur) => {
+    return `${pre} distanceQuickFilterWrap_${cur}`;
+  }, "");
+
+  const handleChange = (
+    name: string,
+    value: string | number,
+    index: number
+  ) => {
+    setChangePosition((preState) => {
+      const newData = new Set([...preState, index]);
+      return Array.from(newData);
+    });
     onChange && onChange(name, value);
-    (itemRef.current as any)?.toggle(false);
-  };
 
-  // const cityTitle = cityOptions.find((item) => item.value === cityValue)?.label;
+    // 控制隐藏
+    index === 0 && (cityRef.current as any)?.toggle(false);
+    index === 1 && (quickRef.current as any)?.toggle(false);
+  };
 
   return (
     <Menu
-      className="distanceQuickFilterWrap"
+      className={`distanceQuickFilterWrap ${filterWrapperClassName}`}
     >
       <Menu.Item
-        title={cityValue}
-        ref={itemRef}
+        title={cityTitle}
+        ref={cityRef}
         icon={<Image src={img.ICON_MENU_ITEM_SELECTED} />}
       >
         <div className="positionWrap">
@@ -42,7 +65,7 @@ const Demo3 = (props) => {
           <Bubble
             options={cityOptions}
             value={cityValue}
-            onChange={handleChange}
+            onChange={(name, value) => handleChange(name, value, 0)}
             layout="grid"
             size="small"
             columns={4}
@@ -52,30 +75,35 @@ const Demo3 = (props) => {
         </div>
       </Menu.Item>
       <Menu.Item
-        options={quickOptions}
+        title={quickTitle}
+        ref={quickRef}
         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> */}
+        // options={quickOptions}
+        // onChange={(value) => handleChange(quickName, value, 1)}
+        // icon={<Image className="itemIcon" src={img.ICON_MENU_ITEM_SELECTED} />}
+      >
+        <View className="quickOptionsWrapper">
+          {quickOptions.map((item) => {
+            const active = quickValue === item?.value;
+            return (
+              <View
+                className={`quickItem ${active && "active"}`}
+                onClick={() => handleChange(quickName, item.value, 1)}
+              >
+                <View>{item?.label}</View>
+                {active && (
+                  <View>
+                    <Image
+                      className="itemIcon"
+                      src={img.ICON_MENU_ITEM_SELECTED}
+                    />
+                  </View>
+                )}
+              </View>
+            );
+          })}
+        </View>
+      </Menu.Item>
     </Menu>
   );
 };