upp

houtai/src/App.tsx

@@ -14,7 +14,6 @@ import VideoLookDom from "./components/VideoLookDom";
 import MessageCom from "./components/Message";
 const Layout = React.lazy(() => import("./pages/Layout"));
 const Login = React.lazy(() => import("./pages/Login"));
-const Test = React.lazy(() => import("./pages/A0"));
 
 export default function App() {
   const dispatch = useDispatch();
@@ -31,7 +30,6 @@ export default function App() {
         <React.Suspense fallback={<SpinLoding />}>
           <Switch>
             {/* 测试页面 */}
-            <Route path="/test" component={Test} />
             <Route path="/login" component={Login} />
             <AuthRoute path="/" component={Layout} />
           </Switch>

houtai/src/components/ImageLazy/index.tsx

@@ -9,7 +9,7 @@ import { useDispatch } from "react-redux";
 
 type Props = {
   width?: number | string;
-  height?: number;
+  height?: number | string;
   src: string;
   noLook?: boolean;
   offline?: boolean;

houtai/src/pages/A0/index.module.scss

@@ -1,166 +0,0 @@
-.WallAdd {
-  position: absolute;
-  z-index: 99;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.45);
-
-  :global {
-    .WallTableTitle {
-      position: absolute;
-      top: 100px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 800px;
-      padding: 20px 24px;
-      border-radius: 8px;
-      background-color: #fff;
-      .txt {
-        color: rgba(0, 0, 0, 0.88);
-        margin-bottom: 8px;
-      }
-
-      .main {
-        border-top: 1px solid #999999;
-        padding-top: 15px;
-        width: 100%;
-
-        .myformBox {
-          display: flex;
-          margin-bottom: 20px;
-
-          .label {
-            width: 94px;
-            text-align: right;
-
-            &>span {
-              position: relative;
-              top: 2px;
-              color: #ff4d4f;
-            }
-          }
-
-          .myformBoxR {
-            width: calc(100% - 94px);
-          }
-
-          .fileBoxRow_r {
-            position: relative;
-
-            .fileBoxRow_up {
-              color: #a6a6a6;
-              border-radius: 3px;
-              cursor: pointer;
-              font-size: 30px;
-              width: 100px;
-              height: 100px;
-              border: 1px dashed #797979;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-
-
-            }
-
-            .upImgBox {
-              display: flex;
-              flex-wrap: wrap;
-
-              &>div {
-                margin: 0 15px 15px 0;
-              }
-
-              .fileBoxRow_r_img {
-                position: relative;
-
-                // 有无边框的选择
-                .upImgDoneBox {
-                  position: absolute;
-                  bottom: -30px;
-                  font-size: 12px;
-                  left: 0;
-                  width: 100%;
-                  height: 30px;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-
-                  .ant-radio-group {
-                    display: flex;
-                    font-size: 12px;
-                  }
-                }
-
-                .clearCover {
-                  right: -10px;
-                  top: -10px;
-                  transform: translate(0, 0);
-                  background-color: rgba(0, 0, 0, .8);
-                  width: 20px;
-                  height: 20px;
-                  border-radius: 50%;
-                  font-size: 16px;
-                  color: #fff;
-                }
-              }
-            }
-
-            .fileBoxRow_r_img {
-              width: 100px;
-              height: 100px;
-              position: relative;
-
-              .clearCover {
-                cursor: pointer;
-                z-index: 10;
-                position: absolute;
-                width: 50px;
-                height: 50px;
-                top: 50%;
-                transform: translateY(-50%);
-                right: -50px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                font-size: 24px;
-              }
-            }
-
-            .fileTit {
-              font-size: 14px;
-              color: rgb(126, 124, 124);
-
-
-            }
-          }
-
-
-        }
-
-        .myformBox0 {
-          margin-bottom: 5px;
-        }
-
-        .noUpThumb {
-          position: relative;
-          overflow: hidden;
-          opacity: 0;
-          transition: top .2s;
-          color: #ff4d4f;
-          top: -10px;
-          padding-left: 94px;
-        }
-
-        .noUpThumbAc {
-          top: 0;
-          opacity: 1;
-        }
-      }
-    }
-
-  }
-
-
-}

houtai/src/pages/A0/index.tsx

@@ -1,287 +0,0 @@
-import { MessageFu } from "@/utils/message";
-import { Button, Form, Input, Modal, Popconfirm, Radio } from "antd";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { PlusOutlined, CloseOutlined } from "@ant-design/icons";
-import classNames from "classnames";
-import styles from "./index.module.scss";
-
-import ImageLazy from "@/components/ImageLazy";
-type Props = {
-  id: number;
-  closeMoalFu: () => void;
-  upListFu: () => void;
-};
-
-type ImgListType = {
-  fileName?: string;
-  filePath?: string;
-  id?: number;
-};
-
-// 上传附件的进度条
-const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
-const progressDom: any = document.querySelector("#progress");
-
-function WallAdd({ id, closeMoalFu, upListFu }: Props) {
-  // 表单的ref
-  const FormBoxRef = useRef<any>({});
-  // 上传封面图的ref
-  const myInput = useRef<HTMLInputElement>(null);
-
-  // 版式的选择
-  const [imgNum, setImgNum] = useState(1);
-
-  // 上传图片的校验
-  const [imgCheck, setImgCheck] = useState(false);
-
-  // 上传图片的全部数据（最多8张来进行切割）
-  const imgListRef = useRef<ImgListType[]>([
-    { id: 1, fileName: "xxx", filePath: "/wall/img/20230202_12193909316.jpg" },
-    { id: 2, fileName: "xxx", filePath: "/wall/img/20230209_1519270201.gif" },
-    { id: 3, fileName: "xxx", filePath: "/wall/img/20230202_12193909316.jpg" },
-    { id: 4, fileName: "xxx", filePath: "/wall/img/20230209_1519270201.gif" },
-    { id: 5, fileName: "xxx", filePath: "/wall/img/20230202_12193909316.jpg" },
-    { id: 6, fileName: "xxx", filePath: "/wall/img/20230209_1519270201.gif" },
-    { id: 7, fileName: "xxx", filePath: "/wall/img/20230202_12193909316.jpg" },
-    { id: 8, fileName: "xxx", filePath: "/wall/img/20230209_1519270201.gif" },
-  ]);
-
-  // 在页面展示的图片
-  const [imgList, setImgList] = useState<ImgListType[]>([]);
-
-  // 版式的选择改变，切割数组
-  useEffect(() => {
-    if (imgListRef.current.length) {
-      const newData = imgListRef.current.slice(0, imgNum);
-      setImgList(newData);
-    }
-  }, [imgNum]);
-
-  // ---------附件图片的拖动
-  const [dragImg, setDragImg] = useState<any>(null);
-
-  const handleDragOver = useCallback(
-    (e: React.DragEvent<HTMLDivElement>, item: ImgListType) => {
-      e.dataTransfer.dropEffect = "move";
-    },
-    []
-  );
-
-  const handleDragEnter = useCallback(
-    (e: React.DragEvent<HTMLDivElement>, item: ImgListType) => {
-      e.dataTransfer.effectAllowed = "move";
-      if (item === dragImg) return;
-      const newItems = [...imgList]; //拷贝一份数据进行交换操作。
-      const src = newItems.indexOf(dragImg); //获取数组下标
-      const dst = newItems.indexOf(item);
-      newItems.splice(dst, 0, ...newItems.splice(src, 1)); //交换位置
-      setImgList(newItems);
-    },
-    [dragImg, imgList]
-  );
-
-  // 删除某一张图片
-  const delImgListFu = useCallback(
-    (id: number) => {
-      const newItems = imgList.filter((v) => v.id !== id);
-      setImgList(newItems);
-      imgListRef.current = imgListRef.current.filter((v) => v.id !== id);
-    },
-    [imgList]
-  );
-
-  // 没有通过校验
-  const onFinishFailed = useCallback(() => {
-    setImgCheck(true);
-  }, []);
-
-  // 上传封面图
-  const handeUpPhoto = useCallback(
-    async (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.files) {
-        // 拿到files信息
-        const filesInfo = e.target.files[0];
-        // 校验格式
-        const type = ["image/jpeg", "image/png"];
-        if (!type.includes(filesInfo.type)) {
-          e.target.value = "";
-          return MessageFu.warning("只支持jpg、png格式!");
-        }
-        // 校验大小
-        if (filesInfo.size > 30 * 1024 * 1024) {
-          e.target.value = "";
-          return MessageFu.warning("最大支持30M!");
-        }
-        // 创建FormData对象
-        const fd = new FormData();
-        // 把files添加进FormData对象（‘photo’为后端需要的字段）
-        fd.append("type", "thumb");
-        fd.append("file", filesInfo);
-
-        e.target.value = "";
-
-        // const res: any = await goodsUploadAPI(fd);
-        // if (res.code === 0) {
-        //   MessageFu.success("上传成功!");
-        //   setCover(res.data.filePath);
-        // }
-        UpAsyncLodingDom.style.opacity = 0;
-        progressDom.style.width = "0%";
-      }
-    },
-    []
-  );
-
-  // 通过校验点击确定
-  const onFinish = useCallback(() => {
-    console.log("通过校验，点击确定");
-    setImgCheck(true);
-    if (imgList.length < imgNum) return;
-  }, [imgList.length, imgNum]);
-
-  return (
-    <div className={styles.WallAdd}>
-      <div className="WallTableTitle">
-        <div className="txt">{id > 0 ? "编辑海报" : "新增海报"}</div>
-        <div className="main">
-          <Form
-            ref={FormBoxRef}
-            name="basic"
-            labelCol={{ span: 3 }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="名称"
-              name="name"
-              rules={[{ required: true, message: "请输名称!" }]}
-              getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
-            >
-              <Input maxLength={25} showCount placeholder="请输入内容" />
-            </Form.Item>
-
-            <div className="myformBox">
-              <div className="label">
-                <span>*</span> 版式：
-              </div>
-              <div className="myformBoxR">
-                <Radio.Group
-                  onChange={(e) => setImgNum(e.target.value)}
-                  value={imgNum}
-                >
-                  <Radio value={1}>1</Radio>
-                  <Radio value={2}>2</Radio>
-                  <Radio value={4}>4</Radio>
-                  <Radio value={6}>6</Radio>
-                  <Radio value={8}>8</Radio>
-                </Radio.Group>
-              </div>
-            </div>
-
-            {/* 图片上传 */}
-            <div className="myformBox myformBox0">
-              <input
-                id="upInput"
-                type="file"
-                accept=".png,.jpg,.jpeg"
-                ref={myInput}
-                onChange={(e) => handeUpPhoto(e)}
-              />
-
-              <div className="label"></div>
-              <div className="myformBoxR">
-                <div className="fileBoxRow_r">
-                  <div className="upImgBox">
-                    <div
-                      hidden={imgList.length >= imgNum}
-                      className="fileBoxRow_up"
-                      onClick={() => myInput.current?.click()}
-                    >
-                      <PlusOutlined />
-                    </div>
-                    {imgList.map((v) => (
-                      <div
-                        className="fileBoxRow_r_img"
-                        key={v.id}
-                        draggable="true"
-                        onDragStart={() => setDragImg(v)}
-                        onDragOver={(e) => handleDragOver(e, v)}
-                        onDragEnter={(e) => handleDragEnter(e, v)}
-                        onDragEnd={() => setDragImg(null)}
-                      >
-                        {v.filePath ? (
-                          <ImageLazy
-                            noLook={dragImg ? true : false}
-                            width={100}
-                            height={100}
-                            src={v.filePath}
-                          />
-                        ) : null}
-
-                        <Popconfirm
-                          title="删除后无法恢复，是否删除?"
-                          okText="删除"
-                          cancelText="取消"
-                          onConfirm={() => delImgListFu(v.id!)}
-                        >
-                          <div className="clearCover">
-                            <CloseOutlined />
-                          </div>
-                        </Popconfirm>
-                      </div>
-                    ))}
-                  </div>
-                  <div className="fileTit">
-                    {imgList.length && imgList.length >= 2 ? (
-                      <>
-                        按住鼠标可拖动图片调整顺序。
-                        <br />
-                      </>
-                    ) : null}
-                    建议尺寸：{12960 / imgNum}*1920
-                    <br />
-                    支持png、jpg和jpeg的图片格式；最大支持30M。
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* 校验提示 */}
-            <div
-              className={classNames(
-                "noUpThumb",
-                imgList.length < imgNum && imgCheck ? "noUpThumbAc" : ""
-              )}
-            >
-              请上传 {imgNum} 张图片!
-            </div>
-
-            {/* 确定和取消按钮 */}
-            <br />
-            <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
-              <Button type="primary" htmlType="submit">
-                提交
-              </Button>
-              &emsp;
-              <Button>预览效果</Button>
-              &emsp;
-              <Popconfirm
-                title="放弃编辑后，信息将不会保存!"
-                okText="放弃"
-                cancelText="取消"
-                onConfirm={closeMoalFu}
-              >
-                <Button>取消</Button>
-              </Popconfirm>
-            </Form.Item>
-          </Form>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const MemoWallAdd = React.memo(WallAdd);
-
-export default MemoWallAdd;

houtai/src/pages/B3Wall/WallAdd/index.module.scss

@@ -1,162 +1,143 @@
 .WallAdd {
-  position: absolute;
-  z-index: 99;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.45);
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background-color: #fff;
 
   :global {
-    .WallTableTitle {
-      position: absolute;
-      top: 100px;
-      left: 50%;
-      transform: translateX(-50%);
+    .main {
       width: 800px;
-      padding: 20px 24px;
-      border-radius: 8px;
-      background-color: #fff;
-      .txt {
-        color: rgba(0, 0, 0, 0.88);
-        margin-bottom: 8px;
-      }
-
-      .main {
-        border-top: 1px solid #999999;
-        padding-top: 15px;
-        width: 100%;
-
-        .myformBox {
-          display: flex;
-          margin-bottom: 20px;
-
-          .label {
-            width: 94px;
-            text-align: right;
+      padding: 24px;
 
-            &>span {
-              position: relative;
-              top: 2px;
-              color: #ff4d4f;
-            }
-          }
+      .myformBox {
+        display: flex;
+        margin-bottom: 20px;
 
-          .myformBoxR {
-            width: calc(100% - 94px);
-          }
+        .label {
+          width: 94px;
+          text-align: right;
 
-          .fileBoxRow_r {
+          &>span {
             position: relative;
+            top: 2px;
+            color: #ff4d4f;
+          }
+        }
 
-            .fileBoxRow_up {
-              color: #a6a6a6;
-              border-radius: 3px;
-              cursor: pointer;
-              font-size: 30px;
-              width: 100px;
-              height: 100px;
-              border: 1px dashed #797979;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-
-
-            }
+        .myformBoxR {
+          width: calc(100% - 94px);
+        }
 
-            .upImgBox {
-              display: flex;
-              flex-wrap: wrap;
+        .fileBoxRow_r {
+          position: relative;
 
-              &>div {
-                margin: 0 15px 15px 0;
-              }
+          .fileBoxRow_up {
+            color: #a6a6a6;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 30px;
+            width: 100px;
+            height: 100px;
+            border: 1px dashed #797979;
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
-              .fileBoxRow_r_img {
-                position: relative;
 
-                // 有无边框的选择
-                .upImgDoneBox {
-                  position: absolute;
-                  bottom: -30px;
-                  font-size: 12px;
-                  left: 0;
-                  width: 100%;
-                  height: 30px;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
+          }
 
-                  .ant-radio-group {
-                    display: flex;
-                    font-size: 12px;
-                  }
-                }
+          .upImgBox {
+            display: flex;
+            flex-wrap: wrap;
 
-                .clearCover {
-                  right: -10px;
-                  top: -10px;
-                  transform: translate(0, 0);
-                  background-color: rgba(0, 0, 0, .8);
-                  width: 20px;
-                  height: 20px;
-                  border-radius: 50%;
-                  font-size: 16px;
-                  color: #fff;
-                }
-              }
+            &>div {
+              margin: 0 15px 15px 0;
             }
 
             .fileBoxRow_r_img {
-              width: 100px;
-              height: 100px;
               position: relative;
 
-              .clearCover {
-                cursor: pointer;
-                z-index: 10;
+              // 有无边框的选择
+              .upImgDoneBox {
                 position: absolute;
-                width: 50px;
-                height: 50px;
-                top: 50%;
-                transform: translateY(-50%);
-                right: -50px;
+                bottom: -30px;
+                font-size: 12px;
+                left: 0;
+                width: 100%;
+                height: 30px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                font-size: 24px;
+
+                .ant-radio-group {
+                  display: flex;
+                  font-size: 12px;
+                }
               }
-            }
 
-            .fileTit {
-              font-size: 14px;
-              color: rgb(126, 124, 124);
+              .clearCover {
+                right: -10px;
+                top: -10px;
+                transform: translate(0, 0);
+                background-color: rgba(0, 0, 0, .8);
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                font-size: 16px;
+                color: #fff;
+              }
+            }
+          }
 
+          .fileBoxRow_r_img {
+            width: 100px;
+            height: 100px;
+            position: relative;
 
+            .clearCover {
+              cursor: pointer;
+              z-index: 10;
+              position: absolute;
+              width: 50px;
+              height: 50px;
+              top: 50%;
+              transform: translateY(-50%);
+              right: -50px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-size: 24px;
             }
           }
 
+          .fileTit {
+            font-size: 14px;
+            color: rgb(126, 124, 124);
 
-        }
 
-        .myformBox0 {
-          margin-bottom: 5px;
+          }
         }
 
-        .noUpThumb {
-          position: relative;
-          overflow: hidden;
-          opacity: 0;
-          transition: top .2s;
-          color: #ff4d4f;
-          top: -10px;
-          padding-left: 94px;
-        }
 
-        .noUpThumbAc {
-          top: 0;
-          opacity: 1;
-        }
+      }
+
+      .myformBox0 {
+        margin-bottom: 5px;
+      }
+
+      .noUpThumb {
+        position: relative;
+        overflow: hidden;
+        opacity: 0;
+        transition: top .2s;
+        color: #ff4d4f;
+        top: -10px;
+        padding-left: 94px;
+      }
+
+      .noUpThumbAc {
+        top: 0;
+        opacity: 1;
       }
     }
 

houtai/src/pages/B3Wall/WallAdd/index.tsx

@@ -1,28 +1,31 @@
 import { MessageFu } from "@/utils/message";
-import { Button, Form, Input, Modal, Popconfirm, Radio } from "antd";
+import { Button, Form, Input, Popconfirm, Radio } from "antd";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { PlusOutlined, CloseOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 
 import ImageLazy from "@/components/ImageLazy";
+import { ImgListType } from "@/types";
+import WallLook from "../WallLook";
 type Props = {
   id: number;
   closeMoalFu: () => void;
-  upListFu: () => void;
-};
-
-type ImgListType = {
-  fileName?: string;
-  filePath?: string;
-  id?: number;
 };
 
 // 上传附件的进度条
 const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
 const progressDom: any = document.querySelector("#progress");
 
-function WallAdd({ id, closeMoalFu, upListFu }: Props) {
+function WallAdd({ id, closeMoalFu }: Props) {
+  const getInfoFu = useCallback((id: number) => {
+    console.log("是编辑", id);
+  }, []);
+
+  useEffect(() => {
+    if (id > 0) getInfoFu(id);
+  }, [getInfoFu, id]);
+
   // 表单的ref
   const FormBoxRef = useRef<any>({});
   // 上传封面图的ref
@@ -139,145 +142,152 @@ function WallAdd({ id, closeMoalFu, upListFu }: Props) {
     if (imgList.length < imgNum) return;
   }, [imgList.length, imgNum]);
 
+  // 点击预览效果
+  const [lookImg, setLookImg] = useState(false);
+
   return (
     <div className={styles.WallAdd}>
-      <div className="WallTableTitle">
-        <div className="txt">{id > 0 ? "编辑海报" : "新增海报"}</div>
-        <div className="main">
-          <Form
-            ref={FormBoxRef}
-            name="basic"
-            labelCol={{ span: 3 }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
+      <div className="main">
+        <Form
+          ref={FormBoxRef}
+          name="basic"
+          labelCol={{ span: 3 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+        >
+          <Form.Item
+            label="名称"
+            name="name"
+            rules={[{ required: true, message: "请输名称!" }]}
+            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
-            <Form.Item
-              label="名称"
-              name="name"
-              rules={[{ required: true, message: "请输名称!" }]}
-              getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
-            >
-              <Input maxLength={25} showCount placeholder="请输入内容" />
-            </Form.Item>
+            <Input maxLength={25} showCount placeholder="请输入内容" />
+          </Form.Item>
 
-            <div className="myformBox">
-              <div className="label">
-                <span>*</span> 版式：
-              </div>
-              <div className="myformBoxR">
-                <Radio.Group
-                  onChange={(e) => setImgNum(e.target.value)}
-                  value={imgNum}
-                >
-                  <Radio value={1}>1</Radio>
-                  <Radio value={2}>2</Radio>
-                  <Radio value={4}>4</Radio>
-                  <Radio value={6}>6</Radio>
-                  <Radio value={8}>8</Radio>
-                </Radio.Group>
-              </div>
+          <div className="myformBox">
+            <div className="label">
+              <span>*</span> 版式：
             </div>
+            <div className="myformBoxR">
+              <Radio.Group
+                onChange={(e) => setImgNum(e.target.value)}
+                value={imgNum}
+              >
+                <Radio value={1}>1</Radio>
+                <Radio value={2}>2</Radio>
+                <Radio value={4}>4</Radio>
+                <Radio value={6}>6</Radio>
+                <Radio value={8}>8</Radio>
+              </Radio.Group>
+            </div>
+          </div>
 
-            {/* 图片上传 */}
-            <div className="myformBox myformBox0">
-              <input
-                id="upInput"
-                type="file"
-                accept=".png,.jpg,.jpeg"
-                ref={myInput}
-                onChange={(e) => handeUpPhoto(e)}
-              />
+          {/* 图片上传 */}
+          <div className="myformBox myformBox0">
+            <input
+              id="upInput"
+              type="file"
+              accept=".png,.jpg,.jpeg"
+              ref={myInput}
+              onChange={(e) => handeUpPhoto(e)}
+            />
 
-              <div className="label"></div>
-              <div className="myformBoxR">
-                <div className="fileBoxRow_r">
-                  <div className="upImgBox">
+            <div className="label"></div>
+            <div className="myformBoxR">
+              <div className="fileBoxRow_r">
+                <div className="upImgBox">
+                  <div
+                    hidden={imgList.length >= imgNum}
+                    className="fileBoxRow_up"
+                    onClick={() => myInput.current?.click()}
+                  >
+                    <PlusOutlined />
+                  </div>
+                  {imgList.map((v) => (
                     <div
-                      hidden={imgList.length >= imgNum}
-                      className="fileBoxRow_up"
-                      onClick={() => myInput.current?.click()}
+                      className="fileBoxRow_r_img"
+                      key={v.id}
+                      draggable="true"
+                      onDragStart={() => setDragImg(v)}
+                      onDragOver={(e) => handleDragOver(e, v)}
+                      onDragEnter={(e) => handleDragEnter(e, v)}
+                      onDragEnd={() => setDragImg(null)}
                     >
-                      <PlusOutlined />
-                    </div>
-                    {imgList.map((v) => (
-                      <div
-                        className="fileBoxRow_r_img"
-                        key={v.id}
-                        draggable="true"
-                        onDragStart={() => setDragImg(v)}
-                        onDragOver={(e) => handleDragOver(e, v)}
-                        onDragEnter={(e) => handleDragEnter(e, v)}
-                        onDragEnd={() => setDragImg(null)}
-                      >
-                        {v.filePath ? (
-                          <ImageLazy
-                            noLook={dragImg ? true : false}
-                            width={100}
-                            height={100}
-                            src={v.filePath}
-                          />
-                        ) : null}
+                      {v.filePath ? (
+                        <ImageLazy
+                          noLook={dragImg ? true : false}
+                          width={100}
+                          height={100}
+                          src={v.filePath}
+                        />
+                      ) : null}
 
-                        <Popconfirm
-                          title="删除后无法恢复，是否删除?"
-                          okText="删除"
-                          cancelText="取消"
-                          onConfirm={() => delImgListFu(v.id!)}
-                        >
-                          <div className="clearCover">
-                            <CloseOutlined />
-                          </div>
-                        </Popconfirm>
-                      </div>
-                    ))}
-                  </div>
-                  <div className="fileTit">
-                    {imgList.length && imgList.length >= 2 ? (
-                      <>
-                        按住鼠标可拖动图片调整顺序。
-                        <br />
-                      </>
-                    ) : null}
-                    建议尺寸：{12960 / imgNum}*1920
-                    <br />
-                    支持png、jpg和jpeg的图片格式；最大支持30M。
-                  </div>
+                      <Popconfirm
+                        title="删除后无法恢复，是否删除?"
+                        okText="删除"
+                        cancelText="取消"
+                        onConfirm={() => delImgListFu(v.id!)}
+                      >
+                        <div className="clearCover">
+                          <CloseOutlined />
+                        </div>
+                      </Popconfirm>
+                    </div>
+                  ))}
+                </div>
+                <div className="fileTit">
+                  {imgList.length && imgList.length >= 2 ? (
+                    <>
+                      按住鼠标可拖动图片调整顺序。
+                      <br />
+                    </>
+                  ) : null}
+                  建议尺寸：{12960 / imgNum}*1920
+                  <br />
+                  支持png、jpg和jpeg的图片格式；最大支持30M。
                 </div>
               </div>
             </div>
+          </div>
 
-            {/* 校验提示 */}
-            <div
-              className={classNames(
-                "noUpThumb",
-                imgList.length < imgNum && imgCheck ? "noUpThumbAc" : ""
-              )}
-            >
-              请上传 {imgNum} 张图片!
-            </div>
+          {/* 校验提示 */}
+          <div
+            className={classNames(
+              "noUpThumb",
+              imgList.length < imgNum && imgCheck ? "noUpThumbAc" : ""
+            )}
+          >
+            请上传 {imgNum} 张图片!
+          </div>
 
-            {/* 确定和取消按钮 */}
-            <br />
-            <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
-              <Button type="primary" htmlType="submit">
-                提交
-              </Button>
-              &emsp;
-              <Button>预览效果</Button>
-              &emsp;
-              <Popconfirm
-                title="放弃编辑后，信息将不会保存!"
-                okText="放弃"
-                cancelText="取消"
-                onConfirm={closeMoalFu}
-              >
-                <Button>取消</Button>
-              </Popconfirm>
-            </Form.Item>
-          </Form>
-        </div>
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
+            <Button type="primary" htmlType="submit">
+              提交
+            </Button>
+            &emsp;
+            <Button disabled={!imgList.length} onClick={() => setLookImg(true)}>
+              预览效果
+            </Button>
+            &emsp;
+            <Popconfirm
+              title="放弃编辑后，信息将不会保存!"
+              okText="放弃"
+              cancelText="取消"
+              onConfirm={closeMoalFu}
+            >
+              <Button>取消</Button>
+            </Popconfirm>
+          </Form.Item>
+        </Form>
       </div>
+
+      {/* 点击预览效果出来的页面 */}
+      {lookImg ? (
+        <WallLook imgList={imgList} closeMoalFu={() => setLookImg(false)} />
+      ) : null}
     </div>
   );
 }

houtai/src/pages/B3Wall/WallLook/index.css

@@ -0,0 +1,19 @@
+.WallLook .ant-modal-close {
+  display: none;
+}
+.WallLook .main {
+  border-top: 1px solid #999999;
+  padding-top: 15px;
+  width: 100%;
+}
+.WallLook .main .imgListBox {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.WallLook .main .imgListBox .imgListRow {
+  width: 200px;
+}
+.WallLook .button {
+  text-align: center;
+}

houtai/src/pages/B3Wall/WallLook/index.less

@@ -0,0 +1,22 @@
+.WallLook {
+  .ant-modal-close {
+    display: none;
+  }
+
+  .main {
+    border-top: 1px solid #999999;
+    padding-top: 15px;
+    width: 100%;
+    .imgListBox{
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      .imgListRow{
+        width: 200px;
+      }
+    }
+  }
+  .button{
+    text-align: center;
+  }
+}

houtai/src/pages/B3Wall/WallLook/index.tsx

@@ -0,0 +1,61 @@
+import ImageLazy from "@/components/ImageLazy";
+import { ImgListType } from "@/types";
+import { Button, Modal } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import "./index.css";
+
+type Props = {
+  id?: number;
+  imgList?: ImgListType[];
+  closeMoalFu: () => void;
+};
+
+function WallLook({ id, imgList, closeMoalFu }: Props) {
+  const [imgShowList, setImgShowList] = useState<ImgListType[]>([]);
+
+  const getImgInfo = useCallback((id: number) => {
+    console.log("是编辑", id);
+  }, []);
+
+  useEffect(() => {
+    if (id) getImgInfo(id);
+    else setImgShowList(imgList!);
+
+    // 动态修改模态框的宽度
+    const dom: any = document.querySelector(".WallLook .ant-modal");
+    if (dom && imgList && imgList.length > 2)
+      dom.style.width = imgList.length * 200 + "px";
+  }, [getImgInfo, id, imgList]);
+
+  return (
+    <Modal
+      wrapClassName="WallLook"
+      destroyOnClose
+      open={true}
+      title="预览效果"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="main">
+        {/* 渲染图片 */}
+        <div className="imgListBox">
+          {imgShowList.map((v) => (
+            <div className="imgListRow" key={v.id}>
+              <ImageLazy src={v.filePath!} width="100%" height="anto" />
+            </div>
+          ))}
+        </div>
+
+        <br />
+        <div className="button">
+          <Button onClick={closeMoalFu}>关闭</Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoWallLook = React.memo(WallLook);
+
+export default MemoWallLook;

houtai/src/pages/B3Wall/WallTable/index.tsx

@@ -22,9 +22,13 @@ import {
   wallRemoveAPI,
   wallSortAPI,
 } from "@/store/action/B3Wall";
-import WallAdd from "../WallAdd";
+import WallLook from "../WallLook";
 
-function WallTable() {
+type Props = {
+  tablePageIdFu: (id: number) => void;
+};
+
+function WallTable({ tablePageIdFu }: Props) {
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -34,16 +38,13 @@ function WallTable() {
   // 从仓库中获取列表数据
   const results = useSelector((state: RootState) => state.wallReducer.list);
 
-  // 点击新增或者编辑
-  const [editId, setEditId] = useState(0);
-
   const editTableFu = useCallback(
     (id: number) => {
       if (id === -1 && results.length >= 20)
         return MessageFu.warning("最多支持上传20个内容！");
-      setEditId(id);
+      tablePageIdFu(id);
     },
-    [results.length]
+    [results.length, tablePageIdFu]
   );
 
   // 点击删除
@@ -58,11 +59,6 @@ function WallTable() {
     [dispatch]
   );
 
-  // 点击预览
-  const lookTableFu = useCallback((id: number) => {
-    console.log("点击了预览", id);
-  }, []);
-
   // 切换表格中的启用停用状态
   const isEnabledClickFu = useCallback(
     async (val: boolean, id: number) => {
@@ -110,7 +106,7 @@ function WallTable() {
             <Button
               size="small"
               type="text"
-              onClick={() => lookTableFu(item.id)}
+              onClick={() => setLookImgId(item.id)}
             >
               预览
             </Button>
@@ -128,7 +124,7 @@ function WallTable() {
         ),
       },
     ];
-  }, [delTableFu, editTableFu, isEnabledClickFu, lookTableFu]);
+  }, [delTableFu, editTableFu, isEnabledClickFu]);
 
   // 表格拖动排序-----------------
   interface DraggableBodyRowProps
@@ -209,9 +205,11 @@ function WallTable() {
     [dispatch, results]
   );
 
+  // 点击预览
+  const [lookImgId, setLookImgId] = useState(0);
+
   return (
     <div className={styles.WallTable}>
-
       <div className="titleTxt">
         临时展海报管理
         <Tooltip title="按住鼠标可拖动表格调整顺序">
@@ -247,13 +245,9 @@ function WallTable() {
         </DndProvider>
       </div>
 
-      {/* 新增或者编辑海报 */}
-      {editId ? (
-        <WallAdd
-          id={editId}
-          closeMoalFu={() => setEditId(0)}
-          upListFu={() => dispatch(getWallTableListAPI())}
-        />
+      {/* 点击预览打开的盒子 */}
+      {lookImgId ? (
+        <WallLook closeMoalFu={() => setLookImgId(0)} id={lookImgId} />
       ) : null}
     </div>
   );

houtai/src/pages/B3Wall/index.tsx

@@ -6,6 +6,7 @@ import dayjs from "dayjs";
 import { editWallAutoApi, getWallAutoApi } from "@/store/action/B3Wall";
 import { MessageFu } from "@/utils/message";
 import WallTable from "./WallTable";
+import WallAdd from "./WallAdd";
 const { RangePicker } = DatePicker;
 
 function Wall() {
@@ -62,76 +63,86 @@ function Wall() {
     setEdit(false);
   }, [getWallAutoApiFu, time1, value1]);
 
-  return (
-    <div className={styles.Wall}>
-
+  // 点击新增或者编辑
+  const [editId, setEditId] = useState(0);
 
-      <div className="pageTitlt">万物墙管理</div>
-
-        {/* 初始页面盒子 */}
-        <div></div>
+  const tablePageIdFu = useCallback((id: number) => {
+    setEditId(id);
+  }, []);
 
+  return (
+    <div className={styles.Wall}>
+      <div className="pageTitlt">
+        {editId === 0 ? "万物墙管理" : editId > 0 ? "编辑海报" : "新增海报"}
+      </div>
 
-      <div className="wallTopBox">
-        <div className="titleTxt">
-          场景管理
-          <Tooltip title="当超过15秒未操作时，将在场景&emsp;&emsp;讲述/游览/赏析/临时展&emsp;&emsp;间循环播放，每个场景播放30秒">
-            <div className="inco">
-              <ExclamationCircleFilled />
+      {editId === 0 ? (
+        // 初始页面盒子
+        <>
+          <div className="wallTopBox">
+            <div className="titleTxt">
+              场景管理
+              <Tooltip title="当超过15秒未操作时，将在场景&emsp;&emsp;讲述/游览/赏析/临时展&emsp;&emsp;间循环播放，每个场景播放30秒">
+                <div className="inco">
+                  <ExclamationCircleFilled />
+                </div>
+              </Tooltip>
             </div>
-          </Tooltip>
-        </div>
-        {edit ? (
-          // 修改信息
-          <div className="edit">
-            <div>自动轮播：</div>
-            <Radio.Group
-              onChange={(e) => setValue1(e.target.value)}
-              value={value1}
-            >
-              <Radio value={0}>关闭</Radio>
-              <Radio value={1}>开启</Radio>
-            </Radio.Group>
-            &emsp;
-            <RangePicker
-              allowClear={false}
-              defaultValue={[
-                dayjs(time1[0], "YYYY/MM/DD"),
-                dayjs(time1[1], "YYYY/MM/DD"),
-              ]}
-              onChange={timeChange}
-            />
-            &emsp;
-            <Button type="primary" onClick={btnOk}>
-              确定
-            </Button>
-            &emsp;
-            <Popconfirm
-              title="放弃编辑后，信息将不会保存!"
-              okText="放弃"
-              cancelText="取消"
-              onConfirm={() => setEdit(false)}
-            >
-              <Button>取消</Button>
-            </Popconfirm>
+            {edit ? (
+              // 修改信息
+              <div className="edit">
+                <div>自动轮播：</div>
+                <Radio.Group
+                  onChange={(e) => setValue1(e.target.value)}
+                  value={value1}
+                >
+                  <Radio value={0}>关闭</Radio>
+                  <Radio value={1}>开启</Radio>
+                </Radio.Group>
+                &emsp;
+                <RangePicker
+                  allowClear={false}
+                  defaultValue={[
+                    dayjs(time1[0], "YYYY/MM/DD"),
+                    dayjs(time1[1], "YYYY/MM/DD"),
+                  ]}
+                  onChange={timeChange}
+                />
+                &emsp;
+                <Button type="primary" onClick={btnOk}>
+                  确定
+                </Button>
+                &emsp;
+                <Popconfirm
+                  title="放弃编辑后，信息将不会保存!"
+                  okText="放弃"
+                  cancelText="取消"
+                  onConfirm={() => setEdit(false)}
+                >
+                  <Button>取消</Button>
+                </Popconfirm>
+              </div>
+            ) : (
+              // 展示信息
+              <div className="txt">
+                <div>自动轮播：</div>
+                <div>{value0 ? "开启" : "关闭"}&emsp;|&emsp;</div>
+                <div>
+                  {time0.split(",")[0]} 至 {time0.split(",")[1]}
+                </div>
+                &emsp;&emsp;
+                <Button type="primary" onClick={editAutoPlay}>
+                  修改
+                </Button>
+              </div>
+            )}
           </div>
-        ) : (
-          // 展示信息
-          <div className="txt">
-            <div>自动轮播：</div>
-            <div>{value0 ? "开启" : "关闭"}&emsp;|&emsp;</div>
-            <div>
-              {time0.split(",")[0]} 至 {time0.split(",")[1]}
-            </div>
-            &emsp;&emsp;
-            <Button type="primary" onClick={editAutoPlay}>
-              修改
-            </Button>
-          </div>
-        )}
-      </div>
-      {/* 表格相关 */}
-      <WallTable />
+          {/* 表格相关 */}
+          <WallTable tablePageIdFu={tablePageIdFu} />
+        </>
+      ) : (
+        <WallAdd id={editId} closeMoalFu={() => setEditId(0)} />
+      )}
     </div>
   );
 }

houtai/src/types/api/wall.d.ts

@@ -24,4 +24,10 @@ export type WallUpSaveAPI ={
   id: number|null;
   name: string;
   type: string;
-}
+}
+
+export type ImgListType = {
+  fileName?: string;
+  filePath?: string;
+  id?: number;
+};