upp

pc/src/App.tsx

@@ -14,6 +14,7 @@ import MessageCom from "./components/Message";
 const A1Home = React.lazy(() => import("./pages/A1Home"));
 const A2Main = React.lazy(() => import("./pages/A2Main"));
 const A3Goods = React.lazy(() => import("./pages/A3Goods"));
+const A4Know = React.lazy(() => import("./pages/A4Know"));
 const NotFound = React.lazy(() => import("@/components/NotFound"));
 
 function App() {
@@ -33,6 +34,8 @@ function App() {
             <Route path="/main" exact component={A2Main} />
             {/* 通过文物分享id打开的页面 */}
             <Route path="/goods" component={A3Goods} />
+            {/* 单独打开的知识详情页面 */}
+            <Route path="/know" component={A4Know} />
             {/* 找不到页面 */}
             <Route path="*" component={NotFound} />
           </Switch>

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

@@ -323,7 +323,7 @@ function Tab4Info({ isOpen, id, closePage }: Props) {
       ) : null}
 
       {/* 返回按钮 */}
-      <div className="t4ItoBack" onClick={closePage}>
+      <div className="t4ItoBack" onClick={closePage} hidden={isOpen}>
         <img src={toBackImg} alt="" />
       </div>
 

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

@@ -4,6 +4,7 @@ import { CloseOutlined } from "@ant-design/icons";
 import { Button } from "antd";
 import { A2Left2Type } from "@/types";
 import { A2_APIgetKnowledge } from "@/store/action/A2Main";
+import Tab5Info from "../Tab5Info";
 
 type Props = {
   closeFu: () => void;
@@ -37,6 +38,10 @@ function Tab4S4({ closeFu, type }: Props) {
     getListFu(type);
   }, [getListFu, type]);
 
+  // 打开知识页面的 id
+
+  const [knowId, setKnowId] = useState(0);
+
   return (
     <div className={styles.Tab4S4}>
       <div className="tab4S4main">
@@ -56,7 +61,7 @@ function Tab4S4({ closeFu, type }: Props) {
                     <div
                       className="left2Row"
                       key={v2.id}
-                      onClick={() => window.open(v2.link)}
+                      onClick={() => setKnowId(v2.id)}
                     >
                       {v2.name}
                     </div>
@@ -76,6 +81,9 @@ function Tab4S4({ closeFu, type }: Props) {
           <Button>关闭</Button>
         </div>
       </div>
+
+      {/* 点击知识 打开 tab5的知识详情页 */}
+      {knowId ? <Tab5Info sId={knowId} closeFu={() => setKnowId(0)} /> : null}
     </div>
   );
 }

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

@@ -90,7 +90,7 @@ function Tab5() {
         />
       </div>
 
-      {infoId ? <Tab5Info sId={infoId} /> : null}
+      {infoId ? <Tab5Info sId={infoId} closeFu={() => setInfoId(0)} /> : null}
     </div>
   );
 }

pc/src/pages/A2Main/Tab5Info/index.module.scss

@@ -14,7 +14,7 @@
       padding: 20px 5px 20px 10px;
       background-color: rgba(131, 123, 104, .9);
       backdrop-filter: blur(20px);
-    
+
 
       .Tab5Info1Main {
         padding-right: 5px;
@@ -75,7 +75,37 @@
 
     .Tab5Info2 {
       width: 75%;
-      background-color: #fff;
+      background-color: #f7f7f7;
+      position: relative;
+
+      .tab5Info2Loding {
+        position: absolute;
+        z-index: 9;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .Tab5Info2Left {
+        padding-left: 20px;
+        cursor: pointer;
+        position: absolute;
+        z-index: 10;
+        width: 100px;
+        height: 44px;
+        background-color: #f7f7f7;
+        line-height: 44px;
+        font-size: 24px;
+        color: #47392C;
+      }
+      .Tab5Info2LeftNo{
+        cursor: default;
+      }
 
       iframe {
         width: 100%;

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

@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { A2_APItab5Info } from "@/store/action/A2Main";
 import classNames from "classnames";
-import { domShowFu } from "@/utils/domShow";
-import SpinLoding from "@/components/SpinLoding";
+import { Spin } from "antd";
+import { LeftOutlined } from "@ant-design/icons";
 
 type ListType = {
   id: string;
@@ -15,9 +15,11 @@ type ListType = {
 
 type Props = {
   sId: number;
+  closeFu: () => void;
+  isOpen?: boolean;
 };
 
-function Tab5Info({ sId }: Props) {
+function Tab5Info({ sId, closeFu, isOpen }: Props) {
   const [data, setData] = useState([] as ListType[]);
 
   const getInfoFu = useCallback(async () => {
@@ -74,10 +76,6 @@ function Tab5Info({ sId }: Props) {
   const [waiUrl, setWaiUrl] = useState("");
 
   useEffect(() => {
-    domShowFu("#AsyncSpinLoding", true);
-  }, [waiUrl]);
-
-  useEffect(() => {
     if (data[0]) {
       if (data[0].link) {
         setAcId(data[0].id);
@@ -93,6 +91,7 @@ function Tab5Info({ sId }: Props) {
     }
   }, [data]);
 
+  // 切换url
   const cutAcFu = useCallback((id: string, url?: string) => {
     if (url) {
       setAcId(id);
@@ -100,6 +99,13 @@ function Tab5Info({ sId }: Props) {
     }
   }, []);
 
+  // 右边嵌套页面的加载loding
+  const [isLoding, setIsLoding] = useState(true);
+
+  useEffect(() => {
+    setIsLoding(true);
+  }, [waiUrl]);
+
   return (
     <div className={styles.Tab5Info}>
       <div className="Tab5Info1">
@@ -138,11 +144,28 @@ function Tab5Info({ sId }: Props) {
         </div>
       </div>
       <div className="Tab5Info2">
-        <SpinLoding />
+        <div className="tab5Info2Loding" hidden={!isLoding}>
+          <Spin size="large" />
+        </div>
+
+        {/* 遮挡原网址的 《 箭头 */}
+
+        <div
+          className={classNames(
+            "Tab5Info2Left",
+            isOpen ? "Tab5Info2LeftNo" : ""
+          )}
+          onClick={() => {
+            if (isOpen) {
+            } else closeFu();
+          }}
+        >
+          <LeftOutlined hidden={isOpen} />
+        </div>
 
         {waiUrl ? (
           <iframe
-            onLoad={() => domShowFu("#AsyncSpinLoding", false)}
+            onLoad={() => setIsLoding(false)}
             key={waiUrl}
             src={waiUrl}
             frameBorder="0"

pc/src/pages/A3Goods/index.module.scss

@@ -1,10 +1,6 @@
 .A3Goods {
   width: 100%;
   height: 100%;
-  color: #fff;
   position: relative;
-  backdrop-filter: blur(10px);
-  padding-top: 30px;
-  background-size: 100% 100%;
   // :global {}
 }

pc/src/pages/A3Goods/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { urlParameter } from "@/utils/history";
 import { useLocation } from "react-router-dom";
-import { envUrl } from "@/utils/env";
 import Tab4Info from "../A2Main/Tab4Info";
 
 function A3Goods() {
@@ -17,10 +16,7 @@ function A3Goods() {
   }, [location.search]);
 
   return (
-    <div
-      className={styles.A3Goods}
-      style={{ backgroundImage: `url(${envUrl}/home/homeBg.jpg)` }}
-    >
+    <div className={styles.A3Goods}>
       {id ? <Tab4Info id={id} isOpen={true} /> : null}
     </div>
   );

pc/src/pages/A4Know/index.module.scss

@@ -0,0 +1,6 @@
+.A4Know{
+  position: relative;
+  // :global{
+    
+  // }
+}

pc/src/pages/A4Know/index.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { useLocation } from "react-router-dom";
+import { urlParameter } from "@/utils/history";
+import Tab5Info from "../A2Main/Tab5Info";
+function A4Know() {
+  const [id, setId] = useState(0);
+
+  // 获取地址栏参数
+  const location = useLocation();
+  useEffect(() => {
+    const obj = urlParameter(location.search);
+    if (obj.id) setId(Number(obj.id));
+    else alert("参数错误!");
+  }, [location.search]);
+  return (
+    <div className={styles.A4Know}>
+      {id ? <Tab5Info sId={id} closeFu={() => {}} isOpen={true}/> : null}
+    </div>
+  );
+}
+
+const MemoA4Know = React.memo(A4Know);
+
+export default MemoA4Know;