Explorar o código

嵌套四维看看 返回的问题

shaogen1995 hai 1 ano
pai
achega
75f187233a

+ 18 - 2
code/src/components/ArcOrBuildInfo/index.tsx

@@ -6,6 +6,7 @@ import history, { modelUrl } from "@/utils/history";
 import classNames from "classnames";
 import { InfoRowType } from "@/types";
 import { getUrlHashFu } from "@/utils/data";
+import { useLocation } from "react-router-dom";
 
 const iconArr = [
   { id: 2, name: "放大" },
@@ -19,6 +20,18 @@ type Props = {
 };
 
 function ArcOrBuildInfo({ info, type }: Props) {
+  // 嵌套 四维看看 iframe 返回的问题
+  const location = useLocation();
+  const [back2, setBack2] = useState("");
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.search);
+    const back2 = query.get("back2");
+    setBack2(back2!);
+
+    setBack2(back2!);
+  }, [location.search]);
+
   // 模型的ref
   const ifrRefNew = useRef<any>(null);
 
@@ -51,7 +64,10 @@ function ArcOrBuildInfo({ info, type }: Props) {
     >
       {/* 左下方的按钮 */}
       <div className="C2leftBtn">
-        <div className="C2lRow" onClick={() => history.go(-1)}>
+        <div
+          className="C2lRow"
+          onClick={() => (back2 ? history.push(back2) : history.go(-1))}
+        >
           返回
         </div>
         {info.isBuild ? (
@@ -97,7 +113,7 @@ function ArcOrBuildInfo({ info, type }: Props) {
           <div
             hidden={full}
             className="C2rToScene"
-            onClick={() => getUrlHashFu(info.code)}
+            onClick={() => getUrlHashFu(info.code, "scene")}
           >
             进入室内
           </div>

+ 23 - 3
code/src/components/ArcOrBuildInfoM/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
 
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { baseUrl } from "@/index";
 import { InfoRowType } from "@/types";
@@ -8,6 +8,7 @@ import history, { modelUrl } from "@/utils/history";
 import { SwapRightOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import { getUrlHashFu } from "@/utils/data";
+import { useLocation } from "react-router-dom";
 
 const iconArr = [
   { id: 2, name: "放大" },
@@ -21,6 +22,18 @@ type Props = {
 };
 
 function ArcOrBuildInfoM({ info, type }: Props) {
+  // 嵌套 四维看看 iframe 返回的问题
+  const location = useLocation();
+  const [back2, setBack2] = useState("");
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.search);
+    const back2 = query.get("back2");
+    setBack2(back2!);
+
+    setBack2(back2!);
+  }, [location.search]);
+
   // 模型的ref
   const ifrRefNew = useRef<any>(null);
 
@@ -58,7 +71,11 @@ function ArcOrBuildInfoM({ info, type }: Props) {
       style={{ backgroundImage: `url(${baseUrl}/C2ArchitecInfo/bg2.jpg)` }}
     >
       {/* 返回按钮 */}
-      <div className="AMback" onClick={() => history.go(-1)} hidden={full}>
+      <div
+        className="AMback"
+        onClick={() => (back2 ? history.push(back2) : history.go(-1))}
+        hidden={full}
+      >
         <img src={`${baseUrl}/C2ArchitecInfo/icon_back.png`} alt="" />
       </div>
 
@@ -132,7 +149,10 @@ function ArcOrBuildInfoM({ info, type }: Props) {
 
         {/* 去大场景 */}
         {type === "C2ArchitecInfo" && info.code ? (
-          <div className="AMtoVr" onClick={() => getUrlHashFu(info.code)}>
+          <div
+            className="AMtoVr"
+            onClick={() => getUrlHashFu(info.code, "scene")}
+          >
             室内VR
             <p>
               <SwapRightOutlined />

+ 5 - 4
code/src/pages/B1Village/index.tsx

@@ -55,6 +55,9 @@ function B1Village() {
     const param = query.get("id");
     // console.log("村落页面获取id", param);
     setUid(param!);
+
+    // 切换村落的时候隐藏 左侧
+    setInfoInd(-1);
   }, [location.search]);
 
   // 详情 索引
@@ -148,7 +151,7 @@ function B1Village() {
 
   // 点击右侧的 场景 或者 构件
   const rightClickFu = useCallback((id: string, name: string) => {
-    if (name === "VR场景") getUrlHashFu(id)
+    if (name === "VR场景") getUrlHashFu(id, "scene");
     else history.push(`/buildInfo?id=${id}`);
   }, []);
 
@@ -214,9 +217,7 @@ function B1Village() {
                 ></div>
                 <div
                   className="B1infoFlooBtn"
-                  onClick={() =>
-                    history.push(`/architecInfo?id=${v.architecId}`)
-                  }
+                  onClick={() => getUrlHashFu(v.architecId, "architecInfo", 2)}
                 >
                   查看
                 </div>

+ 5 - 2
code/src/pages/B1VillageM/index.tsx

@@ -57,6 +57,9 @@ function B1VillageM() {
     const param = query.get("id");
     // console.log("村落页面获取id", param);
     setUid(param!);
+
+    // 切换村落的时候隐藏 左侧
+    setInfoInd(-1);
   }, [location.search]);
 
   // 详情 索引
@@ -147,7 +150,7 @@ function B1VillageM() {
 
   // 点击右侧的 场景 或者 构件
   const rightClickFu = useCallback((id: string, name: string) => {
-    if (name === "VR场景") getUrlHashFu(id);
+    if (name === "VR场景") getUrlHashFu(id, "scene");
     else history.push(`/buildInfo?id=${id}`);
   }, []);
 
@@ -284,7 +287,7 @@ function B1VillageM() {
               {/* 底部的按钮 */}
               <div
                 className="B1infoTxt3"
-                onClick={() => history.push(`/architecInfo?id=${v.architecId}`)}
+                onClick={() => getUrlHashFu(v.architecId, "architecInfo", 2)}
               >
                 <img src={btnImg} alt="" />
                 <div>

+ 2 - 1
code/src/pages/C1Architec/index.tsx

@@ -9,6 +9,7 @@ import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 import history from "@/utils/history";
 import { getTitFu, setTitFu } from "@/utils/storage";
+import { getUrlHashFu } from "@/utils/data";
 
 function C1Architec() {
   const location = useLocation();
@@ -174,7 +175,7 @@ function C1Architec() {
               key={v.id}
               onMouseEnter={() => setHoverId(v.id)}
               onMouseLeave={() => setHoverId("")}
-              onClick={() => history.push(`/architecInfo?id=${v.id}`)}
+              onClick={() => getUrlHashFu(v.id, "architecInfo",2)}
             >
               <img src={`${baseUrl}/C1Architec/pc/${uId}/${v.id}.png`} alt="" />
               <p>{v.name}</p>

+ 2 - 1
code/src/pages/C1ArchitecM/index.tsx

@@ -16,6 +16,7 @@ import downimg from "@/assets/img/tab3/icon_down.png";
 
 import history from "@/utils/history";
 import { InfoRowType } from "@/types";
+import { getUrlHashFu } from "@/utils/data";
 
 function C1ArchitecM() {
   const location = useLocation();
@@ -157,7 +158,7 @@ function C1ArchitecM() {
           <div className="swiper-wrapper">
             {info.data.map((v, i) => (
               <div
-                onClick={() => history.push(`/architecInfo?id=${v.id}`)}
+                onClick={() => getUrlHashFu(v.id, "architecInfo",2)}
                 className={classNames(
                   "swiper-slide",
                   i === ind ? "swiper-slideBig" : ""

+ 6 - 2
code/src/pages/Z1Search/index.tsx

@@ -7,6 +7,7 @@ import { RootState } from "@/store";
 import { InfoRowType, SearchType } from "@/types";
 import history, { isMobileFu } from "@/utils/history";
 import classNames from "classnames";
+import { getUrlHashFu } from "@/utils/data";
 
 function Z1Search() {
   // 移动端没有搜索页面,直接跳首页
@@ -47,7 +48,7 @@ function Z1Search() {
           name: v.name,
           txt: v.txt,
           type: "建筑",
-          path: `architecInfo?id=${v.id}`,
+          path: v.id,
         });
       });
     }
@@ -122,7 +123,10 @@ function Z1Search() {
                   v.id === "0" ? "Z1listRowHide" : ""
                 )}
                 key={v.id}
-                onClick={() => history.push(v.path)}
+                onClick={() => {
+                  if (v.type === "建筑") getUrlHashFu(v.path, "architecInfo",2);
+                  else history.push(v.path);
+                }}
               >
                 <div className="Z1listRow1">
                   <div>{v.name}</div>

+ 11 - 1
code/src/pages/Z2Scene/index.tsx

@@ -9,6 +9,7 @@ function Z2Scene() {
   const [uid, setUid] = useState("");
 
   const [back, setBack] = useState("");
+  const [back2, setBack2] = useState("");
 
   useEffect(() => {
     const query = new URLSearchParams(location.search);
@@ -17,6 +18,12 @@ function Z2Scene() {
 
     const back = query.get("back");
     setBack(back!);
+
+    const back2 = query.get("back2");
+
+    console.log(123456, back2);
+
+    setBack2(back2!);
   }, [location.search]);
 
   return (
@@ -31,7 +38,10 @@ function Z2Scene() {
 
       {/* 返回按钮 */}
       {back ? (
-        <div className="Z2back" onClick={() => history.push(back)}></div>
+        <div
+          className="Z2back"
+          onClick={() => history.push(back + (back2 ? `&back2=${back2}` : ""))}
+        ></div>
       ) : null}
     </div>
   );

+ 2 - 2
code/src/utils/data.ts

@@ -8,10 +8,10 @@ export const AppTabList = [
 ];
 
 // 嵌套 iframe history.go(-1) 返回的问题
-export const getUrlHashFu = (id: string) => {
+export const getUrlHashFu = (id: string, pathUrl: string, flag?: 2) => {
   const url = window.location.hash;
   if (url && url.includes("#/")) {
     const path = url.replace("#", "");
-    history.push(`/scene?id=${id}&back=${path}`);
+    history.push(`/${pathUrl}?id=${id}&back${flag ? flag : ""}=${path}`);
   }
 };