upp

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

@@ -37,6 +37,18 @@
           height: 100%;
         }
 
+        .A3IsimgBox {
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+
+          img {
+            object-fit: contain !important;
+          }
+        }
+
+
+
         .A3IleftBtn {
           position: absolute;
           bottom: 15px;

src/pages/A3Goods/GoodsInfo/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React, { useMemo, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { Goods } from "@/types";
 import { baseURL } from "@/utils/http";
@@ -15,6 +15,8 @@ import classNames from "classnames";
 
 import name1Img from "@/assets/img/name1.png";
 import name2Img from "@/assets/img/name2.png";
+import ImageLazy from "@/components/ImageLazy";
+import store from "@/store";
 
 type Props = {
   info: Goods;
@@ -30,17 +32,17 @@ function GoodsInfo({ info, colseFu, type }: Props) {
     else return "";
   }, [type]);
 
-  // 看看有几个模型
-  const modelNum = useMemo(() => {
+  // 看看有几个模型 / 图片
+  const showNum = useMemo(() => {
     const arr = [1];
 
-    if (info.modelNum && info.modelNum > 1) {
-      for (let i = 0; i < info.modelNum; i++) {
+    if (info.showNum && info.showNum > 1) {
+      for (let i = 0; i < info.showNum; i++) {
         if (i !== 0) arr.push(i + 1);
       }
     }
     return arr;
-  }, [info.modelNum]);
+  }, [info.showNum]);
 
   // 当前显示的模型
   const [modelShow, setModelShow] = useState(1);
@@ -60,6 +62,17 @@ function GoodsInfo({ info, colseFu, type }: Props) {
     }
   };
 
+  // 查看图片
+  const lookArr = useCallback(() => {
+    const arr = [] as string[];
+
+    showNum.forEach((v, i) => {
+      arr.push(`${baseURL}/3Goods/${info.id}/main${i + 1}.jpg`);
+    });
+
+    return arr;
+  }, [info.id, showNum]);
+
   return (
     <div
       className={styles.GoodsInfo}
@@ -75,22 +88,57 @@ function GoodsInfo({ info, colseFu, type }: Props) {
           className={classNames("A3Ileft", full ? "A3IleftFull" : "")}
           key={modelShow}
         >
-          {modelNum.map((v) =>
-            modelShow === v ? (
-              <iframe
-                key={v}
-                ref={ifrBoxRef}
-                src={`model.html?m=${info.id}&n=${v}`}
-                frameBorder="no"
-              ></iframe>
-            ) : null
+          {info.showType === "model" ? (
+            <>
+              {showNum.map((v) =>
+                modelShow === v ? (
+                  <iframe
+                    key={v}
+                    ref={ifrBoxRef}
+                    src={`model.html?m=${info.id}&n=${v}`}
+                    frameBorder="no"
+                  ></iframe>
+                ) : null
+              )}
+            </>
+          ) : (
+            <>
+              {showNum.map((v, i) =>
+                modelShow === v ? (
+                  <div
+                    className="A3IsimgBox"
+                    onClick={() =>
+                      store.dispatch({
+                        type: "layout/lookBigImg",
+                        payload: {
+                          show: true,
+                          url: lookArr(),
+                          current: i,
+                        },
+                      })
+                    }
+                  >
+                    <ImageLazy
+                      width="100%"
+                      height="100%"
+                      key={v}
+                      src={`${baseURL}/3Goods/${info.id}/main${v}.jpg`}
+                      offline
+                      noLook
+                    ></ImageLazy>
+                  </div>
+                ) : null
+              )}
+            </>
           )}
 
+          {/* 模型 */}
+
           {/* 左右按钮 */}
           <div
             onClick={() => setModelShow(modelShow - 1)}
-            hidden={modelNum.length <= 1}
-            style={{ backgroundImage: `url(${baseURL}/4Intro/pc/left.png)` }}
+            hidden={showNum.length <= 1}
+            style={{ backgroundImage: `url(${baseURL}/Home/left.png)` }}
             className={classNames(
               "A3ItoBtn",
               "A3ItoLeft",
@@ -99,33 +147,36 @@ function GoodsInfo({ info, colseFu, type }: Props) {
           ></div>
           <div
             onClick={() => setModelShow(modelShow + 1)}
-            hidden={modelNum.length <= 1}
-            style={{ backgroundImage: `url(${baseURL}/4Intro/pc/right.png)` }}
+            hidden={showNum.length <= 1}
+            style={{ backgroundImage: `url(${baseURL}/Home/right.png)` }}
             className={classNames(
               "A3ItoBtn",
               "A3ItoRight",
-              modelShow === modelNum.length ? "noneToBtn" : ""
+              modelShow === showNum.length ? "noneToBtn" : ""
             )}
           ></div>
 
           {/* 右下角的按钮 */}
-          <div className="A3IleftBtn">
-            <div onClick={() => modelChangeFu(1)}>
-              <PlusOutlined rev={undefined} />
-            </div>
-            <div onClick={() => modelChangeFu(2)}>
-              <MinusOutlined rev={undefined} />
-            </div>
-            {full ? (
-              <div onClick={() => setFull(false)}>
-                <FullscreenExitOutlined rev={undefined} />
+
+          {info.showType === "model" ? (
+            <div className="A3IleftBtn">
+              <div onClick={() => modelChangeFu(1)}>
+                <PlusOutlined rev={undefined} />
               </div>
-            ) : (
-              <div onClick={() => setFull(true)}>
-                <FullscreenOutlined rev={undefined} />
+              <div onClick={() => modelChangeFu(2)}>
+                <MinusOutlined rev={undefined} />
               </div>
-            )}
-          </div>
+              {full ? (
+                <div onClick={() => setFull(false)}>
+                  <FullscreenExitOutlined rev={undefined} />
+                </div>
+              ) : (
+                <div onClick={() => setFull(true)}>
+                  <FullscreenOutlined rev={undefined} />
+                </div>
+              )}
+            </div>
+          ) : null}
         </div>
 
         {/* 右边简介 */}

src/pages/A3Goods/data.ts

@@ -1,7 +1,6 @@
 export const type1Arr1 = [
   { id: 0, name: "全部" },
-  { id: 1, name: "董必武纪念馆" },
-  { id: 2, name: "李先念纪念馆" },
-  { id: 3, name: "历史馆" },
-  { id: 4, name: "烈士馆" },
+  { id: 1, name: "陈毅旧居" },
+  { id: 2, name: "张云逸旧居" },
+  { id: 3, name: "新四军军部旧址纪念馆" },
 ];

src/pages/A3Goods/index.module.scss

@@ -23,7 +23,7 @@
 
       .A3leftBox {
         border-radius: 25px;
-        width: 702px;
+        width: 662px;
         height: 50px;
         display: flex;
         background-color: rgba(255, 255, 255, .9);
@@ -48,6 +48,7 @@
       .A3RightBox {
         width: 630px;
         display: flex;
+        justify-content: flex-end;
 
         .A3RightBox1 {
           height: 50px;

src/pages/A3Goods/index.tsx

@@ -8,7 +8,7 @@ import React, {
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
-import backImg from "@/assets/img/back.png";
+import backImg from "@/assets/img/back2.png";
 import { baseURL } from "@/utils/http";
 import history from "@/utils/history";
 import classNames from "classnames";
@@ -47,7 +47,7 @@ function A3Goods() {
   const type2Arr = useMemo(() => {
     const arr = ["全部类别"];
     data.forEach((v) => {
-      if (!arr.includes(v.type2)) arr.push(v.type2);
+      if (!arr.includes(v.type2)&&v.type2) arr.push(v.type2);
     });
     return arr;
   }, [data]);
@@ -129,7 +129,7 @@ function A3Goods() {
 
         {/* 右侧筛选 */}
         <div className="A3RightBox">
-          <div className="A3RightBox1">
+          <div className="A3RightBox1" hidden={type2Arr.length<=1}>
             <Select
               style={{ width: 200 }}
               value={type2}
@@ -162,7 +162,7 @@ function A3Goods() {
           {dataRes.arrs[page - 1].map((v) => (
             <div className="A3Row" key={v.id}>
               <ImageLazy
-                src={`${baseURL}/3Goods/${v.id}/main.jpg`}
+                src={`${baseURL}/3Goods/${v.id}/main1.jpg`}
                 width="100%"
                 height="100%"
                 noLook

src/pages/A3GoodsM/GoodsInfoM/index.tsx

@@ -30,16 +30,16 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
   }, [type]);
 
   // 看看有几个模型
-  const modelNum = useMemo(() => {
+  const showNum = useMemo(() => {
     const arr = [1];
 
-    if (info.modelNum && info.modelNum > 1) {
-      for (let i = 0; i < info.modelNum; i++) {
+    if (info.showNum && info.showNum > 1) {
+      for (let i = 0; i < info.showNum; i++) {
         if (i !== 0) arr.push(i + 1);
       }
     }
     return arr;
-  }, [info.modelNum]);
+  }, [info.showNum]);
 
   // 当前显示的模型
   const [modelShow, setModelShow] = useState(1);
@@ -86,7 +86,7 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
             className={classNames("ifrBoxson", full ? "A3IleftFull" : "")}
             key={modelShow}
           >
-            {modelNum.map((v) =>
+            {showNum.map((v) =>
               modelShow === v ? (
                 <iframe
                   key={v}
@@ -120,8 +120,8 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
           {/* 左右按钮 */}
           <div
             onClick={() => setModelShow(modelShow - 1)}
-            hidden={modelNum.length <= 1}
-            style={{ backgroundImage: `url(${baseURL}/4Intro/pc/left.png)` }}
+            hidden={showNum.length <= 1}
+            style={{ backgroundImage: `url(${baseURL}/Home/left.png)` }}
             className={classNames(
               "A3ItoBtn",
               "A3ItoLeft",
@@ -130,12 +130,12 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
           ></div>
           <div
             onClick={() => setModelShow(modelShow + 1)}
-            hidden={modelNum.length <= 1}
-            style={{ backgroundImage: `url(${baseURL}/4Intro/pc/right.png)` }}
+            hidden={showNum.length <= 1}
+            style={{ backgroundImage: `url(${baseURL}/Home/right.png)` }}
             className={classNames(
               "A3ItoBtn",
               "A3ItoRight",
-              modelShow === modelNum.length ? "noneToBtn" : ""
+              modelShow === showNum.length ? "noneToBtn" : ""
             )}
           ></div>
         </div>

src/types/api/layot.d.ts

@@ -6,17 +6,18 @@ export type LookDomType = {
 
 export type Goods = {
   id: number;
-  name: string;
-  name2: string;
   type1: string;
   type2: string;
+  name: string;
+  name2: string;
   num: string;
   age: string;
   grain: string;
   size: string;
   level: string;
   state: string;
-  modelNum?: number;
+  showType: 'model'|'img';
+  showNum: number;
 };
 
 export type DataAllType = {