upp

pc/src/assets/styles/base.css

@@ -50,6 +50,9 @@ textarea {
   opacity: 0;
   transition: opacity 0.5s;
 }
+.noFindPage .noFindBtn {
+  text-align: center;
+}
 /* 兼容360浏览器的下拉框 */
 .ant-select-selector {
   position: relative;

pc/src/assets/styles/base.less

@@ -62,6 +62,9 @@ textarea {
 .noFindPage {
   opacity: 0;
   transition: opacity .5s;
+  .noFindBtn{
+    text-align: center;
+  }
 }
 
 /* 兼容360浏览器的下拉框 */

pc/src/components/NotFound/index.tsx

@@ -1,4 +1,5 @@
-import { Result } from "antd";
+import history from "@/utils/history";
+import { Button, Result } from "antd";
 import { useEffect, useRef } from "react";
 
 export default function NotFound() {
@@ -16,11 +17,12 @@ export default function NotFound() {
 
   return (
     <div className="noFindPage">
-      <Result
-        status="404"
-        title="404"
-        subTitle="页面找不到或没有权限，请联系管理员!"
-      />
+      <Result status="404" title="404" subTitle="页面找不到啦!" />
+      <div className="noFindBtn">
+        <Button type="primary" onClick={() => history.replace("/")}>
+          去首页
+        </Button>
+      </div>
     </div>
   );
 }

pc/src/pages/A2Main/GoodsInfo/RightFile/index.module.scss

@@ -2,27 +2,50 @@
   width: 100%;
   height: 100%;
   position: relative;
+  border-radius: 10px;
 
-  :global {
 
-    .R_oneAudio {
+  :global {
+    .R_audioBox {
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
-      color: var(--themeColor);
-      font-size: 20px;
+
+      #myAudio {
+        width: 400px;
+      }
     }
 
+    .R_audioIcon {
+      cursor: pointer;
+      position: absolute;
+      right: 8px;
+      top: 5px;
+      z-index: 999;
+
+      &>img {
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+
     .R1_row {
+      background-color: #211c19;
+
       border-radius: 10px;
       overflow: hidden;
       position: absolute;
-      top: 0;
+      bottom: 0px;
       left: 0;
       width: 100%;
       height: 100%;
+      height: calc(100% - 50px);
       z-index: 3;
       opacity: 0;
       pointer-events: none;
@@ -34,7 +57,6 @@
       }
 
       video {
-        background-color: #211c19;
         width: 100%;
         height: 100%;
         max-width: 100%;
@@ -47,6 +69,10 @@
       pointer-events: auto;
     }
 
+    .R1_IrBox {
+      z-index: 99;
+    }
+
     .R_left {
       cursor: pointer;
       position: absolute;
@@ -80,18 +106,44 @@
       pointer-events: none;
     }
 
-    .R_indBox {
+
+    // 中间的类型切换
+    .R_typeCutBox {
+      position: absolute;
+      z-index: 98;
+      top: 5px;
+      left: 50%;
+      transform: translateX(-50%);
+      height: 40px;
+      display: flex;
+
+      .R_typeCutRow {
+        margin: 0 5px;
+        cursor: pointer;
+        color: var(--themeColor);
+        line-height: 40px;
+        text-align: center;
+        height: 40px;
+        padding: 0 40px;
+        border-radius: 20px;
+        border: 1px solid var(--themeColor);
+      }
+
+      .R_typeCutRowAc {
+        background-color: var(--themeColor);
+        color: #fff;
+      }
+    }
+
+    .showIndBox {
       position: absolute;
-      bottom: -45px;
-      right: 0;
-      z-index: 11;
-      background-color: #2d2724;
       height: 40px;
       line-height: 40px;
-      color: var(--themeColor);
-      text-align: center;
-      padding: 0 20px;
-      border-radius: 20px;
+      left: 0;
+      top: 5px;
+      z-index: 99;
+      color: #fff;
     }
+
   }
 }

pc/src/pages/A2Main/GoodsInfo/RightFile/index.tsx

@@ -1,18 +1,51 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
-import { A2FileType } from "@/types";
+import { A2FileObjType, A2FileType } from "@/types";
 import { baseURL } from "@/utils/http";
 import classNames from "classnames";
 import ImageLazy from "@/ImageLazy";
 import R_leftImg from "@/assets/img/goods/R_left.png";
 import R_rightImg from "@/assets/img/goods/R_right.png";
+import icon1 from "@/assets/img/goods/icon1.png";
+import icon1Ac from "@/assets/img/goods/icon1Ac.png";
 
 type Props = {
-  list: A2FileType[];
+  listObj: A2FileObjType;
+  audioInfo: A2FileType;
+  isOpen: boolean;
 };
 
-function RightFile({ list }: Props) {
+function RightFile({ listObj, audioInfo, isOpen }: Props) {
+  useEffect(() => {
+    // 如果有音频信息
+    if (audioInfo.id) {
+      // 显示音频图标
+      setRight1({ show: true, done: false });
+      window.setTimeout(() => {
+        const dom: HTMLAudioElement = document.querySelector("#myAudio")!;
+        dom.onended = () => {
+          // console.log("-------音频播放结束");
+
+          // 音频播放结束
+          setRight1({ show: true, done: false });
+        };
+        // 音频的状态
+        if (!isOpen) {
+          dom.play();
+
+          setRight1({ show: true, done: true });
+        }
+      }, 100);
+    }
+  }, [audioInfo, isOpen]);
+
+  // 文件类型 type
+  const [type, setType] = useState<"model" | "video" | "img">("model");
+
+  // 音频的显示和隐藏
+  const [right1, setRight1] = useState({ show: false, done: false });
+
   // 当前显示的 索引
 
   const [showInd, setShowInd] = useState(0);
@@ -23,25 +56,104 @@ function RightFile({ list }: Props) {
     },
     [showInd]
   );
-  // 第一次不显示暂无信息
-  const [flagOne, setFlagOne] = useState(false);
 
-  useEffect(() => {
-    window.setTimeout(() => {
-      setFlagOne(true);
-    }, 500);
+  // 打开和关闭音频
+  const audioCutFu = useCallback((val: boolean) => {
+    const dom: HTMLAudioElement = document.querySelector("#myAudio")!;
+    if (val) dom.play();
+    else dom.pause();
+    setRight1({ show: true, done: val });
   }, []);
 
+  // 在页面展示的数组
+  const list = useMemo(() => {
+    return listObj[type];
+  }, [listObj, type]);
+
+  // 是否只有单独的音频上传
+
+  const isOneAudio = useMemo(() => {
+    if (
+      audioInfo.id &&
+      listObj.img.length === 0 &&
+      listObj.model.length === 0 &&
+      listObj.video.length === 0
+    )
+      return true;
+    else return false;
+  }, [audioInfo, listObj]);
+
+  // 切换不同文件（模型/视频/图片的数组）
+  const typeArr = useMemo(() => {
+    const arr: {
+      name: "模型" | "视频" | "图片";
+      type: "model" | "video" | "img";
+    }[] = [];
+    if (listObj.model.length) arr.push({ name: "模型", type: "model" });
+    if (listObj.video.length) arr.push({ name: "视频", type: "video" });
+    if (listObj.img.length) arr.push({ name: "图片", type: "img" });
+    return arr;
+  }, [listObj]);
+
+  // 当前默认展示什么模块（优先级按照 模型-视频-图片）
+  useEffect(() => {
+    if (listObj.model.length) setType("model");
+    else if (listObj.video.length) setType("video");
+    else setType("img");
+  }, [listObj]);
+
+  // 每次变化type的时候把 索引变成0
+  useEffect(() => {
+    setShowInd(0);
+  }, [type]);
+
   return (
     <div className={styles.RightFile}>
+      {/* 音频的控制模块 */}
+      <div className="R_audioBox" hidden={!isOneAudio}>
+        {audioInfo.filePath ? (
+          <audio
+            src={baseURL + audioInfo.filePath}
+            controls
+            id="myAudio"
+          ></audio>
+        ) : null}
+      </div>
+
+      {/* 音频按钮 */}
+      <div className="R_audioIcon" hidden={!right1.show || isOneAudio}>
+        <img
+          src={icon1Ac}
+          alt=""
+          title="打开文物音频"
+          hidden={right1.done}
+          onClick={() => audioCutFu(true)}
+        />
+        <img
+          onClick={() => audioCutFu(false)}
+          src={icon1}
+          alt=""
+          title="关闭文物音频"
+          hidden={!right1.done}
+        />
+      </div>
+
+      {/* 模型缓存起来 */}
+      {listObj.model && listObj.model[0] && listObj.model[0].id ? (
+        <div className="R1_row R1_rowAc R1_IrBox" hidden={type !== "model"}>
+          <iframe
+            src={`model.html?m=${listObj.model[0].filePath}`}
+            frameBorder="0"
+          ></iframe>
+        </div>
+      ) : null}
+
       {list.map((v, i) => (
         <div
           className={classNames("R1_row", i === showInd ? "R1_rowAc" : "")}
           key={v.id}
         >
-          {v.type === "model" ? (
-            <iframe src={`model.html?m=${v.filePath}`} frameBorder="0"></iframe>
-          ) : v.type === "video" && i === showInd ? (
+          {v.type === "video" && i === showInd ? (
             <video src={baseURL + v.filePath} controls></video>
           ) : v.type === "img" ? (
             <ImageLazy src={v.filePath} width="100%" height="100%" />
@@ -49,13 +161,6 @@ function RightFile({ list }: Props) {
         </div>
       ))}
 
-      {/* 只上传了音频的情况 */}
-      {list.length <= 0 ? (
-        <div className="R_oneAudio" hidden={!flagOne}>
-          暂无更多内容
-        </div>
-      ) : null}
-
       {/* 左右按钮 */}
       <div
         hidden={list.length <= 1}
@@ -75,10 +180,29 @@ function RightFile({ list }: Props) {
         <img src={R_rightImg} alt="" />
       </div>
 
-      {/* 下标 */}
-      <div className="R_indBox" hidden={list.length <= 1}>
-        {showInd + 1} / {list.length}
+      {/* 中间的模块选择 */}
+      <div className="R_typeCutBox" hidden={typeArr.length <= 1}>
+        {typeArr.map((v) => (
+          <div
+            onClick={() => setType(v.type)}
+            className={classNames(
+              "R_typeCutRow",
+              type === v.type ? "R_typeCutRowAc" : ""
+            )}
+            key={v.type}
+          >
+            {v.name}
+            {listObj[v.type].length > 1 ? listObj[v.type].length : null}
+          </div>
+        ))}
       </div>
+
+      {/* 索引 */}
+      {list.length > 1 ? (
+        <div className="showIndBox">
+          {showInd + 1} / {list.length}
+        </div>
+      ) : null}
     </div>
   );
 }

pc/src/pages/A2Main/GoodsInfo/index.tsx

@@ -16,21 +16,19 @@ import {
 } from "@/store/action/A2Main";
 import {
   A2BarrageType,
+  A2FileObjType,
   A2FileType,
   A2GoodsType,
   A2QuestionType,
 } from "@/types";
-import { baseURL } from "@/utils/http";
 import closeImg from "@/assets/img/goods/close.png";
 import homeImg from "@/assets/img/goods/toHome.png";
 import history from "@/utils/history";
 import classNames from "classnames";
-import icon1 from "@/assets/img/goods/icon1.png";
 import icon2 from "@/assets/img/goods/icon2.png";
 import icon3 from "@/assets/img/goods/icon3.png";
 import icon4 from "@/assets/img/goods/icon4.png";
 import icon5 from "@/assets/img/goods/icon5.png";
-import icon1Ac from "@/assets/img/goods/icon1Ac.png";
 import icon3Ac from "@/assets/img/goods/icon3Ac.png";
 import icon4Ac from "@/assets/img/goods/icon4Ac.png";
 import icon5Ac from "@/assets/img/goods/icon5Ac.png";
@@ -51,27 +49,23 @@ type Props = {
 function GoodsInfo({ isOpen, id, closePage }: Props) {
   // 文物信息
   const [info, setInfo] = useState<A2GoodsType>({} as A2GoodsType);
-  // 附件数据
-  const [fileList, setFileList] = useState<A2FileType[]>([]);
 
-  // 音频的url
-  const [audio, setAudio] = useState("");
+  // 附件数据(除开音频)
+  const [fileList, setFileList] = useState<A2FileObjType>({
+    model: [],
+    video: [],
+    img: [],
+  });
 
-  // 右侧图标
-  const [right1, setRight1] = useState({ show: false, done: false });
+  // 附件音频信息
+  const [audioInfo, setAudioInfo] = useState({} as A2FileType);
+
+  // 右侧图标（后面修改了 第一个图标 音频 移动到 附件页面）
   const [right2, setRight2] = useState({ show: false, done: false });
   const [right3, setRight3] = useState({ show: false, done: false });
   const [right4, setRight4] = useState(false);
   const [right5, setRight5] = useState(false);
 
-  // 打开和关闭音频
-  const audioCutFu = useCallback((val: boolean) => {
-    const dom: HTMLAudioElement = document.querySelector("#myAudio")!;
-    if (val) dom.play();
-    else dom.pause();
-    setRight1({ show: true, done: val });
-  }, []);
-
   // 点击点赞
   const likeClickFu = useCallback(async () => {
     if (right4) return;
@@ -198,42 +192,24 @@ function GoodsInfo({ isOpen, id, closePage }: Props) {
 
         const file: A2FileType[] = res.data.file;
 
-        // 附件按照 模型-视频-图片的顺序
-        let modelObj = {} as A2FileType;
-        let videoObj = {} as A2FileType;
-        const imgArr: A2FileType[] = [];
+        // 整理附件数据
+        const fileObj: A2FileObjType = {
+          model: [],
+          video: [],
+          img: [],
+        };
         file.forEach((v) => {
-          if (v.type === "model") modelObj = v;
-          else if (v.type === "video") videoObj = v;
-          else if (v.type === "img") imgArr.push(v);
+          if (v.type === "model") fileObj.model.push(v);
+          else if (v.type === "video") fileObj.video.push(v);
+          else if (v.type === "img") fileObj.img.push(v);
         });
-        let fileListTemp: A2FileType[] = [];
-        if (modelObj.id) fileListTemp.push(modelObj);
-        if (videoObj.id) fileListTemp.push(videoObj);
 
-        fileListTemp = [...fileListTemp, ...imgArr];
-        setFileList(fileListTemp);
+        setFileList(fileObj);
 
         // 有上传音频
         const isAudioObj = file.find((v) => v.type === "audio");
         if (isAudioObj) {
-          setAudio(isAudioObj.filePath);
-          setRight1({ show: true, done: false });
-          window.setTimeout(() => {
-            const dom: HTMLAudioElement = document.querySelector("#myAudio")!;
-            dom.onended = () => {
-              // console.log("-------音频播放结束");
-
-              // 音频播放结束
-              setRight1({ show: true, done: false });
-            };
-            // 音频的状态
-            if (!isOpen) {
-              dom.play();
-
-              setRight1({ show: true, done: true });
-            }
-          }, 100);
+          setAudioInfo(isAudioObj);
         }
 
         setInfo(info);
@@ -256,7 +232,7 @@ function GoodsInfo({ isOpen, id, closePage }: Props) {
         }
       }
     },
-    [isOpen, leftArrTemp]
+    [leftArrTemp]
   );
 
   useEffect(() => {
@@ -275,8 +251,6 @@ function GoodsInfo({ isOpen, id, closePage }: Props) {
 
   return (
     <div className={styles.GoodsInfo}>
-      {audio ? <audio src={baseURL + audio} id="myAudio"></audio> : null}
-
       {/* 关闭按钮 */}
       <div className={classNames("G_close", isOpen ? "G_closeLL" : "")}>
         <img
@@ -325,7 +299,11 @@ function GoodsInfo({ isOpen, id, closePage }: Props) {
           </div>
           {/* 右侧容器 */}
           <div className="G_rightMain">
-            <RightFile list={fileList} />
+            <RightFile
+              listObj={fileList}
+              isOpen={isOpen}
+              audioInfo={audioInfo}
+            />
           </div>
         </div>
 
@@ -352,23 +330,6 @@ function GoodsInfo({ isOpen, id, closePage }: Props) {
           </div>
           <div className="G_bottom_right">
             <div className="G_bottom_right_main">
-              {/* 音频 */}
-              <div className="R_row" hidden={!right1.show}>
-                <img
-                  src={icon1Ac}
-                  alt=""
-                  title="打开音频"
-                  hidden={right1.done}
-                  onClick={() => audioCutFu(true)}
-                />
-                <img
-                  onClick={() => audioCutFu(false)}
-                  src={icon1}
-                  alt=""
-                  title="关闭音频"
-                  hidden={!right1.done}
-                />
-              </div>
               {/* 弹幕留言 */}
               <div
                 className="R_row"

pc/src/pages/A2Main/GoodsSw/index.tsx

@@ -33,7 +33,7 @@ function GoodsSw() {
   }, [curTit]);
 
   useEffect(() => {
-    // 开启滚轮提升 图片更换 定时器
+    // 开启滚轮提示 图片更换 定时器
     clearInterval(curTimeRef.current);
     curTimeRef.current = window.setInterval(() => {
       setCurCut(!curCut);

pc/src/types/store/A2Main.d.ts

@@ -65,6 +65,12 @@ export type A2FileType = {
   updateTime: string;
 };
 
+export type A2FileObjType = {
+  model: A2FileType[];
+  video: A2FileType[];
+  img: A2FileType[];
+};
+
 export type A2QuestionType = {
   answer: string;
   createTime: string;