开始调用模板构建页面接口

开始调用模板构建页面接口

src/api/cms.js

@@ -5,7 +5,7 @@ import request from '@/utils/request'
 //1.1 获取网站基本信息
 export function getSiteInfo(data) {
   return request({
-    url: 'web/getSiteInfo',
+    url: '/web/getSiteInfo',
     method: 'post',
     data
   })

src/api/template.js

@@ -74,4 +74,48 @@ export function getWebsiteTemplateclassintel(data) {
   })
 }
 
+//1.9 保存模板配置
+export function addWebsiteTemplate(data) {
+  return request({
+    url: '/website/addWebsiteTemplate',
+    method: 'post',
+    data
+  })
+}
+
+//1.10 获取模板配置信息
+export function getWebsiteTemplateInfo(params) {
+  return request({
+    url: '/website/getWebsiteTemplateInfo',
+    method: 'get',
+    params
+  })
+}
+
+//1.11 预览数据
+export function getWebsiteTemplateData(params) {
+  return request({
+    url: '/website/getWebsiteTemplateData',
+    method: 'get',
+    params
+  })
+}
+
+//1.12 板块列表
+export function templateSectorList(params) {
+  return request({
+    url: '/website/templateSectorList',
+    method: 'get',
+    params
+  })
+}
+
+//1.13 组件列表
+export function sectorComponentList(params) {
+  return request({
+    url: '/website/sectorComponentList',
+    method: 'get',
+    params
+  })
+}
 //自助建站 end ------------------------------------->

src/store/modules/template.js

@@ -1,8 +1,8 @@
-//cms中的接口 用于模板中的职能，导航池
-import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,selectWebsiteArticleInfo,getWebsiteCategory} from '@/api/cms'
+//cms中的接口 获取网站基本信息，网站导航，网站底部导航，网站行政区划
+import {getSiteInfo,getSiteCategory,getFooterCategoryList,selectWebsiteArea} from '@/api/cms'
 //自助建站的接口 用于添加基本信息
 import {getWebsiteintel,addWebsiteTemplateintel,getWebsiteTemplateintel,upWebsiteTemplateintel,getAllTemplateClass,getWebsiteTemplateList,addWebsiteTemplateclassintel,
-  getWebsiteTemplateclassintel} from '@/api/template'
+  getWebsiteTemplateclassintel,addWebsiteTemplate,getWebsiteTemplateInfo,getWebsiteTemplateData} from '@/api/template'
 
 import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
@@ -15,6 +15,7 @@ import randomTemplateJson from '@/utils/templateJson/index/1.js';//首页
 const state = {
   //0.全局配置 start------------------------------------------------------------> 
   editWebsiteId: "",//当前编辑网站的id
+  editWebsiteClass:"",//当前编辑网站的风格
   stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
   //0.全局配置 end------------------------------------------------------------>
   
@@ -28,7 +29,7 @@ const state = {
       
     ],//首页
     class:[],//分类页
-    list:[],//列表页bang
+    list:[],//列表页
     article:[],//详情页
     search:[],//搜索页
     aloneList:[],//自定义列表页
@@ -85,11 +86,11 @@ const state = {
   webSiteData:{
     //1.base网站基本信息
     base:{
-      websiteId:1,//网站id
+      websiteId:"",//网站id
     },
     //2.style信息
     style:{
-      styleId:1,//风格id
+      styleId:"",//风格id
     },
     //3.板块信息 header,menu,footer 是页面自带的无需构建
     template:{  
@@ -121,6 +122,10 @@ const mutations = {
   setEditWebsiteId(state,id){
     state.editWebsiteId = id;
   },
+  //设置网站的风格
+  setClassNumber(state,id){
+    state.editWebsiteClass = id;
+  },
   //展示步骤
   showStepStatus(state){
     state.stepStatus = true;
@@ -1204,7 +1209,11 @@ const mutations = {
     this.commit('template/formatTemplateInfo',{data:state.pageData.list,type:"list"});
     //格式化article的信息
     this.commit('template/formatTemplateInfo',{data:state.pageData.article,type:"article"});
-    console.log(state.webSiteData);
+    // console.log(state.webSiteData);
+    // console.log(state.editWebsiteId)
+    //给与网站id和模板风格id
+    state.webSiteData.base.websiteId = state.editWebsiteId;
+    state.webSiteData.style.styleId = state.editWebsiteClass;
   },
   //随机生成模板
   randomTemplate(state){
@@ -1273,7 +1282,7 @@ const mutations = {
 
 const actions = {
   //1.显示画板组件数据 start------------------------------------------------------------>
-  //获取网站基本信息
+  //1.1 获取网站基本信息
   getSiteInfo({commit},data){
     return new Promise((resolve, reject) => {
       getSiteInfo(data).then(response => {
@@ -1284,7 +1293,7 @@ const actions = {
       })
     })
   },
-  //获取网站导航池
+  //1.2 获取网站导航池
   getSiteCategory({commit},data){
     return new Promise((resolve, reject) => {
       getSiteCategory(data).then(response => {
@@ -1295,42 +1304,21 @@ const actions = {
       })
     })
   },
-  //设置行政区划
-  selectWebsiteArea({commit},data){
-    return new Promise((resolve, reject) => {
-      selectWebsiteArea(data).then(response => {
-        commit('setArea', response.data);
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //获取新闻列表
-  getWebsiteArticlesList({commit},data){
+  //1.3 获取网站底部导航
+  getFooterCategoryList({commit},data){
     return new Promise((resolve, reject) => {
-      getWebsiteArticlesList(data).then(response => {
+      getFooterCategoryList(data).then(response => {
         resolve(response)
       }).catch(error => {
         reject(error)
       })
     })
   },
-  //获取新闻详情
-  selectWebsiteArticleInfo({commit},data){
-    return new Promise((resolve, reject) => {
-      selectWebsiteArticleInfo(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //获取全部导航池
-  getWebsiteCategory({commit},data){
+  //1.4 获取行政区划
+  selectWebsiteArea({commit},data){
     return new Promise((resolve, reject) => {
-      getWebsiteCategory(data).then(response => {
-        commit('setWebsiteCategory', response.data);
+      selectWebsiteArea(data).then(response => {
+        commit('setArea', response.data);
         resolve(response)
       }).catch(error => {
         reject(error)
@@ -1340,7 +1328,7 @@ const actions = {
   //1.显示画板组件数据 end------------------------------------------------------------>
   
   //2.构建网站json start------------------------------------------------------------>
-  //搜索网站
+  //2.1 搜索网站
   getWebsiteintel({commit},data){
     return new Promise((resolve, reject) => {
       getWebsiteintel(data).then(response => {
@@ -1350,7 +1338,7 @@ const actions = {
       })
     })
   },
-  //添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
+  //2.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
   addWebsiteTemplateintel({commit},data){
     return new Promise((resolve, reject) => {
       addWebsiteTemplateintel(data).then(response => {
@@ -1360,7 +1348,7 @@ const actions = {
       })
     })
   },
-  //获取网站基本信息
+  //2.3 获取网站基本信息
   getWebsiteTemplateintel({commit},data){
     return new Promise((resolve, reject) => {
       getWebsiteTemplateintel(data).then(response => {
@@ -1370,7 +1358,7 @@ const actions = {
       })
     })
   },
-  //修改网站基本信息
+  //2.4 修改网站基本信息
   upWebsiteTemplateintel({commit},data){
     return new Promise((resolve, reject) => {
       upWebsiteTemplateintel(data).then(response => {
@@ -1380,7 +1368,7 @@ const actions = {
       })
     })
   },
-  //获取所有风格
+  //2.5 获取所有风格
   getAllTemplateClass({commit},data){
     return new Promise((resolve, reject) => {
       getAllTemplateClass(data).then(response => {
@@ -1390,7 +1378,7 @@ const actions = {
       })
     })
   },
-  //搜索并获取所有网站模板
+  //2.6 搜索并获取所有网站风格
   getWebsiteTemplateList({commit},data){
     return new Promise((resolve, reject) => {
       getWebsiteTemplateList(data).then(response => {
@@ -1400,7 +1388,7 @@ const actions = {
       })
     })
   },
-  //保存用户选择的模板
+  //2.7 保存用户选择的风格
   addWebsiteTemplateclassintel({commit},data){
     return new Promise((resolve, reject) => {
       addWebsiteTemplateclassintel(data).then(response => {
@@ -1410,7 +1398,7 @@ const actions = {
       })
     })
   },
-  //获取用户选择的模板
+  //2.8 获取用户选择的风格
   getWebsiteTemplateclassintel({commit},data){
     return new Promise((resolve, reject) => {
       getWebsiteTemplateclassintel(data).then(response => {
@@ -1420,6 +1408,36 @@ const actions = {
       })
     })
   },
+  //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.构建网站json end------------------------------------------------------------>
 }
 

src/views/template/templateBase.vue

@@ -55,12 +55,12 @@
           </el-form-item>
           <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="contact_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.contact_number" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.contact_number" placeholder="请输入.." maxlength="255"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="company_address" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_address" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_address" placeholder="请输入.." maxlength="255"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="项目LOGO：" class="custom-align-right" prop="project_logo">
@@ -80,12 +80,12 @@
           </el-form-item>
           <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="project_name" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.project_name" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.project_name" placeholder="请输入.." maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="project_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.project_url" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.project_url" placeholder="请输入.."  maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="公司LOGO：" class="custom-align-right" prop="company_logo">
@@ -105,42 +105,42 @@
           </el-form-item>
           <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="company_name" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_name" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_name" placeholder="请输入.." maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="company_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_url" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_url" placeholder="请输入.." maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="icp_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.icp_number" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.icp_number" placeholder="请输入.." maxlength="50"></el-input>
             </div>  
           </el-form-item>
           <el-form-item label="网站备链接：" :label-width="formLabelWidth" prop="icp_number_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.." maxlength="100"></el-input>
             </div>  
           </el-form-item>
           <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="record_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.record_number" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.record_number" placeholder="请输入.." maxlength="50"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="网安备案号链接" :label-width="formLabelWidth" prop="record_number_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.record_number_url" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.record_number_url" placeholder="请输入.." maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="客服QQ号：" :label-width="formLabelWidth" prop="customer_service_qq" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.." maxlength="50"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="通联QQ号：" :label-width="formLabelWidth" prop="communications" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.communications" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.communications" placeholder="请输入.." maxlength="50"></el-input>
             </div>
           </el-form-item>
         </div>

src/views/template/templateCreat.vue

@@ -100,17 +100,26 @@ export default {
         this.$router.push({
           path: '/templateStyle',
           query: {
-            id: this.editId
+            website_id:this.$route.query.website_id,
+            step:this.$route.query.step
           }
         }); 
       })
     },
     //下一步
     gotoList(){
-      this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
-      this.$router.push({
-        path: '/templateList'
-      });
+      this.$store.dispatch('template/addWebsiteTemplate',{webSiteData:this.$store.state.template.webSiteData}).then(res=>{
+        if(res.code==200){
+          
+        }else{
+          this.$message.error(res.message);
+        }
+      })
+
+      // this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
+      // this.$router.push({
+      //   path: '/templateList'
+      // });
     },
     //保存模板
     saveTemplate(){
@@ -150,17 +159,33 @@ export default {
       this.$store.commit('template/randomTemplate');
     },
     //0.全局操作 end ------------------------------------------------------------>
+
+    //1.查询网站基本信息 start ------------------------------------------------------------>
+    getWebsiteBase(){
+      this.$store.dispatch('template/getWebsiteTemplateclassintel',{website_id:this.$route.query.website_id}).then(res=>{
+        if(res.code==200){
+          //console.log(res.data.tid)
+          //console.log(res.data.website_id)
+          this.$store.commit('template/setEditWebsiteId',res.data.website_id);
+          this.$store.commit('template/setClassNumber',res.data.tid);
+        }else{
+          this.$message.error(res.message);
+        }
+      })
+    }
+    //1.查询网站基本信息 end ------------------------------------------------------------>
   },
   mounted(){
-    //设置网站id
-    this.websiteId = this.$route.query.id;
-    this.$store.commit('template/setEditWebsiteId',this.websiteId);
-    //获取网站导航池
+    //1.获得网站id和模板风格tid
+    this.getWebsiteBase();
+    //2.获取网站导航池
     this.$store.dispatch('template/getSiteCategory',{website_id:this.websiteId});
-    //获取网站详情
+    //3.获取网站详情
     this.$store.dispatch('template/getSiteInfo',{id:this.websiteId});
-    //获取地区
-    this.$store.dispatch('template/selectWebsiteArea',{});
+
+    //获取行政区划
+    //this.$store.dispatch('template/selectWebsiteArea',{});
+    //获取网站底部导航
   }
 }
 </script>