up

houtai/package-lock.json

@@ -23,6 +23,8 @@
         "js-base64": "^3.7.3",
         "js-export-excel": "^1.1.4",
         "react": "^18.2.0",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-lazyimg-component": "^1.0.1",
         "react-redux": "^8.0.4",
@@ -3145,6 +3147,21 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -6386,6 +6403,16 @@
       "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "node_modules/dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "dependencies": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -14162,6 +14189,43 @@
         "node": ">=8"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "dependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz",
@@ -19301,6 +19365,21 @@
         "rc-util": "^5.24.4"
       }
     },
+    "@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -21919,6 +21998,16 @@
       "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "requires": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -27771,6 +27860,26 @@
         }
       }
     },
+    "react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "requires": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "requires": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz",

houtai/package.json

@@ -18,6 +18,8 @@
     "js-base64": "^3.7.3",
     "js-export-excel": "^1.1.4",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-lazyimg-component": "^1.0.1",
     "react-redux": "^8.0.4",

houtai/src/App.tsx

@@ -14,6 +14,7 @@ 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();
@@ -29,6 +30,8 @@ export default function App() {
       <Router history={history}>
         <React.Suspense fallback={<SpinLoding />}>
           <Switch>
+            {/* 测试页面 */}
+            <Route path="/test" component={Test} />
             <Route path="/login" component={Login} />
             <AuthRoute path="/" component={Layout} />
           </Switch>

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

@@ -0,0 +1,166 @@
+.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

@@ -0,0 +1,287 @@
+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/B2Goods/GoodsAdd/index.tsx

@@ -134,7 +134,14 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
   // 上传附件的信息
   const [fileList, setFileList] = useState({
     model: {} as FileListType,
-    img: [] as FileListType[],
+    img: [
+      {
+        id: 1,
+        fileName: "xxx",
+        filePath: "/wall/img/20230202_12193909316.jpg",
+      },
+      { id: 2, fileName: "xxx", filePath: "/wall/img/20230209_1519270201.gif" },
+    ] as FileListType[],
     audio: {} as FileListType,
     video: {} as FileListType,
   });
@@ -151,7 +158,7 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
           };
         }),
       };
-      setFileList(newData)
+      setFileList(newData);
     },
     [fileList]
   );

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

@@ -0,0 +1,166 @@
+.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/B3Wall/WallAdd/index.tsx

@@ -0,0 +1,287 @@
+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/WallTable/index.module.scss

@@ -0,0 +1,42 @@
+.WallTable {
+  height: 500px;
+  border-radius: 10px;
+  background-color: #fff;
+  padding: 20px 15px 0;
+  height: calc(100% - 135px);
+
+  :global {
+    .titleTxt {
+      width: 1000px;
+      position: relative;
+
+      .tableBtn {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    .table {
+      margin-top: 20px;
+      width: 1000px;
+
+      .ant-table-body {
+        height: 560px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+      }
+    }
+
+    // 表头拖拽样式
+    .drop-over-downward td {
+      border-bottom: 2px dashed var(--themeColor2) !important;
+    }
+
+    .drop-over-upward td {
+      border-top: 2px dashed var(--themeColor2) !important;
+    }
+
+  }
+}

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

@@ -0,0 +1,264 @@
+import { Button, Popconfirm, Switch, Table, Tooltip } from "antd";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+import styles from "./index.module.scss";
+
+// 表格拖动排序-----------------
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { MessageFu } from "@/utils/message";
+import { WallTableList } from "@/types";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+import {
+  awllDisplayAPI,
+  getWallTableListAPI,
+  wallRemoveAPI,
+  wallSortAPI,
+} from "@/store/action/B3Wall";
+import WallAdd from "../WallAdd";
+
+function WallTable() {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getWallTableListAPI());
+  }, [dispatch]);
+
+  // 从仓库中获取列表数据
+  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);
+    },
+    [results.length]
+  );
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await wallRemoveAPI(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        dispatch(getWallTableListAPI());
+      }
+    },
+    [dispatch]
+  );
+
+  // 点击预览
+  const lookTableFu = useCallback((id: number) => {
+    console.log("点击了预览", id);
+  }, []);
+
+  // 切换表格中的启用停用状态
+  const isEnabledClickFu = useCallback(
+    async (val: boolean, id: number) => {
+      const isDisable = val ? 1 : 0;
+      const res: any = await awllDisplayAPI(id, isDisable);
+      if (res.code === 0) dispatch(getWallTableListAPI());
+    },
+    [dispatch]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      // {
+      //   width: 80,
+      //   title: "序号",
+      //   render: (text: any, record: any, index: any) => index + 1,
+      // },
+
+      {
+        title: "海报名称",
+        dataIndex: "name",
+      },
+      {
+        title: "展示状态",
+        render: (item: WallTableList) => (
+          <Switch
+            checkedChildren="启用"
+            unCheckedChildren="停用"
+            checked={item.display === 1}
+            onChange={(val) => isEnabledClickFu(val, item.id)}
+          />
+        ),
+      },
+      {
+        title: "操作",
+        render: (item: WallTableList) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() => editTableFu(item.id)}
+            >
+              编辑
+            </Button>
+            <Button
+              size="small"
+              type="text"
+              onClick={() => lookTableFu(item.id)}
+            >
+              预览
+            </Button>
+            <Popconfirm
+              title="删除后无法恢复，是否删除?"
+              okText="删除"
+              cancelText="取消"
+              onConfirm={() => delTableFu(item.id)}
+            >
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [delTableFu, editTableFu, isEnabledClickFu, lookTableFu]);
+
+  // 表格拖动排序-----------------
+  interface DraggableBodyRowProps
+    extends React.HTMLAttributes<HTMLTableRowElement> {
+    index: number;
+    moveRow: (dragIndex: number, hoverIndex: number) => void;
+  }
+
+  const type = "DraggableBodyRow";
+
+  const DraggableBodyRow = useCallback(
+    ({
+      index,
+      moveRow,
+      className,
+      style,
+      ...restProps
+    }: DraggableBodyRowProps) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const ref = useRef<HTMLTableRowElement>(null);
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [{ isOver, dropClassName }, drop] = useDrop({
+        accept: type,
+        collect: (monitor) => {
+          const { index: dragIndex } = monitor.getItem() || {};
+          if (dragIndex === index) {
+            return {};
+          }
+          return {
+            isOver: monitor.isOver(),
+            dropClassName:
+              dragIndex < index ? " drop-over-downward" : " drop-over-upward",
+          };
+        },
+        drop: (item: { index: number }) => {
+          moveRow(item.index, index);
+        },
+      });
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [, drag] = useDrag({
+        type,
+        item: { index },
+        collect: (monitor) => ({
+          isDragging: monitor.isDragging(),
+        }),
+      });
+      drop(drag(ref));
+
+      return (
+        <tr
+          ref={ref}
+          className={`${className}${isOver ? dropClassName : ""}`}
+          style={{ cursor: "move", ...style }}
+          {...restProps}
+        />
+      );
+    },
+    []
+  );
+
+  const components = {
+    body: {
+      row: DraggableBodyRow,
+    },
+  };
+
+  const moveRow = useCallback(
+    async (dragIndex: number, hoverIndex: number) => {
+      if (dragIndex === hoverIndex) return;
+      // 交互位置-之前的id
+      const beforeId = results[dragIndex].id;
+      const afterId = results[hoverIndex].id;
+
+      const res = await wallSortAPI(beforeId, afterId);
+
+      if (res.code === 0) dispatch(getWallTableListAPI());
+    },
+    [dispatch, results]
+  );
+
+  return (
+    <div className={styles.WallTable}>
+
+      <div className="titleTxt">
+        临时展海报管理
+        <Tooltip title="按住鼠标可拖动表格调整顺序">
+          <div className="inco" hidden={results.length < 2}>
+            <ExclamationCircleFilled />
+          </div>
+        </Tooltip>
+        <div className="tableBtn">
+          <Button type="primary" onClick={() => editTableFu(-1)}>
+            新增海报
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="table">
+        <DndProvider backend={HTML5Backend}>
+          <Table
+            scroll={{ y: 560 }}
+            columns={columns}
+            dataSource={results}
+            components={components}
+            rowKey="id"
+            pagination={false}
+            onRow={(_, index) => {
+              const attr = {
+                index,
+                moveRow,
+              };
+              return attr as React.HTMLAttributes<any>;
+            }}
+          />
+        </DndProvider>
+      </div>
+
+      {/* 新增或者编辑海报 */}
+      {editId ? (
+        <WallAdd
+          id={editId}
+          closeMoalFu={() => setEditId(0)}
+          upListFu={() => dispatch(getWallTableListAPI())}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+const MemoWallTable = React.memo(WallTable);
+
+export default MemoWallTable;

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

@@ -1,5 +1,50 @@
-.Wall{
-  :global{
-    
+.Wall {
+  :global {
+    .titleTxt {
+      padding-left: 15px;
+      position: relative;
+      z-index: 10;
+      font-weight: 700;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+
+      .inco {
+        cursor: pointer;
+        margin-left: 10px;
+        font-size: 14px;
+        color: #7e8293;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 5px;
+        height: 22px;
+        background-color: var(--themeColor2);
+      }
+    }
+
+    .wallTopBox {
+      border-radius: 10px;
+      background-color: #fff;
+      padding: 15px;
+      margin-bottom: 20px;
+
+      .txt {
+        height: 60px;
+        display: flex;
+        align-items: center;
+      }
+
+      .edit {
+        height: 60px;
+        display: flex;
+        align-items: center;
+      }
+
+    }
   }
 }

houtai/src/store/action/B3Wall.ts

@@ -0,0 +1,49 @@
+import http from "@/utils/http";
+import { EditWallAutoApi } from "@/types";
+import { AppDispatch } from "..";
+
+/**
+ * 获取万物墙自动播放数据
+ */
+export const getWallAutoApi = () => {
+  return http.get("cms/wall/getInfo");
+};
+
+/**
+ * 修改万物墙自动播放数据
+ */
+export const editWallAutoApi = (data: EditWallAutoApi) => {
+  return http.post("cms/wall/editInfo", data);
+};
+
+
+/**
+ * 获取列表数据
+ */
+export const getWallTableListAPI = () => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get("cms/wall/list");
+    dispatch({ type: "wall/getList", payload: res.data });
+  };
+};
+
+/**
+ * 内容-是否显示
+ */
+export const awllDisplayAPI = (id: number, display: number) => {
+  return http.get(`cms/wall/display/${id}/${display}`);
+};
+
+/**
+ * 内容-删除
+ */
+export const wallRemoveAPI = (id: number) => {
+  return http.get(`cms/wall/remove/${id}`);
+};
+
+/**
+ * 内容-排序
+ */
+export const wallSortAPI = (id1: number, id2: number) => {
+  return http.get(`cms/wall/sort/${id1}/${id2}`);
+};

houtai/src/store/reducer/B3Wall.ts

@@ -0,0 +1,21 @@
+import { WallTableList } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  list: [] as WallTableList[],
+};
+
+// 定义 action 类型
+type WallActionType = { type: "wall/getList"; payload: WallTableList[] };
+
+// 频道 reducer
+export default function wallReducer(state = initState, action: WallActionType) {
+  switch (action.type) {
+    // 获取列表数据
+    case "wall/getList":
+      return { ...state, list: action.payload };
+    default:
+      return state;
+  }
+}

houtai/src/store/reducer/index.ts

@@ -1,6 +1,7 @@
 // 导入合并reducer的依赖
 import { combineReducers } from 'redux'
 import goodsReducer from './B2Goods'
+import wallReducer from './B3Wall'
 import logReducer from './C3log'
 
 // 导入 登录 模块的 reducer
@@ -10,7 +11,8 @@ import loginReducer from './login'
 const rootReducer = combineReducers({
   loginStore: loginReducer,
   logReducer:logReducer,
-  goodsReducer:goodsReducer
+  goodsReducer:goodsReducer,
+  wallReducer:wallReducer
 })
 
 // 默认导出

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

@@ -0,0 +1,27 @@
+export type EditWallAutoApi = {
+  endTime: string;
+  isAuto: number;
+  startTime: string;
+};
+
+export type WallTableList = {
+  createTime: string;
+  creatorId: number;
+  creatorName: string;
+  display: number;
+  fileName: string;
+  filePath: string;
+  id: number;
+  name: string;
+  sort: number;
+  type: string;
+  updateTime: string;
+};
+
+export type WallUpSaveAPI ={
+  fileName: string;
+  filePath: string;
+  id: number|null;
+  name: string;
+  type: string;
+}

houtai/src/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './api/log'
-export * from './api/login'
+export * from './api/login'
+export * from './api/wall'

houtai/src/utils/http.ts

@@ -9,7 +9,8 @@ export const baseURL =
   // process.env.NODE_ENV === "development"
   //   ? "http://192.168.20.55:8040/api/"
   //   : "";
-  process.env.NODE_ENV === "development" ? "https://jszhongyi.4dage.com" : "";
+  // process.env.NODE_ENV === "development" ? "https://jszhongyi.4dage.com" : "";
+  process.env.NODE_ENV === "development" ? "https://xuzhouwall.4dage.com" : "";
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module "axios" {