构建json算法和修改bug

构建json算法和修改bug

src/store/modules/template.js

@@ -6,6 +6,9 @@ import { Message } from 'element-ui'; //注意在这里引入是非常不符合
 import Vue from 'vue';  //导入Vue 因为我们要进行深层次的json修改，深拷贝的数据无法令视图更新
 //所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set
 
+//引入随机模板json
+import randomTemplateJson from '@/utils/templateJson/index/1.js';//首页
+
 const state = {
   //0.全局配置 start------------------------------------------------------------> 
   editWebsiteId: "",//当前编辑网站的id
@@ -51,6 +54,7 @@ const state = {
   editComponentWindowStatus:false,//选择组件样式弹出框是否显示
   editWindowTitle:"",//编辑弹出框标题
   editSectorId:0,//当前正在编辑的板块id
+  editDataSort:0,//当前正在编辑的数据位置
   editComponentSort:0,//当前正在编辑的组件id
   editComponentType:0,//当前正在编辑的组件类型
   editComponentSize:0,//当前组件展示的条数
@@ -106,6 +110,7 @@ const mutations = {
   setEditWindowStatus(state,data){
     state.editWindowStatus = true;
     state.editSectorId = data.id;
+    state.editDataSort = data.dataSort;
     state.editComponentSort = data.sort;
     state.editComponentType = data.type;
     state.editComponentSize = data.size;
@@ -113,15 +118,12 @@ const mutations = {
   //关闭编辑组件弹出框
   closeEditWindowStatus(state){
     state.editWindowStatus = false;
-    // state.editSectorId = "";
-    // state.editComponentSort = "";
-    // state.editComponentType = "";
-    // state.editComponentSize = "";
   },
   //打开选择组件样式弹出框
   setComponentStyleStatus(state,data){
     state.editComponentWindowStatus = true;
     state.editSectorId = data.id;
+    state.editDataSort = data.dataSort;
     state.editComponentSort = data.sort;
     state.editComponentType = data.type;
     state.editComponentStyle = data.style;
@@ -129,51 +131,12 @@ const mutations = {
   //关闭选择组件样式弹出框
   closeComponentStyleStatus(state){
     state.editComponentWindowStatus = false;
-    // state.editSectorId = "";
-    // state.editComponentSort = "";
-    // state.editComponentType = "";
-    // state.editComponentStyle = "";
   },
   //选择组件样式
   selectComponentStyleNumber(state,data){
     state.editComponentStyle = data;
   },
-  //设置组件样式
-  setComponentStyleNumber(state,data){
-    let id = state.editSectorId;
-    let sort = state.editComponentSort;
-    let num = state.editComponentStyle;
 
-    //pageStatus==1 首页
-    if(state.pageStatus == 1){
-      // 获取当前模块数据并进行深拷贝
-      let module = JSON.parse(JSON.stringify(state.pageData.index[id]));
-      //module.content.componentList[sort].component_style = num;
-      //确保修改属性时 Vue 能监控到变化
-      Vue.set(module.content.componentList, sort, {
-        ...module.content.componentList[sort],
-        component_style: num
-      });
-      // 拷贝后直接替换原来的板块
-      //state.pageData.index[id] = module;
-      // 使用Vue.set来强制视图更新
-      Vue.set(state.pageData.index, id, module);
-      console.log("当前的板块数据为：");
-      console.log(state.pageData.index);
-    }
-    //pageStatus==2 分类页
-    if(state.pageStatus == 2){}
-    //pageStatus==3 列表页
-    if(state.pageStatus == 3){}
-    //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
-    //pageStatus==5 搜索页
-    if(state.pageStatus == 5){}
-    //pageStatus==6 自定义列表页
-    if(state.pageStatus == 6){}
-    //pageStatus==7 自定义详情页
-    if(state.pageStatus == 7){}
-  },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>
   //添加板块
@@ -185,26 +148,31 @@ const mutations = {
         Message.error('最多只能添加10个模块！');
         return;
       }else{
+        //通过时间戳生成id
+        const currentTimestamp = Date.now();
+        let id = currentTimestamp;
         //data.type 组件名称 data.h 模块高度 
         //计算当前布局的最大 y 值
         const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
         console.log(data);
+        //设置数据在构建json中的位置
+        let dataSort = state.pageData.index.length;
         //添加板块id  
         state.pageData.index.push({
-          i: state.pageData.index.length, 
+          //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+          i: id,
           x: 0, 
           y: maxY + 1, 
           w: 12, 
           h: data.h, 
           type: data.type,
-          //content:"",
-          //sectorData:data.jsonData
-          content:data.jsonData
+          //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+          content:data.jsonData,
+          dataSort:dataSort
         });
-        // console.log("当前添加的板块id：" + state.pageData.index.length);
-        // data.jsonData.sectorId = state.pageData.index.length;
-        // console.log("添加完毕后的数据：");
-        // console.log(state.pageData.index);
+        console.log("当前添加模块的dataSort为：" + dataSort);
+        //当前的页面构建数据
+        console.log(state.pageData.index);
       }
     }
     //pageStatus==2 分类页
@@ -222,15 +190,52 @@ const mutations = {
   },
   //删除板块
   deleteModule(state,data){
+    //data.i = id
+    //data.dataSort = dataSort
     //pageStatus==1 首页
     if(state.pageStatus == 1){
-      for(let i = 0; i < state.pageData.index.length; i++) {
-        if(state.pageData.index[i].i == data.i) {
-          state.pageData.index.splice(i, 1);
-        }
-      }
+      //不能这么删除，因为不按顺序删除会导致数组里面的位置法生变化
+      state.pageData.index.splice(data.dataSort,1);
       Message.success('模块已删除！');
-      console.log("删除后的数据结构：");
+      console.log(state.pageData.index);
+    }
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
+  },
+  //设置组件样式
+  setComponentStyleNumber(state,data){
+    let id = state.editSectorId;
+    let dataSort = state.editDataSort;
+    let sort = state.editComponentSort;
+    let num = state.editComponentStyle;
+
+    console.log(id,dataSort,sort,num);
+
+    //pageStatus==1 首页
+    if(state.pageStatus == 1){
+      // 获取当前模块数据并进行深拷贝
+      let module = JSON.parse(JSON.stringify(state.pageData.index[dataSort]));
+      //module.content.componentList[sort].component_style = num;
+      //确保修改属性时 Vue 能监控到变化
+      Vue.set(module.content.componentList, sort, {
+        ...module.content.componentList[sort],
+        component_style: num
+      });
+      // 拷贝后直接替换原来的板块
+      //state.pageData.index[id] = module;
+      // 使用Vue.set来强制视图更新
+      Vue.set(state.pageData.index, dataSort, module);
+      console.log("当前的板块数据为：");
       console.log(state.pageData.index);
     }
     //pageStatus==2 分类页
@@ -315,7 +320,7 @@ const mutations = {
     // if (state.pageStatus == 7) {}
   },
   //修改首页板块高度
-  setIndexModuleHeight(state,data){
+  setModuleHeight(state,data){
     // pageStatus == 1 首页
     if (state.pageStatus == 1) {
       console.log(data);
@@ -368,7 +373,7 @@ const mutations = {
   //随机生成模板
   randomTemplate(state){
     console.log("随机生成模板");
-    const randomIndex = Math.floor(Math.random() * 9) + 1; // Generates a random number between 1 and 2
+    const randomIndex = Math.floor(Math.random() * 3); // Generates a random number between 1 and 2
     console.log(`随机生成的数字是: ${randomIndex}`);
 
     // pageStatus == 1 首页

src/utils/templateJson/index/1.js

@@ -0,0 +1,994 @@
+const json = [
+  //1.正常布局
+  [
+    {
+      "i": 0,
+      "x": 0,
+      "y": 0,
+      "w": 12,
+      "h": 33,
+      "type": "bannerSector",
+      "content": {
+        "sectorName": "bannerSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "mainTitle",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 1,
+              "listType": [
+                "title"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "banner",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "imgUrl"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "imgUrl",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 1
+      },
+      "moved": false
+    },
+    {
+      "i": 1,
+      "x": 0,
+      "y": 33,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 8
+      },
+      "moved": false
+    },
+    {
+      "i": 2,
+      "x": 0,
+      "y": 41,
+      "w": 12,
+      "h": 49,
+      "type": "manyPictureSector",
+      "content": {
+        "sectorName": "manyPictureSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 6,
+            "component_style": 1,
+            "component_name": "fivePicture",
+            "sort": 2,
+            "componentData": {}
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 4,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 3
+      },
+      "moved": false
+    },
+    {
+      "i": 3,
+      "x": 0,
+      "y": 90,
+      "w": 12,
+      "h": 44,
+      "type": "commentSector",
+      "content": {
+        "sectorName": "commentSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 2,
+            "component_name": "tabsCalendarNews",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 6,
+              "listType": [
+                "title",
+                "created_time",
+                "introduce"
+              ]
+            }
+          },
+          {
+            "component_type": 8,
+            "component_style": 1,
+            "component_name": "calendar",
+            "sort": 3,
+            "componentData": {}
+          }
+        ],
+        "sort": 4
+      },
+      "moved": false
+    },
+    {
+      "i": 4,
+      "x": 0,
+      "y": 134,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 2,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 5
+      },
+      "moved": false
+    },
+    {
+      "i": 5,
+      "x": 0,
+      "y": 142,
+      "w": 12,
+      "h": 33,
+      "type": "listSector",
+      "content": {
+        "sectorName": "listSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "listNews",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "listNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 6
+      },
+      "moved": false
+    },
+    {
+      "i": 6,
+      "x": 0,
+      "y": 175,
+      "w": 12,
+      "h": 32,
+      "type": "onlyImgSector",
+      "content": {
+        "sectorName": "onlyImgSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 7,
+              "listType": [
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ],
+        "sort": 7
+      },
+      "moved": false
+    },
+    {
+      "i": 7,
+      "x": 0,
+      "y": 207,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 8
+      },
+      "moved": false
+    },
+    {
+      "i": 8,
+      "x": 0,
+      "y": 215,
+      "w": 12,
+      "h": 20,
+      "type": "friendShipLinkSector",
+      "content": {
+        "sectorName": "friendShipLinkSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 4,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {}
+          }
+        ],
+        "sort": 9
+      },
+      "moved": false
+    }
+  ],
+  //2.绿色布局
+  [
+    {
+      "i": 2,
+      "x": 0,
+      "y": 0,
+      "w": 12,
+      "h": 49,
+      "type": "manyPictureSector",
+      "content": {
+        "sectorName": "manyPictureSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 6,
+            "component_style": 1,
+            "component_name": "fivePicture",
+            "sort": 2,
+            "componentData": {}
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 4,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 1
+      },
+      "moved": false
+    },
+    {
+      "i": 0,
+      "x": 0,
+      "y": 49,
+      "w": 12,
+      "h": 33,
+      "type": "bannerSector",
+      "content": {
+        "sectorName": "bannerSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 2,
+            "component_name": "mainTitle",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 1,
+              "listType": [
+                "title"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "banner",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "imgUrl"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "imgUrl",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 2
+      },
+      "moved": false
+    },
+    {
+      "i": 1,
+      "x": 0,
+      "y": 82,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 3,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 3
+      },
+      "moved": false
+    },
+    {
+      "i": 3,
+      "x": 0,
+      "y": 90,
+      "w": 12,
+      "h": 44,
+      "type": "commentSector",
+      "content": {
+        "sectorName": "commentSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 2,
+            "component_name": "tabsCalendarNews",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 6,
+              "listType": [
+                "title",
+                "created_time",
+                "introduce"
+              ]
+            }
+          },
+          {
+            "component_type": 8,
+            "component_style": 1,
+            "component_name": "calendar",
+            "sort": 3,
+            "componentData": {}
+          }
+        ],
+        "sort": 4
+      },
+      "moved": false
+    },
+    {
+      "i": 4,
+      "x": 0,
+      "y": 134,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 4,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 5
+      },
+      "moved": false
+    },
+    {
+      "i": 6,
+      "x": 0,
+      "y": 142,
+      "w": 12,
+      "h": 32,
+      "type": "onlyImgSector",
+      "content": {
+        "sectorName": "onlyImgSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 7,
+              "listType": [
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ],
+        "sort": 6
+      },
+      "moved": false
+    },
+    {
+      "i": 5,
+      "x": 0,
+      "y": 174,
+      "w": 12,
+      "h": 33,
+      "type": "listSector",
+      "content": {
+        "sectorName": "listSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "listNews",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "listNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 7
+      },
+      "moved": false
+    },
+    {
+      "i": 7,
+      "x": 0,
+      "y": 207,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 3,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 8
+      },
+      "moved": false
+    },
+    {
+      "i": 8,
+      "x": 0,
+      "y": 215,
+      "w": 12,
+      "h": 20,
+      "type": "friendShipLinkSector",
+      "content": {
+        "sectorName": "friendShipLinkSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 4,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {}
+          }
+        ],
+        "sort": 9
+      },
+      "moved": false
+    }
+  ],
+  //3.广告放到顶部
+  [
+    {
+      "i": 1,
+      "x": 0,
+      "y": 0,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 3,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 1
+      },
+      "moved": false
+    },
+    {
+      "i": 0,
+      "x": 0,
+      "y": 8,
+      "w": 12,
+      "h": 33,
+      "type": "bannerSector",
+      "content": {
+        "sectorName": "bannerSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 2,
+            "component_name": "mainTitle",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 1,
+              "listType": [
+                "title"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "banner",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "imgUrl"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "imgUrl",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 2
+      },
+      "moved": false
+    },
+    {
+      "i": 6,
+      "x": 0,
+      "y": 41,
+      "w": 12,
+      "h": 32,
+      "type": "onlyImgSector",
+      "content": {
+        "sectorName": "onlyImgSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 4,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 7,
+              "listType": [
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ],
+        "sort": 3
+      },
+      "moved": false
+    },
+    {
+      "i": 4,
+      "x": 0,
+      "y": 73,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 4,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 4
+      },
+      "moved": false
+    },
+    {
+      "i": 3,
+      "x": 0,
+      "y": 81,
+      "w": 12,
+      "h": 44,
+      "type": "commentSector",
+      "content": {
+        "sectorName": "commentSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 2,
+            "component_name": "tabsCalendarNews",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 6,
+              "listType": [
+                "title",
+                "created_time",
+                "introduce"
+              ]
+            }
+          },
+          {
+            "component_type": 8,
+            "component_style": 1,
+            "component_name": "calendar",
+            "sort": 3,
+            "componentData": {}
+          }
+        ],
+        "sort": 5
+      },
+      "moved": false
+    },
+    {
+      "i": 7,
+      "x": 0,
+      "y": 125,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 3,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 6
+      },
+      "moved": false
+    },
+    {
+      "i": 5,
+      "x": 0,
+      "y": 133,
+      "w": 12,
+      "h": 33,
+      "type": "listSector",
+      "content": {
+        "sectorName": "listSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "listNews",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "listNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "title",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 7
+      },
+      "moved": false
+    },
+    {
+      "i": 8,
+      "x": 0,
+      "y": 166,
+      "w": 12,
+      "h": 20,
+      "type": "friendShipLinkSector",
+      "content": {
+        "sectorName": "friendShipLinkSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 3,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 4,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {}
+          }
+        ],
+        "sort": 8
+      },
+      "moved": false
+    }
+  ]
+
+]
+
+export default json;

src/views/chat/contacts.vue

@@ -41,7 +41,7 @@
               </div>
               <div class="searchFriendInfo">
                 <div class="searchFriendName">
-                  <div class="searchFriendNameText" v-if="searchFriendList.remark!=null">{{searchFriendList.remark}}</div>
+                  <div class="searchFriendNameText" v-if="searchFriendList.remark!=null&&searchFriendList.remark!=''">{{searchFriendList.remark}}</div>
                   <div class="searchFriendNameText" v-else>{{searchFriendList.user_name}}</div>
                   <!--性别-->
                   <!-- <div class="gender"><img src="@/assets/chat/girl.png"></div> -->
@@ -185,7 +185,7 @@
             <div class="userInfoMainLineTitle">备注</div>
             <div class="userInfoMainLineContent">
               <div class="userInfoMainLineContentItem" @click="openEditWindow">
-                <div v-if="friendInfo.remark!=null">{{friendInfo.remark}}</div>
+                <div v-if="friendInfo.remark!=null&&friendInfo.remark!=''">{{friendInfo.remark}}</div>
                 <div v-else>暂无备注</div>
                 <div><i class="el-icon-edit"></i></div>
               </div>
@@ -310,10 +310,10 @@ export default {
       //2.好友列表 end------------------------------------------------------------>
       //3.通过好友申请 start------------------------------------------------------------>
       form:{
-        //好友id
+        //好友的用户id
         id:"",
-        //好友申请
-        remark:"",
+        //好友id
+        friend_id:"",
         //状态
         status:2,
         //申请id
@@ -506,11 +506,15 @@ export default {
       }
       //this.editFriendId
       this.$store.dispatch('chat/updateFriend',data).then(res=> {
-        this.$message.success('修改备注名成功!')
-        this.pagestatus = 1;
-        this.editWindowStatus = false;
-        this.getUserFriendList();
-        this.remark = "";
+        if(res.code==200){
+          this.$message.success('修改备注名成功!')
+          this.pagestatus = 1;
+          this.editWindowStatus = false;
+          this.getUserFriendList();
+          this.remark = "";
+        }else{
+          this.$message.error(res.message)
+        }
       }).catch(() => {
         this.$message.error('修改备注名失败!')
       })
@@ -555,6 +559,7 @@ export default {
     //用户菜单操作
     openWindow(item){
       this.form.id = item.id;
+      this.form.friend_id = item.friend_id;
       this.friendInfo = item;
       //打开弹出框
       this.friendWindowStatus = true;

src/views/chat/creatTopic.vue

@@ -41,7 +41,7 @@
             </el-form-item>
             <div>
               <el-form-item label="群聊名称：" prop="group_name" class="custom-align-right" v-if="form.is_group=='1'">
-                <el-input v-model="form.group_name" autocomplete="off" placeholder="请输入群聊名称" :disabled="groupStatus"></el-input>
+                <el-input v-model="form.group_name" autocomplete="off" placeholder="请输入群聊名称" :disabled="groupStatus" maxlength="20"></el-input>
               </el-form-item>
               <el-form-item label="作者：" class="custom-align-right">
                 <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者名"></el-input>

src/views/chat/hall.vue

@@ -101,7 +101,7 @@
         <div :class="['UserNameBox', groupId ? 'ifNotice' : '']">
           <div class="userName">{{ messageTitle }}</div>
           <img src="@/assets/chat/fi_more.png" v-if="groupId!=''" @click="openGroupSystem" class="moreIcon">
-          <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''">{{groupProfile}}</div>
+          <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''" @click="groupProfileWindow=true">{{groupProfile}}</div>
           <div v-if="groupId==''">
             <div class="shareCardIcon" @click="openShareCard">
               <i class="el-icon-postcard"></i>
@@ -500,17 +500,20 @@
               <div class="groupSystem">
                 <div class="groupChatSystem">
                   <div class="groupChatTitle">群聊名称</div>
-                  <div class="groupChatText" @click="editGroupNameWindow=true">
-                    {{this.messageTitle}}
+                  <div class="groupChatText">
+                    <div class="groupChatTextContent">{{this.messageTitle}}</div>
+                    <img src="@/assets/chat/editGroup.png" @click="editGroupNameWindow=true">
                   </div>
                 </div>
                 <div class="groupChatSystem">
                   <div class="groupChatTitle">群公告</div>
-                  <div class="groupChatText" v-if="this.groupProfile!=''" @click="editGroupNoticeWindow=true">
-                    {{this.groupProfile}}
+                  <div class="groupChatText" v-if="this.groupProfile!=''">
+                    <div class="groupChatTextContent">{{this.groupProfile}}</div>
+                    <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
                   </div>
-                  <div class="groupChatText" v-else @click="editGroupNoticeWindow=true">
+                  <div class="groupChatText" v-else>
                     暂无群公告
+                    <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
                   </div>
                 </div>
                 <!-- <div class="groupChatSystem">
@@ -879,7 +882,7 @@
     <el-dialog :visible.sync="editGroupNameWindow" title="编辑群名称" :close-on-click-modal="false" width="420px">
       <div>
         <div>
-          <el-input type="textarea" resize="none" v-model="messageTitle" placeholder="请输入"></el-input>
+          <el-input type="textarea" resize="none" v-model="messageTitle" placeholder="请输入" maxlength="20"></el-input>
         </div>
         <div class="footerButtonBox">
           <el-button type="info" @click="editGroupNameWindow=false">取消</el-button>
@@ -932,9 +935,9 @@
                 </div>
                 <div class="searchFriendInfo">
                   <div class="searchFriendName">
-                    <div class="searchFriendNameText">{{groupSearchUser.user_name}}</div>
+                    <div class="searchFriendNameText">{{groupSearchUser.nickname}}</div>
                   </div>
-                  <div class="searchFriendPhone">账号：{{groupSearchUser.user_name}}</div>
+                  <div class="searchFriendPhone">账号：{{groupSearchUser.nickname}}</div>
                 </div>
               </div>
               <div class="searchFriendButton">
@@ -948,7 +951,7 @@
           <div class="searchUserBox">
             <!-- <div class="searchNameEnglish">A</div> -->
             <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index">
-              <el-checkbox v-model="item.status" @change="changeSelectFriends(item)"></el-checkbox>
+              <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id)==Number(creatorId)"></el-checkbox>
               <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
               <img src="@/assets/chat/user/admin.png" v-else>
               <div class="searchUserName" v-if="item.remark!=null">{{item.remark}}</div>
@@ -1491,6 +1494,8 @@ export default {
             if(flag==true){
               //如果存在，则选中该会话
               that.selectConversation(SeleteItem)
+            }else{
+              that.$message.error('创建会话失败，请重新从通讯录发起会话！')
             }
             
           }).catch(() => {
@@ -2204,7 +2209,7 @@ export default {
       console.log("监听消息：",message)
      
       //先判断是否为群消息
-      if (message.receiver_id.length == 18) {
+      if (message.receiver_id && message.receiver_id.length == 18) {
         //18位就是群聊
         if(Number(this.myUserId) == Number(message.user_id)){
           //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
@@ -3376,9 +3381,18 @@ export default {
               overflow: hidden;
               font-size: 18px;
               color: #999;
-              cursor: pointer;
-              white-space: nowrap;
-              text-overflow: ellipsis;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              img {
+                cursor: pointer;
+              }
+              .groupChatTextContent {
+                width: 300px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
             }
           }
         }

src/views/template/page/pageIndex.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="grid-layout-demo">
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]"><!--1-->
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
       <headSector />
     </div>
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]"><!--2-->
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
       <menuSector />
     </div>
+    <!-- 占位符 -->
     <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
       <img src="@/assets/template/creat.png">
       <div>您选择的板块将展示到此区域</div>
@@ -14,56 +17,44 @@
       <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
         <div class="grid-item-content">
           <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
-            <!-- <span><i class="el-icon-setting"></i></span> -->
-            <!-- 移动板块 暂时停用 会导致组件视图不更新的问题-->
+            <!-- 移动板块-->
             <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
             <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
-            <span @click="deleteModule(item.i)"><i class="el-icon-close"></i></span>
+            <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
           </div>
-          <!-- 页头板块 -->
-          <!-- <div v-if="item.type == 'headSector'" class="moduleBox">
-            <headSector />
-          </div> -->
-          <!-- 导航板块 --> 
-          <!-- <div v-if="item.type == 'menuSector'" class="moduleBox">
-            <menuSector :id="item.i"/>
-          </div> -->
-          <!-- 图片标题模块 --><!--4-->
+          <!-- 4.广告模块 -->
           <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-            <imgTitleSector :id="item.i"/>
+            <imgTitleSector :dataSort="item.dataSort" :id="item.i"/>
           </div>
-          <!-- 焦点图模块 --><!--5-->
+          <!-- 5.焦点图模块 -->
           <div v-if="item.type == 'bannerSector'" class="moduleBox">
-            <bannerSector :id="item.i"/>
+            <bannerSector :dataSort="item.dataSort" :id="item.i"/>
           </div>
-          <!-- 多图模块 --><!--6-->
+          <!-- 6.多图模块 -->
           <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-            <manyPictureSector :id="item.i"/>
+            <manyPictureSector :dataSort="item.dataSort" :id="item.i"/>
           </div>
-          <!-- 评论模块 --><!--7-->
+          <!-- 7.评论模块 -->
           <div v-if="item.type == 'commentSector'" class="moduleBox">
-            <commentSector :id="item.i"/>
+            <commentSector :dataSort="item.dataSort" :id="item.i" />
           </div>
-          <!-- 双联文章列表模块 --> 
+          <!-- 8.双联文章列表模块 -->
           <div v-if="item.type == 'listSector'" class="moduleBox">
-            <listSector :id="item.i"/>
+            <listSector :dataSort="item.dataSort" :id="item.i"/>
           </div>
-          <!-- 纯图片组合模块 --> 
+          <!-- 9.纯图片组合模块 --> 
           <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-            <onlyImgSector :id="item.i"/>
+            <onlyImgSector :dataSort="item.dataSort" :id="item.i"/>
           </div>
-          <!-- 友情链接模块 --> 
+          <!-- 10.友情链接模块 --> 
           <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-            <friendShipLinkSector :id="item.i"/>
+            <friendShipLinkSector :dataSort="item.dataSort" :id="item.i"/>
           </div>
-          <!-- 页尾板块 --> 
-          <!-- <div v-if="item.type == 'footerSector'" class="moduleBox">
-            <footerSector />
-          </div> --><!--3-->
         </div>
       </grid-item>
     </grid-layout>
     <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
       <footerSector />
     </div>
   </div>
@@ -145,8 +136,12 @@ export default {
       this.$store.commit('template/moveModule',{i:i,moveType:moveType});
     },
     //1.2 删除模块
-    deleteModule(i){
-      this.$store.commit('template/deleteModule',{i:i});
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
     },
     //1.3 打开弹出框
     openWindow(item) {

src/views/template/public/componentWindow.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="componentWindowBox">
     <!--开发助手-->
-    <div class="testAssistant">
+   <div class="testAssistant">
       <div class="testAssistantTitle">
         开发助手：当前窗口在正式版本中将被移除。
       </div>
       <div class="testAssistantContent">
-        <div class="testAssistantContentItem"><span>板块:</span>{{this.$store.state.template.editSectorId}}</div>
+        <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
         <div class="testAssistantContentItem"><span>组件位置:</span>{{this.$store.state.template.editComponentSort}}</div>
+        <div class="testAssistantContentItem"><span>组件Json位置:</span>{{this.$store.state.template.editDataSort}}</div>
         <div class="testAssistantContentItem"><span>组件种类:</span>{{this.$store.state.template.editComponentType}}</div>
-        <div class="testAssistantContentItem"><span>原组件样式:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editSectorId].content.componentList[this.$store.state.template.editComponentSort].component_style}}</div>
+        <div class="testAssistantContentItem"><span>原组件样式:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.componentList[this.$store.state.template.editComponentSort].component_style}}</div>
         <div class="testAssistantContentItem"><span>当前组件样式:</span>{{this.$store.state.template.editComponentStyle}}</div>
       </div>
     </div>
@@ -193,7 +194,7 @@ export default {
   },
   methods: {
     //选择组件样式
-   selectUseStyleNumber(number){
+    selectUseStyleNumber(number){
       this.$store.commit('template/selectComponentStyleNumber',number);
     },
     //关闭选择组件样式弹出框

src/views/template/public/convertBtn.vue

@@ -11,6 +11,10 @@ export default {
       type:Number,
       default:0
     },
+    dataSort: {
+      type:Number,
+      default:0
+    },
     sort:{
       type:Number,
       default:0
@@ -27,9 +31,21 @@ export default {
   },
   methods: {
     openComponentListWindow(){
-      let style = this.$store.state.template.pageData.index[this.id].content.componentList[this.sort].component_style;
+      //判断编辑的是哪个页面的组件style
+      let style = 0;
+      if(this.$store.state.template.pageStatus==1){
+        style = this.$store.state.template.pageData.index[this.dataSort].content.componentList[this.sort].component_style;
+      }
+      if(this.$store.state.template.pageStatus==2){}
+      if(this.$store.state.template.pageStatus==3){}
+      if(this.$store.state.template.pageStatus==4){}
+      if(this.$store.state.template.pageStatus==5){}
+      if(this.$store.state.template.pageStatus==6){}
+      if(this.$store.state.template.pageStatus==7){}
+
       let data = {
         id:this.id,
+        dataSort:this.dataSort,
         sort:this.sort,
         type:this.type,
         style:style

src/views/template/public/editBtn.vue

@@ -11,6 +11,10 @@ export default {
       type:Number,
       default:0
     },
+    dataSort: {
+      type:Number,
+      default:0
+    },
     sort:{
       type:Number,
       default:0
@@ -33,6 +37,7 @@ export default {
     openEditWindow(){
       let data = {
         id:this.id,
+        dataSort:this.dataSort,
         sort:this.sort,
         type:this.type,
         size:this.size

src/views/template/public/editWindow.vue

@@ -10,6 +10,7 @@
         <div class="testAssistantContent">
           <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
           <div class="testAssistantContentItem"><span>组件位置:</span>{{this.$store.state.template.editComponentSort}}</div>
+          <div class="testAssistantContentItem"><span>Json数据位置:</span>{{this.$store.state.template.editDataSort}}</div>
           <div class="testAssistantContentItem"><span>数据类型:</span>{{this.$store.state.template.editComponentType}}</div>
           <div class="testAssistantContentItem"><span>展示条数:</span>{{this.$store.state.template.editComponentSize}}</div>
         </div>

src/views/template/style/1/sector/10.vue

@@ -1,16 +1,16 @@
 <template>
   <div :class="['friendShipLinkSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['friendShipLinkSectorTitle', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <title1Style />
       </div>
     </div>
     <div :class="['friendShipLinkSectorItemBox', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :sort="0" :type="4" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="9"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="4" :size="1"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="9"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
         <link1Style />
       </div>
     </div>
@@ -37,6 +37,10 @@ export default {
     id:{
       type:Number,
       default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
     }
   },
   data() {
@@ -49,6 +53,7 @@ export default {
 
 <style scoped lang="less">
   .friendShipLinkSectorBox {
+    height:180px;
     .componentBorder{
       border: 2px dashed #999;
     }

src/views/template/style/1/sector/2.vue

@@ -53,10 +53,7 @@
 <script>
 export default {
   props: {
-    id: {
-      type: Number,
-      default: 0
-    }
+    
   },
   data() {
     return {

src/views/template/style/1/sector/4.vue

@@ -1,18 +1,18 @@
 <template>
   <div :class="['imgTitleSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div class="imgSectorBox">
-      <editBtn :id="id" :sort="0" :type="3" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="3"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="3" :size="1"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="3"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <useStyle1 />
       </div>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 2">
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
         <useStyle2 />
       </div>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 3">
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
         <useStyle3 />
       </div>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 4">
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
         <useStyle4 />
       </div>
     </div>
@@ -40,6 +40,10 @@ export default {
     id:{
       type:Number,
       default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
     }
   },
   data() {

src/views/template/style/1/sector/5.vue

@@ -1,33 +1,33 @@
 <template>
   <div :class="['bannerBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['itemTopBox', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :sort="0" :type="6" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="1"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="6" :size="1"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <mainTitleStyle1 />
       </div>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 2">
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
         <mainTitleStyle2 />
       </div>
     </div>
     <div class="itemBottomBox">
       <div class="bannerLayerBox">
-        <editBtn :id="id" :sort="1" :type="1" :size="3"/>
-        <convertBtn :id="id" :sort="1" :type="4"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="3"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="4"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
           <banner1Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 2">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
           <banner2Style />
         </div>
       </div>
       <div :class="['NewsListBox', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :sort="2" :type="2" :size="5"/>
-        <convertBtn :id="id" :sort="2" :type="5"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
+        <editBtn :id="id" :dataSort="dataSort"  :sort="2" :type="2" :size="5"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="5"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
           <tabs1Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 2">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
           <tabs2Style />
         </div>
       </div>
@@ -67,6 +67,10 @@ export default {
     id:{
       type:Number,
       default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
     }
   },
   data() {

src/views/template/style/1/sector/6.vue

@@ -1,43 +1,43 @@
 <template>
   <div :class="['manyPictureSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['manyPictureSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <title1Style />
       </div>
     </div>
     <div class="manyPictureImgBox">
-      <editBtn :id="id" :sort="1" :type="6"/>
-      <convertBtn :id="id" :sort="1" :type="7"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="7"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
         <staticHtml1Style />
       </div>
     </div>
     <div class="manyPictureNewsBox">
       <div :class="['manyPictureNewsItem', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :sort="2" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="2" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
           <list1Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 2">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
           <list2Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 3">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 3">
           <list3Style />
         </div>
       </div>
       <div :class="['manyPictureNewsItem', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :sort="3" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="3" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[3].component_style == 1">
+        <editBtn :id="id" :dataSort="dataSort" :sort="3" :type="1" :size="5"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="3" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 1">
           <list1Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[3].component_style == 2">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 2">
           <list2Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[3].component_style == 3">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 3">
           <list3Style />
         </div>
       </div>
@@ -73,6 +73,10 @@ export default {
     id:{
       type:Number,
       default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
     }
   },
   data() {

src/views/template/style/1/sector/7.vue

@@ -1,27 +1,27 @@
 <template>
   <div :class="['commentSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['commentSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <title1Style />
       </div>
     </div>
     <div class="commentSectorBoxContent">
       <div :class="['tabsCalendarNewsBox', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :sort="1" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="1" :type="5"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="5"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
           <tabs1Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 2">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
           <tabs2Style />
         </div>
       </div>
       <div class="calendarBox">
-        <editBtn :id="id" :sort="2" :type="8" :size="1"/>
-        <convertBtn :id="id" :sort="2" :type="8"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="8" :size="1"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="8"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
           <form1Style />
         </div>
       </div>
@@ -54,6 +54,10 @@ export default {
     id: {
       type: Number,
       default: 0
+    },
+    dataSort:{
+      type:Number,
+      default:0
     }
   },
   data() {

src/views/template/style/1/sector/8.vue

@@ -1,36 +1,36 @@
 <template>
   <div :class="['listSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['listSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <title1Style />
       </div>
     </div>
     <div class="listSectorBoxContent">
       <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :sort="1" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="1" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
           <list1Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 2">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
           <list2Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 3">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 3">
           <list3Style />
         </div>
       </div>
       <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :sort="2" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="2" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
           <list1Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 2">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
           <list2Style />
         </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 3">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 3">
           <list3Style />
         </div>
       </div>
@@ -64,6 +64,10 @@ export default {
     id:{
       type:Number,
       default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
     }
   },
   data() {
@@ -80,6 +84,7 @@ export default {
     flex-direction: column;
     align-items: center;
     width:100%;
+    height: 306px;
     .componentBorder{
       border: 2px dashed #999;
     }

src/views/template/style/1/sector/9.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['onlyImgSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div class="onlyImgSectorPositionBox">
-      <editBtn :id="id" :sort="0" :type="6" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="6" :size="1"/>
       <!-- <convertBtn :id="id" :sort="0" :type="3"/> -->
       <staticHtml2Style />
     </div>
@@ -24,6 +24,10 @@ export default {
       type:Number,
       default:0
     },
+    dataSort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {