feat: 图片支持拖动

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "license": "GPL",
   "scripts": {
-    "dev": "cross-env BUILD_ENV=dev node build/dev-server.js",
+    "dev": "cross-env BUILD_ENV=test node build/dev-server.js",
     "local": "cross-env BUILD_ENV=development node build/dev-server.js",
     "build": "node build/build.js",
     "build:dev": "cross-env BUILD_ENV=dev node build/build.js",

src/views/goods/common/data.js

+const imgList = [
+  {
+    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143040888.jpg',
+    id: 1706164241654,
+  },
+  {
+    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143040885.jpg',
+    id: 1706164241695,
+  },
+  {
+    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143052455.jpg',
+    id: 1706164253118,
+  },
+  {
+    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143052455.jpg',
+    id: 17061642531112,
+  },
+  {
+    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143052455.jpg',
+    id: 1706164253111231231,
+  },
+];
+
+export default imgList;

src/views/goods/common/upload-img.vue

+<template>
+  <div class="base-updata">
+    <div class="img-sort">
+      <ul class="el-upload-list el-upload-list--picture-card">
+        <draggable
+          v-model="imgList"
+          :animation="1000"
+          :sort="true"
+          v-if="showDraggable"
+        >
+          <li
+            class="el-upload-list__item is-success animated"
+            v-for="(item, index) in imgList"
+            :key="index"
+            style="margin-right: 10px"
+          >
+            <img
+              :src="item.url"
+              alt=""
+              class="el-upload-list__item is-success"
+            />
+            <!--   <i class="el-icon-close"></i> -->
+            <span class="el-upload-list__item-actions">
+              <!-- 预览 -->
+              <span
+                class="el-upload-list__item-preview"
+                @click="handlePictureCardPreview(item)"
+              >
+                <i class="el-icon-zoom-in"></i>
+              </span>
+              <!-- 删除 -->
+              <span
+                class="el-upload-list__item-delete"
+                @click="handleRemove(index)"
+                v-if="!disabled"
+              >
+                <i class="el-icon-delete"></i>
+              </span>
+            </span>
+          </li>
+        </draggable>
+        <template v-else>
+          <li
+            class="el-upload-list__item is-success animated"
+            v-for="(item, index) in imgList"
+            :key="index"
+            style="margin-right: 10px"
+          >
+            <img
+              :src="item.url"
+              alt=""
+              class="el-upload-list__item is-success"
+            />
+            <i class="el-icon-close"></i>
+            <span class="el-upload-list__item-actions">
+              <!-- 预览 -->
+              <span
+                class="el-upload-list__item-preview"
+                @click="handlePictureCardPreview(item)"
+              >
+                <i class="el-icon-zoom-in"></i>
+              </span>
+              <!-- 删除 -->
+              <span
+                class="el-upload-list__item-delete"
+                @click="handleRemove(index)"
+                v-if="!disabled"
+              >
+                <i class="el-icon-delete"></i>
+              </span>
+            </span>
+          </li>
+        </template>
+      </ul>
+      <el-upload
+        style="display: inline-block"
+        ref="uploadFilemain"
+        :show-file-list="false"
+        :file-list="imgList"
+        list-type="picture-card"
+        :before-upload="beforeUpload"
+        :http-request="(file, fileList) => requestImgHttps(file)"
+        :on-preview="handlePictureCardPreview"
+        :limit="limit"
+        :disabled="disabled"
+        :class="imgList.length == limit ? 'mf' : ''"
+      >
+        <!--            :disabled="optType == 'detail'" -->
+        <i class="el-icon-plus"></i>
+      </el-upload>
+      <span style="position: relative; top: 116px; left: 10px"
+        >{{ imgList.length }}
+        <span v-if="limit != 100">{{ "/" + limit }}</span>
+        <span v-if="showDraggable">（拖拽排序）</span></span
+      >
+    </div>
+    <!-- 图片预览 -->
+    <el-dialog v-model:visible="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+
+export default {
+  name: "base-updata",
+  components: { draggable },
+  props: {
+    //图片列表
+    imgList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    //是否显示拖拽
+    showDraggable: {
+      type: Boolean,
+      default: () => {
+        return false;
+      },
+    },
+    //上传图片署名
+    imgTypeName: {
+      type: String,
+      Request: true,
+    },
+    //上传图片下标
+    imgTypeIdex: {
+      type: Number,
+      Request: true,
+    },
+    //图片限制
+    limit: {
+      type: Number,
+      default: () => {
+        return 100;
+      },
+    },
+    //图片禁止
+    disabled: {
+      type: Boolean,
+      default: () => {
+        return false;
+      },
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false, //图片预览
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    //图片上传验证
+    beforeUpload(file) {
+      return new Promise((resolve, reject) => {
+        this.changeLimt(file).then((res) => {
+          file.isFlag = res;
+          if (file.isFlag) {
+            return resolve(true);
+          } else {
+            return reject(false);
+          }
+        });
+      });
+    },
+    changeLimt(file) {
+      const _this = this;
+      const isSize = new Promise(function (resolve, reject) {
+        const _URL = window.URL || window.webkitURL;
+        const img = new Image();
+        img.src = _URL.createObjectURL(file);
+        img.onload = function () {
+          let e_width = img.width >= 600 && img.width <= 1200;
+          let e_height = img.height >= 600 && img.height <= 1200;
+          if (
+            file.type == "image/png" ||
+            file.type == "image/jpg" ||
+            file.type == "image/jpeg"
+          ) {
+            const valid = e_width && e_height;
+            if (valid) {
+              return resolve();
+            } else {
+              return reject();
+            }
+          } else {
+            return reject();
+          }
+        };
+      }).then(
+        () => {
+          return true;
+        },
+        () => {
+          _this.$message.warning({
+            message:
+              "图片规格为jpg或png，建议形状正方形，尺寸建议800*800像素，最大支持1200*1200像素",
+            btn: false,
+          });
+          return false;
+        }
+      );
+
+      return isSize;
+    },
+    //预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    //删除
+    handleRemove(index) {
+      this.$emit("handleRemove", this.imgTypeName, index);
+    },
+    /**
+     * 上传图片 请求
+     * @param {string} file 图片文件
+     * @param {string} imgTypeName 图片署名
+     * @param {string} imgTypeIdex 图片位置下标
+     * @return {Function} 抛出函数requestImgHttps
+     */
+    requestImgHttps(file) {
+      this.$emit("requestImgHttps", file, this.imgTypeName, this.imgTypeIdex);
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.img-sort {
+  display: flex;
+  flex-wrap: wrap;
+}
+.mf {
+  ::v-deep .el-upload--picture-card {
+    display: none !important;
+  }
+}
+</style>
+
+
+

src/views/goods/create-good-new.scss

@@ -28,7 +28,7 @@
     color: #449284;
     font-size: 14px;
     &::after {
-      content: "";
+      content: '';
       position: relative;
       height: 14px;
       /*border-right: 1px solid #EBEEF5;*/
@@ -37,7 +37,7 @@
     }
     &:last-of-type {
       &::after {
-        content: "";
+        content: '';
         position: relative;
         width: 1px;
         height: 14px;
@@ -46,7 +46,7 @@
     }
   }
   .required-label .el-form-item__label::before {
-    content: "*";
+    content: '*';
     color: #f56c6c;
     margin-right: 4px;
   }
@@ -57,7 +57,7 @@
   .goods-category,
   .project-req {
     .el-form-item__label::before {
-      content: "*";
+      content: '*';
       color: #f56c6c;
       margin-right: 4px;
     }
@@ -67,14 +67,18 @@
   }
   .choice-goods {
     .el-form-item__label::before {
-      content: "*";
+      content: '*';
       color: #f56c6c;
       margin-right: 4px;
     }
   }
+  .image-wrapper {
+    display: flex;
+    flex-direction: row;
+  }
   .label-detailimg {
     .el-form-item__label::before {
-      content: "*";
+      content: '*';
       color: #f56c6c;
       margin-right: 4px;
     }
@@ -125,11 +129,12 @@
       opacity: 0.7;
       transform: translate(-50%, -50%);
       z-index: 999;
+      cursor: pointer;
 
       i {
         color: #fff;
         margin-top: 39px;
-        margin-left: 0px;
+        margin-left: 36px;
       }
     }
   }
@@ -247,12 +252,13 @@
     color: #449284;
   }
   .img-box {
+    position: relative;
     width: 84px;
     height: 130px;
-    float: left;
     margin-right: 15px;
-    position: relative;
+
     .checkbox {
+      text-align: center;
       line-height: 32px;
     }
   }