页面修改

src/components/StoreDesign/labelBar.vue

@@ -215,18 +215,22 @@
               </el-form-item>
               <el-form-item label="底部导航图标" size="small">
                 <div class="nav_Main">
-                  <div class="nav_IconContent">
-                    <div class="bottom-icon" v-for="(item,index) in mallMsg.BottomTagList" :key="index">
-                      <div class="Btm_ImgIcon">
-                        <img class="btm_icon" :src="item.DefaultIcon" alt="">
-                      </div>
-                      <div class="btnCenter">{{item.TagName}}</div>
-                      <div class="nav_Action">
-                        <span style="background: rgba(64, 158, 255, 0.9);" @click="EditInfo(item,index)">编辑</span>
-                        <span style="background: rgba(245, 108, 108, 0.9);" @click="delItem(index,item)">删除</span>
+
+                  <div class="nav_IconContent" style="display:flex;">
+                    <draggable v-model="mallMsg.BottomTagList">
+                      <div class="bottom-icon" v-for="(item,index) in mallMsg.BottomTagList" :key="index">
+                        <div class="Btm_ImgIcon">
+                          <img class="btm_icon" :src="item.DefaultIcon" alt="">
+                        </div>
+                        <div class="btnCenter">{{item.TagName}}</div>
+                        <div class="nav_Action">
+                          <span style="background: rgba(64, 158, 255, 0.9);" @click="EditInfo(item,index)">编辑</span>
+                          <span style="background: rgba(245, 108, 108, 0.9);" @click="delItem(index,item)">删除</span>
+                        </div>
                       </div>
-                    </div>
+                    </draggable>
                   </div>
+
                   <div class="nav_Add" @click="addIconList">
                     <i class="el-icon-plus nav-add-icon"></i>
                   </div>
@@ -302,6 +306,7 @@
 <script>
   import chooseMenu from "../common/chooseMenu.vue";
   import ChooseImg from "@/components/global/ChooseImg.vue";
+  import draggable from "vuedraggable"
   export default {
     data() {
       let validataIcon = (rule, value, callback) => {
@@ -404,7 +409,7 @@
           TagSort: 1, //排序
           IsActive: false
         },
-        EditIndex:-1,//编辑的行
+        EditIndex: -1, //编辑的行
         rules: {
           icon: [{
             required: true,
@@ -431,7 +436,8 @@
     },
     components: {
       chooseMenu,
-      ChooseImg
+      ChooseImg,
+      draggable,
     },
     created() {
 
@@ -508,9 +514,9 @@
         this.addMsg.IsActive = false;
       },
       //点击编辑
-      EditInfo(item,index) {
+      EditInfo(item, index) {
         this.isAdd = false;
-        this.EditIndex=index;
+        this.EditIndex = index;
         this.addMsg = JSON.parse(JSON.stringify(item));
         this.isShowDialog = true;
       },
@@ -522,10 +528,8 @@
             if (this.isAdd) {
               this.mallMsg.BottomTagList.push(JSON.parse(JSON.stringify(this.addMsg)));
               this.clearAddmsg();
-            }
-            else
-            {
-                this.mallMsg.BottomTagList[this.EditIndex]=JSON.parse(JSON.stringify(this.addMsg));
+            } else {
+              this.mallMsg.BottomTagList[this.EditIndex] = JSON.parse(JSON.stringify(this.addMsg));
             }
             this.isShowDialog = false;
           } else {