万物墙管理增加封面图功能

管理后台/src/pages/A2Wall/WallAdd/index.module.scss

@@ -141,6 +141,67 @@
         margin-bottom: 5px;
       }
 
+      .myformBoxOne {
+        margin-bottom: 10px;
+
+        .fileBoxRow_r_tit {
+          margin-top: 10px;
+          font-size: 14px;
+          color: rgb(126, 124, 124);
+        }
+
+        .noUpThumb {
+          margin-top: 5px;
+          padding-left: 0;
+        }
+
+        .fileBoxRow_r {
+          .fileBoxRow_up {
+            width: 100px;
+            height: 200px;
+          }
+
+          .fileBoxRow_r_img {
+            width: 100px;
+            height: 226px;
+          }
+        }
+
+
+        .clearCover2 {
+          .clearCover2DelBox {
+            position: absolute;
+            right: -10px;
+            top: -10px;
+            transform: translate(0, 0);
+            background-color: rgba(0, 0, 0, 0.8);
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            font-size: 16px;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .clearCover2DLBox {
+            width: 100%;
+            background-color: rgba(0, 0, 0, .6);
+            color: #fff;
+            display: flex;
+            justify-content: space-around;
+
+            &>a {
+              color: #fff;
+            }
+
+            font-size: 16px;
+          }
+        }
+
+      }
+
       // 附件拖动
       .fileImgListBox {
         display: flex;

管理后台/src/pages/A2Wall/WallAdd/index.tsx

@@ -17,6 +17,7 @@ import {
   getWallDetailAPI,
   wallUploadAPI,
   setWallSave,
+  wallUploadCoverAPI,
 } from "@/store/action/A2Wall";
 import { fileDomInitialFu } from "@/utils/domShow";
 import store from "@/store";
@@ -41,13 +42,16 @@ function WallAdd({ id, closeMoalFu }: Props) {
     FormBoxRef.current?.setFieldsValue({ name: res.data.entity.name });
     setImgNum(Number(res.data.entity.layout) as 1 | 2);
 
-    setTopType(res.data.entity.type)
+    setTopType(res.data.entity.type);
 
     if (res.data.entity.type === "img") {
       const imgListRes = res.data.file;
       setImgList(imgListRes);
       imgListRef.current = imgListRes;
     } else setVideoFile(res.data.file[0]);
+
+    // 设置封面图回显
+    setCover(res.data.entity.thumb);
   }, []);
 
   useEffect(() => {
@@ -66,9 +70,13 @@ function WallAdd({ id, closeMoalFu }: Props) {
 
   // 表单的ref
   const FormBoxRef = useRef<FormInstance>(null);
-  // 上传封面图的ref
+  // 上传 版式 和 视频 的ref
   const myInput = useRef<HTMLInputElement>(null);
 
+  // 上传 封面图 的ref
+  const myInput2 = useRef<HTMLInputElement>(null);
+  const [cover, setCover] = useState("");
+
   // 版式的选择
   const [imgNum, setImgNum] = useState<1 | 2>(1);
 
@@ -115,7 +123,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
     setImgCheck(true);
   }, []);
 
-  // 上传封面图
+  // 上传版式图或者视频
   const handeUpPhoto = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
       if (e.target.files) {
@@ -170,6 +178,45 @@ function WallAdd({ id, closeMoalFu }: Props) {
     [imgList, topType]
   );
 
+  const handeUpPhoto2 = 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 = "";
+
+        try {
+          const res = await wallUploadCoverAPI(fd);
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            setCover(res.data.filePath);
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
+        }
+      }
+    },
+    []
+  );
+
   // 通过校验点击确定
   const onFinish = useCallback(
     async (value: { name: string }) => {
@@ -179,6 +226,8 @@ function WallAdd({ id, closeMoalFu }: Props) {
       if (topType === "img" && imgList.length < imgNum) return;
       if (topType === "video" && !videoFile.filePath) return;
 
+      if (cover === "") return;
+
       const fileIds =
         topType === "img"
           ? imgList.map((v) => v.id).join(",")
@@ -190,6 +239,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
         name: value.name,
         type: topType,
         layout: imgNum,
+        thumb: cover,
       };
 
       const res = await setWallSave(obj);
@@ -201,6 +251,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
     },
     [
       closeMoalFu,
+      cover,
       id,
       imgList,
       imgNum,
@@ -242,12 +293,84 @@ function WallAdd({ id, closeMoalFu }: Props) {
           <Form.Item
             label="名称"
             name="name"
-            rules={[{ required: true, message: "请输入名称!" }]}
+            // rules={[{ required: true, message: "请输入名称!" }]}
             getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
             <Input maxLength={25} showCount placeholder="请输入内容" />
           </Form.Item>
+          {/* 封面图上传 */}
+          <div className="myformBox myformBoxOne">
+            <div className="label">
+              <span>*</span> 封面图：
+            </div>
+            <div className="fileBoxRow_r">
+              <div
+                hidden={cover !== ""}
+                className="fileBoxRow_up"
+                onClick={() => myInput2.current?.click()}
+              >
+                <PlusOutlined />
+              </div>
+              <div className="fileBoxRow_r_img" hidden={cover === ""}>
+                {cover ? (
+                  <ImageLazy width={100} height={200} src={cover} noLook />
+                ) : null}
+
+                <div className="clearCover2">
+                  {/* 封面图预览 删除 下载 */}
+                  <div className="clearCover2DelBox">
+                    <Popconfirm
+                      title="删除后无法恢复，是否删除?"
+                      okText="删除"
+                      cancelText="取消"
+                      onConfirm={() => setCover("")}
+                    >
+                      <CloseOutlined />
+                    </Popconfirm>
+                  </div>
 
+                  <div className="clearCover2DLBox">
+                    <EyeOutlined
+                      onClick={() =>
+                        store.dispatch({
+                          type: "layout/lookBigImg",
+                          payload: { url: baseURL + cover, show: true },
+                        })
+                      }
+                    />
+                    <a
+                      href={baseURL + cover}
+                      download
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <DownloadOutlined />
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div className="fileBoxRow_r_tit">
+                支持png、jpg和jpeg的图片格式；最大支持30M。建议上传1111X1111尺寸。
+                <br />
+                <div
+                  className={classNames(
+                    "noUpThumb",
+                    !cover && imgCheck ? "noUpThumbAc" : ""
+                  )}
+                >
+                  请上传封面图!
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <input
+            id="upInput"
+            type="file"
+            accept=".png,.jpg,.jpeg"
+            ref={myInput2}
+            onChange={(e) => handeUpPhoto2(e)}
+          />
           <input
             id="upInput"
             type="file"

管理后台/src/pages/A2Wall/WallTable/index.tsx

@@ -24,6 +24,7 @@ import {
   wallSortAPI,
 } from "@/store/action/A2Wall";
 import WallLook from "../WallLook";
+import ImageLazy from "@/components/ImageLazy";
 
 type Props = {
   tablePageIdFu: (id: number, scrollNum: number) => void;
@@ -111,13 +112,21 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
         render: (text: any, record: any, index: any) => index + 1,
       },
       {
+        title: "封面",
+        render: (item: WallTableListType) => (
+          <div className="tableImgAuto">
+            <ImageLazy width={50} height={100} src={item.thumb} />
+          </div>
+        ),
+      },
+      {
         title: "内容类型",
         render: (item: WallTableListType) =>
           item.type === "img" ? "海报" : "视频",
       },
       {
         title: "名称",
-        dataIndex: "name",
+        render: (item: WallTableListType) => (item.name ? item.name : "（空）"),
       },
       {
         title: "展示状态",

管理后台/src/store/action/A2Wall.ts

@@ -58,7 +58,7 @@ export const setWallSave = (data: WallSaveAPIType) => {
 
 const CancelToken = axios.CancelToken;
 /**
- * 上传封面图和附件
+ * 上传海报和视频
  */
 export const wallUploadAPI = (data: any) => {
   domShowFu("#UpAsyncLoding", true);
@@ -81,6 +81,30 @@ export const wallUploadAPI = (data: any) => {
 };
 
 /**
+ * 上传封面图
+ */
+export const wallUploadCoverAPI = (data: any) => {
+  domShowFu("#UpAsyncLoding", true);
+
+  return http.post("cms/wall/uploadThumb", data, {
+    timeout: 0,
+    // 显示进度条
+    onUploadProgress: (e: any) => {
+      const complete = (e.loaded / e.total) * 100 || 0;
+      progressDomFu(complete + "%");
+    },
+    // 取消上传
+    cancelToken: new CancelToken(function executor(c) {
+      store.dispatch({
+        type: "layout/closeUpFile",
+        payload: { fu: c, state: true },
+      });
+    }),
+  });
+};
+
+
+/**
  * 内容-新增|编辑
  */
 export const getWallDetailAPI = (id: number) => {

管理后台/src/types/api/A2Wall.d.ts

@@ -11,6 +11,7 @@ export type WallTableListType = {
   sort: number;
   type: string;
   updateTime: string;
+  thumb:string
 };
 
 export type WallUpSaveType ={
@@ -33,4 +34,5 @@ export type WallSaveAPIType ={
   name:string
   layout:1|2
   type:'img'|'video'
+  thumb:string
 }

管理后台/src/utils/http.ts

@@ -7,10 +7,10 @@ import { domShowFu } from "./domShow";
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
-  process.env.NODE_ENV === "development"
-    ? "http://192.168.20.55:8044/api/"
-    : "";
-  // process.env.NODE_ENV === "development" ? "https://bengbubwg.4dage.com" : "";
+  // process.env.NODE_ENV === "development"
+  //   ? "http://192.168.20.55:8044/api/"
+  //   : "";
+  process.env.NODE_ENV === "development" ? "https://ytxbwg.4dage.com" : "";
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module "axios" {
@@ -23,10 +23,10 @@ declare module "axios" {
 // 创建 axios 实例
 const http = axios.create({
   // --------线下的地址不用加/api/
-  baseURL: baseURL,
+  // baseURL: baseURL,
 
   // --------打包或线上环境接口需要加上api/
-  // baseURL: baseURL + "/api/",
+  baseURL: baseURL + "/api/",
   timeout: 5000,
 });
 

管理后台/src/utils/storage.ts

@@ -1,7 +1,7 @@
 // ------------------------------------token的本地存储------------------------------------
 
 // 用户 Token 的本地缓存键名，自己定义
-const TOKEN_KEY = 'BBSBWG_HT_USER_INFO'
+const TOKEN_KEY = 'YTXBWG_HT_USER_INFO'
 
 /**
  * 从本地缓存中获取 Token 信息