优化发布页面图片（拖拽）

src/views/sale/UploadImg.vue

+<template>
+  <div class="component_uploadImg">
+    <div class="ant-upload-picture-card-wrapper">
+      <div class="ant-upload-list">
+        <draggable
+          :list="imgList"
+          :options="{group:'title', animation:150}"
+          :no-transition-on-drag="true"
+          class="syllable_ul"
+          element="ul"
+          @change="change"
+        >
+          <div v-for="(item, index) in imgList" :key="index" class="ant-upload-list-item">
+            <div class="ant-upload-list-item-info">
+              <span>
+                <a :href="item.url" target="_blank" rel="noopener noreferrer" >
+                  <img :src="item.url" class="ant-upload-list-item-thumbnail">
+                </a>
+              </span>
+            </div>
+            <span class="ant-upload-list-item-actions">
+              <i class="el-icon-view" @click="previewImg(item.url)"/>
+              <i class="el-icon-delete" @click="removeImg(item.url)"/>
+            </span>
+          </div>
+        </draggable>
+      </div>
+      <el-upload
+        :action="uploadPath"
+        :headers="headers"
+        :limit="9"
+        :file-list="imgList"
+        :on-exceed="uploadOverrun"
+        :on-success="handleGalleryUrl"
+        :on-remove="handleRemove"
+        :show-file-list="false"
+        multiple
+        accept=".jpg,.jpeg,.png,.gif"
+        list-type="picture-card">
+        <i class="el-icon-plus" />
+      </el-upload>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { getToken } from '@/utils/auth'
+import { uploadPath } from '@/api/business/storage'
+
+export default {
+  name: 'UploadFile',
+  components: { draggable },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    productTopImages: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    fileType: {
+      type: String,
+      default: 'image/jpeg'
+    }
+  },
+  data() {
+    return {
+      uploadPath,
+      /* upHeaders: {
+        authorization: User.getToken()
+      },*/
+      imgList: this.productTopImages || []
+    }
+  },
+  computed: {
+    headers() {
+      return {
+        'X-Dts-Admin-Token': getToken()
+      }
+    }
+  },
+  methods: {
+    handleChangeImage(info) {
+      this.imgList = info.fileList.map((img, index) => {
+        if (img.response && img.response.result) {
+          img.url = img.response.result
+        }
+        return img
+      })
+      this.change()
+    },
+    change() {
+      const list = this.imgList.map(item => {
+        return item.url // 返回偶数
+      })
+      this.$emit('update:productTopImages', list)
+    },
+    previewImg(url) {
+      window.open(url, '_blank')
+    },
+    removeImg(url) {
+      this.imgList.forEach((val, key) => {
+        if (url === val.url) {
+          this.imgList.splice(key, 1)
+          this.change()
+        }
+      })
+    },
+    uploadOverrun: function() {
+      this.$message({
+        type: 'error',
+        message: '上传文件个数超出限制!最多上传9张图片!'
+      })
+    },
+    handleGalleryUrl(response, file, fileList) {
+      if (response.errno === 0) {
+        this.imgList.push({
+          url: response.data.url,
+          name: response.data.url
+        })
+      }
+    },
+    handleRemove: function(file, fileList) {
+      var url
+      if (file.response === undefined) {
+        url = file.url
+      } else {
+        url = file.response.data.url
+      }
+      for (var i = 0; i < this.imgList.length; i++) {
+        // 这里存在两种情况
+        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
+        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
+        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
+        if (this.imgList[i] === url) {
+          this.imgList.splice(i, 1)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/*.component_uploadImg {
+  .upload_img {
+    /deep/ .ant-upload-list-picture-card {
+      display: none;
+    }
+  }
+
+  /deep/ .ant-upload-picture-card-wrapper {
+    width: auto;
+  }
+}*/
+/deep/ .syllable_ul {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+.ant-upload-list {
+  display: flex;
+  flex-direction: row;
+}
+
+.ant-upload-list-item {
+
+  display: flex;
+  flex-direction: row;
+  width: 146px;
+  height: 146px;
+  margin: 0 12px 12px 0;
+
+  .ant-upload-list-item-info {
+    position: relative;
+  }
+  .ant-upload-list-item-actions {
+    width: 146px;
+    height: 146px;
+    position: absolute;
+    top: 0;
+  }
+
+  .ant-upload-list-item-thumbnail {
+    width: 146px;
+    height: 146px;
+    border-radius: 12px;
+  }
+}
+</style>

src/views/sale/saleAdd.vue

@@ -18,6 +18,33 @@
           <span>商品图片</span>
         </div>
         <el-form-item label="" prop="images">
+          <div v-if="goods.images && (typeof goods.images === 'object')" class="ant-upload-list">
+            <draggable
+              :list="goods.images"
+              :options="{group:'title', animation:150}"
+              :no-transition-on-drag="true"
+              class="syllable_ul"
+              element="ul"
+              @change="change"
+            >
+              <div v-for="(item, index) in goods.images" :key="index" class="ant-upload-list-item">
+                <div class="ant-upload-list-item-info">
+                  <span>
+                    <a :href="item" target="_blank" rel="noopener noreferrer" >
+                      <img :src="item" class="ant-upload-list-item-thumbnail">
+                    </a>
+                  </span>
+                </div>
+                <span class="ant-upload-list-item-actions">
+                  <!--                  <i class="el-icon-view" @click="previewImg(item)"/>-->
+                  <i class="el-icon-delete" @click="removeImg(item)"/>
+                  <!--                  <el-button type="success" icon="el-icon-view" size="mini" plain @click="previewImg(item)"/>-->
+                  <!--                  <el-button type="danger" icon="el-icon-delete" size="mini" plain @click="removeImg(item)"/>-->
+                </span>
+              </div>
+            </draggable>
+          </div>
+
           <el-upload
             :action="uploadPath"
             :headers="headers"
@@ -26,6 +53,7 @@
             :on-exceed="uploadOverrun"
             :on-success="handleGalleryUrl"
             :on-remove="handleRemove"
+            :show-file-list="false"
             multiple
             accept=".jpg,.jpeg,.png,.gif"
             list-type="picture-card">
@@ -33,6 +61,9 @@
           </el-upload>
           <div>建议上传尺寸3：4的图片，最多不超过9张</div>
         </el-form-item>
+        <!--        <el-form-item label="图片" prop="images">
+          <UploadFile :product-top-images.sync="goods.images" @productTopImages="goods.images"/>
+        </el-form-item>-->
       </el-card>
       <el-card class="box-card">
         <div slot="header" class="clearfix">
@@ -130,10 +161,11 @@ import { getToken } from '@/utils/auth'
 import Editor from '@tinymce/tinymce-vue'
 import { MessageBox } from 'element-ui'
 import { createSale, findSaleDetail, updateSale } from '../../api/business/sale'
-
+import UploadFile from './UploadImg'
+import draggable from 'vuedraggable'
 export default {
   name: 'SaleAdd',
-  components: { Editor },
+  components: { UploadFile, Editor, draggable },
   data() {
     return {
       uploadPath,
@@ -210,9 +242,38 @@ export default {
     this.handleGetDetail(loading)
   },
   methods: {
+    change() {
+      const newList = []
+      for (var i = 0; i < this.goods.images.length; i++) {
+        newList.push({
+          url: this.goods.images[i]
+        })
+      }
+      this.itemImages = newList
+    },
+    previewImg(url) {
+      window.open(url, '_blank')
+    },
+    removeImg(url) {
+      this.goods.images.forEach((val, key) => {
+        if (url === val) {
+          this.goods.images.splice(key, 1)
+          this.change()
+        }
+      })
+      this.itemImages.forEach((val, key) => {
+        if (url === val.url) {
+          this.itemImages.splice(key, 1)
+          this.change()
+        }
+      })
+    },
     handlerNumTypeChange(e) {
       console.log('==e==', e)
     },
+    handlerClose(imageList) {
+      this.itemImages = imageList
+    },
     /**
      * 获取详情
      * @param loading
@@ -407,5 +468,53 @@ export default {
   justify-content: center;
   padding: 0 24px 24px;
 }
+/deep/ .el-form-item__content {
+  margin-left: 0;
+}
+/deep/ .syllable_ul {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+/deep/ .el-icon-delete {
+  color: white;
+}
+.ant-upload-list {
+  display: flex;
+  flex-direction: row;
+}
+
+.ant-upload-list-item {
+
+  display: flex;
+  flex-direction: row;
+  width: 146px;
+  height: 146px;
+  margin: 0 12px 12px 0;
+
+  .ant-upload-list-item-info {
+    position: relative;
+  }
+  .ant-upload-list-item-actions {
+    width: 146px;
+    height: 30px;
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    margin-top: 136px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 0 0 12px 12px;
+  }
+
+  .ant-upload-list-item-thumbnail {
+    width: 146px;
+    height: 146px;
+    border-radius: 12px;
+  }
+}
 
 </style>