HNBWY_Model/webNew/src/pages/Model/index.tsx

/* eslint-disable jsx-a11y/iframe-has-title */
import { useEffect, useRef, useState } from "react";
import musicImg from "@/assets/img/music.png";
import musicImgAc from "@/assets/img/musicAc.png";
import styles from "./index.module.scss";
import { baseURL } from "@/utils/http";
import { useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { getModelInfo } from "@/store/action/home";
import { RootState } from "@/store";

export default function Model() {
  const location = useLocation();

  const dispatch = useDispatch();

  // 发送请求获取信息，存到仓库
  useEffect(() => {
    const arr = location.search.split("=");
    const id = arr[1];
    dispatch(getModelInfo(id));
  }, [dispatch, location.search]);

  // 从仓库获取信息
  const info = useSelector((state: RootState) => state.homeStore.qrModel);

  // 控制模型放大缩小和复位
  const ifrBoxRef = useRef<any>(null);
  const modelChangeFu = (val: number) => {
    const dom = ifrBoxRef.current;

    if (dom && dom.contentWindow && dom.contentWindow.webview) {
      if (val === 1) dom.contentWindow.webview.zoomIn(); // 放大
      else if (val === 2) dom.contentWindow.webview.zoomOut(); // 缩小
      else dom.contentWindow.webview.resetView(); // 复位
    }
  };

  // 控制音乐播放暂停
  const musicRef = useRef<HTMLAudioElement>(null);

  const [music, setMusic] = useState(false);
  const musicPlayFu = (flag: boolean) => {
    const dom = musicRef.current;
    if (dom) {
      if (flag) {
        // 打开音乐
        setMusic(true);
        dom.play();
        dom.addEventListener(
          "ended",
          function () {
            setMusic(false);
          },
          false
        );
      } else {
        // 关闭音乐
        setMusic(false);
        dom.pause();
      }
    }
  };

  return (
    <div className={styles.Model}>
      {/* 音频 */}
      {info.audioPath ? (
        <audio src={baseURL + info.audioPath} ref={musicRef}></audio>
      ) : null}
      {/* 模型盒子 */}
      <div className="ifrBox">
        {info.fileName ? (
          <iframe
            ref={ifrBoxRef}
            src={`model.html?m=${info.fileName}`}
            frameBorder="no"
          ></iframe>
        ) : null}
      </div>
      {/* 右边介绍 */}
      <div className="rightTxt">
        <div className="model_title">{info.name}</div>
        {info.description ? (
          <div
            className="model_txt"
            dangerouslySetInnerHTML={{ __html: info.description }}
          ></div>
        ) : (
          <div className="model_txt">暂无信息</div>
        )}

        <div className="model_floo">
          <div className="model_sortRow">
            类别：
            <p>{info.dictTextureName ? info.dictTextureName : "（空）"}</p>
          </div>
          <div className="model_ageRow">
            年代：
            <p>{info.dictAgeName ? info.dictAgeName : "（空）"}</p>
          </div>
        </div>

        {
          <div className="model_size">
            尺寸：
            <p title={info.sizeLength}>
              {info.sizeLength ? info.sizeLength : "（空）"}
            </p>
          </div>
        }
      </div>

      {/* 底部按钮 */}
      <div className="flootBtnBox">
        <div
          className="flootRow flootRow1"
          title="放大"
          onClick={() => modelChangeFu(1)}
        ></div>
        <div
          className="flootRow flootRow2"
          title="缩小"
          onClick={() => modelChangeFu(2)}
        ></div>
        {info.audioPath ? (
          <div
            className="flootRow flootRowM"
            title={music ? "暂停音频" : "播放音频"}
          >
            {music ? (
              <img src={musicImgAc} alt="" onClick={() => musicPlayFu(false)} />
            ) : (
              <img src={musicImg} alt="" onClick={() => musicPlayFu(true)} />
            )}
          </div>
        ) : null}

        <div
          className="flootRow flootRow4"
          title="重置"
          onClick={() => modelChangeFu(3)}
        ></div>
      </div>
    </div>
  );
}