feat: 车位寻车

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "antd-mobile": "^2.3.4",
     "axios": "^0.21.1",
+    "fuse.js": "^6.6.2",
     "html5-qrcode": "^2.3.0",
     "node-sass": "^8.0.0",
     "qrcodejs2": "^0.0.2",

src/js/helpers/data-helper.js

@@ -53,8 +53,8 @@ const getMallInfo = async ({ memberID }) => {
     } = await axios.get(
       `${cdnUrl}/ar/${code}/config.json?t=${new Date().getTime()}`
     );
-    if (mapUrl) config.mapDataUrl = mapUrl;
-    if (shopUrl) config.shopInfoUrl = shopUrl;
+    // if (mapUrl) config.mapDataUrl = mapUrl;
+    // if (shopUrl) config.shopInfoUrl = shopUrl;
   } catch (error) {
     console.log("获取config失败");
   }

src/pages/Car/Car.js

@@ -8,6 +8,9 @@ import plateActive from "./plate_active.png";
 import lot from "./lot.png";
 import lotActive from "./lot_active.png";
 import { post } from "../../js/helpers/data-helper";
+import clear from "./clear.png";
+import Fuse from "fuse.js";
+let fuse;
 const Car = ({ lots, onLot = () => {}, plate, hasReverse }) => {
   const [isPlate, setIsPlate] = useState(hasReverse);
   const [qArr, setQArr] = useState(hasReverse ? ["川", "A"] : []);
@@ -15,8 +18,17 @@ const Car = ({ lots, onLot = () => {}, plate, hasReverse }) => {
   const [showKeyBoard, setShowKeyBoard] = useState(true);
   const [focusedIndex, setFocusedIndex] = useState(hasReverse ? 2 : 0);
   const [isNum, setIsNum] = useState(true);
+  const [lotQ, setLotQ] = useState("");
+  const [filteredLots, setFilteredLots] = useState([]);
   const q = qArr.join("");
   const setQ = (str) => setQArr(str.split(""));
+  useEffect(() => {
+    fuse = new Fuse(lots);
+  }, []);
+  useEffect(() => {
+    if (lotQ) setFilteredLots(fuse.search(lotQ).map(({ item }) => item));
+    else setFilteredLots([]);
+  }, [lotQ]);
   useEffect(() => {
     if (!opened) {
       setOpened(true);
@@ -38,10 +50,11 @@ const Car = ({ lots, onLot = () => {}, plate, hasReverse }) => {
     setShowKeyBoard(true);
   };
   const toLot = () => {
+    setLotQ("");
     setQ("");
     setFocusedIndex(0);
     setIsPlate(false);
-    setShowKeyBoard(true);
+    setShowKeyBoard(false);
   };
 
   const handleSubmit = async () => {
@@ -51,9 +64,9 @@ const Car = ({ lots, onLot = () => {}, plate, hasReverse }) => {
           className: "toast",
         });
       }
-      const {
-        data: { data, code, msg },
-      } = await post("/api/ar/v1/applet/GetCarSpace", { CarNum: q });
+      const { data, code, msg } = await post("/api/ar/v1/applet/GetCarSpace", {
+        CarNum: q,
+      });
       if (code !== 200)
         return window.weui.toast(msg, {
           className: "toast",
@@ -79,7 +92,11 @@ const Car = ({ lots, onLot = () => {}, plate, hasReverse }) => {
     <div className="car">
       <img className="car-img" src={car} />
       <div className="car-modal">
-        <div className={"content" + (showKeyBoard ? " has-keyboard" : "")}>
+        <div
+          className={`content ${showKeyBoard ? "has-keyboard" : ""} ${
+            isPlate ? "" : "lot"
+          }`}
+        >
           <div className="form">
             <div className="tabs">
               <div
@@ -125,41 +142,37 @@ const Car = ({ lots, onLot = () => {}, plate, hasReverse }) => {
                 ))}
               </div>
             ) : (
-              <div className="lots">
-                {new Array(4).fill(0).map((_, i) => (
+              <div className="lotByInput">
+                <input
+                  value={lotQ}
+                  onChange={(e) => setLotQ(e.target.value)}
+                ></input>
+                {lotQ && (
+                  <img
+                    className="clear"
+                    alt="清除"
+                    src={clear}
+                    onClick={() => setLotQ("")}
+                  ></img>
+                )}
+                <div className="lotList">
+                  {filteredLots.map((lot, i) => (
                     <div
-                    className={[
-                      "box",
-                      "big",
-                      focusedIndex === i ? "active" : "",
-                    ].join(" ")}
-                    key={i}
-                    onClick={() => {
-                      setIsNum(true);
-                      setFocusedIndex(i);
-                      setShowKeyBoard(true);
-                    }}
+                      key={lot + "__" + i}
+                      className="lot"
+                      onClick={() => onLot(lot.toUpperCase())}
                     >
-                    {qArr[i]}
+                      {lot}
                     </div>
                   ))}
                 </div>
-            )}
-
-            {!isPlate && (
-              <>
-                {/* <div className="floor1" onClick={() => setFloor(floor1)}>
-                  {floor1}
               </div>
-                <div className="floor2">{floor}</div>
-                <div className="floor3" onClick={() => setFloor(floor3)}>
-                  {floor3}
-                </div> */}
-              </>
             )}
+            {isPlate && (
               <div className="btn" onClick={handleSubmit}>
                 寻车
               </div>
+            )}
           </div>
         </div>
       </div>

src/pages/Car/Car.scss

@@ -27,14 +27,17 @@
     left: 2.6667vw;
     right: 2.6667vw;
     width: calc(100vw - 4.2667vw);
-    height: 458px;
+    top: calc(100vh - 98px - 10px - 458px);
     bottom: 10px;
     padding-top: 34px;
     background: #ffffff;
     box-shadow: 0px 12px 16px rgba(104, 110, 127, 0.08);
     border-radius: 18px;
     overflow: hidden;
-
+    transition: all 0.5s ease-in-out;
+    &.lot {
+      top: 16px;
+    }
     .form {
       position: absolute;
       top: 14px;
@@ -52,6 +55,61 @@
         right: -3.7333vw;
         text-align: center;
       }
+      .lotByInput {
+        position: absolute;
+        top: 80px;
+        left: 18px;
+        right: 18px;
+        bottom: 0;
+        input {
+          width: 100%;
+          padding: 14px 64px 14px 24px;
+          line-height: 36px;
+          height: 64px;
+          border-radius: 8px;
+          background: var(--vi-7, #f3f4f8);
+          border: none;
+          color: var(--vi-1, #323337);
+          font-size: 18px;
+          font-style: normal;
+          font-weight: 600;
+        }
+        .clear {
+          position: absolute;
+          top: 14px;
+          right: 14px;
+          width: 36px;
+          height: 36px;
+        }
+        .lotList {
+          position: absolute;
+          top: 80px;
+          left: 0;
+          right: 0;
+          bottom: 10px;
+          overflow-x: hidden;
+          overflow-y: auto;
+          .lot {
+            height: 48px;
+            line-height: 48px;
+            padding-left: 24px;
+            border-radius: 4px;
+            border-bottom: 1px solid var(--vi-6, #edeff3);
+            margin-top: 4px;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 600;
+            color: var(--vi-1, #323337);
+            &:active {
+              color: var(--vi-0, #fff);
+              background: var(
+                --vib,
+                linear-gradient(180deg, #508af7 0%, #5ea5f9 100%)
+              );
+            }
+          }
+        }
+      }
       .lots {
         position: absolute;
         top: 95px;
@@ -64,7 +122,7 @@
         width: 9.6vw;
         height: 64px;
         background: #f3f4f8;
-        font-family: Noto IKEA Simplified Chinese;
+
         font-style: normal;
         font-weight: bold;
         font-size: 18px;
@@ -105,7 +163,6 @@
       }
       .input {
         position: absolute;
-        font-family: Noto IKEA Simplified Chinese;
         font-style: normal;
         font-weight: bold;
         font-size: 16px;
@@ -125,7 +182,6 @@
         }
       }
       ::placeholder {
-        font-family: Noto IKEA Simplified Chinese;
         font-style: normal;
         font-weight: normal;
         font-size: 14px;
@@ -158,7 +214,7 @@
       .floor3 {
         position: absolute;
         left: calc((100vw - 7.4667vw - 57.6vw - 16.8vw) / 2);
-        font-family: Noto IKEA Simplified Chinese;
+
         font-style: normal;
         font-weight: bold;
         font-size: 4.2667vw;

src/pages/Index/Index.js

@@ -879,13 +879,7 @@ const Index = () => {
                 <div
                   key={name}
                   className={`tab ${isActive ? "active" : ""}`}
-                  onClick={() => {
-                    if (name === "寻车") {
-                      window.weui.toast("敬请期待", {
-                        className: "toast",
-                      });
-                    } else setTab(name);
-                  }}
+                  onClick={() => setTab(name)}
                 >
                   <img
                     src={isActive ? TabMap[name].logoActive : TabMap[name].logo}

src/pages/Keyboard/Keyboard.scss

@@ -19,7 +19,7 @@
       position: relative;
       flex: 0 0 80px;
       text-align: center;
-      font-family: Noto IKEA Simplified Chinese;
+
       font-style: normal;
       font-weight: normal;
       font-size: 16px;
@@ -38,7 +38,7 @@
       position: relative;
       flex: 0 0 80px;
       text-align: center;
-      font-family: Noto IKEA Simplified Chinese;
+
       font-style: normal;
       font-weight: bold;
       font-size: 16px;
@@ -70,7 +70,7 @@
     .key {
       width: 8.5333vw;
       height: 40px;
-      font-family: Noto IKEA Simplified Chinese;
+
       font-style: normal;
       font-weight: normal;
       font-size: 16px;
@@ -99,7 +99,7 @@
       color: #fff;
       box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
       border-radius: 4px;
-      font-family: Noto IKEA Simplified Chinese;
+
       font-style: normal;
       font-weight: normal;
       font-size: 16px;