增加json构造检测

增加json构造检测

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

@@ -121,7 +121,6 @@ export default {
                         "component_style": 1,//该组件使用哪个展示样式
                         "sort": 1,//排序位置
                         "componentData": {
-                            "category_id": "",
                             "level": 1,
                             "imgSize": 0,
                             "textSize": 4,
@@ -159,7 +158,6 @@ export default {
                         "component_style": 1,//该组件使用哪个展示样式
                         "sort": 1,//排序位置
                         "componentData": {
-                            "category_id": "",
                             "level": 2,
                             "imgSize": 5,
                             "textSize": 0,
@@ -189,7 +187,6 @@ export default {
                         "component_style": 1,//该组件使用哪个展示样式
                         "sort": 2,//排序位置
                         "componentData": {
-                            "category_id": "",
                             "level": 6,
                             "imgSize": 0,
                             "textSize": 10,

src/store/modules/template.js

@@ -6,7 +6,7 @@ import {
     getWebsiteTemplateclassintel, addWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll
 } from '@/api/template'
 
-import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
+import { Message,MessageBox } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
 import Vue from 'vue';  //导入Vue 因为我们要进行深层次的json修改，深拷贝的数据无法令视图更新
 //所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set
@@ -23,6 +23,13 @@ const state = {
     adKey: "",//当前编辑网站的缩写
     editWebsiteClass: "",//当前编辑网站的风格
     stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
+    pageDataStatus:{//页面数据完整度
+        index:{
+            sector:0,//当前板块数量，为0表示一个都没有，最少需要1个模块才能保存
+            cid:0,//缺少的导航池id 为0表示没有缺少
+            ad:0//缺少的广告名称，为0表示没有缺少
+        }
+    },
     //0.全局配置 end------------------------------------------------------------>
 
     //1.画布数据 start------------------------------------------------------------>
@@ -122,6 +129,15 @@ const state = {
         },
         //4.广告位
         ad: {
+            top:{
+                "width": 830,
+                "height": 110,
+                "name": "",
+                "website_id": "",
+                "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",
+                "typeid": 2,
+                "ad_tag": ""
+            },
             index: [],
             class: [],
             list: [],
@@ -274,15 +290,13 @@ const mutations = {
     },
     //清空广告位
     clearAd(state) {
-        state.webSiteData.ad = {
-            index: [],
-            class: [],
-            list: [],
-            article: [],
-            search: [],
-            aloneList: [],
-            aloneArticle: []
-        }
+        state.webSiteData.ad.index = [];
+        state.webSiteData.ad.class = [];
+        state.webSiteData.ad.list = [];
+        state.webSiteData.ad.article = [];
+        state.webSiteData.ad.search = [];
+        state.webSiteData.ad.aloneList = [];
+        state.webSiteData.ad.aloneArticle = [];
     },
     //0.全局配置 start------------------------------------------------------------>
     //1.配置模块 start------------------------------------------------------------>
@@ -290,169 +304,184 @@ const mutations = {
     setGridlayoutObj(state, data) {
         state.gridlayoutObj = data;
     },
-    //添加板块
+    //添加板块 - 在此处进行是否可以添加的判断
     addModule(state, data) {
         //pageStatus==1 首页 index
         if (state.pageStatus == 1) {
-            //开始复制 start------------------------------------------------------------>
-            //判断当前一共有多少个模块最多能添加10个
             if (state.pageData.index.length >= 10) {
-                Message.error('最多只能添加10个模块！');
+                Message.error('最多只能添加10个通栏！');
                 return;
             } else {
                 console.log(data.jsonData)
-                //判断是拖拽的还是点击添加进来的 click=点击
-                if (data.source == "click") {
-                    console.log("通过点击添加一个板块");
-                    //通过时间戳生成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;
-                    //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    state.pageData.index.push({
-                        //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,
-                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                        content: data.jsonData,
-                        dataSort: dataSort,
-                    });
-                    console.log("当前添加模块的dataSort为：" + dataSort);
-                    //当前的页面构建数据
-                    console.log(state.pageData.index);
-                }
+                //判断当前板块是否含有广告位
+                // if(data.jsonData.ad){
+                //     MessageBox.confirm('您正在添加含有广告位的通栏，此通栏添加后不可删除，但是可以通过：“广告管理 -> 广告位管理” 进行编辑，确定吗？', '注意', {
+                //         confirmButtonText: '确定',
+                //         cancelButtonText: '取消',
+                //     }).then(() => {
+                //         this.commit('template/pushModule', data);
+                //     }).catch(() => {
+                //         Message.success('已取消添加通栏！');
+                //     });
+                // }else{
+                //     this.commit('template/pushModule', data);
+                // }
+                this.commit('template/pushModule', data);
+            }
+        }
+        //pageStatus==2 分类页 class
+        if (state.pageStatus == 2) { }
+        //pageStatus==3 列表页 list
+        if (state.pageStatus == 3) { }
+        //pageStatus==4 详情页 article
+        if (state.pageStatus == 4) { }
+        //pageStatus==5 搜索页 search
+        if (state.pageStatus == 5) { }
+        //pageStatus==6 自定义列表页 aloneList
+        if (state.pageStatus == 6) { }
+        //pageStatus==7 自定义详情页 aloneArticle
+        if (state.pageStatus == 7) { }
+    },
+    //该数据可以添加到画布
+    pushModule(state,data){
+        if (state.pageStatus == 1) {
+            console.log(data.jsonData)
+            //判断是拖拽的还是点击添加进来的 click=点击
+            if (data.source == "click") {
+                console.log("通过点击添加一个板块");
+                //通过时间戳生成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;
+                //判断添加的是否为广告模块 如果是 添加一个ad_id
+                state.pageData.index.push({
+                    //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,
+                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                    content: data.jsonData,
+                    dataSort: dataSort,
+                });
+                console.log("当前添加模块的dataSort为：" + dataSort);
+                //当前的页面构建数据
+                console.log(state.pageData.index);
+            }
 
-                //drag=拖拽
-                if (data.source == "drag") {
-                    //拖拽添加
-                    console.log("通过拖拽添加一个板块");
-                    //通过时间戳生成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;
-                    //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    state.pageData.index.push({
-                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                        i: id,
-                        x: 0,
-                        y: data.y,
-                        w: 12,
-                        h: data.h,
-                        type: data.type,
-                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                        content: data.jsonData,
-                        dataSort: dataSort,
-                    });
-                    console.log("当前添加模块的dataSort为：" + dataSort);
-                    //当前的页面构建数据
-                    console.log(state.pageData.index);
-                    //需要调查一下这里最后的1，1
-                    state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
-                    try {
-                        state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "block";
-                    } catch { 
+            //drag=拖拽
+            if (data.source == "drag") {
+                //拖拽添加
+                console.log("通过拖拽添加一个板块");
+                //通过时间戳生成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;
+                //判断添加的是否为广告模块 如果是 添加一个ad_id
+                state.pageData.index.push({
+                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                    i: id,
+                    x: 0,
+                    y: data.y,
+                    w: 12,
+                    h: data.h,
+                    type: data.type,
+                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                    content: data.jsonData,
+                    dataSort: dataSort,
+                });
+                console.log("当前添加模块的dataSort为：" + dataSort);
+                //当前的页面构建数据
+                console.log(state.pageData.index);
+                //需要调查一下这里最后的1，1
+                state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
+                try {
+                    state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "block";
+                } catch { 
 
-                    }
                 }
             }
-            //开始复制 end------------------------------------------------------------>
         }
         //pageStatus==2 分类页 class
         if (state.pageStatus == 2) { }
         //pageStatus==3 列表页 list
         if (state.pageStatus == 3) {
-            //开始复制 start------------------------------------------------------------>
-            //判断当前一共有多少个模块最多能添加10个
-            if (state.pageData.list.length >= 10) {
-                Message.error('最多只能添加10个模块！');
-                return;
-            } else {
-                //判断是拖拽的还是点击添加进来的 click=点击
-                if (data.source == "click") {
-                    console.log("通过点击添加一个板块");
-                    //通过时间戳生成id
-                    const currentTimestamp = Date.now();
-                    let id = currentTimestamp;
-                    //data.type 组件名称 data.h 模块高度 
-                    //计算当前布局的最大 y 值
-                    const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
-                    console.log(data);
-                    //设置数据在构建json中的位置
-                    let dataSort = state.pageData.list.length;
-                    state.pageData.list.push({
-                        //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,
-                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                        content: data.jsonData,
-                        dataSort: dataSort,
-                    });
-                }
+            //判断是拖拽的还是点击添加进来的 click=点击
+            if (data.source == "click") {
+                console.log("通过点击添加一个板块");
+                //通过时间戳生成id
+                const currentTimestamp = Date.now();
+                let id = currentTimestamp;
+                //data.type 组件名称 data.h 模块高度 
+                //计算当前布局的最大 y 值
+                const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
+                console.log(data);
+                //设置数据在构建json中的位置
+                let dataSort = state.pageData.list.length;
+                state.pageData.list.push({
+                    //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,
+                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                    content: data.jsonData,
+                    dataSort: dataSort,
+                });
+            }
 
-                //drag=拖拽
-                if (data.source == "drag") {
-                    //拖拽添加
-                    console.log("通过拖拽添加一个板块");
-                    //通过时间戳生成id
-                    const currentTimestamp = Date.now();
-                    let id = currentTimestamp;
-                    //data.type 组件名称 data.h 模块高度 
-                    //计算当前布局的最大 y 值
-                    const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
-                    console.log(data);
-                    //设置数据在构建json中的位置
-                    let dataSort = state.pageData.list.length;
-                    state.pageData.list.push({
-                        //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,
-                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                        content: data.jsonData,
-                        dataSort: dataSort,
-                    });
-                    console.log("当前添加模块的dataSort为：" + dataSort);
-                    //当前的页面构建数据
-                    console.log(state.pageData.list);
-                    //需要调查一下这里最后的1，1
-                    state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
-                    try {
-                        state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display = "block";
-                    } catch { }
-                }
+            //drag=拖拽
+            if (data.source == "drag") {
+                //拖拽添加
+                console.log("通过拖拽添加一个板块");
+                //通过时间戳生成id
+                const currentTimestamp = Date.now();
+                let id = currentTimestamp;
+                //data.type 组件名称 data.h 模块高度 
+                //计算当前布局的最大 y 值
+                const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
+                console.log(data);
+                //设置数据在构建json中的位置
+                let dataSort = state.pageData.list.length;
+                state.pageData.list.push({
+                    //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,
+                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                    content: data.jsonData,
+                    dataSort: dataSort,
+                });
+                console.log("当前添加模块的dataSort为：" + dataSort);
+                //当前的页面构建数据
+                console.log(state.pageData.list);
+                //需要调查一下这里最后的1，1
+                state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
+                try {
+                    state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display = "block";
+                } catch { }
             }
-            //开始复制 end------------------------------------------------------------>
         }
         //pageStatus==4 详情页 article
         if (state.pageStatus == 4) {
-            //开始复制 start------------------------------------------------------------>
-            //判断当前一共有多少个模块最多能添加10个
-            if (state.pageData.article.length >= 10) {
-                Message.error('最多只能添加10个模块！');
-                return;
-            } else {
-                //判断是拖拽的还是点击添加进来的 click=点击
+            //判断是拖拽的还是点击添加进来的 click=点击
                 if (data.source == "click") {
                     console.log("通过点击添加一个板块");
                     //通过时间戳生成id
@@ -512,8 +541,6 @@ const mutations = {
                         state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "block";
                     } catch { }
                 }
-            }
-            //开始复制 end------------------------------------------------------------>
         }
         //pageStatus==5 搜索页 search
         if (state.pageStatus == 5) { }
@@ -724,6 +751,10 @@ const mutations = {
         //pageStatus==7 自定义详情页
         if (state.pageStatus == 7) { }
     },
+    //保存全局广告的数据
+    saveAdData(state, data) {
+        state.webSiteData.ad.top.name = data.data.name;
+    },
     //保存组件设置的数据
     saveComponentData(state, data) {
         //传入的板块id
@@ -1090,7 +1121,7 @@ const mutations = {
             }
             //如果在画布内，开始创建元素
             if (mouseInGrid === true) {
-                alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+                //alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
                 state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
                 state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
 
@@ -1137,7 +1168,7 @@ const mutations = {
             }
             //如果在画布内，开始创建元素
             if (mouseInGrid === true) {
-                alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+                //alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
                 state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
                 state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop');
 
@@ -1166,7 +1197,7 @@ const mutations = {
             }
             //如果在画布内，开始创建元素
             if (mouseInGrid === true) {
-                alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+                //alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
                 state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
                 state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
 
@@ -1228,17 +1259,20 @@ const mutations = {
         let clonedData = JSON.parse(JSON.stringify(data));
         // 按照 clonedData.data.y 的大小排序
         clonedData.data.sort((a, b) => a.y - b.y);
+        //获取当前页面名称
+        let getPageName = () =>{
+            if(state.pageStatus==1){return "index";}
+            if(state.pageStatus==2){return "category";}
+            if(state.pageStatus==3){return "list";}
+            if(state.pageStatus==4){return "detail";}
+            if(state.pageStatus==5){return "search";}
+            if(state.pageStatus==6){return "page";}
+            if(state.pageStatus==7){return "page";}
+        }
         // 取出每个通栏中的广告，并保存到state.webSiteData.ad中
         for (let index in clonedData.data) {
             if(clonedData.data[index].content.ad){
-                let pageName = "";
-                if(state.pageStatus==1){pageName = "index";}
-                if(state.pageStatus==2){pageName = "category";}
-                if(state.pageStatus==3){pageName = "list";}
-                if(state.pageStatus==4){pageName = "detail";}
-                if(state.pageStatus==5){pageName = "search";}
-                if(state.pageStatus==6){pageName = "page";}
-                if(state.pageStatus==7){pageName = "page";}
+                let pageName = getPageName();
                 let ad_index = Number(index)+1;
                 let ad_tag = `${state.adKey}_${pageName}_${ad_index}`;
                 clonedData.data[index].content.ad.website_id = state.editWebsiteId;
@@ -1246,6 +1280,9 @@ const mutations = {
                 state.webSiteData.ad[data.type].push(clonedData.data[index].content.ad);
             }
         }
+        //设置全局的广告位名称
+        state.webSiteData.ad.top.website_id = state.editWebsiteId;
+        state.webSiteData.ad.top.ad_tag = `${state.adKey}_top`
 
         let websiteData = [];
         // 获取板块的 sort
@@ -1272,22 +1309,54 @@ const mutations = {
     },
     //保存模板
     saveTemplate(state) {
-        //临时展示保存的数据 后期移除
-        state.editWebsiteTemplateJsonWindow = true;
-        //调用mutations中的方法无需使用$store
-        //每次格式化之前先清理广告位数据
-        this.commit('template/clearAd');
-        //格式化index的信息
-        this.commit('template/formatTemplateInfo', { data: state.pageData.index, type: "index" });
-        //格式化list的信息
-        this.commit('template/formatTemplateInfo', { data: state.pageData.list, type: "list" });
-        //格式化article的信息
-        this.commit('template/formatTemplateInfo', { data: state.pageData.article, type: "article" });
-        // console.log(state.webSiteData);
-        // console.log(state.editWebsiteId)
-        //给与网站id和模板风格id
+        //第一步：
+        //保存网站id和模板风格id
         state.webSiteData.base.websiteId = state.editWebsiteId;
         state.webSiteData.style.styleId = state.editWebsiteClass;
+        //第二步：
+        //格式化数据
+        //2.1 清理广告位数据
+        this.commit('template/clearAd');
+        //2.2 格式化index页面数据
+        this.commit('template/formatTemplateInfo', { data: state.pageData.index, type: "index" });
+        //2.3 格式化list的信息
+        //this.commit('template/formatTemplateInfo', { data: state.pageData.list, type: "list" });
+        //3.4 格式化article的信息
+        //this.commit('template/formatTemplateInfo', { data: state.pageData.article, type: "article" });
+        //展示构造json 后期移除
+        state.editWebsiteTemplateJsonWindow = true;
+
+        //第三步：
+        //检测模板数据完整度，如果不完整阻止用户保存
+        this.commit('template/pageCheck', {data: state.pageData});
+    },
+    //检测模板完整度
+    pageCheck(state, data) {
+        //获得首页板块数量
+        state.pageDataStatus.index.sector = data.data.index.length;
+        //获得首页没有设置导航池的板块数量
+        let noCid = 0;
+        for(let index in data.data.index){
+            for(let i in data.data.index[index].content.componentList){
+                //console.log(data.data.index[index].content.componentList[i].componentData.category_id)
+                if(data.data.index[index].content.componentList[i].componentData.category_id!=undefined){
+                    noCid++;
+                }
+            }
+        }
+        state.pageDataStatus.index.cid = noCid;
+        //获得首页没有设置广告名称的组件数量
+        let noAd = 0;
+        for(let index in data.data.index){
+            //console.log(data.data.index[index].content.ad)
+            if(data.data.index[index].content.ad!=undefined){
+                if(data.data.index[index].content.ad.name==""){
+                    noAd++;
+                }
+            }
+        }   
+        //console.log(noAd) 
+        state.pageDataStatus.index.ad = noAd;
     },
     //随机生成模板
     randomTemplate(state) {

src/views/template/public/checkWindow.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="editWindowBox">
+        <div class="checkWindowBoxContent">
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBTitle">首页</div>
+                <div class="cWBStatus">未通过检测</div>
+                <div>
+                    <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div>
+                    <div>缺少导航池：{{this.$store.state.template.pageDataStatus.index.cid}}</div>
+                    <div>缺少广告位：{{this.$store.state.template.pageDataStatus.index.ad}}</div>
+                </div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBTitle">频道页</div>
+                <div class="cWBStatus">通过检测</div>
+                <div>
+                    
+                </div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBTitle">列表页</div>
+                <div class="cWBStatus">通过检测</div>
+                <div></div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBTitle">详情页</div>
+                <div class="cWBStatus">通过检测</div>
+                <div></div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBTitle">搜索页</div>
+                <div class="cWBStatus">通过检测</div>
+                <div></div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBTitle">底部列表页</div>
+                <div class="cWBStatus">通过检测</div>
+                <div></div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBTitle">底部详情页</div>
+                <div class="cWBStatus">通过检测</div>
+                <div></div>
+            </div>
+        </div>
+        <!-- <div class="editWindowBoxContent">
+            <div class="editWebsiteTemplateJsonBox">
+                <pre>{{this.$store.state.template.webSiteData}}</pre>
+            </div>
+        </div> -->
+        <div class="editWindowBoxFooter">
+            <el-button type="primary" @click="submitPageJson">保存模板</el-button>
+            <el-button type="info" @click="closeEditWindow">返回</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';  // 导入 Vue
+//监听vuex中的值
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        // 映射 Vuex 的 state 到计算属性
+        // 监听导航池变化用于回显
+        getPid() {
+            return this.$store.state.template.componentViewData.pid_arr;
+        },
+        getadName(){
+            return this.$store.state.template.componentViewData.adName;
+        },
+        gettitleName(){
+            return this.$store.state.template.componentViewData.titleName;
+        }
+    },
+    watch: {
+        getPid(newVal, oldVal) {
+            console.log("导航池改变了！")
+            console.log(newVal, oldVal)
+            // 回显导航池 判断一下是单导航还是多导航
+            if(this.$store.state.template.editComponentType==1){
+                //base0.0.1 必须先赋值再创建nodes 否则可能无法回显
+                this.form.type1data.pid_arr = newVal;
+            }
+            if(this.$store.state.template.editComponentType==2){ 
+                this.form.type3data.pid_arr = newVal;
+            }
+        },
+        getadName(newVal, oldVal) {
+            console.log("广告文字改变了！")
+            console.log(newVal, oldVal)
+            this.form.type3data.adName = newVal;
+        },
+    },
+    methods: {
+        closeEditWindow(){
+            this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
+        },
+        submitPageJson(){
+            console.log(123123)
+           // this.$store.commit('template/closeEditWindowStatus');
+        }
+    },
+    mounted() { 
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .editWindowBox {
+        .editWindowBoxContent {
+            width: 100%;
+            padding: 20px;
+        }
+        .editWindowBoxFooter {
+            text-align: right;
+        }
+    }
+
+    //提交数据展示窗口
+    .editWebsiteTemplateJsonBox {
+        height: 300px;
+        overflow-y: auto;
+    }
+
+    .checkWindowBoxContent {
+        display: flex;
+        align-items: flex-start;
+        height: 120px;
+        .checkWindowBoxContentItem {
+            width:150px;
+            height: 100px;
+            border:1px solid #dfe4ed;
+            margin-right: 10px;
+            .cWBTitle {
+                text-align: center;
+                font-size: 16px;
+                padding: 10px 0;
+            }
+            .cWBStatus {
+                text-align: center;
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+    //表单微调 start------------------------------------------------------------>
+    ::v-deep .editWindowBoxContent .el-cascader{
+        width: 100% !important;
+    }
+    ::v-deep .editWindowBoxContent .el-select--medium {
+        width: 100% !important;
+    }
+    //表单微调 end------------------------------------------------------------>
+</style>

src/views/template/public/editWindow.vue

@@ -46,10 +46,31 @@
                     </el-form-item>
                 </el-form>
             </div>
+            <!--3.全局广告-->
+            <div v-if="this.$store.state.template.editComponentType == 3">
+                <el-form :model="form.type2data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+                    <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input value="广告" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.webSiteData.ad.top.width" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位高度：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.webSiteData.ad.top.height" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位类型：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input value="图片" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
+                        <el-input v-model="form.type2data.adName" placeholder="请输入广告位名称"/>
+                    </el-form-item>
+                </el-form>
+            </div>
         </div>
         <div class="editWindowBoxFooter">
             <el-button type="info" @click="closeEditWindow">取消</el-button>
-            <el-button type="primary" @click="submitData">确定</el-button>
+            <el-button type="primary" @click="submitData" v-if="this.$store.state.template.editComponentType != 3">确定</el-button>
+            <el-button type="primary" @click="submitAdData" v-else>确定</el-button>
         </div>
     </div>
 </template>
@@ -85,7 +106,11 @@ export default {
                     pid_arr:"",
                     name:"",
                 },
-                //广告
+                //全局广告
+                type2data:{
+                    adName:""
+                },
+                //页面内广告
                 type3data:{
                     adName:""
                 },
@@ -190,6 +215,18 @@ export default {
                 }
             })
         },
+        submitAdData(){
+            //验证广告位名称
+            let data = {}
+            data.data = this.form.type2data;
+            data.data.name = this.form.type2data.adName;
+            //第一步：通过固定方法提交数据
+            this.$store.commit('template/saveAdData',data);
+            //第二步：关闭编辑窗口
+            this.$store.commit('template/closeEditWindowStatus');
+            //第三步：初始化下拉列表
+            this.form.type1data.pid_arr = "";
+        }
     },
     mounted() { 
         //获得站点下的导航池

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

@@ -13,7 +13,7 @@
             <div class="headLogoBox">
                 <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
                 <div :class="['headAdTopBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
-                    <editBtn  />
+                    <editBtn :type="3" />
                     <img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748332370111555.png">
                 </div>
             </div>

src/views/template/templateCreat.vue

@@ -46,15 +46,16 @@
     <el-dialog title="更换组件样式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
       <componentWindow />
     </el-dialog>
-    <el-dialog title="当前提交的webSiteTemplateJson" :visible="this.$store.state.template.editWebsiteTemplateJsonWindow" :close-on-click-modal="false" @close="closeEditWebsiteTemplateJsonWindow">
-      <div class="editWebsiteTemplateJsonBox">
+    <el-dialog title="模板检查" :visible="this.$store.state.template.editWebsiteTemplateJsonWindow" :close-on-click-modal="false" @close="closeEditWebsiteTemplateJsonWindow">
+      <!-- <div class="editWebsiteTemplateJsonBox">
         <pre>{{this.$store.state.template.webSiteData}}</pre>
       </div>
       <div slot="footer" class="dialog-footer">
         <div class="footerBtnbox">
           <el-button type="primary" @click="gotoList">保存并退出</el-button>
         </div>
-      </div>
+      </div> -->
+      <checkWindow />
     </el-dialog>
     <!-- 弹出框 start ---------------------------------------->
   </div>
@@ -65,6 +66,7 @@
 import '@/styles/global.less';
 import editWindow from './public/editWindow.vue';
 import componentWindow from './public/componentWindow.vue';
+import checkWindow from './public/checkWindow.vue';
 //页面公用组件 end------------------------------------------------------------>
 
 //页面组件 start------------------------------------------------------------>
@@ -80,7 +82,8 @@ export default {
     pageList,
     pageArticle,
     editWindow,
-    componentWindow
+    componentWindow,
+    checkWindow
   },
   data() {
     return {
@@ -116,21 +119,6 @@ export default {
         }); 
       })
     },
-    //下一步
-    gotoList(){
-      this.$store.dispatch('template/addWebsiteTemplate',{webSiteData:this.$store.state.template.webSiteData}).then(res=>{
-        if(res.code==200){
-          
-        }else{
-          this.$message.error(res.message);
-        }
-      })
-
-      // this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
-      // this.$router.push({
-      //   path: '/templateList'
-      // });
-    },
     //保存模板
     saveTemplate(){
       this.$store.commit('template/saveTemplate');
@@ -240,11 +228,7 @@ export default {
     }
   }
 
-  //提交数据展示窗口
-  .editWebsiteTemplateJsonBox {
-    height: 300px;
-    overflow-y: auto;
-  }
+
 
   //菜单 start------------------------------------------------------------> 
   // .layerTabsBox {