upp

houtai/src/pages/B2Goods/GoodsAdd/index.module.scss

@@ -76,12 +76,29 @@
           flex-wrap: wrap;
 
           &>div {
-            margin: 0 15px 15px 0;
+            margin: 0 15px 35px 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;

houtai/src/pages/B2Goods/GoodsAdd/index.tsx

@@ -1,5 +1,13 @@
 import { RootState } from "@/store";
-import { Button, Checkbox, Form, Input, Popconfirm, Select } from "antd";
+import {
+  Button,
+  Checkbox,
+  Form,
+  Input,
+  Popconfirm,
+  Select,
+  Switch,
+} from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -53,7 +61,7 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
     if (id > 0) getInfoInAPIFu(id);
     else {
       setDirCode(Date.now() + "");
-      FormBoxRef.current.setFieldsValue({ topic: 3, display: 1 ,aaaaa:0});
+      FormBoxRef.current.setFieldsValue({ topic: 3, display: 1, aaaaa: 0 });
     }
   }, [getInfoInAPIFu, id]);
 
@@ -120,6 +128,7 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
     fileName?: string;
     filePath?: string;
     id?: number;
+    done?: boolean;
   };
 
   // 上传附件的信息
@@ -130,6 +139,23 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
     video: {} as FileListType,
   });
 
+  // 上传附件图片的有无边框的选择
+  const upImgDoneFu = useCallback(
+    (val: boolean, id: number) => {
+      const newData = {
+        ...fileList,
+        img: fileList.img.map((v) => {
+          return {
+            ...v,
+            done: v.id === id ? val : v.done,
+          };
+        }),
+      };
+      setFileList(newData)
+    },
+    [fileList]
+  );
+
   // 附件信息的校验
 
   const fileCheckFu = useMemo(() => {
@@ -209,6 +235,7 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
         const fd = new FormData();
         // 把files添加进FormData对象（‘photo’为后端需要的字段）
         fd.append("type", fileOneType);
+        fd.append("dirCode", dirCode);
         fd.append("file", filesInfo);
 
         e.target.value = "";
@@ -225,7 +252,7 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
         progressDom.style.width = "0%";
       }
     },
-    [fileOneType]
+    [dirCode, fileOneType]
   );
 
   // 附件图片的拖动
@@ -272,8 +299,8 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
     console.log("通过校验，点击确定");
     setCoverCheck(true);
     setTypeOk(true);
-    if (typeCheck.length === 0) return MessageFu.warning("有表单不符号规则!");;
-    if (cover === "") return MessageFu.warning("有表单不符号规则!");;
+    if (typeCheck.length === 0) return MessageFu.warning("有表单不符号规则!");
+    if (cover === "") return MessageFu.warning("有表单不符号规则!");
   }, [cover, typeCheck.length]);
 
   return (
@@ -521,7 +548,7 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
               <div className="fileBoxRow_r">
                 <div className="upImgBox">
                   <div
-                    hidden={!!fileList.img.length && fileList.img.length >= 9}
+                    hidden={!!fileList.img.length && fileList.img.length >= 30}
                     className="fileBoxRow_up"
                     onClick={() => upFileFu("img")}
                   >
@@ -537,6 +564,17 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
                       onDragEnter={(e) => handleDragEnter(e, v)}
                       onDragEnd={() => setDragImg(null)}
                     >
+                      {/* 选择有没有边框 */}
+                      <div className="upImgDoneBox">
+                        边框：
+                        <Switch
+                          checkedChildren="有"
+                          unCheckedChildren="无"
+                          checked={v.done}
+                          onChange={(val) => upImgDoneFu(val, v.id!)}
+                        />
+                      </div>
+
                       {v.filePath ? (
                         <ImageLazy
                           noLook={dragImg ? true : false}
@@ -679,7 +717,6 @@ function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
             请至少选择一个文件类型，并上传对应附件!
           </div>
 
-
           <Form.Item
             label="展示状态"
             name="display"

houtai/src/pages/B2Goods/GoodsBarrage/index.tsx

@@ -21,10 +21,10 @@ function GoodsBarrage({ closeMoalFu }: Props) {
     >
       <div className="main">
         <div className="row">
-          <span>当前状态：</span>
+          <span></span>
           <Radio.Group onChange={(e) => setValue(e.target.value)} value={value}>
-            <Radio value={1}>开启</Radio>
-            <Radio value={2}>关闭</Radio>
+            <Radio value={1}>全部开启</Radio>
+            <Radio value={2}>全部关闭</Radio>
           </Radio.Group>
         </div>
         <br />

houtai/src/pages/B2Goods/GoogsDown/index.css

@@ -0,0 +1,54 @@
+.GoogsDown .ant-modal-close {
+  display: none;
+}
+.GoogsDown .main {
+  border-top: 1px solid #999999;
+  padding-top: 15px;
+  width: 100%;
+}
+.GoogsDown .imgRowBox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.GoogsDown .imgRowBox .imgRow {
+  width: calc(33.33% - 6px);
+  margin-right: 9px;
+  margin-bottom: 9px;
+  position: relative;
+}
+.GoogsDown .imgRowBox .imgRow:nth-of-type(3n) {
+  margin-right: 0;
+}
+.GoogsDown .imgRowBox .imgRow .incoSelect {
+  z-index: 10;
+  cursor: pointer;
+  top: 0px;
+  right: 0px;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  padding: 6px;
+}
+.GoogsDown .imgRowBox .imgRow .incoSelect > div {
+  border-radius: 50%;
+  background-color: #999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  color: #fff;
+}
+.GoogsDown .imgRowBox .imgRow .incoSelectActive > div {
+  background-color: green;
+}
+.GoogsDown .radioBox {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+.GoogsDown .button {
+  margin-top: 20px;
+  text-align: center;
+}

houtai/src/pages/B2Goods/GoogsDown/index.less

@@ -0,0 +1,60 @@
+.GoogsDown {
+  .ant-modal-close {
+    display: none;
+  }
+
+  .main {
+    border-top: 1px solid #999999;
+    padding-top: 15px;
+    width: 100%;
+  }
+  .imgRowBox{
+    display: flex;
+    flex-wrap: wrap;
+    .imgRow{
+      width: calc(33.33% - 6px);
+      margin-right: 9px;
+      margin-bottom: 9px;
+      position: relative;
+      &:nth-of-type(3n){
+        margin-right: 0;
+      }
+      .incoSelect{
+        z-index: 10;
+        cursor: pointer;
+        top: 0px;
+        right: 0px;
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        padding: 6px;
+        &>div{
+          border-radius: 50%;
+          background-color: #999;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 16px;
+          color: #fff;
+        }
+      }
+      .incoSelectActive{
+        &>div{
+          background-color: green;
+        }
+      }
+    }
+  }
+  .radioBox{
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-between;
+
+  }
+  .button{
+    margin-top: 20px;
+    text-align: center;
+  }
+}

houtai/src/pages/B2Goods/GoogsDown/index.tsx

@@ -0,0 +1,171 @@
+import ImageLazy from "@/components/ImageLazy";
+import { Button, Modal, Radio } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import { CheckOutlined } from "@ant-design/icons";
+import classNames from "classnames";
+import "./index.css";
+import { baseURL } from "@/utils/http";
+
+type Props = {
+  id: number;
+  closeMoalFu: () => void;
+};
+
+function GoogsDown({ id, closeMoalFu }: Props) {
+  // 模拟请求数据图片列表
+
+  const [imgList, setImgList] = useState([
+    {
+      id: 1,
+      filePath: "/goods/1675849099197/thumb/20230208_1738438282.jpg",
+      fileName: "xxx",
+      done: true,
+    },
+    {
+      id: 2,
+      filePath: "/goods/1675849099197/thumb/20230208_1738438282.jpg",
+      fileName: "xxx",
+      done: true,
+    },
+    {
+      id: 3,
+      filePath: "/goods/1675849099197/thumb/20230208_1738438282.jpg",
+      fileName: "xxx",
+      done: true,
+    },
+    {
+      id: 4,
+      filePath: "/goods/1675849099197/thumb/20230208_1738438282.jpg",
+      fileName: "xxx",
+      done: true,
+    },
+    {
+      id: 5,
+      filePath: "/goods/1675849099197/thumb/20230208_1738438282.jpg",
+      fileName: "xxx",
+      done: true,
+    },
+  ]);
+
+  // 通过id发送请求拿数据
+  const getInfoByIdFu = useCallback(() => {
+    console.log("通过id发送请求", id);
+  }, [id]);
+
+  useEffect(() => {
+    getInfoByIdFu();
+  }, [getInfoByIdFu]);
+
+  // 选中图片
+  const selectImgFu = useCallback(
+    (id: number) => {
+      const newData = imgList.map((v) => {
+        return {
+          ...v,
+          done: v.id === id ? !v.done : v.done,
+        };
+      });
+      setImgList(newData);
+    },
+    [imgList]
+  );
+
+  // 分辨率
+  const [imgDpi, setImgDpi] = useState(1);
+
+  // 水印
+  const [imgWater, setImgWater] = useState(1);
+
+  // 点击下载
+  const downImgFu = useCallback(() => {
+    const imgAcList = imgList.filter((v) => v.done);
+
+    // 手动打开loding
+    // dispatch({ type: "login/asyncLoding", payload: true });
+
+    imgAcList.forEach((v) => {
+      const a = document.createElement("a"); // 创建一个a标签
+      a.href = baseURL + v.filePath + "?t=" + Date.now(); //a标签的src属性赋值
+      a.target = "_blank";
+      a.download = v.fileName; // a标签的download属性赋值
+      document.body.appendChild(a); // 添加a标签到body下
+      a.style.display = "none";
+      a.click(); // 触发a标签点击事件
+      document.body.removeChild(a); //  完成后删除a标签
+    });
+  }, [imgList]);
+
+  return (
+    <Modal
+      wrapClassName="GoogsDown"
+      destroyOnClose
+      open={true}
+      title="清“乾隆”款珐琅蓝彩十三行通景画瓷碗"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="main">
+        {/* 图片盒子 */}
+        <div className="imgRowBox">
+          {imgList.map((v) => (
+            <div className="imgRow" key={v.id}>
+              {/* 是否选中 */}
+              <div
+                onClick={() => selectImgFu(v.id)}
+                className={classNames(
+                  "incoSelect",
+                  v.done ? "incoSelectActive" : ""
+                )}
+              >
+                <div>
+                  <CheckOutlined />
+                </div>
+              </div>
+              <ImageLazy src={v.filePath} width="100%" height={130} />
+            </div>
+          ))}
+        </div>
+        {/* 分辨率和水印选择 */}
+        <div className="radioBox">
+          <div>
+            分辨率：
+            <Radio.Group
+              onChange={(e) => setImgDpi(e.target.value)}
+              value={imgDpi}
+            >
+              <Radio value={1}>原图</Radio>
+              <Radio value={2}>压缩</Radio>
+            </Radio.Group>
+          </div>
+          <div>
+            水印：
+            <Radio.Group
+              onChange={(e) => setImgWater(e.target.value)}
+              value={imgWater}
+            >
+              <Radio value={1}>无</Radio>
+              <Radio value={2}>有</Radio>
+            </Radio.Group>
+          </div>
+        </div>
+
+        <div className="button">
+          <Button
+            type="primary"
+            onClick={downImgFu}
+            disabled={imgList.every((v) => !v.done)}
+          >
+            下载
+          </Button>
+          &emsp;
+          <Button onClick={closeMoalFu}>取消</Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoGoogsDown = React.memo(GoogsDown);
+
+export default MemoGoogsDown;

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

@@ -21,6 +21,11 @@
         height: 560px;
         overflow-y: auto !important;
         overflow-y: overlay !important;
+        .ant-table-row{
+          .ant-table-cell{
+            padding: 8px;
+          }
+        }
       }
     }
   }

houtai/src/pages/B2Goods/index.tsx

@@ -29,6 +29,7 @@ import ExportJsonExcel from "js-export-excel";
 import ImageLazy from "@/components/ImageLazy";
 import GoodsBarrage from "./GoodsBarrage";
 import GoodsAdd from "./GoodsAdd";
+import GoogsDown from "./GoogsDown";
 
 const { RangePicker } = DatePicker;
 function Goods() {
@@ -241,6 +242,21 @@ function Goods() {
     [getList]
   );
 
+  // 切换表格中的弹幕留言开启和关闭
+  const isBarrageFu = useCallback((val: boolean, id: number) => {
+    console.log("切换弹幕留言", val, id);
+  }, []);
+
+  // 点击下载图片打开的弹窗
+  const [downPage, setDownPage] = useState(0);
+
+  // 点击下载图片
+  const downTableImgFu = useCallback((type: string, id: number) => {
+    if (type.includes("img")) {
+      setDownPage(id);
+    } else MessageFu.warning("该文物未上传图片!");
+  }, []);
+
   // 点击删除
   const delTableFu = useCallback(
     async (id: number) => {
@@ -317,6 +333,10 @@ function Goods() {
         dataIndex: "updateTime",
       },
       {
+        title: "万物墙主题",
+        render: (item: any) => (item.topic === 1 ? "珍品" : "精品"),
+      },
+      {
         title: "展示状态",
         render: (item: any) => (
           <Switch
@@ -328,13 +348,29 @@ function Goods() {
         ),
       },
       {
-        title: "万物墙主题",
-        render: (item: any) => (item.topic === 1 ? "珍品" : "精品"),
+        title: "弹幕留言",
+        render: (item: any) => (
+          <Switch
+            checkedChildren="启用"
+            unCheckedChildren="停用"
+            checked={item.aaaaa === 1}
+            onChange={(val) => isBarrageFu(val, item.id!)}
+          />
+        ),
       },
+
       {
         title: "操作",
         render: (item: any) => (
           <>
+            <Button
+              style={{ opacity: item.type.includes("img") ? "1" : "0.5" }}
+              size="small"
+              type="text"
+              onClick={() => downTableImgFu(item.type, item.id!)}
+            >
+              下载图片
+            </Button>
             <Button size="small" type="text" onClick={() => setAddId(item.id!)}>
               编辑
             </Button>
@@ -352,19 +388,21 @@ function Goods() {
         ),
       },
     ];
-  }, [delTableFu, isEnabledClickFu]);
+  }, [delTableFu, downTableImgFu, isBarrageFu, isEnabledClickFu]);
 
   // 弹幕设置的弹窗
   const [barrage, setBarrage] = useState(false);
 
   // 新增或者编辑的弹窗
-  const [addId, setAddId] = useState(-1);
+  const [addId, setAddId] = useState(0);
 
   return (
     <div className={styles.Goods}>
-      <div className="pageTitlt">{addId===0?'馆藏管理':addId>0?'编辑馆藏':'新增馆藏'}</div>
+      <div className="pageTitlt">
+        {addId === 0 ? "馆藏管理" : addId > 0 ? "编辑馆藏" : "新增馆藏"}
+      </div>
       {/* 搜索信息 */}
-      <div className="searchBox" hidden={addId!==0}>
+      <div className="searchBox" hidden={addId !== 0}>
         <div className="searchRow">
           <span>名称：</span>
           <Input
@@ -510,7 +548,7 @@ function Goods() {
         </div>
       </div>
       {/* 表格主体 */}
-      <div className="tableBox" hidden={addId!==0}>
+      <div className="tableBox" hidden={addId !== 0}>
         <Table
           scroll={{ y: 560 }}
           dataSource={tableInfo.list}
@@ -531,6 +569,11 @@ function Goods() {
       {/* 弹幕设置 */}
       {barrage ? <GoodsBarrage closeMoalFu={() => setBarrage(false)} /> : null}
 
+      {/* 下载图片的弹窗 */}
+      {downPage ? (
+        <GoogsDown id={downPage} closeMoalFu={() => setDownPage(0)} />
+      ) : null}
+
       {/* 新增和编辑的弹窗 */}
       {addId !== 0 ? (
         <GoodsAdd