资源图片渲染

src/pages/resource/images/index.module.less

@@ -42,9 +42,9 @@
 .checked {
   width: 20px;
   height: 20px;
-  background: #fff2f0;
+  background: #ff4d4f;
   border-radius: 3px;
-  border: 2px solid #fff2f0;
+  border: 2px solid #ff4d4f;
   position: absolute;
   left: 10px;
   top: 10px;
@@ -52,18 +52,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #ff4d4f;
+  color: #ffffff;
   cursor: pointer;
 }
 
-.imageItem {
+.images-box {
-  position: relative;
+  display: grid;
-  width: 150px;
+  gap: 24px;
-  height: 150px;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
-  overflow: hidden;
+  .imageItem {
-  display: flex;
+    width: 100%;
-  align-items: center;
+    height: 150px;
-  justify-content: center;
+    background-repeat: no-repeat;
-  background: #f4fafe;
+    background-size: contain;
-  border-radius: 6px;
+    background-position: center center;
+    background-color: #f6f6f6;
+    border-radius: 6px;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 }

src/pages/resource/images/index.tsx

@@ -38,6 +38,8 @@ export const ResourceImagesPage = () => {
   const [total, setTotal] = useState(0);
   const [category_ids, setCategoryIds] = useState<any>([]);
   const [selectKey, setSelectKey] = useState<any>([]);
+  const [visibleArr, setVisibleArr] = useState<any>([]);
+  const [hoverArr, setHoverArr] = useState<any>([]);
 
   // 删除图片
   const removeResource = () => {
@@ -71,6 +73,13 @@ export const ResourceImagesPage = () => {
       .then((res: any) => {
         setTotal(res.data.result.total);
         setImageList(res.data.result.data);
+        let data = res.data.result.data;
+        let arr = [];
+        for (let i = 0; i < data.length; i++) {
+          arr.push(false);
+        }
+        setVisibleArr(arr);
+        setHoverArr(arr);
       })
       .catch((err: any) => {
         console.log("错误,", err);
@@ -88,7 +97,9 @@ export const ResourceImagesPage = () => {
     getImageList();
   }, [category_ids, refresh, page, size]);
 
-  const onChange = (id: number) => {
+  const onChange = (e: any, id: number) => {
+    e.preventDefault();
+    e.stopPropagation();
     const arr = [...selectKey];
     if (arr.indexOf(id) === -1) {
       arr.push(id);
@@ -110,6 +121,21 @@ export const ResourceImagesPage = () => {
     setSelectKey([]);
   };
 
+  const showImage = (index: number, value: boolean) => {
+    const arr = [...visibleArr];
+    arr[index] = value;
+    setVisibleArr(arr);
+  };
+
+  const showHover = (index: number, value: boolean) => {
+    const arr = [...hoverArr];
+    for (let i = 0; i < arr.length; i++) {
+      arr[i] = false;
+    }
+    arr[index] = value;
+    setHoverArr(arr);
+  };
+
   return (
     <>
       <div className="tree-main-body">
@@ -135,7 +161,7 @@ export const ResourceImagesPage = () => {
                 <div className="d-flex">
                   {selectKey.length > 0 && (
                     <Button className="mr-16" onClick={() => cancelAll()}>
-                      取消全选
+                      取消选择
                     </Button>
                   )}
                   <Button className="mr-16" onClick={() => selectAll()}>
@@ -154,56 +180,69 @@ export const ResourceImagesPage = () => {
               </div>
             </Col>
           </Row>
-          <Row gutter={[24, 24]}>
+          {imageList.length === 0 && (
-            {imageList.length === 0 && (
+            <div className="d-flex">
               <Col span={24}>
                 <Empty description="暂无图片" />
               </Col>
-            )}
+            </div>
-
+          )}
-            {imageList.map((item: any) => (
+          <div className={styles["images-box"]}>
-              <Col key={item.id} span={3}>
+            {imageList.map((item: any, index: number) => (
-                <div className={styles.imageItem}>
+              <div
-                  <i
+                key={item.id}
-                    className={
+                className={styles.imageItem}
-                      selectKey.indexOf(item.id) === -1
+                style={{ backgroundImage: `url(${item.url})` }}
-                        ? styles.checkbox
+                onClick={() => showImage(index, true)}
-                        : styles.checked
+                onMouseOver={() => showHover(index, true)}
-                    }
+                onMouseOut={() => showHover(index, false)}
-                    onClick={() => onChange(item.id)}
-                  >
-                    {selectKey.indexOf(item.id) !== -1 && <CheckOutlined />}
-                  </i>
-                  <Image
-                    preview={true}
-                    style={{
-                      width: "150px",
-                      height: "auto",
-                    }}
-                    src={item.url}
-                  />
-                </div>
-              </Col>
-            ))}
-
-            {imageList.length > 0 && (
-              <Col
-                span={24}
-                style={{ display: "flex", flexDirection: "row-reverse" }}
               >
-                <Pagination
+                {hoverArr[index] && (
-                  showSizeChanger
+                  <i
-                  onChange={(currentPage, currentSize) => {
+                    className={styles.checkbox}
-                    setPage(currentPage);
+                    onClick={(e) => onChange(e, item.id)}
-                    setSize(currentSize);
+                  ></i>
+                )}
+                {selectKey.indexOf(item.id) !== -1 && (
+                  <i
+                    className={styles.checked}
+                    onClick={(e) => onChange(e, item.id)}
+                  >
+                    <CheckOutlined />
+                  </i>
+                )}
+                <Image
+                  width={200}
+                  style={{ display: "none" }}
+                  src={item.url}
+                  preview={{
+                    visible: visibleArr[index],
+                    src: item.url,
+                    onVisibleChange: (value) => {
+                      showImage(index, value);
+                    },
                   }}
-                  defaultCurrent={page}
-                  total={total}
-                  pageSize={size}
                 />
-              </Col>
+              </div>
-            )}
+            ))}
-          </Row>
+          </div>
+          {imageList.length > 0 && (
+            <Col
+              span={24}
+              style={{ display: "flex", flexDirection: "row-reverse" }}
+            >
+              <Pagination
+                showSizeChanger
+                onChange={(currentPage, currentSize) => {
+                  setPage(currentPage);
+                  setSize(currentSize);
+                }}
+                defaultCurrent={page}
+                total={total}
+                pageSize={size}
+              />
+            </Col>
+          )}
         </div>
       </div>
     </>