完成随机添加模板的功能

完成随机添加模板的功能

src/store/modules/template.js

@@ -10,7 +10,10 @@ import Vue from 'vue';  //导入Vue 因为我们要进行深层次的json修改
 //所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set
 
 //引入随机模板json
-import randomTemplateJson from '@/utils/templateJson/index/1.js';//首页
+//首页 风格1
+import randomIndex1 from '@/utils/templateJson/index/style1/1.js';
+//首页 风格2
+import randomIndex2 from '@/utils/templateJson/index/style1/2.js';
 
 const state = {
   //0.全局配置 start------------------------------------------------------------> 
@@ -24,6 +27,7 @@ const state = {
   menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
   previewStatus:false,//是否预览
   gridKey:0,//使用gridKey来强制更新视图
+  loading:false,//是否显示加载中
   pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
     index:[
       
@@ -1217,14 +1221,28 @@ const mutations = {
   },
   //随机生成模板
   randomTemplate(state){
-    console.log("随机生成模板");
-    const randomIndex = Math.floor(Math.random() * 3); // Generates a random number between 1 and 2
+    state.loading = true;
+    const randomIndex = Math.floor(Math.random() * 2); // Generates a random number between 1 and 2
     console.log(`随机生成的数字是: ${randomIndex}`);
-
-    Message.warning("该功能研发中");
+    //console.log(randomIndex1)
+    //console.log(randomIndex2)
+    //Message.warning("该功能研发中");
 
     // pageStatus == 1 首页
-    if (state.pageStatus == 1) {}
+    if (state.pageStatus == 1) {
+      // 先清空里面的内容
+      Vue.set(state.pageData, 'index', []);
+      // 深拷贝 randomIndex1 和 randomIndex2
+      const newData1 = JSON.parse(JSON.stringify(randomIndex1));
+      const newData2 = JSON.parse(JSON.stringify(randomIndex2));
+      if (randomIndex == 0) {
+        Vue.set(state.pageData, 'index', newData1);
+      }
+      if (randomIndex == 1) {
+        Vue.set(state.pageData, 'index', newData2);
+      }
+      state.loading = false;
+    }
     // pageStatus == 2 分类页
     if (state.pageStatus == 2) {}
     // pageStatus == 3 列表页

src/utils/templateJson/index/1.js

@@ -1,994 +0,0 @@
-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/utils/templateJson/index/style1/1.js

@@ -0,0 +1,365 @@
+const json = [
+  {
+      "i": 1738974484325,
+      "x": 0,
+      "y": 0,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+          "sectorName": "imgTitleSector",
+          "componentList": [
+              {
+                  "component_type": 3,
+                  "component_style": 1,
+                  "component_name": "",
+                  "sort": 1,
+                  "componentData": {
+                      "text": "通栏广告",
+                      "width": 1200,
+                      "height": 60
+                  }
+              }
+          ]
+      },
+      "dataSort": 0,
+      "moved": false
+  },
+  {
+      "i": 1738974487549,
+      "x": 0,
+      "y": 8,
+      "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": [
+                          "title",
+                          "imgUrl"
+                      ]
+                  }
+              },
+              {
+                  "component_type": 1,
+                  "component_style": 1,
+                  "component_name": "tabsNews",
+                  "sort": 3,
+                  "componentData": {
+                      "category_id": [],
+                      "page": 1,
+                      "pageSize": 5,
+                      "listType": [
+                          "title",
+                          "created_time",
+                          "introduce"
+                      ]
+                  }
+              }
+          ]
+      },
+      "dataSort": 1,
+      "moved": false
+  },
+  {
+      "i": 1738974490566,
+      "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"
+                      ]
+                  }
+              }
+          ]
+      },
+      "dataSort": 2,
+      "moved": false
+  },
+  {
+      "i": 1738974498485,
+      "x": 0,
+      "y": 90,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+          "sectorName": "imgTitleSector",
+          "componentList": [
+              {
+                  "component_type": 3,
+                  "component_style": 1,
+                  "component_name": "",
+                  "sort": 1,
+                  "componentData": {
+                      "text": "通栏广告",
+                      "width": 1200,
+                      "height": 60
+                  }
+              }
+          ]
+      },
+      "dataSort": 3,
+      "moved": false
+  },
+  {
+      "i": 1738974500885,
+      "x": 0,
+      "y": 98,
+      "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": {}
+              }
+          ]
+      },
+      "dataSort": 4,
+      "moved": false
+  },
+  {
+      "i": 1738974503677,
+      "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"
+                      ]
+                  }
+              }
+          ]
+      },
+      "dataSort": 5,
+      "moved": false
+  },
+  {
+      "i": 1738974512397,
+      "x": 0,
+      "y": 175,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+          "sectorName": "imgTitleSector",
+          "componentList": [
+              {
+                  "component_type": 3,
+                  "component_style": 1,
+                  "component_name": "",
+                  "sort": 1,
+                  "componentData": {
+                      "text": "通栏广告",
+                      "width": 1200,
+                      "height": 60
+                  }
+              }
+          ]
+      },
+      "dataSort": 6,
+      "moved": false
+  },
+  {
+      "i": 1738974513837,
+      "x": 0,
+      "y": 183,
+      "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"
+                      ]
+                  }
+              }
+          ]
+      },
+      "dataSort": 7,
+      "moved": false
+  },
+  {
+      "i": 1738974516317,
+      "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": {}
+              }
+          ]
+      },
+      "dataSort": 8,
+      "moved": false
+  }
+]
+
+export default json;

src/utils/templateJson/index/style1/2.js

@@ -0,0 +1,346 @@
+const json = [
+    {
+        "i": 1738974893638,
+        "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": [
+                            "title",
+                            "imgUrl"
+                        ]
+                    }
+                },
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "tabsNews",
+                    "sort": 3,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 5,
+                        "listType": [
+                            "title",
+                            "created_time",
+                            "introduce"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 0,
+        "moved": false
+    },
+    {
+        "i": 1738974900821,
+        "x": 0,
+        "y": 33,
+        "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 1,
+        "moved": false
+    },
+    {
+        "i": 1738974904278,
+        "x": 0,
+        "y": 66,
+        "w": 12,
+        "h": 8,
+        "type": "imgTitleSector",
+        "content": {
+            "sectorName": "imgTitleSector",
+            "componentList": [
+                {
+                    "component_type": 3,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {
+                        "text": "通栏广告",
+                        "width": 1200,
+                        "height": 60
+                    }
+                }
+            ]
+        },
+        "dataSort": 2,
+        "moved": false
+    },
+    {
+        "i": 1738974910381,
+        "x": 0,
+        "y": 74,
+        "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 3,
+        "moved": false
+    },
+    {
+        "i": 1738974918446,
+        "x": 0,
+        "y": 123,
+        "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 4,
+        "moved": false
+    },
+    {
+        "i": 1738974923781,
+        "x": 0,
+        "y": 156,
+        "w": 12,
+        "h": 8,
+        "type": "imgTitleSector",
+        "content": {
+            "sectorName": "imgTitleSector",
+            "componentList": [
+                {
+                    "component_type": 3,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {
+                        "text": "通栏广告",
+                        "width": 1200,
+                        "height": 60
+                    }
+                }
+            ]
+        },
+        "dataSort": 5,
+        "moved": false
+    },
+    {
+        "i": 1738974933093,
+        "x": 0,
+        "y": 164,
+        "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 6,
+        "moved": false
+    },
+    {
+        "i": 1738974934365,
+        "x": 0,
+        "y": 196,
+        "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": {}
+                }
+            ]
+        },
+        "dataSort": 7,
+        "moved": false
+    }
+]
+
+export default json;

src/views/template/templateCreat.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="mainBox">
+  <div class="mainBox" v-loading="this.$store.state.template.loading==true" element-loading-text="请稍等">
     <!-- 顶部菜单 start ---------------------------------------->
     <div class="topMenuBox">
       <div>
-        <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">随机生成</el-button>
+        <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">
+          <span v-if="this.$store.state.template.pageStatus == 1">随机生成首页</span>
+          <span v-if="this.$store.state.template.pageStatus == 3">随机生成列表页</span>
+          <span v-if="this.$store.state.template.pageStatus == 4">随机生成详情页</span>
+        </el-button>
       </div>
       <div class="topMenuRightBox">
         <img src="@/assets/template/preview.png" class="previewImg" @click="setPreviewStatus" v-if="this.$store.state.template.previewStatus==false"/>