//0.自助建站的接口 start----------------------------------------> import { getSiteInfo, getSiteCategory, getFooterCategoryList} from '@/api/cms' import { getWebsiteintel, checkWebsiteBuild, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, getWebsiteTemplateList, chooseWebsiteTemplate, getWebsiteTemplateclassintel, saveWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll, addTwinAdPlace, getWebPageType, addWebPageType, checkWebsiteEdit, getWebsiteTemplate } from '@/api/template' //0.自助建站的接口 end----------------------------------------> //1.引入必备方法 start----------------------------------------> //导入Vue因为我们要进行深层次的json修改,必须调用Vue.Set，否则深拷贝的数据无法令视图更新 import { Message } from 'element-ui'; import Vue from 'vue'; //1.引入必备方法 end----------------------------------------> //2.引入随机模板json后期删除 start----------------------------------------> //首页 风格1 import randomIndex1 from '@/utils/templateJson/index/style1/1.js'; //首页 风格2 import randomIndex2 from '@/utils/templateJson/index/style1/2.js'; //2.引入随机模板json后期删除 end----------------------------------------> const state = { //0.全局配置 start------------------------------------------------------------> editWebsiteId: "",//网站id adKey: "",//网站缩写 editWebsiteClass: "",//网站风格 stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示 componentMenuStatus: 1,//组件菜单是否显示 1=显示 0=隐藏 //0.全局配置 end------------------------------------------------------------> //1.画布数据 start------------------------------------------------------------> pageStatus: 1,//当前编辑哪个页面 1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=底部列表页 7=底部详情页 menuType: 1, //当前菜单显示板块还是组件 1=板块 2=组件 previewStatus: false,//是否预览 gridKey: 0,//使用gridKey来强制更新视图 loading: false,//是否显示加载中 showPage: { //哪些页面可以被展示 index: true, class: true, list: true, article: true, search: true, aloneList: true, aloneArticle: true }, pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据 index: [],//首页 class: [],//分类页 list: [],//列表页 article: [],//详情页 search: [],//搜索页 aloneList: [],//自定义列表页 aloneArticle: [],//自定义详情页 }, editSectorY: 0,//当前组件在画布中的位置 mouseXY: {//鼠标位置 "x": 12, "y": 33 }, DragPos: {//创建的占位符大小 "x": null, "y": null, "w": 12, "h": 2, "i": null }, gridlayoutObj: null,//画布gridlayout对象 //1.画布数据 end------------------------------------------------------------> //2.全局模板数据 start------------------------------------------------------------> webSiteInfo: "",//网站信息 webSiteMenu: "",//网站包含的导航池 webSiteFooterInfo: "",//网站底部信息 area: {//地区 economize: [],//省区 market: [],//市区 county: []//县区 }, departmentList: [],//职能部门 //2.全局模板数据 end------------------------------------------------------------> //3.构造的模板json数据 start------------------------------------------------------------> pageDataStatus:{//页面数据完整度 index:{ sector:0,//当前板块数量，为0表示一个都没有 cid:0,//缺少的导航池id 为0表示没有缺少 ad:0,//缺少的广告名称，为0表示没有缺少 adPrice:0//缺少的广告价格，为0表示没有缺少 }, class:{ sector:0, cid:0, ad:0, adPrice:0 }, list:{ sector:0, cid:0, ad:0, adPrice:0 }, article:{ sector:0, cid:0, ad:0, adPrice:0 }, search:{ sector:0, cid:0, ad:0, adPrice:0 }, aloneList:{ sector:0, cid:0, ad:0, adPrice:0 }, aloneArticle:{ sector:0, cid:0, ad:0, adPrice:0 } }, ad_id: "",//生成储存的广告标识 pageName:{ //页面名称 1:"index", 2:"class", 3:"list", 4:"article", 5:"search", 6:"aloneList", 7:"aloneArticle" }, pageRoute:{ //数据路径 1:"state.pageData.index", 2:"state.pageData.class", 3:"state.pageData.list", 4:"state.pageData.article", 5:"state.pageData.search", 6:"state.pageData.aloneList", 7:"state.pageData.aloneArticle" }, editWindowStatus: false,//编辑组件弹出框是否显示 editComponentWindowStatus: false,//选择组件样式弹出框是否显示 editWebsiteTemplateJsonWindow: false,//当前准备提交的数据 后期删除 editWindowTitle: "",//编辑弹出框标题 editSectorId: 0,//当前正在编辑的板块id editDataSort: 0,//当前正在编辑的数据位置 editComponentSort: 0,//当前正在编辑的组件id editComponentType: 0,//当前正在编辑的组件类型 editComponentSize: 0,//当前组件文字新闻数量 editComponentSizeImg:0,//当前组件图片新闻数量 editComponentStyle: 0,//当前编辑的组件样式 editWebsiteCategory: [],//当前网站全部关联导航 webSiteData: { //1.base网站基本信息 base: { websiteId: "",//网站id }, //2.style信息 style: { styleId: "",//风格id }, //3.板块信息 header,menu,footer 是页面自带的无需构建 template: { //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页 index: [], class: [],//分类页 list: [],//列表页 article: [],//详情页 search: [],//搜索页 aloneList: [],//自定义列表页 aloneArticle: []//自定义详情页 }, //4.广告位 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 }, index: [], class: [], list: [], article: [], search: [], aloneList: [], aloneArticle: [] } }, canSubmit: false,//当前数据是否可以被提交 //3.构造的模板json数据 end------------------------------------------------------------> //4.组件回显数据 start------------------------------------------------------------> componentViewData: { pid_arr: [],//导航池 pageSize: "",//展示文字新闻条数 pageSizeImg: "",//展示图片新闻条数 adName: "",//广告名称 titleName: "",//标题名称 windowKey:0,//级联选择器的key price:0//广告价格 } //4.组件回显数据 start------------------------------------------------------------> } const mutations = { //0.全局配置 start------------------------------------------------------------> //设置网站的id setEditWebsiteId(state, id) { state.editWebsiteId = id; }, //设置网站缩写 setAdKey(state, key) { state.adKey = key; }, //设置网站的风格 setClassNumber(state, id) { state.editWebsiteClass = id; }, //展示步骤 showStepStatus(state) { state.stepStatus = true; }, //隐藏步骤 hiddenStepStatus(state) { state.stepStatus = false; }, //设置步骤 setPageStatus(state, num) { state.pageStatus = num; }, //设置预览状态 setPreviewStatus(state) { state.previewStatus = !state.previewStatus; }, //打开编辑组件弹出框 setEditWindowStatus(state, data) { state.editWindowStatus = true; state.editSectorId = data.id; state.editSectorY = data.y; state.editDataSort = data.dataSort; state.editComponentSort = data.sort; state.editComponentType = data.type; state.editComponentSize = data.size; state.editComponentSizeImg = data.sizeImg; }, //更新编辑窗口中的数据 updateWindowData(state) { state.componentViewData.windowKey++; }, //关闭编辑组件弹出框 closeEditWindowStatus(state) { state.editWindowStatus = false; }, //打开选择组件样式弹出框 setComponentStyleStatus(state, data) { state.editComponentWindowStatus = true; state.editSectorId = data.id; state.editDataSort = data.dataSort; state.editComponentSort = data.sort; state.editComponentType = data.type; state.editComponentStyle = data.style; }, //关闭选择组件样式弹出框 closeComponentStyleStatus(state) { state.editComponentWindowStatus = false; }, //关闭提交数据弹出框 closeEditWebsiteTemplateJsonWindow(state) { state.editWebsiteTemplateJsonWindow = false; }, //选择组件样式 selectComponentStyleNumber(state, data) { state.editComponentStyle = data; }, //设置组件回显数据 setComponentViewData(state, data) { //获取当前页面名称 const currentPageName = state.pageName[state.pageStatus]; //如果页面名称不存在，直接返回 if (!currentPageName) {return;} //获取当前页面的数据 const currentPageData = state.pageData[currentPageName]; //找到要修改的板块 const targetModuleIndex = currentPageData.findIndex(module => module.i === data.id); //如果找不到目标模块，直接返回 if (targetModuleIndex === -1) {return;} //获取目标模块 const targetModule = currentPageData[targetModuleIndex]; //获取目标模块的组件类型 //判断组件类型 1=新闻 2=广告 if (state.editComponentType === 1) { // 新闻组件：设置导航id if (targetModule.content.componentList && targetModule.content.componentList[data.sort]) { const componentData = targetModule.content.componentList[data.sort].componentData; state.componentViewData.pid_arr = componentData.category_arr; state.componentViewData.pageSize = state.editComponentSize; state.componentViewData.pageSizeImg = state.editComponentSizeImg; } } else if (state.editComponentType === 2) { // 广告组件：设置广告名称和价格 if (targetModule.content.ad) { state.componentViewData.adName = targetModule.content.ad.name; state.componentViewData.price = targetModule.content.ad.price; } } }, //清空广告位 clearAd(state) { 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 = []; }, //设置组件菜单是否显示 setComponentMenuStatus(state, data) { state.componentMenuStatus = data; }, //0.全局配置 start------------------------------------------------------------> //1.配置模块 start------------------------------------------------------------> //获得gridlayout对象 setGridlayoutObj(state, data) { state.gridlayoutObj = data; }, //添加板块 - 此代码无需优化，每个页面的规则都不一样 addModule(state, data) { //pageStatus==1 首页 index if (state.pageStatus == 1) { if (state.pageData.index.length >= 10) { Message.error('最多只能添加10个通栏！'); return; } else { this.commit('template/pushModule', data); } } //pageStatus==2 分类页 class if (state.pageStatus == 2) { if (state.pageData.class.length >= 10) { Message.error('最多只能添加10个通栏！'); return; } else { this.commit('template/pushModule', data); } } //pageStatus==3 列表页 list if (state.pageStatus == 3) { if (state.pageData.list.length >= 10) { Message.error('最多只能添加10个通栏！'); return; } else { this.commit('template/pushModule', data); } } //pageStatus==4 详情页 article if (state.pageStatus == 4) { if (state.pageData.article.length >= 10) { Message.error('最多只能添加10个通栏！'); return; } else { this.commit('template/pushModule', data); } } //pageStatus==5 搜索页 search if (state.pageStatus == 5) { if (state.pageData.search.length >= 10) { Message.error('最多只能添加10个通栏！'); return; } else { this.commit('template/pushModule', data); } } //pageStatus==6 自定义列表页 aloneList if (state.pageStatus == 6) { if (state.pageData.aloneList.length >= 10) { Message.error('最多只能添加10个通栏！'); return; } else { this.commit('template/pushModule', data); } } //pageStatus==7 自定义详情页 aloneArticle if (state.pageStatus == 7) { if (state.pageData.aloneArticle.length >= 10) { Message.error('最多只能添加10个通栏！'); return; } else { this.commit('template/pushModule', data); } } }, //该数据可以添加到画布 pushModule(state, data) { //获取当前页面名称 const currentPageName = state.pageName[state.pageStatus]; if (!currentPageName) { console.error('无效的页面状态:', state.pageStatus); return; } //获取当前页面数据 const currentPageData = state.pageData[currentPageName]; if (!currentPageData) { console.error('未找到页面数据:', currentPageName); return; } console.log(data.jsonData); console.log(`通过${data.source === 'click' ? '点击' : '拖拽'}添加一个板块`); //通过时间戳生成唯一id const currentTimestamp = Date.now(); const moduleId = currentTimestamp; //计算当前布局的最大 y 值 const maxY = Math.max(...currentPageData.map(item => item.y), 0); //设置数据在构建json中的位置 const dataSort = currentPageData.length; //根据source类型设置y坐标 const yPosition = data.source === 'click' ? maxY + 1 : data.y; // 创建新模块 const newModule = { i: moduleId, x: 0, y: yPosition, w: 12, h: data.h, type: data.type, content: data.jsonData, dataSort: dataSort, }; //添加模块到当前页面数据 currentPageData.push(newModule); console.log(`当前添加模块的dataSort为：${dataSort}`); console.log('当前的页面构建数据:', currentPageData); //拖拽特殊处理 if (data.source === 'drag') { // 调用gridlayout的拖拽结束事件 state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1); // 尝试显示占位符 try { const targetIndex = currentPageData.length; if (state.gridlayoutObj.$children && state.gridlayoutObj.$children[targetIndex] && state.gridlayoutObj.$children[targetIndex].$refs && state.gridlayoutObj.$children[targetIndex].$refs.item) { state.gridlayoutObj.$children[targetIndex].$refs.item.style.display = "block"; } } catch (error) { console.log("没有找到占位符:", error); } } }, //删除板块 deleteModule(state, data) { //data.i = id //data.dataSort = dataSort try { // 获取当前页面名称 const currentPageName = state.pageName[state.pageStatus]; if (!currentPageName) { Message.warning('无效的页面状态！'); return; } // 获取当前页面的数据数组 const currentPageData = state.pageData[currentPageName]; if (!currentPageData) { Message.warning('未找到页面数据！'); return; } //找到要删除的模块 const indexToRemove = currentPageData.findIndex(item => item.i === data.i); if (indexToRemove === -1) { Message.warning('未找到要删除的模块！'); return; } //创建新的数组，不包含要删除的模块 const newModules = currentPageData.filter(item => item.i !== data.i); //重新计算所有模块的 dataSort newModules.forEach((module, index) => { module.dataSort = index; }); //使用 Vue.set 更新整个数组 Vue.set(state.pageData, currentPageName, newModules); //清理 $children 数组 if (state.gridlayoutObj && state.gridlayoutObj.$children) { //清空$children 数组 state.gridlayoutObj.$children.length = 0; //强制重新渲染 state.gridKey += 1; //等待 DOM 更新后重新设置gridlayout对象 Vue.nextTick(() => { //通知父组件重新设置gridlayout对象 //这里可以通过事件总线或其他方式通知 if (state.gridlayoutObj && state.gridlayoutObj.$parent) { //尝试重新获取gridlayout对象 const newGridLayout = state.gridlayoutObj.$parent.$refs.gridlayout; if (newGridLayout) { state.gridlayoutObj = newGridLayout; } } }); } Message.success('模块已删除！'); console.log(`模块已删除，当前${currentPageName}页面的构建数据为：`, newModules); } catch (error) { console.error('删除模块时发生错误:', error); Message.error('删除模块时发生错误，请重试！'); } }, //设置组件样式 setComponentStyleNumber(state, data) { const id = state.editSectorId; const dataSort = state.editDataSort; const sort = state.editComponentSort; const num = state.editComponentStyle; console.log(id, dataSort, sort, num); //获取当前页面名称 const currentPageName = state.pageName[state.pageStatus]; if (!currentPageName) { console.error('无效的页面状态:', state.pageStatus); return; } //获取当前页面的数据数组 const currentPageData = state.pageData[currentPageName]; if (!currentPageData || !currentPageData[dataSort]) { console.error('未找到页面数据:', currentPageName, dataSort); return; } //获取当前模块数据并进行深拷贝 const module = JSON.parse(JSON.stringify(currentPageData[dataSort])); //确保修改属性时 Vue 能监控到变化 Vue.set(module.content.componentList, sort, { ...module.content.componentList[sort], component_style: num }); //使用Vue.set来强制视图更新 Vue.set(currentPageData, dataSort, module); console.log(`当前${currentPageName}页面的板块数据为：`); console.log(currentPageData); }, //保存全局广告的数据 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) { //传入的板块id console.log("当前编辑板块：" + data.id); //获取当前页面名称 const currentPageName = state.pageName[state.pageStatus]; if (!currentPageName) { console.error('无效的页面状态:', state.pageStatus); return; } //获取当前页面的数据数组 const currentPageData = state.pageData[currentPageName]; if (!currentPageData) { console.error('未找到页面数据:', currentPageName); return; } //找到要修改的板块 const targetModuleIndex = currentPageData.findIndex(module => module.i === data.id); if (targetModuleIndex === -1) { console.error('未找到要修改的模块:', data.id); return; } console.log("要修改的模块索引：", targetModuleIndex); console.log("组件排序：", data.sort); //组件类型 1=新闻 2=广告 //注意：Vue有一个特性，当修改复杂对象内部数组时，可能无法检测到变化 //解决办法是通过Vue.set方法将整个对象进行深拷贝，然后修改完再替换回去 // 获取当前模块数据并进行深拷贝 let module = JSON.parse(JSON.stringify(currentPageData[targetModuleIndex])); if (state.editComponentType === 1) { //1=新闻组件 const componentData = module.content.componentList[data.sort].componentData; componentData.category_id = data.data.pid_id; // 设置 category_id componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示 componentData.name = data.data.name; // 设置导航池名字 componentData.textSize = state.editComponentSize; // 设置文字新闻数量 componentData.imgSize = state.editComponentSizeImg; // 设置图片新闻数量 } else if (state.editComponentType === 2) { //2=广告组件 module.content.ad.name = data.data.adName; module.content.ad.introduce = data.data.adName; module.content.ad.price = data.data.price; //设置用于回显的广告名，否则会导致回显的广告名和实际的广告名不一致 //因为广告名没有默认值，这会导致watch监听不到，所以这里需要手动设置 state.componentViewData.adName = data.data.adName; } // 使用Vue.set来强制视图更新 Vue.set(currentPageData, targetModuleIndex, module); console.log(`当前${currentPageName}页面的板块数据为：`); console.log(currentPageData); }, //从外部拖拽板块 drag(state, data) { //获取当前页面名称 const currentPageName = state.pageName[state.pageStatus]; if (!currentPageName) { console.error('无效的页面状态:', state.pageStatus); return; } //获取当前页面的数据 const currentPageData = state.pageData[currentPageName]; if (!currentPageData) { console.error('未找到页面数据:', currentPageName); return; } //获取画布尺寸并判断鼠标是否在画布内 let parentRect = document.getElementById('content').getBoundingClientRect(); let mouseInGrid = false; if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) { mouseInGrid = true; } //如果没有占位符就创建一个 if (mouseInGrid === true && (currentPageData.findIndex(item => item.i === 'drop')) === -1) { currentPageData.push({ x: (currentPageData.length * 2) % (this.colNum || 12), y: currentPageData.length + (this.colNum || 12), w: 12, h: 2, i: 'drop', }); } //如果已经存在占位符 let index = currentPageData.findIndex(item => item.i === 'drop'); if (index !== -1) { try { console.log(`当前 ${currentPageName} 页面数据长度:`, currentPageData.length); console.log('当前 gridlayoutObj.$children.length:', state.gridlayoutObj.$children.length); //计算目标索引 const targetIndex = currentPageData.length; console.log('尝试隐藏的索引:', targetIndex); //安全访问并隐藏占位符 if (state.gridlayoutObj.$children && targetIndex >= 0 && targetIndex < state.gridlayoutObj.$children.length && state.gridlayoutObj.$children[targetIndex] && state.gridlayoutObj.$children[targetIndex].$refs && state.gridlayoutObj.$children[targetIndex].$refs.item) { //调试信息：确认要隐藏的是drop元素 const targetChild = state.gridlayoutObj.$children[targetIndex]; console.log('要隐藏的元素ID:', targetChild.i || (targetChild.$props && targetChild.$props.i)); state.gridlayoutObj.$children[targetIndex].$refs.item.style.display = "none"; console.log('成功隐藏占位符，索引:', targetIndex); } else { console.log('无法安全访问占位符，索引:', targetIndex); } } catch (error) { console.log('处理占位符时出错:', error); } //拖拽逻辑处理 if (state.gridlayoutObj.$children[index]) { let el = state.gridlayoutObj.$children[index]; el.dragging = { "top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left }; let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left); if (mouseInGrid === true) { state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12); state.DragPos.i = String(index); state.DragPos.x = currentPageData[index].x; state.DragPos.y = currentPageData[index].y; } if (mouseInGrid === false) { state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12); // 使用 Vue.set 确保响应式更新 Vue.set(state.pageData, currentPageName, currentPageData.filter(obj => obj.i !== 'drop')); } } else { console.log('无法找到拖拽元素，索引:', index); } } }, //拖拽结束 定位落点 dragend(state, data) { //获取当前页面名称 const currentPageName = state.pageName[state.pageStatus]; if (!currentPageName) { console.error('无效的页面状态:', state.pageStatus); return; } //获取画布尺寸 let parentRect = document.getElementById('content').getBoundingClientRect(); //判断是否在画布内 let mouseInGrid = false; if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) { mouseInGrid = true; } //如果在画布内，开始创建元素 if (mouseInGrid === true) { //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); //动态过滤当前页面的 drop 元素 state.pageData[currentPageName] = state.pageData[currentPageName].filter(obj => obj.i !== 'drop'); let sendData = { source: "drag",//添加时判断此模块来自外部拖拽，而不是点击 type: data.type, h: data.h, jsonData: data.jsonData, x: state.DragPos.x, y: state.DragPos.y, w: 12, } //调用 addModule 来添加模块 this.commit('template/addModule', sendData); } }, //格式化模板信息 formatTemplateInfo(state, data) { //1.处理广告位 //先把广告位的数据清空，再重新获取 //this.commit('template/clearAd'); // 深拷贝数据，避免直接修改原数据 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 ad_index = Number(index)+1; let ad_tag = `${state.adKey}_${data.type}_${ad_index}`; clonedData.data[index].content.ad.website_id = state.editWebsiteId; clonedData.data[index].content.ad.ad_tag = ad_tag; 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 for (let index = 0; index < clonedData.data.length; index++) { console.log(clonedData.data[index].content); // 使用 Vue.set 来确保属性变更能被 Vue 追踪 Vue.set(clonedData.data[index].content, 'sort', Number(index) + 1); websiteData.push(clonedData.data[index].content); } // 保存到对应的页面 json 中 if (data.type == "index") {state.webSiteData.template.index = websiteData;} if (data.type == "class") {state.webSiteData.template.class = websiteData;} if (data.type == "list") {state.webSiteData.template.list = websiteData;} if (data.type == "article") {state.webSiteData.template.article = websiteData;} if (data.type == "search") {state.webSiteData.template.search = websiteData;} if (data.type == "aloneList") {state.webSiteData.template.aloneList = websiteData;} if (data.type == "aloneArticle") {state.webSiteData.template.aloneArticle = websiteData;} }, //保存模板 saveTemplate(state) { //1.保存网站id和模板风格id state.webSiteData.base.websiteId = state.editWebsiteId; state.webSiteData.style.styleId = state.editWebsiteClass; //2.格式化数据 //2.1 清理广告位数据 this.commit('template/clearAd'); //2.2 格式化index页面数据 this.commit('template/formatTemplateInfo', { data: state.pageData.index, type: "index" }); //2.2 格式化class页面数据 this.commit('template/formatTemplateInfo', { data: state.pageData.class, type: "class" }); //2.3 格式化list的信息 this.commit('template/formatTemplateInfo', { data: state.pageData.list, type: "list" }); //2.4 格式化article的信息 this.commit('template/formatTemplateInfo', { data: state.pageData.article, type: "article" }); //2.5 格式化search的信息 this.commit('template/formatTemplateInfo', { data: state.pageData.search, type: "search" }); //2.6 格式化aloneList的信息 this.commit('template/formatTemplateInfo', { data: state.pageData.aloneList, type: "aloneList" }); //2.7 格式化aloneArticle的信息 this.commit('template/formatTemplateInfo', { data: state.pageData.aloneArticle, type: "aloneArticle" }); //3.展示构造json 后期移除 state.editWebsiteTemplateJsonWindow = true; //4.检测模板数据完整度，如果不完整阻止用户保存 this.commit('template/pageCheck', {data: state.pageData}); }, //检测模板完整度 pageCheck(state, data) { // 遍历所有页面进行检测 Object.values(state.pageName).forEach(pageName => { // 获得当前页面板块数量 state.pageDataStatus[pageName].sector = data.data[pageName].length; // 获得当前页面没有设置导航池的板块数量 - 只检查首页 let noCid = 0; if (pageName === 'index') { for(let index in data.data[pageName]){ for(let i in data.data[pageName][index].content.componentList){ if(data.data[pageName][index].content.componentList[i].componentData.category_id != undefined){ if(data.data[pageName][index].content.componentList[i].componentData.category_id == ""){ noCid++; } } } } } state.pageDataStatus[pageName].cid = noCid; // 获得当前页面没有设置广告名称的组件数量 let noAd = 0; for(let index in data.data[pageName]){ if(data.data[pageName][index].content.ad != undefined){ if(data.data[pageName][index].content.ad.name == ""){ noAd++; } } } state.pageDataStatus[pageName].ad = noAd; // 获得当前页面没有设置广告价格的组件数量 let noAdPrice = 0; for(let index in data.data[pageName]){ if(data.data[pageName][index].content.ad != undefined){ if(data.data[pageName][index].content.ad.price == 0){ noAdPrice++; } } } state.pageDataStatus[pageName].adPrice = noAdPrice; }); // 全局广告特殊处理（只处理一次） 全局广告是算到首页里面的 if(state.webSiteData.ad.top.name == ""){ state.pageDataStatus.index.ad++; } if(state.webSiteData.ad.top.price == 0){ state.pageDataStatus.index.adPrice++; } }, //清理画布内容 clearWebsiteTemplate(state,data){ //每次进入的时候先清理再回显 //清理state.webSiteData Vue.set(state.webSiteData, 'template', { index: [], class: [], list: [], article: [], search: [], aloneList: [], aloneArticle: [] }); Vue.set(state, 'pageData', { 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 }); Vue.set(state, 'pageStatus', 1); }, //回显模板内容 setWebsiteTemplate(state, data) { if(data==null){ this.commit('template/clearWebsiteTemplate'); console.log("第一次添加模板，无需回显！") }else{ this.commit('template/clearWebsiteTemplate'); console.log("编辑模板，开始回显模板内容！") console.log(data) state.webSiteData.ad.top = data.topAd; state.pageData = data.template; } }, //随机生成模板 randomTemplate(state) { state.loading = true; const randomIndex = Math.floor(Math.random() * 2); console.log(`随机生成的数字是: ${randomIndex}`); // pageStatus == 1 首页 if (state.pageStatus == 1) { // 先清空里面的内容 Vue.set(state.pageData, 'index', []); // 深拷贝 randomIndex1 和 randomIndex2 const newData1 = JSON.parse(JSON.stringify(randomIndex1)); const newData2 = JSON.parse(JSON.stringify(randomIndex2)); if (randomIndex == 0) { Vue.set(state.pageData, 'index', newData1); } if (randomIndex == 1) { Vue.set(state.pageData, 'index', newData2); } state.loading = false; } // pageStatus == 2 分类页 if (state.pageStatus == 2) { } // pageStatus == 3 列表页 if (state.pageStatus == 3) { } // pageStatus == 4 详情页 if (state.pageStatus == 4) { } // pageStatus == 5 搜索页 if (state.pageStatus == 5) { } // pageStatus == 6 自定义列表页 if (state.pageStatus == 6) { } // pageStatus == 7 自定义详情页 if (state.pageStatus == 7) { } }, //1.配置模块 end------------------------------------------------------------> //2.获取站点信息 start------------------------------------------------------------> //获取站点顶部详情 setWebsiteInfo(state, data) { state.webSiteInfo = data; }, setWebsiteFooterInfo(state, data) { state.webSiteFooterInfo = data; }, //获取站点导航池 setGetSiteCategory(state, data) { let allData = [] for (let index in data) { //导航最多只显示24个，超出部分不显示 if (index < 24) { allData.push(data[index]) } } state.webSiteMenu = allData; }, //设置地区 setArea(state, data) { //都没有的时候返回的是省 if (data.province == undefined) { state.area.economize = data; } //没有region的时候返回的是市 if (data.province != undefined && data.city != undefined && data.region == undefined) { state.area.market = data.city; } //有region的时候返回的是县 if (data.province != undefined && data.city != undefined && data.region != undefined) { state.area.county = data.region; } }, //设置职能 setDepartment(state, data) { for (let item of data) { let options = { value: item.id, label: item.name } state.departmentList.push(options) } console.log(state.departmentList) }, //获取全部导航 setWebsiteCategory(state, data) { let arrayData = [] for (let item of data) { let options = { key: item.id, label: item.name, value: item.id } arrayData.push(options); } state.editWebsiteCategory = arrayData; }, //2.获取站点信息 end------------------------------------------------------------> //3.提示信息 start------------------------------------------------------------> alertMessage(state, data) { Message({ message: "配置阶段仅展示，无法真实调用该功能！", type: 'warning', duration: 0, showClose: true }); } //3.提示信息 end------------------------------------------------------------> } const actions = { //1.显示画板组件数据 start------------------------------------------------------------> //1.1 获取网站基本信息 getSiteInfo({ commit }, data) { return new Promise((resolve, reject) => { getSiteInfo(data).then(response => { commit('setWebsiteInfo', response.data); resolve(response) }).catch(error => { reject(error) }) }) }, //1.2 获取网站导航池 getSiteCategory({ commit }, data) { return new Promise((resolve, reject) => { getSiteCategory(data).then(response => { commit('setGetSiteCategory', response.data); resolve(response) }).catch(error => { reject(error) }) }) }, //1.3 获取网站底部导航 getFooterCategoryList({ commit }, data) { return new Promise((resolve, reject) => { getFooterCategoryList(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //1.4 获得页面类型 getWebPageType({ commit }, data) { return new Promise((resolve, reject) => { getWebPageType(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //1.5 选择页面类型 - 是否添加搜索页 addWebPageType({ commit }, data) { return new Promise((resolve, reject) => { addWebPageType(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //1.显示画板组件数据 end------------------------------------------------------------> //2.构建网站json start------------------------------------------------------------> //2.1 搜索网站 getWebsiteintel({ commit }, data) { return new Promise((resolve, reject) => { getWebsiteintel(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池 checkWebsiteBuild({ commit }, data) { return new Promise((resolve, reject) => { checkWebsiteBuild(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.3 获取网站基本信息 getAdminSiteInfo({ commit }, data) { return new Promise((resolve, reject) => { getAdminSiteInfo(data).then(response => { commit('setWebsiteInfo', response.data); commit('setAdKey', response.data.ad_key); resolve(response) }).catch(error => { reject(error) }) }) }, //2.4 修改网站基本信息 upWebsiteTemplateintel({ commit }, data) { return new Promise((resolve, reject) => { upWebsiteTemplateintel(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.5 获取所有风格 getAllTemplateClass({ commit }, data) { return new Promise((resolve, reject) => { getAllTemplateClass(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.6 搜索并获取所有网站风格 getWebsiteTemplateList({ commit }, data) { return new Promise((resolve, reject) => { getWebsiteTemplateList(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.7 保存用户选择的风格 chooseWebsiteTemplate({ commit }, data) { return new Promise((resolve, reject) => { chooseWebsiteTemplate(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.8 获取用户选择的风格 getWebsiteTemplateclassintel({ commit }, data) { return new Promise((resolve, reject) => { getWebsiteTemplateclassintel(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.9 保存模板 saveWebsiteTemplate({ commit }, data) { return new Promise((resolve, reject) => { saveWebsiteTemplate(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.10 获取模板配置 getWebsiteTemplateInfo({ commit }, data) { return new Promise((resolve, reject) => { getWebsiteTemplateInfo(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.11 预览模板信息 getWebsiteTemplateData({ commit }, data) { return new Promise((resolve, reject) => { getWebsiteTemplateData(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.12 获得网站底部信息 getAdminWebsiteFootAll({ commit }, data) { return new Promise((resolve, reject) => { getAdminWebsiteFootAll(data).then(response => { commit('setWebsiteFooterInfo', response.data); resolve(response) }).catch(error => { reject(error) }) }) }, //2.13 批量创建广告位 addTwinAdPlace({ commit }, data) { return new Promise((resolve, reject) => { addTwinAdPlace(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.14 验证该网站是否有未结束的订单 checkWebsiteEdit({ commit }, data) { return new Promise((resolve, reject) => { checkWebsiteEdit(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }, //2.15 回显模板 getWebsiteTemplate({ commit }, data) { return new Promise((resolve, reject) => { getWebsiteTemplate(data).then(response => { resolve(response) }).catch(error => { reject(error) }) }) } //2.构建网站json end------------------------------------------------------------> } export default { namespaced: true, state, mutations, actions }