feat: 活动列表图片和详情banner支持拖动调整顺序

package-lock.json

@@ -28,6 +28,7 @@
         "sass-loader": "^7.1.0",
         "screenfull": "^4.2.1",
         "scss": "^0.2.4",
+        "sortablejs": "^1.15.7",
         "svg-sprite-loader": "^4.1.6",
         "vue": "^2.6.10",
         "vue-cron": "^1.0.9",
@@ -22552,6 +22553,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.7.tgz",
+      "integrity": "sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A==",
+      "license": "MIT"
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",

package.json

@@ -34,6 +34,7 @@
     "sass-loader": "^7.1.0",
     "screenfull": "^4.2.1",
     "scss": "^0.2.4",
+    "sortablejs": "^1.15.7",
     "svg-sprite-loader": "^4.1.6",
     "vue": "^2.6.10",
     "vue-cron": "^1.0.9",

src/views/modules/activity/add.vue

@@ -69,6 +69,7 @@
                     </el-form-item>
                     <el-form-item label="活动列表图片" prop="coverFile" class="redLabel">
                         <el-upload
+                            ref="coverUploadRef"
                             :action="url"
                             :file-list="fileListCover"
                             :limit="1"
@@ -84,6 +85,7 @@
                     </el-form-item>
                     <el-form-item label="活动详情banner" prop="imageFiles" class="redLabel">
                         <el-upload
+                            ref="bannerUploadRef"
                             :action="url"
                             :file-list="fileListBanner"
                             :limit="6"
@@ -95,7 +97,7 @@
                             >
                             <i class="el-icon-plus"></i>
                         </el-upload>
-                        <div class="upload_tip">尺寸：702*440px,最多上传6张,图片格式：jpg、png、jpeg</div>
+                        <div class="upload_tip">尺寸：702*440px,最多上传6张,图片格式：jpg、png、jpeg（可拖动调整顺序）</div>
                     </el-form-item>
                     <el-form-item label="活动详情" prop="activityDetails" class="redLabel">
                         <editor-vue style="margin-top: -30px;" :content="basicForm.activityDetails"  @EditorChange="getEditor" ref="infoIntroduceRef"></editor-vue>
@@ -226,6 +228,7 @@
 <script>
 import moment from 'moment'
 import Cookies from 'js-cookie'
+import Sortable from 'sortablejs'
 import editorVue from '@/components/editor'
 import mixinRegionModule from '@/mixins/region-module.js'
 const getInitialBasicForm = () => ({
@@ -369,6 +372,10 @@ export default {
       }
     })
 
+    this.$nextTick(() => {
+      this.initUploadSortable()
+    })
+
     // 自动暂存：每分钟保存一次（仅编辑模式）
     this.autoSaveTimer = setInterval(() => {
       this.autoSave()
@@ -534,6 +541,32 @@ export default {
       this.fileListCover = fileList.map((item) => item) || []
       this.basicForm.coverFile = ''
     },
+    // 初始化上传列表的拖拽排序
+    initUploadSortable () {
+      const setup = (ref, listKey, onChange) => {
+        const listEl = this.$refs[ref] && this.$refs[ref].$el && this.$refs[ref].$el.querySelector('.el-upload-list--picture-card')
+        if (!listEl || listEl.__sortable) return
+        listEl.__sortable = Sortable.create(listEl, {
+          animation: 150,
+          onEnd: (evt) => {
+            const arr = this[listKey]
+            if (!arr || arr.length < 2) return
+            const { oldIndex, newIndex } = evt
+            if (oldIndex === newIndex) return
+            const moved = arr.splice(oldIndex, 1)[0]
+            arr.splice(newIndex, 0, moved)
+            this[listKey] = [...arr]
+            onChange && onChange()
+          }
+        })
+      }
+      setup('coverUploadRef', 'fileListCover', () => {
+        this.basicForm.coverFile = this.fileListCover[0] ? this.fileListCover[0].url : ''
+      })
+      setup('bannerUploadRef', 'fileListBanner', () => {
+        this.basicForm.imageFiles = this.fileListBanner.map(item => item.url).join(',')
+      })
+    },
     successHandleCover (res, file, fileList) {
       if (res.code !== 0) {
         return this.$message.error(res.msg)