//cms中的接口 获取网站基本信息，网站导航，网站底部导航，网站行政区划，行政职能 import { getSiteInfo, getSiteCategory, getFooterCategoryList} from '@/api/cms' //自助建站的接口 用于添加基本信息 import { getWebsiteintel, addWebsiteTemplateintel, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, getWebsiteTemplateList, addWebsiteTemplateclassintel, getWebsiteTemplateclassintel, addWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll, addTwinAdPlace } from '@/api/template' import { Message,MessageBox } from 'element-ui'; //注意在这里引入是非常不符合规范的 import Vue from 'vue'; //导入Vue 因为我们要进行深层次的json修改，深拷贝的数据无法令视图更新 //所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set //引入随机模板json //首页 风格1 import randomIndex1 from '@/utils/templateJson/index/style1/1.js'; //首页 风格2 import randomIndex2 from '@/utils/templateJson/index/style1/2.js'; const state = { //0.全局配置 start------------------------------------------------------------> editWebsiteId: "",//当前编辑网站的id adKey: "",//当前编辑网站的缩写 editWebsiteClass: "",//当前编辑网站的风格 stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示 pageDataStatus:{//页面数据完整度 index:{ sector:0,//当前板块数量，为0表示一个都没有，最少需要1个模块才能保存 cid:0,//缺少的导航池id 为0表示没有缺少 ad:0,//缺少的广告名称，为0表示没有缺少 adPrice:0//缺少的广告价格，为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,//是否显示加载中 ad_id: "",//生成储存的广告标识 showPage: { //哪些页面可以被展示 index: true, class: true, list: true, article: true, search: true, aloneList: true, aloneArticle: true }, pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据 index: [],//首页 class: [],//分类页 list: [],//列表页 article: [],//详情页 search: [],//搜索页 aloneList: [],//自定义列表页 aloneArticle: [],//自定义详情页 }, // layout: [ // // i = id // // w = 最大宽度是12 // // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""}, // // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""}, // ], //1.画布数据 end------------------------------------------------------------> //2.站点数据 start------------------------------------------------------------> webSiteInfo: "",//网站信息 webSiteMenu: "",//网站包含的导航池 webSiteFooterInfo: "",//网站底部信息 area: {//地区 economize: [],//省区 market: [],//市区 county: []//县区 }, departmentList: [],//职能部门 //2.站点数据 end------------------------------------------------------------> //3.画布构造 start------------------------------------------------------------> editSectorY: 0,//当前组件在画布中的位置 mouseXY: {//鼠标位置 "x": 12, "y": 33 }, DragPos: {//创建的占位符大小 "x": null, "y": null, "w": 12, "h": 2, "i": null }, //获得gridlayout对象 gridlayoutObj: null, //3.画布构造 end------------------------------------------------------------> //4.构造的网站数据 start------------------------------------------------------------> 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,//当前数据是否可以被提交 //4.构造的网站数据 end------------------------------------------------------------> //5.组件回显数据 start------------------------------------------------------------> componentViewData: { pid_arr: [],//导航池 pageSize: "",//展示文字新闻条数 pageSizeImg: "",//展示图片新闻条数 adName: "",//广告名称 titleName: "",//标题名称 windowKey:0,//级联选择器的key } //5.组件回显数据 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; }, //增加级联选择器key addWindowKey(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) { //首页 if (state.pageStatus == 1) { //找到要修改的板块 const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id); //判断组件类型 1=新闻 2=广告 //1=新闻 需要设置导航id if (state.editComponentType == 1) { 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; } //2=设置广告名称 if (state.editComponentType == 2) { //state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text; state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.ad.name; } } //pageStatus==2 分类页 if (state.pageStatus == 2) {} //pageStatus==3 列表页 if (state.pageStatus == 3) { const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id); //判断组件类型 1=新闻 2=广告 //1=新闻 需要设置导航id if (state.editComponentType == 1) { 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; } //2=设置广告名称 if (state.editComponentType == 2) { state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text; } } //pageStatus==4 详情页 if (state.pageStatus == 4) { const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id); //判断组件类型 1=新闻 2=广告 //1=新闻 需要设置导航id if (state.editComponentType == 1) { state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_arr; state.componentViewData.pageSize = state.editComponentSize; } //2=设置广告名称 if (state.editComponentType == 2) { state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text; } } //pageStatus==5 搜索页 if (state.pageStatus == 5) {} //pageStatus==6 底部列表页 if (state.pageStatus == 6) {} //pageStatus==7 底部详情页 if (state.pageStatus == 7) {} }, //生成广告id getAdkey(state,sort) { }, //清空广告位 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 = []; }, //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 { console.log(data.jsonData) //判断当前板块是否含有广告位 // 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 { } } } //pageStatus==2 分类页 class if (state.pageStatus == 2) { } //pageStatus==3 列表页 list if (state.pageStatus == 3) { //判断是拖拽的还是点击添加进来的 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 { } } } //pageStatus==4 详情页 article if (state.pageStatus == 4) { //判断是拖拽的还是点击添加进来的 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.article.map(item => item.y), 0); console.log(data); //设置数据在构建json中的位置 let dataSort = state.pageData.article.length; state.pageData.article.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.article.map(item => item.y), 0); console.log(data); //设置数据在构建json中的位置 let dataSort = state.pageData.article.length; state.pageData.article.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.article); //需要调查一下这里最后的1，1 state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1); try { state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "block"; } catch { } } } //pageStatus==5 搜索页 search if (state.pageStatus == 5) { } //pageStatus==6 自定义列表页 aloneList if (state.pageStatus == 6) { } //pageStatus==7 自定义详情页 aloneArticle if (state.pageStatus == 7) { } }, //删除板块 deleteModule(state, data) { //data.i = id //data.dataSort = dataSort //pageStatus==1 首页 if (state.pageStatus == 1) { //开始复制 start------------------------------------------------------------> //必须通过重新查找id的方式来删除 // const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i); // if (indexToRemove !== -1) { // state.pageData.index.splice(indexToRemove, 1); // Message.success('模块已删除！'); // console.log('模块已删除，当前的页面构建数据为：', state.pageData.index); // } else { // Message.warning('未找到要删除的模块！'); // } //开始复制 end------------------------------------------------------------> // base 0.0.2 如果使用splice方法删除sort，当你就剩下最后一个的时候，会出现找不到那个元素的问题 // state.pageData.index.splice(data.dataSort,1); // Message.success('模块已删除！'); // console.log(state.pageData.index); // 深拷贝整个数组 try { // 1. 先找到要删除的模块 const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i); if (indexToRemove === -1) { Message.warning('未找到要删除的模块！'); return; } // 2. 创建新的数组，不包含要删除的模块 const newModules = state.pageData.index.filter(item => item.i !== data.i); // 3. 重新计算所有模块的 dataSort newModules.forEach((module, index) => { module.dataSort = index; }); // 4. 使用 Vue.set 更新整个数组 Vue.set(state.pageData, 'index', newModules); // 5. 强制更新 gridKey 以触发视图重新渲染 state.gridKey += 1; Message.success('模块已删除！'); console.log('模块已删除，当前的页面构建数据为：', state.pageData.index); } catch (error) { console.error('删除模块时发生错误:', error); Message.error('删除模块时发生错误，请重试！'); } } //pageStatus==2 分类页 if (state.pageStatus == 2) { } //pageStatus==3 列表页 if (state.pageStatus == 3) { //开始复制 start------------------------------------------------------------> //必须通过重新查找id的方式来删除 // const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i); // if (indexToRemove !== -1) { // state.pageData.list.splice(indexToRemove, 1); // Message.success('模块已删除！'); // console.log('模块已删除，当前的页面构建数据为：', state.pageData.list); // } else { // Message.warning('未找到要删除的模块！'); // } try { // 1. 先找到要删除的模块 const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i); if (indexToRemove === -1) { Message.warning('未找到要删除的模块！'); return; } // 2. 创建新的数组，不包含要删除的模块 const newModules = state.pageData.list.filter(item => item.i !== data.i); // 3. 重新计算所有模块的 dataSort newModules.forEach((module, index) => { module.dataSort = index; }); // 4. 使用 Vue.set 更新整个数组 Vue.set(state.pageData, 'list', newModules); // 5. 强制更新 gridKey 以触发视图重新渲染 state.gridKey += 1; Message.success('模块已删除！'); console.log('模块已删除，当前的页面构建数据为：', state.pageData.list); } catch (error) { console.error('删除模块时发生错误:', error); Message.error('删除模块时发生错误，请重试！'); } //开始复制 end------------------------------------------------------------> } //pageStatus==4 详情页 if (state.pageStatus == 4) { //开始复制 start------------------------------------------------------------> //必须通过重新查找id的方式来删除 // const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i); // if (indexToRemove !== -1) { // state.pageData.article.splice(indexToRemove, 1); // Message.success('模块已删除！'); // console.log('模块已删除，当前的页面构建数据为：', state.pageData.article); // } else { // Message.warning('未找到要删除的模块！'); // } //开始复制 end------------------------------------------------------------> try { // 1. 先找到要删除的模块 const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i); if (indexToRemove === -1) { Message.warning('未找到要删除的模块！'); return; } // 2. 创建新的数组，不包含要删除的模块 const newModules = state.pageData.article.filter(item => item.i !== data.i); // 3. 重新计算所有模块的 dataSort newModules.forEach((module, index) => { module.dataSort = index; }); // 4. 使用 Vue.set 更新整个数组 Vue.set(state.pageData, 'list', newModules); // 5. 强制更新 gridKey 以触发视图重新渲染 state.gridKey += 1; Message.success('模块已删除！'); console.log('模块已删除，当前的页面构建数据为：', state.pageData.article); } catch (error) { console.error('删除模块时发生错误:', error); Message.error('删除模块时发生错误，请重试！'); } } //pageStatus==5 搜索页 if (state.pageStatus == 5) { } //pageStatus==6 自定义列表页 if (state.pageStatus == 6) { } //pageStatus==7 自定义详情页 if (state.pageStatus == 7) { } }, //设置组件样式 setComponentStyleNumber(state, data) { let id = state.editSectorId; let dataSort = state.editDataSort; let sort = state.editComponentSort; let num = state.editComponentStyle; console.log(id, dataSort, sort, num); //pageStatus==1 首页 if (state.pageStatus == 1) { //开始复制 start------------------------------------------------------------> // 获取当前模块数据并进行深拷贝 let module = JSON.parse(JSON.stringify(state.pageData.index[dataSort])); //module.content.componentList[sort].component_style = num; //确保修改属性时 Vue 能监控到变化 Vue.set(module.content.componentList, sort, { ...module.content.componentList[sort], component_style: num }); // 拷贝后直接替换原来的板块 //state.pageData.index[id] = module; // 使用Vue.set来强制视图更新 Vue.set(state.pageData.index, dataSort, module); console.log("当前的板块数据为："); console.log(state.pageData.index); //开始复制 end------------------------------------------------------------> } //pageStatus==2 分类页 if (state.pageStatus == 2) { } //pageStatus==3 列表页 if (state.pageStatus == 3) { //开始复制 start------------------------------------------------------------> // 获取当前模块数据并进行深拷贝 let module = JSON.parse(JSON.stringify(state.pageData.list[dataSort])); //module.content.componentList[sort].component_style = num; //确保修改属性时 Vue 能监控到变化 Vue.set(module.content.componentList, sort, { ...module.content.componentList[sort], component_style: num }); // 拷贝后直接替换原来的板块 //state.pageData.index[id] = module; // 使用Vue.set来强制视图更新 Vue.set(state.pageData.list, dataSort, module); console.log("当前的板块数据为："); console.log(state.pageData.list); //开始复制 end------------------------------------------------------------> } //pageStatus==4 详情页 if (state.pageStatus == 4) { //开始复制 start------------------------------------------------------------> // 获取当前模块数据并进行深拷贝 let module = JSON.parse(JSON.stringify(state.pageData.article[dataSort])); //module.content.componentList[sort].component_style = num; //确保修改属性时 Vue 能监控到变化 Vue.set(module.content.componentList, sort, { ...module.content.componentList[sort], component_style: num }); // 拷贝后直接替换原来的板块 //state.pageData.index[id] = module; // 使用Vue.set来强制视图更新 Vue.set(state.pageData.article, dataSort, module); console.log("当前的板块数据为："); console.log(state.pageData.article); //开始复制 end------------------------------------------------------------> } //pageStatus==5 搜索页 if (state.pageStatus == 5) { } //pageStatus==6 自定义列表页 if (state.pageStatus == 6) { } //pageStatus==7 自定义详情页 if (state.pageStatus == 7) { } }, //保存全局广告的数据 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) //pageStatus==1 首页 if (state.pageStatus == 1) { //开始复制 start------------------------------------------------------------> const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id); console.log("要修改的模块id为：") //找到要修改的板块 console.log(data.sort) //找到要修改的板块 console.log(targetModuleIndex) //找到要修改的板块 //组件类型 1=新闻 2=广告 //注意，vue有一个bug就是，当你修改复杂对象的时候，如果对象的内部是数组 //vue可能无法检测到变化，而当你修改无法被检测变化的数据时，就会把所有数据都修改成相同的值 //解决办法是通过vue的set方法将整个对象，即你的数组外层那个对象进行深拷贝，然后修改完再替换回去 //1=新闻 if (state.editComponentType == 1) { // 获取当前模块数据并进行深拷贝 let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块 // 更新 category_id 和 pageSize 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 // 使用Vue.set来强制视图更新 Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块 console.log("当前的板块数据为："); console.log(state.pageData.index); } //2=广告 if (state.editComponentType == 2) { 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); //设置用于回显的广告名，否则会导致回显的广告名和实际的广告名不一致 //因为广告名没有默认值，这会导致watch监听不到，所以这里需要手动设置 state.componentViewData.adName = data.data.adName; } //开始复制 end------------------------------------------------------------> } //pageStatus==2 频道页 if (state.pageStatus == 2) {} //pageStatus==3 列表页 if (state.pageStatus == 3) { //开始复制 start------------------------------------------------------------> //1=新闻 const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id); console.log("要修改的模块id为：") //找到要修改的板块 console.log(data.sort) //找到要修改的板块 console.log(targetModuleIndex) //找到要修改的板块 if (state.editComponentType == 1) { // 获取当前模块数据并进行深拷贝 let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块 // 更新 category_id 和 pageSize 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 // 使用Vue.set来强制视图更新 Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块 console.log("当前的板块数据为："); console.log(state.pageData.list); } //2=广告 if (state.editComponentType == 2) { 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); state.componentViewData.adName = data.data.adName; } //开始复制 end------------------------------------------------------------> } //pageStatus==4 详情页 if (state.pageStatus == 4) { //开始复制 start------------------------------------------------------------> const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id); console.log("要修改的模块id为：") //找到要修改的板块 console.log(data.sort) //找到要修改的板块 console.log(targetModuleIndex) //找到要修改的板块 if (state.editComponentType == 1) { // 获取当前模块数据并进行深拷贝 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 // 使用Vue.set来强制视图更新 Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块 console.log("当前的板块数据为："); console.log(state.pageData.article); } //2=广告 if (state.editComponentType == 2) { 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); state.componentViewData.adName = data.data.adName; } //开始复制 end------------------------------------------------------------> } //pageStatus==5 搜索页 if (state.pageStatus == 5) {} //pageStatus==6 底部列表页 if (state.pageStatus == 6) {} //pageStatus==7 底部详情页 if (state.pageStatus == 7) {} }, //通过按钮移动板块 (暂时停用) moveModule(state, data) { Message.error("该功能暂时禁用") // pageStatus == 1 首页 // if (state.pageStatus == 1) { // const moveType = data.moveType; // const moduleId = data.i; // const modules = state.pageData.index; // // 深拷贝 modules，避免直接操作原数据 // const newModules = JSON.parse(JSON.stringify(modules)); // // 查找模块在数组中的实际索引 // const thisIndex = newModules.findIndex(module => module.i === moduleId); // if (thisIndex === -1) { // Message.error('模块未找到！'); // return; // } // const thisY = newModules[thisIndex].y; // let thatY; // if (moveType === 'up') { // thatY = Math.max( // ...newModules.filter(item => item.y < thisY).map(item => item.y) // ); // if (thatY === -Infinity) { // Message.error('已经是顶部了！'); // return; // } // const thatIndex = newModules.findIndex(item => item.y === thatY); // if (thatIndex === -1) { // Message.error('上方模块未找到！'); // return; // } // // 交换y值 // [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y]; // } else if (moveType === 'down') { // thatY = Math.min( // ...newModules.filter(item => item.y > thisY).map(item => item.y) // ); // if (thatY === Infinity) { // Message.error('已经是底部了！'); // return; // } // const thatIndex = newModules.findIndex(item => item.y === thatY); // if (thatIndex === -1) { // Message.error('下方模块未找到！'); // return; // } // // 交换y值 // [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y]; // } else { // Message.error('未知的移动类型！'); // return; // } // // 交换后对模块进行排序以确保顺序一致 // newModules.sort((a, b) => a.y - b.y); // // 使用 Vue.set 强制更新数组，确保视图更新 // //Vue.set(state.pageData, 'index', newModules); // 这里更新整个数组 // state.pageData.index = newModules; // //state.gridKey+=1; // console.log(state.pageData.index); // 打印查看是否已修改 // } // // 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) {} }, //从外部拖拽板块 drag(state, data) { // pageStatus == 1 首页 if (state.pageStatus == 1) { //开始复制 start------------------------------------------------------------> let parentRect = document.getElementById('content').getBoundingClientRect(); //console.log(parentRect); 获取画布 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; } //state.gridlayoutObj //如果没有占位符就创建一个 if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) { state.pageData.index.push({ x: (state.pageData.index.length * 2) % (this.colNum || 12), y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom w: 12, h: 2, i: 'drop', }); } //如果已经存在占位符 let index = state.pageData.index.findIndex(item => item.i === 'drop'); if (index !== -1) { try { state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none"; } catch { } 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 = state.pageData.index[index].x; state.DragPos.y = state.pageData.index[index].y; } if (mouseInGrid === false) { state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12); state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop'); } } //开始复制 end------------------------------------------------------------> } // pageStatus == 2 分类页 if (state.pageStatus == 2) { } // pageStatus == 3 列表页 if (state.pageStatus == 3) { //开始复制 start------------------------------------------------------------> let parentRect = document.getElementById('content').getBoundingClientRect(); //console.log(parentRect); 获取画布 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 && (state.pageData.list.findIndex(item => item.i === 'drop')) === -1) { state.pageData.list.push({ x: (state.pageData.list.length * 2) % (this.colNum || 12), y: state.pageData.list.length + (this.colNum || 12), // puts it at the bottom w: 12, h: 2, i: 'drop', }); } //如果已经存在占位符 let index = state.pageData.list.findIndex(item => item.i === 'drop'); if (index !== -1) { try { state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display = "none"; } catch { } 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 = state.pageData.list[index].x; state.DragPos.y = state.pageData.list[index].y; } if (mouseInGrid === false) { state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12); state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop'); } } //开始复制 end------------------------------------------------------------> } // pageStatus == 4 详情页 if (state.pageStatus == 4) { //开始复制 start------------------------------------------------------------> let parentRect = document.getElementById('content').getBoundingClientRect(); //console.log(parentRect); 获取画布 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 && (state.pageData.article.findIndex(item => item.i === 'drop')) === -1) { state.pageData.article.push({ x: (state.pageData.article.length * 2) % (this.colNum || 12), y: state.pageData.article.length + (this.colNum || 12), // puts it at the bottom w: 12, h: 2, i: 'drop', }); } //如果已经存在占位符 let index = state.pageData.article.findIndex(item => item.i === 'drop'); if (index !== -1) { try { state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "none"; } catch { } 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 = state.pageData.article[index].x; state.DragPos.y = state.pageData.article[index].y; } if (mouseInGrid === false) { state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12); state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop'); } } //开始复制 end------------------------------------------------------------> } // pageStatus == 5 搜索页 if (state.pageStatus == 5) { } // pageStatus == 6 自定义列表页 if (state.pageStatus == 6) { } // pageStatus == 7 自定义详情页 if (state.pageStatus == 7) { } }, //拖拽结束 定位落点 dragend(state, data) { // pageStatus == 1 首页 if (state.pageStatus == 1) { //开始复制 start------------------------------------------------------------> //获取画布尺寸 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); state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop'); // UNCOMMENT below if you want to add a grid-item /* this.layout.push({ x: DragPos.x, y: DragPos.y, w: 1, h: 1, i: DragPos.i, }); this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1); try { this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block"; } catch { } */ let sendData = { source: "drag",//添加时判断此模块来自外部拖拽，而不是点击 type: data.type, h: data.h, jsonData: data.jsonData, x: state.DragPos.x, y: state.DragPos.y, w: 12, } //开发到这里了，注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法 this.commit('template/addModule', sendData); } //开始复制 end------------------------------------------------------------> } // pageStatus == 2 分类页 if (state.pageStatus == 2) { } // pageStatus == 3 列表页 if (state.pageStatus == 3) { //开始复制 start------------------------------------------------------------> //获取画布尺寸 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); state.pageData.list = state.pageData.list.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, } this.commit('template/addModule', sendData); } //开始复制 end------------------------------------------------------------> } // pageStatus == 4 详情页 if (state.pageStatus == 4) { //开始复制 start------------------------------------------------------------> //获取画布尺寸 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); state.pageData.article = state.pageData.article.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, } this.commit('template/addModule', sendData); } //开始复制 end------------------------------------------------------------> } // pageStatus == 5 搜索页 if (state.pageStatus == 5) { } // pageStatus == 6 自定义列表页 if (state.pageStatus == 6) { } // pageStatus == 7 自定义详情页 if (state.pageStatus == 7) { } }, //修改首页板块高度 setModuleHeight(state, data) { // pageStatus == 1 首页 if (state.pageStatus == 1) { console.log(data); state.pageData.index[data.i].h = data.h; console.log(state.pageData.index[data.i]); } // pageStatus == 2 分类页 if (state.pageStatus == 2) { } // pageStatus == 3 列表页 if (state.pageStatus == 3) { console.log(data); state.pageData.list[data.i].h = data.h; console.log(state.pageData.list[data.i]); } // pageStatus == 4 详情页 if (state.pageStatus == 4) { console.log(data); state.pageData.article[data.i].h = data.h; console.log(state.pageData.article[data.i]); } // pageStatus == 5 搜索页 if (state.pageStatus == 5) { } // pageStatus == 6 自定义列表页 if (state.pageStatus == 6) { } // pageStatus == 7 自定义详情页 if (state.pageStatus == 7) { } }, //格式化模板信息 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 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; 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` 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); // if (data.type == "index") { // // 不要把数据直接保存到 state.webSiteData.template 中，否则无法删除 // websiteData.push(clonedData.data[index].content); // } websiteData.push(clonedData.data[index].content); } // 保存到对应的页面 json 中 if (data.type == "index") { state.webSiteData.template.index = websiteData; } if (data.type == "list") { state.webSiteData.template.list = websiteData; } if (data.type == "article") { state.webSiteData.template.article = websiteData; } }, //保存模板 saveTemplate(state) { //第一步： //保存网站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){ if(data.data.index[index].content.componentList[i].componentData.category_id==""){ 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++; } } } //全局广告特殊处理 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) { state.loading = true; const randomIndex = Math.floor(Math.random() * 2); // Generates a random number between 1 and 2 console.log(`随机生成的数字是: ${randomIndex}`); //console.log(randomIndex1) //console.log(randomIndex2) //Message.warning("该功能研发中"); // 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) { Message.warning("暂无模板可用！"); state.loading = false; } // pageStatus == 4 详情页 if (state.pageStatus == 4) { Message.warning("暂无模板可用！"); state.loading = false; } // 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.显示画板组件数据 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，则验证是否已经关联导航池 addWebsiteTemplateintel({ commit }, data) { return new Promise((resolve, reject) => { addWebsiteTemplateintel(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 保存用户选择的风格 addWebsiteTemplateclassintel({ commit }, data) { return new Promise((resolve, reject) => { addWebsiteTemplateclassintel(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 保存模板 addWebsiteTemplate({ commit }, data) { return new Promise((resolve, reject) => { addWebsiteTemplate(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.构建网站json end------------------------------------------------------------> } export default { namespaced: true, state, mutations, actions }