chengduSKP_ar_react/src/pages/Car/Car.js

import React, { useState, useEffect } from "react";
import car from "./car.png";
import "./Car.scss";
import plus from "./plus.svg";
import Keyboard from "../Keyboard/Keyboard";
import platepng from "./plate.png";
import plateActive from "./plate_active.png";
import lot from "./lot.png";
import lotActive from "./lot_active.png";
import { post } from "../../js/helpers/data-helper";
const Car = ({ lots, onLot = () => {}, plate, hasReverse }) => {
  const [isPlate, setIsPlate] = useState(hasReverse);
  const [qArr, setQArr] = useState(hasReverse ? ["川", "A"] : []);
  const [opened, setOpened] = useState(false);
  const [showKeyBoard, setShowKeyBoard] = useState(true);
  const [focusedIndex, setFocusedIndex] = useState(hasReverse ? 2 : 0);
  const [isNum, setIsNum] = useState(true);
  const q = qArr.join("");
  const setQ = (str) => setQArr(str.split(""));
  useEffect(() => {
    if (!opened) {
      setOpened(true);
      if (plate) {
        setQ(plate);
        setFocusedIndex(null);
      }
      setShowKeyBoard(!plate);
    }
  }, [opened]);
  const toPlate = () => {
    if (!hasReverse)
      return window.weui.toast("敬请期待", {
        className: "toast",
      });
    setQ("川A");
    setIsPlate(true);
    setFocusedIndex(2);
    setShowKeyBoard(true);
  };
  const toLot = () => {
    setQ("");
    setFocusedIndex(0);
    setIsPlate(false);
    setShowKeyBoard(true);
  };

  const handleSubmit = async () => {
    if (isPlate) {
      if (!q) {
        return window.weui.toast("请输入正确车牌号", {
          className: "toast",
        });
      }
      const {
        data: { data, code, msg },
      } = await post("/api/ar/v1/applet/GetCarSpace", { CarNum: q });
      if (code !== 200)
        return window.weui.toast(msg, {
          className: "toast",
        });
      else {
        if (!lots.includes(data.spaceNum))
          return window.weui.toast(`未找到车位号：${data.spaceNum}`, {
            className: "toast",
          });
        return onLot(data.spaceNum);
      }
    }
    // if (!q || !lots.includes(floor + q.toUpperCase())) {
    if (!q || !lots.includes(q.toUpperCase())) {
      return window.weui.toast("请输入正确车位号", {
        className: "toast",
      });
    }
    // onLot(floor + q.toUpperCase());
    onLot(q.toUpperCase());
  };
  return (
    <div className="car">
      <img className="car-img" src={car} />
      <div className="car-modal">
        <div className={"content" + (showKeyBoard ? " has-keyboard" : "")}>
          <div className="form">
            <div className="tabs">
              <div
                className={`tab ${isPlate ? "active" : ""}`}
                onClick={toPlate}
              >
                <img src={isPlate ? plateActive : platepng}></img>
                车牌查找
              </div>
              <div
                className={`tab ${!isPlate ? "active" : ""}`}
                onClick={toLot}
              >
                <img src={isPlate ? lot : lotActive}></img>
                车位查找
              </div>
            </div>
            {isPlate ? (
              <div className="platenum">
                {new Array(8).fill(0).map((_, i) => (
                  <div
                    className={[
                      "box",
                      focusedIndex === i ? "active" : "",
                      i === 2 ? "more-margin" : "",
                      i === 7 ? "sp" : "",
                    ].join(" ")}
                    key={i}
                    onClick={() => {
                      setIsNum(i !== 0);
                      setFocusedIndex(i);
                      setShowKeyBoard(true);
                    }}
                  >
                    {i === 7 && !qArr[i] ? (
                      <>
                        <img src={plus} className="plus"></img>
                      </>
                    ) : (
                      qArr[i]
                    )}
                  </div>
                ))}
              </div>
            ) : (
              <div className="lots">
                {new Array(4).fill(0).map((_, i) => (
                  <div
                    className={[
                      "box",
                      "big",
                      focusedIndex === i ? "active" : "",
                    ].join(" ")}
                    key={i}
                    onClick={() => {
                      setIsNum(true);
                      setFocusedIndex(i);
                      setShowKeyBoard(true);
                    }}
                  >
                    {qArr[i]}
                  </div>
                ))}
              </div>
            )}

            {!isPlate && (
              <>
                {/* <div className="floor1" onClick={() => setFloor(floor1)}>
                  {floor1}
                </div>
                <div className="floor2">{floor}</div>
                <div className="floor3" onClick={() => setFloor(floor3)}>
                  {floor3}
                </div> */}
              </>
            )}
            <div className="btn" onClick={handleSubmit}>
              寻车
            </div>
          </div>
        </div>
      </div>
      {showKeyBoard && (
        <Keyboard
          isNum={isNum}
          onClose={() => {
            setFocusedIndex(null);
            setShowKeyBoard(false);
          }}
          onSetIsNum={(val) => setIsNum(val)}
          onInput={(val) => {
            qArr[focusedIndex] = val;
            setQArr([...qArr]);
            if (isPlate) {
              switch (focusedIndex) {
                case 6:
                case 7:
                  setShowKeyBoard(false);
                  break;
                default:
                  setIsNum(true);
                  setFocusedIndex(focusedIndex + 1);
                  break;
              }
            } else {
              switch (focusedIndex) {
                case 3:
                  setShowKeyBoard(false);
                  break;
                default:
                  setIsNum(true);
                  setFocusedIndex(focusedIndex + 1);
                  break;
              }
            }
          }}
          onBackspace={() => {
            qArr[focusedIndex] = "";
            setQArr([...qArr]);
            setFocusedIndex(Math.max(0, focusedIndex - 1));
          }}
          onFinish={handleSubmit}
        ></Keyboard>
      )}
    </div>
  );
};
export default Car;