Merge branch 'feature/serviceGoodsDrag' into 'master'

Feature/service goods drag

See merge request !48

src/pages/ServiceGoods/common.less

@@ -81,3 +81,34 @@
   top: 30px;
   right: 40px;
 }
+
+.sortImg {
+  position: relative;
+  display: inline-block;
+  width: 105px;
+  height: 105px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  padding: 9px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+}
+.mask {
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  bottom: 9px;
+  left: 9px;
+  padding-top: 27%;
+  text-align: center;
+  // width: 100%;
+  // height: 100%;
+  background: #000;
+  opacity: 0.5;
+}
+.maskIcon {
+  margin-right: 5px;
+  color: #efefef;
+  font-size: 16px;
+  cursor: pointer;
+}

src/pages/ServiceGoods/components/UploadImage.jsx

-import { PlusOutlined } from '@ant-design/icons';
-import { Modal, Upload, notification, Spin, Button } from 'antd';
+import { PlusOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
+import { Modal, Upload, notification, Spin, Icon, Button } from 'antd';
 import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import lodash from 'lodash';
+import { ReactSortable } from 'react-sortablejs';
 import { merchantUpload } from '../service';
+import styles from '../common.less';
 
 const MAX_FILE_SIZE = 5;
 const UNIT = 1024 * 1024;
@@ -38,6 +40,7 @@ const UploadImage = forwardRef((props, ref) => {
   const [previewImage, setPreviewImage] = useState('');
   const [previewTitle, setPreviewTitle] = useState('');
   const [fileList, setFileList] = useState([]);
+  const [activeImgIndex, setActiveImgIndex] = useState(null);
   const fileListRef = useRef([]);
 
   useEffect(() => {
@@ -151,6 +154,44 @@ const UploadImage = forwardRef((props, ref) => {
 
   return (
     <Spin tip="正在上传..." spinning={uploadLoading} delay={100}>
+      <div className={styles.imgContent}>
+        {fileList.length > 0 && (
+          <ReactSortable animation={300} list={fileList} setList={list => bundleChange(list)}>
+            {fileList.map((item, index) => (
+              <div
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                className={styles.sortImg}
+                onMouseEnter={() => setActiveImgIndex(index)}
+                onMouseLeave={() => setActiveImgIndex(null)}
+              >
+                <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
+                  <img width="100%" key={item.uid} src={item.url} alt="" />
+                </div>
+                {activeImgIndex === index && (
+                  <div className={styles.mask}>
+                    {/* <Icon
+                      type="eye"
+                      className={styles.maskIcon}
+                      onClick={() => handlePreview(item)}
+                    /> */}
+                    <EyeOutlined className={styles.maskIcon} onClick={() => handlePreview(item)} />
+                    <DeleteOutlined
+                      className={styles.maskIcon}
+                      onClick={() => handleRemove(item)}
+                    />
+                    {/* <Icon
+                      type="delete"
+                      className={styles.maskIcon}
+                      onClick={() => handleRemove(item)}
+                    /> */}
+                  </div>
+                )}
+              </div>
+            ))}
+          </ReactSortable>
+        )}
+      </div>
       <Upload
         {...uploadParams}
         disabled={Boolean(disabled)}
@@ -162,6 +203,7 @@ const UploadImage = forwardRef((props, ref) => {
         fileList={fileList}
         onPreview={handlePreview}
         onRemove={handleRemove}
+        showUploadList={false}
       >
         {limit !== null && fileList.length >= limit ? null : UploadButton}
       </Upload>