kaiPingWeb/code/src/pages/Z1Search/index.tsx

import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import { baseUrl } from "@/index";
import { SwapRightOutlined } from "@ant-design/icons";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { InfoRowType, SearchType } from "@/types";
import history, { isMobileFu } from "@/utils/history";
import classNames from "classnames";

function Z1Search() {
  // 移动端没有搜索页面，直接跳首页
  useEffect(() => {
    if (isMobileFu()) history.replace("/");
  }, []);

  const [value, setValue] = useState("");

  // 获取所有数据
  const { village, architec, build } = useSelector(
    (state: RootState) => state.A0Layout.dataAll
  );

  const dataAllRef = useRef([] as SearchType[]);

  const [data, setData] = useState([
    { id: "0", type: "建筑", name: "", path: "", txt: "" },
  ] as SearchType[]);

  useEffect(() => {
    const arr = [] as SearchType[];
    village.forEach((v) => {
      arr.push({
        id: v.id + "村落",
        name: v.name,
        txt: v.infoTxt,
        type: "村落",
        path: `/village?id=${v.id}`,
      });
    });

    for (const k in architec) {
      const arr2 = Reflect.get(architec, k).data as InfoRowType[];
      arr2.forEach((v) => {
        arr.push({
          id: v.id + "建筑",
          name: v.name,
          txt: v.txt,
          type: "建筑",
          path: `architecInfo?id=${v.id}`,
        });
      });
    }

    build.forEach((v) => {
      arr.push({
        id: v.id + "构件",
        name: v.name,
        txt: v.txt,
        type: "构件",
        path: `/buildInfo?id=${v.id}`,
      });
    });

    dataAllRef.current = arr;
    setData(arr);
  }, [architec, build, village]);

  // 点击搜索
  const btnSearchFu = useCallback(() => {
    const dom = document.querySelector(".Z1list") as HTMLDivElement;
    if (dom) dom.scrollTop = 0;

    if (value) {
      const arr = dataAllRef.current.filter(
        (v) => v.name.includes(value) || v.txt.includes(value)
      );
      setData(arr);
    } else setData(dataAllRef.current);
  }, [value]);

  return (
    <div
      className={styles.Z1Search}
      style={{ backgroundImage: `url(${baseUrl}/Z1Search/pc/bg.jpg)` }}
    >
      {/* 返回 */}
      <div className="Z1back" onClick={() => history.go(-1)}></div>

      {/* 主体 */}
      <div className="Z1main">
        <h1>近代建筑一张图</h1>
        <p>开平碉楼与村落及赤坎旧镇</p>
        {/* 搜索框 */}
        <div
          className="Z1input"
          onKeyUp={(e) => {
            if (e.key === "Enter") btnSearchFu();
          }}
        >
          <div className="Z1input1"></div>
          <div className="Z1input2">
            <input
              placeholder="请输入关键词..."
              maxLength={30}
              value={value}
              onChange={(e) => setValue(e.target.value.trim())}
            />
          </div>
          <div className="Z1input3" onClick={btnSearchFu}>
            搜 索
          </div>
        </div>

        {/* 信息展示 */}
        {data.length ? (
          <div className="Z1list mySorrl">
            {data.map((v) => (
              <div
                className={classNames(
                  "Z1listRow",
                  v.id === "0" ? "Z1listRowHide" : ""
                )}
                key={v.id}
                onClick={() => history.push(v.path)}
              >
                <div className="Z1listRow1">
                  <div>{v.name}</div>
                  <div className="Z1listRow1_1">{v.type}</div>
                </div>
                <div className="Z1listRow2">
                  <div>查看</div>
                  <div className="Z1listRow2_1">
                    <SwapRightOutlined rev={undefined} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="Z1listNone">没有找到相关信息...</div>
        )}
      </div>
    </div>
  );
}

const MemoZ1Search = React.memo(Z1Search);

export default MemoZ1Search;