自助建站广告功能完成

自助建站广告功能完成

src/api/template.js

@@ -128,4 +128,13 @@ export function getAdminWebsiteFootAll(params) {
     })
 }
 
+//1.15 批量添加导航
+export function addTwinAdPlace(data) {
+    return request({
+        url: '/ad/addTwinAdPlace',
+        method: 'post',
+        data
+    })
+}
+
 //自助建站 end ------------------------------------->

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

@@ -104,6 +104,8 @@ export default {
                     "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 图片
@@ -225,6 +227,7 @@ export default {
                         "sort": 1,
                         "componentData": {
                             "category_id":"",
+                            "category_arr":"",
                             "name":"请选择导航..",
                             "level":"",
                             "imgSize": 3,
@@ -256,6 +259,7 @@ export default {
                         "sort": 2,
                         "componentData": {
                             "category_id":"",
+                            "category_arr":"",
                             "name":"请选择导航..",
                             "level":"",
                             "imgSize": 3,
@@ -295,6 +299,7 @@ export default {
                         "sort": 1,
                         "componentData": {
                             "category_id":"",
+                            "category_arr":"",
                             "name":"请选择导航..",
                             "level":"",
                             "imgSize": 2,
@@ -326,6 +331,7 @@ export default {
                         "sort": 2,
                         "componentData": {
                             "category_id":"",
+                            "category_arr":"",
                             "name":"请选择导航..",
                             "level":"",
                             "imgSize": 1,
@@ -365,6 +371,7 @@ export default {
                         "sort": 1,
                         "componentData": {
                             "category_id":"",
+                            "category_arr":"",
                             "name":"请选择导航..",
                             "level":"",
                             "imgSize": 2,
@@ -396,6 +403,7 @@ export default {
                         "sort": 2,
                         "componentData": {
                             "category_id":"",
+                            "category_arr":"",
                             "name":"请选择导航..",
                             "level":"",
                             "imgSize": 1,
@@ -427,6 +435,7 @@ export default {
                         "sort": 3,
                         "componentData": {
                             "category_id":"",
+                            "category_arr":"",
                             "name":"请选择导航..",
                             "level":"",
                             "imgSize": 1,
@@ -466,6 +475,7 @@ export default {
                         "sort": 1,
                         "componentData": {
                             "category_id":"",
+                            "category_arr":"",
                             "name":"请选择导航..",
                             "level":"",
                             "imgSize": 3,
@@ -496,6 +506,8 @@ export default {
                     "width": 450, //宽度
                     "height": 290, //高度
                     "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
                     "website_id": "",//网站id
                     "thumb": "http://img.bjzxtw.org.cn/pre/image/png/20250609/174945725555092.png",//示例图 - 默认值
                     "typeid": 2,//广告类型 - 2 图片

src/store/modules/template.js

@@ -3,7 +3,7 @@ import { getSiteInfo, getSiteCategory, getFooterCategoryList} from '@/api/cms'
 //自助建站的接口 用于添加基本信息
 import {
     getWebsiteintel, addWebsiteTemplateintel, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, getWebsiteTemplateList, addWebsiteTemplateclassintel,
-    getWebsiteTemplateclassintel, addWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll
+    getWebsiteTemplateclassintel, addWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll, addTwinAdPlace
 } from '@/api/template'
 
 import { Message,MessageBox } from 'element-ui'; //注意在这里引入是非常不符合规范的
@@ -27,7 +27,8 @@ const state = {
         index:{
             sector:0,//当前板块数量，为0表示一个都没有，最少需要1个模块才能保存
             cid:0,//缺少的导航池id 为0表示没有缺少
-            ad:0//缺少的广告名称，为0表示没有缺少
+            ad:0,//缺少的广告名称，为0表示没有缺少
+            adPrice:0//缺少的广告价格，为0表示没有缺少
         }
     },
     //0.全局配置 end------------------------------------------------------------>
@@ -130,13 +131,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": ""
+                "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
             },
             index: [],
             class: [],
@@ -157,6 +160,7 @@ const state = {
         pageSizeImg: "",//展示图片新闻条数
         adName: "",//广告名称
         titleName: "",//标题名称
+        windowKey:0,//级联选择器的key
     }
     //5.组件回显数据 start------------------------------------------------------------>
 }
@@ -202,6 +206,10 @@ const mutations = {
         state.editComponentSize = data.size;
         state.editComponentSizeImg = data.sizeImg;
     },
+    //增加级联选择器key
+    addWindowKey(state) {
+        state.componentViewData.windowKey++;
+    },
     //关闭编辑组件弹出框
     closeEditWindowStatus(state) {
         state.editWindowStatus = false;
@@ -236,7 +244,7 @@ const mutations = {
             //判断组件类型 1=新闻 2=广告
             //1=新闻 需要设置导航id
             if (state.editComponentType == 1) {
-                state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+                state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
                 state.componentViewData.pageSize = state.editComponentSize;
                 state.componentViewData.pageSizeImg = state.editComponentSizeImg;
             }
@@ -254,7 +262,7 @@ const mutations = {
             //判断组件类型 1=新闻 2=广告
             //1=新闻 需要设置导航id
             if (state.editComponentType == 1) {
-                state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+                state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
                 state.componentViewData.pageSize = state.editComponentSize;
                 state.componentViewData.pageSizeImg = state.editComponentSizeImg;
             }
@@ -269,7 +277,7 @@ const mutations = {
             //判断组件类型 1=新闻 2=广告
             //1=新闻 需要设置导航id
             if (state.editComponentType == 1) {
-                state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+                state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
                 state.componentViewData.pageSize = state.editComponentSize;
             }
             //2=设置广告名称
@@ -754,6 +762,8 @@ const mutations = {
     //保存全局广告的数据
     saveAdData(state, data) {
         state.webSiteData.ad.top.name = data.data.name;
+        state.webSiteData.ad.top.introduce = data.data.introduce;
+        state.webSiteData.ad.top.price = data.data.price;
     },
     //保存组件设置的数据
     saveComponentData(state, data) {
@@ -778,7 +788,8 @@ const mutations = {
                 // 获取当前模块数据并进行深拷贝
                 let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
                 // 更新 category_id 和 pageSize
-                module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+                module.content.componentList[data.sort].componentData.category_id = data.data.pid_id; // 设置 category_id
+                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
                 module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
                 module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
                 module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
@@ -793,6 +804,8 @@ const mutations = {
                 let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
                 //module.content.componentList[data.sort].componentData.text = data.data.adName;
                 module.content.ad.name = data.data.adName;
+                module.content.ad.introduce = data.data.adName;
+                module.content.ad.price = data.data.price;
                 Vue.set(state.pageData.index, targetModuleIndex, module);
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.index);
@@ -818,7 +831,8 @@ const mutations = {
                 // 获取当前模块数据并进行深拷贝
                 let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
                 // 更新 category_id 和 pageSize
-                module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+                module.content.componentList[data.sort].componentData.category_id = data.data.pid_id; // 设置 category_id
+                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
                 module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
                 module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
                 module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
@@ -833,6 +847,8 @@ const mutations = {
                 let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
                 //module.content.componentList[data.sort].componentData.text = data.data.adName;
                 module.content.ad.name = data.data.adName;
+                module.content.ad.introduce = data.data.adName;
+                module.content.ad.price = data.data.price;
                 Vue.set(state.pageData.list, targetModuleIndex, module);
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.list);
@@ -854,6 +870,7 @@ const mutations = {
                 let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
                 // 更新 category_id 和 pageSize
                 module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
                 module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
                 module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
                 module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
@@ -868,6 +885,8 @@ const mutations = {
                 let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
                 //module.content.componentList[data.sort].componentData.text = data.data.adName;
                 module.content.ad.name = data.data.adName;
+                module.content.ad.introduce = data.data.adName;
+                module.content.ad.price = data.data.price;
                 Vue.set(state.pageData.article, targetModuleIndex, module);
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.article);
@@ -1279,7 +1298,15 @@ const mutations = {
                 clonedData.data[index].content.ad.ad_tag = ad_tag;
                 state.webSiteData.ad[data.type].push(clonedData.data[index].content.ad);
             }
+            // for(let item of clonedData.data[index].content.componentList){
+            //     if(item.componentData.category_id!=undefined){
+            //         console.log("--------------------------------")
+            //         console.log(item);
+            //     }
+            // }
         }
+
+
         //设置全局的广告位名称
         state.webSiteData.ad.top.website_id = state.editWebsiteId;
         state.webSiteData.ad.top.ad_tag = `${state.adKey}_top`
@@ -1340,7 +1367,9 @@ const mutations = {
             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++;
+                    if(data.data.index[index].content.componentList[i].componentData.category_id==""){
+                        noCid++;
+                    }
                 }
             }
         }
@@ -1355,8 +1384,27 @@ const mutations = {
                 }
             }
         }   
+        //全局广告特殊处理
+        if(state.webSiteData.ad.top.name==""){
+            noAd++;
+        }
         //console.log(noAd) 
         state.pageDataStatus.index.ad = noAd;
+
+        //获得首页没有设置广告价格的组件数量
+        let noAdPrice = 0;
+        for(let index in data.data.index){
+            if(data.data.index[index].content.ad!=undefined){
+                if(data.data.index[index].content.ad.price==0){
+                    noAdPrice++;
+                }
+            }
+        }
+        //全局广告特殊处理
+        if(state.webSiteData.ad.top.price==0){
+            noAdPrice++;
+        }
+        state.pageDataStatus.index.adPrice = noAdPrice;
     },
     //随机生成模板
     randomTemplate(state) {
@@ -1401,63 +1449,6 @@ const mutations = {
         // pageStatus == 7 自定义详情页
         if (state.pageStatus == 7) { }
     },
-    //提交数据之前执行完整度检查
-    IntegrityCheck(state) {
-        //先设置为true看能否通过判断
-        state.canSubmit = true;
-        //先判断当前有哪几个板块可用
-        //state.canSubmit == false 不可以提交
-        //state.canSubmit == true 可以提交
-        //首页
-        if (state.showPage.index == true) {
-            if (state.template.index == []) {
-                state.canSubmit = false;
-            }
-        }
-        //分类页
-        if (state.showPage.class == true) {
-            if (state.template.class == []) {
-                state.canSubmit = false;
-            }
-        }
-        //列表页
-        if (state.showPage.list == true) {
-            if (state.template.list == []) {
-                state.canSubmit = false;
-            }
-        }
-        //详情页
-        if (state.showPage.article == true) {
-            if (state.template.article == []) {
-                state.canSubmit = false;
-            }
-        }
-        //搜索页
-        if (state.showPage.search == true) {
-            if (state.template.search == []) {
-                state.canSubmit = false;
-            }
-        }
-        //自定义列表页
-        if (state.showPage.aloneList == true) {
-            if (state.template.aloneList == []) {
-                state.canSubmit = false;
-            }
-        }
-        //自定义详情页
-        if (state.showPage.aloneArticle == true) {
-            if (state.template.aloneArticle == []) {
-                state.canSubmit = false;
-            }
-        }
-
-        //最后判断一下是否可以提交
-        if (state.canSubmit == ture) {
-
-        } else {
-            Message.error('您还有未构建的页面，请检查！');
-        }
-    },
     //1.配置模块 end------------------------------------------------------------>
 
     //2.获取站点信息 start------------------------------------------------------------>
@@ -1692,6 +1683,16 @@ const actions = {
             })
         })
     },
+    //2.13 批量创建广告位
+    addTwinAdPlace({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addTwinAdPlace(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
     //2.构建网站json end------------------------------------------------------------>
 }
 

src/views/template/public/checkWindow.vue

@@ -2,55 +2,162 @@
     <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 class="cWBStatusContentError" v-if="this.$store.state.template.pageDataStatus.index.cid>0 || this.$store.state.template.pageDataStatus.index.ad>0">
+                    <div class="cWBTitle">首页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-close"></span>
+                    </div>
+                    <div class="cWBStatus">未通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.index.cid}}<span>个</span></div>
+                            <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                            <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.index.ad}}<span>个</span></div>
+                            <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                            <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.index.adPrice}}<span>个</span></div>
+                    </div>
+                </div>
+                <div class="cWBStatusContentSucess" v-else>
+                    <div class="cWBTitle">首页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
                 </div>
             </div>
             <div class="checkWindowBoxContentItem">
-                <div class="cWBTitle">频道页</div>
-                <div class="cWBStatus">通过检测</div>
-                <div>
-                    
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">频道页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
                 </div>
             </div>
             <div class="checkWindowBoxContentItem">
-                <div class="cWBTitle">列表页</div>
-                <div class="cWBStatus">通过检测</div>
-                <div></div>
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">列表页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
             </div>
             <div class="checkWindowBoxContentItem">
-                <div class="cWBTitle">详情页</div>
-                <div class="cWBStatus">通过检测</div>
-                <div></div>
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">详情页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
             </div>
             <div class="checkWindowBoxContentItem">
-                <div class="cWBTitle">搜索页</div>
-                <div class="cWBStatus">通过检测</div>
-                <div></div>
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">搜索页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
             </div>
             <div class="checkWindowBoxContentItem">
-                <div class="cWBTitle">底部列表页</div>
-                <div class="cWBStatus">通过检测</div>
-                <div></div>
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">底部列表页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
             </div>
             <div class="checkWindowBoxContentItem">
-                <div class="cWBTitle">底部详情页</div>
-                <div class="cWBStatus">通过检测</div>
-                <div></div>
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">底部详情页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
             </div>
+
         </div>
-        <!-- <div class="editWindowBoxContent">
+        <div class="editWindowBoxContent">
             <div class="editWebsiteTemplateJsonBox">
                 <pre>{{this.$store.state.template.webSiteData}}</pre>
             </div>
-        </div> -->
+        </div>
         <div class="editWindowBoxFooter">
-            <el-button type="primary" @click="submitPageJson">保存模板</el-button>
-            <el-button type="info" @click="closeEditWindow">返回</el-button>
+            <el-button 
+                type="primary" 
+                @click="submitPageJson"
+                :disabled="this.$store.state.template.pageDataStatus.index.cid>0 || this.$store.state.template.pageDataStatus.index.ad>0"
+            >
+                保存模板
+            </el-button>
+            <el-button type="info" @click="closeEditWindow">返回编辑</el-button>
         </div>
     </div>
 </template>
@@ -68,44 +175,35 @@ export default {
         }
     },
     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');
+            let data = {
+                adPlaceList:[]
+            }
+            console.log(this.$store.state.template.webSiteData)
+            //第一步:获得全局的顶部广告
+            data.adPlaceList.push(this.$store.state.template.webSiteData.ad.top);
+            if(this.$store.state.template.webSiteData.ad.index.length>0){
+                for(let item of this.$store.state.template.webSiteData.ad.index){
+                    data.adPlaceList.push(item);
+                }
+            }
+            if(this.$store.state.template.webSiteData.ad.class.length>0){}
+            if(this.$store.state.template.webSiteData.ad.list.length>0){}
+            if(this.$store.state.template.webSiteData.ad.article.length>0){}
+            if(this.$store.state.template.webSiteData.ad.search.length>0){}
+            if(this.$store.state.template.webSiteData.ad.aloneList.length>0){}
+            if(this.$store.state.template.webSiteData.ad.aloneArticle.length>0){}
+
+            console.log(data)
+            this.$store.dispatch('template/addTwinAdPlace',data).then(res=>{
+                console.log(res)
+            });
         }
     },
     mounted() { 
@@ -118,11 +216,14 @@ export default {
     .editWindowBox {
         .editWindowBoxContent {
             width: 100%;
-            padding: 20px;
+            padding: 20px 0;
         }
         .editWindowBoxFooter {
             text-align: right;
         }
+        .editWebsiteTemplateJsonBox {
+            border:1px solid #dfe4ed;
+        }
     }
 
     //提交数据展示窗口
@@ -130,23 +231,87 @@ export default {
         height: 300px;
         overflow-y: auto;
     }
-
     .checkWindowBoxContent {
         display: flex;
         align-items: flex-start;
-        height: 120px;
+        height: 260px;
         .checkWindowBoxContentItem {
-            width:150px;
-            height: 100px;
-            border:1px solid #dfe4ed;
+            width:120px;
+            border:2px dashed #eee;
             margin-right: 10px;
-            .cWBTitle {
-                text-align: center;
-                font-size: 16px;
-                padding: 10px 0;
+            box-sizing: border-box;
+            .cWBStatusContentSucess {
+                background: #67C23A;
+                .cWBTitle {
+                    text-align: center;
+                    font-size: 18px;
+                    padding: 10px 0;
+                    color: #fff;   
+                }
+                .cWBIcon {
+                    font-size: 30px;
+                    text-align: center;
+                    font-weight: bold;
+                    margin-bottom: 5px;
+                    color:#fff;
+                }
+                .cWBStatusContent {
+                    text-align: center;
+                    padding-top:10px;
+                    background: #fff;
+                    .cWBStatusContentTitle {
+                        font-size: 14px;
+                        color: #666;
+                    }
+                    .cWBStatusContentItem {
+                        margin-bottom: 5px;
+                        font-size: 24px;
+                        color:#67C23A;
+                        span {
+                            font-size: 12px;
+                        }
+                    }
+                }
+            }
+            .cWBStatusContentError {
+                background: #F56C6C;
+                .cWBTitle {
+                    text-align: center;
+                    font-size: 18px;
+                    padding: 10px 0;
+                    color: #fff;               
+                }
+                .cWBIcon {
+                    font-size: 30px;
+                    text-align: center;
+                    font-weight: bold;
+                    margin-bottom: 5px;
+                    color:#fff;
+                }
+                .cWBStatusContent {
+                    text-align: center;
+                    padding-top:10px;
+                    background: #fff;
+                    .cWBStatusContentTitle {
+                        font-size: 14px;
+                        color: #666;
+                    }
+                    .cWBStatusContentItem {
+                        font-size: 24px;
+                        color:#F56C6C;
+                        margin-bottom: 5px;
+                        span {
+                            font-size: 12px;
+                            color:#666;
+                        }
+                    }
+                }
             }
             .cWBStatus {
                 text-align: center;
+                padding-bottom: 10px;
+                font-size: 18px;
+                color:#fff;
             }
             &:last-child {
                 margin-right: 0;

src/views/template/public/editWindow.vue

@@ -9,14 +9,25 @@
                         <el-input value="新闻列表" disabled/>
                     </el-form-item>
                     <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
-                        <el-select v-model="form.type1data.pid_arr" filterable placeholder="请选择导航.." @change="changeNav">
+                        <!-- <el-select v-model="form.type1data.pid_arr" filterable placeholder="请选择导航.." @change="changeNav">
                             <el-option
                                 v-for="item in options"
                                 :key="item.id"
                                 :label="item.label"
                                 :value="item.value">
                             </el-option>
-                        </el-select>
+                        </el-select> -->
+                        <el-cascader 
+                            :key="parentKey" 
+                            v-model="form.type1data.pid_arr" 
+                            placeholder="请选择要绑定的栏目名称" 
+                            :props="parentData"
+                            popper-class="my_cascader" 
+                            filterable 
+                            ref="cascader"
+                            @change="changeNav"
+                            clearable>
+                        </el-cascader>
                     </el-form-item>
                     <el-form-item label="文字新闻条数：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
@@ -44,6 +55,12 @@
                     <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
                         <el-input v-model="form.type3data.adName" placeholder="请输入广告位名称"/>
                     </el-form-item>
+                    <el-form-item label="广告位介绍：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="form.type3data.adName" disabled/>
+                    </el-form-item>
+                    <el-form-item label="价格：" :label-width="formLabelWidth" prop="price" class="custom-align-right">
+                        <el-input v-model="form.type3data.price" type="number" placeholder="请输入广告位售价"/>
+                    </el-form-item>
                 </el-form>
             </div>
             <!--3.全局广告-->
@@ -64,6 +81,12 @@
                     <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-item label="广告位介绍：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="form.type2data.adName" disabled/>
+                    </el-form-item>
+                    <el-form-item label="价格：" :label-width="formLabelWidth" prop="price" class="custom-align-right">
+                        <el-input v-model="form.type2data.price" type="number" placeholder="请输入广告位售价"/>
+                    </el-form-item>
                 </el-form>
             </div>
         </div>
@@ -98,28 +121,64 @@ export default {
                 callback();
             }
         }
+        let self = this;
         return {
             formLabelWidth:"120px",
             form:{
                 //单导航新闻
                 type1data:{
                     pid_arr:"",
+                    pid_id:"",
                     name:"",
                 },
                 //全局广告
                 type2data:{
-                    adName:""
+                    adName:"",
+                    price:""
                 },
                 //页面内广告
                 type3data:{
-                    adName:""
+                    adName:"",
+                    price:""
                 },
             },
             formRules:{
-                pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
+                pid_arr: [{ type: 'array', required: true, trigger: 'change', message: '必须选择一个导航！' }],
                 adName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}],
+                price: [{type:'number',required:true,trigger:'blur',message:'',validator:validateEmpty}],
             },
             options:[],//网站导航
+            //获取网站栏目
+            parentKey: 0,//更新级联选择器的key
+            parentData: {
+            checkStrictly: true,
+                lazy: true,
+                async lazyLoad(node, resolve) {
+                    const { level, data } = node;
+                    if (data && data.children && data.children.length !== 0) {
+                        return resolve(node)
+                    }
+                    let parentId;
+                    parentId = level == 0 ? 0 : data.value;
+                    let parames = {
+                        'type': 1,
+                        'website_id': self.$store.state.template.editWebsiteId,
+                        'pid': parentId
+                    }
+                    self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
+                        if (res.data) {
+                            const nodes = res.data.map(item => ({
+                                value: item.category_id,
+                                label: item.name,
+                                leaf: level >= 3,
+                                children: [],
+                                disabled: item.type != 1
+                            }))
+                            resolve(nodes)
+                        }
+                    })
+                }
+            },
         }
     },
     computed: {
@@ -128,11 +187,17 @@ export default {
         getPid() {
             return this.$store.state.template.componentViewData.pid_arr;
         },
+        getKey(){
+            return this.$store.state.template.componentViewData.windowKey;
+        },
         getadName(){
             return this.$store.state.template.componentViewData.adName;
         },
-        gettitleName(){
-            return this.$store.state.template.componentViewData.titleName;
+        getadIntroduce(){
+            return this.$store.state.template.componentViewData.introduce;
+        },
+        getadPrice(){
+            return this.$store.state.template.componentViewData.price;
         }
     },
     watch: {
@@ -140,48 +205,62 @@ export default {
             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;
-            }
+            this.form.type1data.pid_arr = newVal;
         },
         getadName(newVal, oldVal) {
             console.log("广告文字改变了！")
             console.log(newVal, oldVal)
             this.form.type3data.adName = newVal;
         },
+        getadIntroduce(newVal, oldVal) {
+            console.log("广告介绍改变了！")
+            console.log(newVal, oldVal)
+            this.form.type3data.introduce = newVal;
+        },
+        getadPrice(newVal, oldVal) {
+            console.log("广告价格改变了！")
+            console.log(newVal, oldVal)
+            this.form.type3data.price = newVal;
+        },
+        getKey(newVal, oldVal) {
+            console.log("级联选择器key改变了！")
+            console.log(newVal, oldVal)
+            this.form.type1data.pid_arr = this.$store.state.template.componentViewData.pid_arr;
+            this.parentKey ++;
+        }
     },
     methods: {
         closeEditWindow(){
             this.$store.commit('template/closeEditWindowStatus');
         },
-        getNavList(){
-            let data = {
-                website_id:this.$store.state.template.editWebsiteId,
-                pid:0,
-                type:1
-            }
-            this.$store.dispatch('news/getWebsiteNavList',data).then((res)=>{
-                if(res.code==200){
-                    this.options = res.data.map(item => ({
-                        id: item.id,
-                        value: item.category_id,
-                        label: item.alias,
-                    }));
-                }else{
-                    this.$message.error(res.msg);
-                }
-            });
-        },
+        // getNavList(){
+        //     let data = {
+        //         website_id:this.$store.state.template.editWebsiteId,
+        //         pid:0,
+        //         type:1
+        //     }
+        //     this.$store.dispatch('news/getWebsiteNavList',data).then((res)=>{
+        //         if(res.code==200){
+        //             this.options = res.data.map(item => ({
+        //                 id: item.id,
+        //                 value: item.category_id,
+        //                 label: item.alias,
+        //             }));
+        //         }else{
+        //             this.$message.error(res.msg);
+        //         }
+        //     });
+        // },
         changeNav(val){
-            // 通过 val 找到对应的选项
-            const selectedOption = this.options.find(item => item.value === val);
-            if (selectedOption) {
-                //选中导航池后，获得导航池的名字
-                this.form.type1data.name = selectedOption.label;
+            // 获取选中的节点
+            const nodes = this.$refs.cascader.getCheckedNodes()
+            if (nodes && nodes.length > 0) {
+                // 获取最后一个选中节点的 name
+                const lastName = nodes[0].pathLabels[nodes[0].pathLabels.length - 1]
+                //console.log('选中的 name:', lastName)
+                this.form.type1data.name = lastName;
+                // 或者获取完整的路径 name 数组
+                //console.log('路径 name 数组:', nodes[0].pathLabels)
             }
         },
         submitData(){
@@ -200,6 +279,7 @@ export default {
                     //1=新闻
                     if(this.$store.state.template.editComponentType == 1){
                         data.data = this.form.type1data;
+                        data.data.pid_id = data.data.pid_arr[data.data.pid_arr.length - 1];
                         data.data.name = this.form.type1data.name;
                     }
                     //2=广告
@@ -216,21 +296,26 @@ 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 = "";
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    //验证广告位名称
+                    let data = {}
+                    data.data = this.form.type2data;
+                    data.data.name = this.form.type2data.adName;
+                    data.data.introduce = this.form.type2data.adName;
+                    data.data.price = this.form.type2data.price;
+                    //第一步：通过固定方法提交数据
+                    this.$store.commit('template/saveAdData',data);
+                    //第二步：关闭编辑窗口
+                    this.$store.commit('template/closeEditWindowStatus');
+                    //第三步：初始化下拉列表
+                    this.form.type1data.pid_arr = "";
+                }
+            })
         }
     },
     mounted() { 
-        //获得站点下的导航池
-        this.getNavList();
+
     },
 };
 </script>

src/views/template/templateCreat.vue

@@ -40,7 +40,7 @@
 
     <!-- 弹出框 start ---------------------------------------->
     <!-- 这里我去掉了:visible.sync 因为弹出框的关闭事件需要手动触发 -->
-    <el-dialog title="编辑组件信息" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow">
+    <el-dialog title="编辑组件信息" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow" @open="addWindowKey">
       <editWindow />
     </el-dialog>
     <el-dialog title="更换组件样式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
@@ -148,6 +148,10 @@ export default {
     closeEditWebsiteTemplateJsonWindow(){
       this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
     },
+    //增加级联选择器key
+    addWindowKey(){
+      this.$store.commit('template/addWindowKey');
+    },
     //设置预览状态
     setPreviewStatus(){
       this.$store.commit('template/setPreviewStatus');