更新检测规则

更新检测规则

src/layout/components/template/pages/list/sector.vue

@@ -1,222 +1,120 @@
 <template>
-  <div class="sectorBox">
-    <div class="sectorItemBox" @click="addModule('adSector',8,adSector)" @drag="drag('adSector',8,adSector)" @dragend="dragend('adSector',8,adSector)" >
-      <div class="sectorItem">
-        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
-      </div>
-      <div class="sectorItemTitle">通栏广告</div>
+    <div class="sectorBox">
+        <div class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)" 
+            @drag="drag('adSector', 12, adSector)"
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
     </div>
-    <div class="sectorItemBox" @click="addModule('mainListSector',92,mainListSector)" @drag="drag('mainListSector',33,mainListSector)" @dragend="dragend('mainListSector',33,mainListSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/listSector.png"/>
-      </div>
-      <div class="sectorItemTitle">主文章列表</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/newsSector.png"/>
-      </div>
-      <div class="sectorItemTitle">次级文章列表</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/linkSector.png"/>
-      </div>
-      <div class="sectorItemTitle">友情链接</div>
-    </div>
-  </div>
 </template>
 
 <script>
 
 export default {
-  props: {
-    type: {
-     
-    },
-  },
-  data() {
-    return {
-      //添加通栏广告模块 start---------------------------------------->
-      adSector:{
-        sectorName:"adSector",//板块名称
-        componentList:[
-          {
-            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{
-              ad_id:"",//广告位id
-              text:"通栏广告", //广告位名称
-              width:1200, //广告位宽度
-              height:60, //广告位高度
-            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
-          }
-        ]
-      },
-      //添加通栏广告模块 start---------------------------------------->
+    props: {
+        type: {
 
-      //文章列表板块 start---------------------------------------->
-      listSector:{
-        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"
-              ]
+        },
+    },
+    data() {
+        return {
+            //添加通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //添加通栏广告模块 start---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
             }
-          },
-        ]
-      },
-      //文章列表板块 end---------------------------------------->
-
-      //友情链接板块 start---------------------------------------->
-      friendShipLinkSector:{
-        sectorName:"friendShipLinkSector",//友情链接无需提交数据
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
             }
-          },
-          {
-            component_type:4,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{}
-          }
-        ]
-      },
-      //友情链接板块 end---------------------------------------->
-
-      //主文章列表 start---------------------------------------->
-      mainListSector:{
-        sectorName:"mainListSector",//主文章列表
-        componentList:[
-          {
-            component_type:9, //页面必备组件类型
-            component_style:1,
-            component_name:"listMain",
-            sort:1,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:1,
-              listType:[
-                "title",
-                "created_time",//创建时间
-                //"author",//作者
-                //"imgUrl",//缩略图片
-                //"introduce",//描述
-              ]
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
             }
-          },
-        ]
-      }
-      //主文章列表 end---------------------------------------->
-
-    }
-  },
-  methods: {
-    //添加模块
-    addModule(type,h,jsonData){
-      let data = {
-        source:"click",//添加方式为点击
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      console.log(data);
-      this.$store.commit('template/addModule',data);
-    },
-    //拖拽开始
-    drag(type,h,jsonData){
-      let data = {
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      this.$store.commit('template/drag',data);
-    },
-    //拖拽结束
-    dragend(type,h,jsonData){
-      let data = {
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      this.$store.commit('template/dragend',data);
+            this.$store.commit('template/dragend', data);
+        }
     }
-  }
 }
 </script>
 
 <style scoped lang="less">
-  .sectorBox {
+.sectorBox {
     height: 100%;
+
     .sectorItemBox {
-      box-sizing: border-box;
-      padding: 0 20px 40px 20px;
-      cursor: pointer;
-      .sectorItem {
-        border: 1px solid #333644;
-        padding: 10px;
-        border-radius: 8px;
-        &:hover {
-          background: #333644;
-          transform: scale(1.1);
-          transition: all 0.2s ease-in-out;
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+            }
         }
-        img {
-          display: block;
-          width: 100%;
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
         }
-      }
-      .sectorItemTitle {
-        color: #fff;
-        font-size: 14px;
-        padding: 10px 0 0 0;
-        text-align: center;
-      }
     }
-  }
+}
 </style>

src/store/modules/template.js

@@ -353,7 +353,14 @@ const mutations = {
             }
         }
         //pageStatus==3 列表页 list
-        if (state.pageStatus == 3) { }
+        if (state.pageStatus == 3) { 
+            if (state.pageData.index.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+        }
         //pageStatus==4 详情页 article
         if (state.pageStatus == 4) { }
         //pageStatus==5 搜索页 search
@@ -817,6 +824,27 @@ const mutations = {
     setWebsiteTemplate(state, data) {
         if(data==null){
             console.log("第一次添加模板，无需回显！")
+            //清理state.webSiteData
+            Vue.set(state.webSiteData, 'template', {
+                index: [],
+                class: [],
+                list: [],
+                article: [],
+                search: [],
+                aloneList: [],
+                aloneArticle: []
+            });
+            Vue.set(state.webSiteData.ad, 'top', {
+                "width": 830,//宽度
+                "height": 110,//高度
+                "name": "",//广告名称
+                "price": 0,//价格
+                "introduce":"",//介绍
+                "website_id": "",//网站id
+                "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                "typeid": 2,//广告类型 - 2 图片
+                "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+            });
         }else{
             console.log("编辑模板，开始回显模板内容！")
             console.log(data)

src/views/template/page/pageClass.vue

@@ -343,4 +343,5 @@ export default {
     border-radius: 50% !important;
 }
 
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/page/pageIndex.vue

@@ -377,4 +377,5 @@ export default {
     border-radius: 50% !important;
 }
 
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/page/pageList.vue

@@ -4,16 +4,10 @@
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
             <headSector />
         </div>
-        <!-- 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.list.length == 0">
-            <img src="@/assets/template/creat.png">
-            <div>请点击一个左侧板块，开始您的网站创建</div>
-        </div> -->
         <!--使用gridKey来强制更新视图-->
         <div 
             id="content" 
@@ -44,33 +38,18 @@
                 >
                     <div class="grid-item-content">
                         <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
-                            <!-- 移动板块-->
-                            <!-- <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, item.dataSort)"><i class="el-icon-close"></i></span>
                         </div>
-                        <!-- 4.广告模块 -->
+                        <!-- 1.广告通栏 -->
                         <div v-if="item.type == 'adSector'" class="moduleBox">
                             <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        <!-- 8.双联文章列表模块 -->
-                        <div v-if="item.type == 'listSector'" class="moduleBox">
-                            <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
-                        </div>
-                        <!-- 10.友情链接模块 -->
-                        <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-                            <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
-                        </div>
-                        <!-- 11.主文章列表模块 -->
-                        <div v-if="item.type == 'mainListSector'" class="moduleBox">
-                            <mainListSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
-                        </div>
                     </div>
                 </grid-item>
             </grid-layout>
         </div>
+        <!-- 全局组件：页尾 -->
         <div class="FixedModuleBoxBottom">
-            <!-- 3.页尾模块 -->
             <footerSector />
         </div>
     </div>
@@ -81,45 +60,28 @@
 //引入公用样式
 import '@/styles/global.less';
 import { GridLayout, GridItem } from "vue-grid-layout";
-//页面公用组件 end------------------------------------------------------------>
+//1.页面公用组件 end------------------------------------------------------------>
 
-//自助建站组件 start------------------------------------------------------------>
+//引入自助建站组件 start------------------------------------------------------------>
+//全局组件
 //顶部
 import headSector from '../style/sector/head/1.vue';
 //一级菜单导肮
 import menuSector from '../style/sector/menu/1.vue';
 //底部
 import footerSector from '../style/sector/foot/1.vue';
-//通栏组件
+//通栏组件 开始：
 //通栏广告
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
-
-
-
-// import manyPictureSector from '../style/sector/6.vue';//多图
-// import commentSector from '../style/sector/7.vue';//评论
-// import listSector from '../style/sector/8.vue';//文章列表
-// import onlyImgSector from '../style/sector/9.vue';//纯图片组合
-// import friendShipLinkSector from '../style/sector/10.vue';//友情链接
-// import mainListSector from '../style/sector/11.vue';//主文章列表
-//自助建站组件 end------------------------------------------------------------>
-
+//2.引入自助建站组件 end------------------------------------------------------------>
 
 export default {
     components: {
-        GridLayout,
-        GridItem,
-        //板块组件 style1
-        headSector,
-        menuSector,
-        adSector,
-        
-        // manyPictureSector,
-        // commentSector,
-        // listSector,
-        // mainListSector,
-        // onlyImgSector,
-        // friendShipLinkSector,
+        GridLayout,//画布
+        GridItem,//画布组件
+        headSector,//全局页头
+        menuSector,//全局导航
+        adSector,//通栏广告
         footerSector
     },
     data() {
@@ -227,7 +189,7 @@ export default {
 //固定的模块
 .FixedModuleBox {
     width: 100%;
-    margin-bottom: 20px;
+    //margin-bottom: 20px;
     //border: 2px dashed #eee;
 }
 
@@ -247,7 +209,7 @@ export default {
 
     padding: 100px;
     //background: #F5F7FB;
-    margin-bottom: 20px;
+    //margin-bottom: 20px;
 }
 
 .FixedMainModuleBoxBorder {
@@ -256,6 +218,7 @@ export default {
 
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
+
 .grid-item-content {
     display: flex;
     align-items: center;
@@ -268,7 +231,7 @@ export default {
     .grid-tools-menu {
         position: absolute;
         top: 0;
-        right: 0;
+        right:10px;
         z-index: 99;
         display: flex;
         align-items: center;
@@ -282,25 +245,9 @@ export default {
             font-size: 30px;
             cursor: pointer;
             color: #999;
-            // display: flex;
-            // align-items: center;
-            // justify-content: center;
-            // cursor: pointer;
-            // margin: 5px;
-            // color: #000;
-            // background: #fff;
-            // border: 1px solid #000;
-            // border-radius: 5px;
-            // width: 24px;
-            // height: 24px;
-            // line-height: 24px;
-            // text-align: center;
-            // font-size: 14px;
-            // transition: all 0.3s;
-            // &:hover {
-            //   color: #fff;
-            //   background: #000;
-            // }
+            border: 2px dashed #999;
+            border-radius: 8px;
+            background-color: #fff1cc;
             transition: all 0.3s;
 
             &:hover {
@@ -331,6 +278,12 @@ export default {
   background-color: #fff;
 }
 
+//占位元素颜色
+::v-deep .vue-grid-placeholder {
+  background: #ccc !important;
+  opacity: 0.3;
+}
+
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
@@ -350,5 +303,5 @@ export default {
 ::v-deep .shadowBox .el-button--mini.is-circle {
     border-radius: 50% !important;
 }
-
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/public/checkWindow.vue

@@ -30,11 +30,11 @@
                     <div class="cWBStatus">已通过</div>
                     <div class="cWBStatusContent">
                         <div class="cWBStatusContentTitle">未选择导航</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                     </div>
                 </div>
             </div>
@@ -66,9 +66,9 @@
                         <div class="cWBStatusContentTitle">未选择导航</div>
                         <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                     </div>
                 </div>
             </div>
@@ -100,9 +100,9 @@
                         <div class="cWBStatusContentTitle">未选择导航</div>
                         <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                     </div>
                 </div>
             </div>
@@ -135,9 +135,9 @@
                         <div class="cWBStatusContentTitle">未选择导航</div>
                         <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                     </div>
                 </div>
             </div>
@@ -170,9 +170,9 @@
                         <div class="cWBStatusContentTitle">未选择导航</div>
                         <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                     </div>
                 </div>
             </div>
@@ -204,9 +204,9 @@
                         <div class="cWBStatusContentTitle">未选择导航</div>
                         <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                     </div>
                 </div>
             </div>
@@ -239,9 +239,9 @@
                         <div class="cWBStatusContentTitle">未选择导航</div>
                         <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已选择</span></div>
                     </div>
                 </div>
             </div>

src/views/template/templateStyle.vue

@@ -235,7 +235,7 @@ export default {
                     if (res.code != 200) {
                         this.$message.error(res.message)
                     } else {
-                        this.$message.success('模板风格保存成功！');
+                        //this.$message.success('模板风格保存成功！');
                         //保存模板风格成功,开始构建网站
                         this.$router.push({
                             path: '/templateCreat',