自助建站流程基本完成

自助建站流程基本完成

src/api/template.js

@@ -50,7 +50,7 @@ export function getAllTemplateClass(data) {
 //1.6 搜索并获取所有网站模板
 export function getWebsiteTemplateList(data) {
   return request({
-    url: '/website/getWebsiteTemplateList',
+    url: '/public/getWebsiteTemplateList',
     method: 'post',
     data
   })
@@ -155,5 +155,21 @@ export function addWebPageType(data) {
     })
 }
 
+//1.18 验证该网站是否有未结束的订单
+export function checkWebsiteEdit(data) {
+    return request({
+        url: '/website/checkWebsiteEdit',
+        method: 'post',
+        data
+    })
+}
 
+//1.19 回显模板
+export function getWebsiteTemplate(data) {
+    return request({
+        url: '/public/getWebsiteTemplate',
+        method: 'post',
+        data
+    })
+}
 //自助建站 end ------------------------------------->

src/store/modules/template.js

@@ -3,7 +3,8 @@ import { getSiteInfo, getSiteCategory, getFooterCategoryList} from '@/api/cms'
 //自助建站的接口 用于添加基本信息
 import {
     getWebsiteintel, checkWebsiteBuild, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, getWebsiteTemplateList, addWebsiteTemplateclassintel,
-    getWebsiteTemplateclassintel, saveWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll, addTwinAdPlace, getWebPageType, addWebPageType
+    getWebsiteTemplateclassintel, saveWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll, addTwinAdPlace, getWebPageType, 
+    addWebPageType, checkWebsiteEdit, getWebsiteTemplate
 } from '@/api/template'
 
 import { Message,MessageBox } from 'element-ui'; //注意在这里引入是非常不符合规范的
@@ -1424,6 +1425,7 @@ const mutations = {
         //第三步：
         //检测模板数据完整度，如果不完整阻止用户保存
         this.commit('template/pageCheck', {data: state.pageData});
+
     },
     //检测模板完整度
     pageCheck(state, data) {
@@ -1474,6 +1476,10 @@ const mutations = {
         }
         state.pageDataStatus.index.adPrice = noAdPrice;
     },
+    //回显模板内容
+    setWebsiteTemplate(state, data) {
+        state.pageData = data;
+    },
     //随机生成模板
     randomTemplate(state) {
         state.loading = true;
@@ -1781,6 +1787,26 @@ const actions = {
             })
         })
     },
+    //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------------------------------------------------------------>
 }
 

src/views/template/public/checkWindow.vue

@@ -200,6 +200,9 @@ export default {
             if(this.$store.state.template.webSiteData.ad.aloneList.length>0){}
             if(this.$store.state.template.webSiteData.ad.aloneArticle.length>0){}
 
+            //获得画布上得内容，准备回显
+            let canvasData = JSON.stringify(this.$store.state.template.pageData);
+
             //第二步：创建广告位
             this.$store.dispatch('template/addTwinAdPlace',data).then(res=>{
                 if(res.code==200){
@@ -208,10 +211,16 @@ export default {
                     let data = JSON.stringify(this.$store.state.template.webSiteData);
                     this.$store.dispatch('template/saveWebsiteTemplate',{
                         website_id:this.$route.query.website_id,
-                        template_data:data
+                        template_data:data,
+                        canvas_data:canvasData
                     }).then(res=>{
                         if(res.code==200){
                             console.log("保存成功！")
+                            this.$message.success("模板保存成功！")
+                            this.$router.push({
+                                path: '/templateList'
+                            });
+                            this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
                         }else{
                             this.$message.error(res.message);
                         }

src/views/template/templateBase.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="mainBox">
-        <div class="layerBox" v-if="this.$store.state.template.stepStatus">
+        <div class="layerBox">
             <tableTitle :name="templateStepTitle" />
             <step :activeNumber="1" />
         </div>
@@ -80,9 +80,8 @@
             </div>
         </el-form>
         <div class="bottomBtnBox">
-            <el-button type="info" @click="goToWebsite">返回</el-button>
-            <el-button type="primary" @click="editData" v-if="this.$route.query.step != undefined">编辑并进入下一步</el-button>
-            <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
+            <el-button type="info" @click="goToWebsite">退出</el-button>
+            <el-button type="primary" @click="addData">下一步</el-button>
         </div>
     </div>
 </template>
@@ -169,7 +168,7 @@ export default {
                     this.$router.push({
                         path: '/templateStyle',
                         query: {
-                            id: this.editId
+                            website_id: this.$route.query.website_id
                         }
                     });
                 } else {
@@ -177,42 +176,30 @@ export default {
                 }
             })
         },
-        //提交表单 start ------------------------------------------------------------>
-
-        //2.编辑表单 start ------------------------------------------------------------>
-        //2.1回显数据
+        //1.2回显数据
         getWebsiteBase(website_id) {
             this.$store.dispatch('template/getWebPageType', { website_id: this.$route.query.website_id }).then(res => {
                 if (res.code == 200) {
                     this.pageData = res.data;
+                    if(res.data.page_type==0){
+                        console.log("用户未使用搜索页！")
+                        this.form.page_type = ["1", "2", "3", "4", "6", "7"];
+                    }else{
+                        console.log("用户已启用搜索页！")
+                        this.form.page_type = ["1", "2", "3", "4", "5", "6", "7"];
+                    }
                 } else {
                     this.$message.error(res.message);
                 }
             })
         },
-        //2.2提交编辑的数据
-        editData() {
-           
-        },
-        //2.编辑表单 end ------------------------------------------------------------>
-
+        //1.提交表单 end ------------------------------------------------------------>
     },
     mounted() {
         //1.展示步骤
         this.$store.commit('template/showStepStatus');
         //2.判断是新建还是回显
-        if (this.$route.query.step != undefined) {
-            // console.log("编辑模板！")
-            // if (this.$route.query.website_id) {
-                
-            // } else {
-            //     this.$message.error("无法编辑，缺少关键参数！");
-            // }
-        } else {
-            console.log("添加模板基本信息！")
-            //显示页面类型
-            this.getWebsiteBase();
-        }
+        this.getWebsiteBase();
     }
 };
 </script>
@@ -271,46 +258,30 @@ export default {
         }
     }
 }
-
-
-
-
-
-
-
-
-
-
 ::v-deep .formDiv .el-form-item:last-child {
     margin-bottom: 0 !important;
 }
-
 ::v-deep .formDiv .el-form-item__content {
     margin-left: 0 !important;
 }
-
 ::v-deep .formDiv .el-form-item__label {
     float: none;
 }
-
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
 }
-
 ::v-deep .custom-textarea .el-textarea__inner {
     resize: none;
     /* 禁止用户拖拽调整大小 */
 }
-
 ::v-deep .custom-align-right .el-form-item__label {
     text-align: right;
     /* 设置标签文字右对齐 */
 }
-
 ::v-deep .el-select {
     width: 100%;
     /* 禁止用户拖拽调整大小 */
 }
-
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/templateCreat.vue

@@ -116,8 +116,7 @@ export default {
         this.$router.push({
           path: '/templateStyle',
           query: {
-            website_id:this.$route.query.website_id,
-            step:this.$route.query.step
+            website_id:this.$route.query.website_id
           }
         }); 
       })
@@ -178,6 +177,19 @@ export default {
     this.$store.dispatch('template/getAdminSiteInfo',{website_id:this.websiteId});
     //5.获取网站底部信息
     this.$store.dispatch('template/getAdminWebsiteFootAll',{website_id:this.websiteId});
+
+    //3.回显用户模板
+    this.$store.dispatch('template/getWebsiteTemplate',{website_id:this.websiteId}).then(res=>{
+        if(res.code==200){
+            //需要回显，把内容注入到画布
+            //console.log(res.data.canvas_data)
+            let canvasData = JSON.parse(res.data.canvas_data);
+            //把回显内容填入画布
+            this.$store.commit('template/setWebsiteTemplate',canvasData);
+        }else{
+            console.log("用户是首次创建模板，无需回显！")
+        }
+    });
   }
 }
 </script>

src/views/template/templateList.vue

@@ -38,10 +38,10 @@
           <el-table :data="tableData" style="width: 100%">
             <el-table-column fixed prop="website_id" label="网站id" width="80"></el-table-column>
             <el-table-column prop="website_name" label="网站名称"></el-table-column>
-            <el-table-column prop="name" label="风格名称" width="100">
+            <el-table-column prop="name" label="皮肤名称" width="100">
               <template slot-scope="scope">
-                <div v-if="scope.row.name==''||scope.row.name==null">未选择</div>
-                <div v-else>{{scope.row.name}}</div>
+                <div v-if="scope.row.template_name==''||scope.row.template_name==null">未选择</div>
+                <div v-else>{{scope.row.template_name}}</div>
               </template>
             </el-table-column>
             <el-table-column prop="page_type" label="模板页面">
@@ -219,43 +219,19 @@ export default {
     },
     //编辑网站
     getDataMain(website_id,step){
-      //根据步骤跳转到相应的页面
-    //   if(step==1){
-    //     this.$router.push({
-    //       path: '/templateBase',
-    //       query: {
-    //         website_id: website_id,
-    //         step:step
-    //       }
-    //     });
-    //   }
-    //   if(step==1){
-    //     this.$router.push({
-    //       path: '/templateBase',
-    //       query: {
-    //         website_id: website_id,
-    //         step:step
-    //       }
-    //     });
-    //   }
-    //   if(step==2){
-    //     this.$router.push({
-    //       path: '/templateStyle',
-    //       query: {
-    //         website_id: website_id,
-    //         step:step
-    //       }
-    //     });
-    //   }
-    //   if(step>2){
-    //     this.$router.push({
-    //       path: '/templateCreat',
-    //       query: {
-    //         website_id: website_id,
-    //         step:step
-    //       }
-    //     });
-    //   }
+        this.$store.dispatch('template/checkWebsiteEdit',{website_id:website_id}).then(res=> {
+            if(res.code==200){
+                //没有待清除的订单，可以进入编辑
+                this.$router.push({
+                    path: '/templateBase',
+                    query: {
+                        website_id: website_id
+                    }
+                });
+            }else{
+                this.$message.error(res.message)
+            }
+        })
     }
     //2.跳转操作 end ------------------------------------------------------------>
   },

src/views/template/templateStyle.vue

@@ -1,89 +1,93 @@
 <template>
-  <div class="mainBox">
-    <div class="layerBox" v-if="this.$store.state.template.stepStatus">
-      <tableTitle :name="templateStepTitle"/>
-      <step :activeNumber="2"/>
-    </div>
-    <!--搜索功能 start------------------------------------------------------------>
-    <div class="layerBox_search">
-      <div class="layerBoxLine">
-        <el-row>
-          <el-col :span="8">
-            <div class="searchBox">
-              <div class="searchTitle">按风格搜索</div>
-              <el-select v-model="getApiData.template_class_id" placeholder="请选择..">
-                <el-option
-                  v-for="item in allClass"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
+    <div class="mainBox">
+        <div class="layerBox">
+            <tableTitle :name="templateStepTitle" />
+            <step :activeNumber="2" />
+        </div>
+        <!--搜索功能 start------------------------------------------------------------>
+        <div class="layerBox_search">
+            <div class="layerBoxLine">
+                <el-row>
+                    <el-col :span="8">
+                        <div class="searchBox">
+                            <div class="searchTitle">按风格搜索</div>
+                            <el-select v-model="getApiData.template_class_id" placeholder="请选择..">
+                                <el-option v-for="item in allClass" :key="item.value" :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="searchBox">
+                            <div class="searchTitle">按关键字搜索</div>
+                            <el-input v-model="getApiData.keyword[0]" placeholder="根据描述推荐皮肤"></el-input>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="searchBtnBox">
+                            <el-button type="primary" @click="getData('search')">搜索</el-button>
+                        </div>
+                    </el-col>
+                </el-row>
             </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="searchBox">
-              <div class="searchTitle">按关键字搜索</div>
-              <el-input v-model="getApiData.keyword" placeholder="根据您的描述自动推荐皮肤"></el-input>
+        </div>
+        <!--搜索功能 end------------------------------------------------------------>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <div class="templateStyleBox">
+                <div class="templateStyleItem" v-for="(item, index) in tableData" :key="index">
+                    <div :class="['templateStyleItemBox', { active: item.status == 1 || item.id == userTemplateId }]" @click="useIt(item)">
+                        <img :src="item.template_img[0].url">
+                        <div class="templateStyleItemTitle">{{ item.template_name }}</div>
+                    </div>
+                </div>
             </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="searchBtnBox">
-              <el-button type="primary" @click="getData('search')">搜索</el-button>
+            <div class="paginationBox">
+                <el-pagination 
+                    @size-change="handleSizeChange" 
+                    :current-page="getApiData.page"
+                    @current-change="handleCurrentChange" 
+                    :page-size="10" 
+                    layout="total, prev, pager, next, jumper"
+                    :total="allCount"
+                >
+                </el-pagination>
             </div>
-          </el-col>
-        </el-row>
-      </div>
-    </div>
-    <!--搜索功能 end------------------------------------------------------------>
-    <!--表格内容 start------------------------------------------------------------>
-    <div class="layerBox">
-      <tableTitle :name="tableDivTitle"/>
-      <div class="templateStyleBox">
-        <div class="templateStyleItem" v-for="(item,index) in tableData" :key="index">
-          <div :class="['templateStyleItemBox',{active:item.status === 1}]" @click="useIt(item)">
-            <img :src="item.template_img[0].url">
-            <div class="templateStyleItemTitle">{{item.template_name}}</div>
-          </div>
         </div>
-      </div>
-      <div class="paginationBox">
-        <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
-      </div>
-    </div>
-    <div class="layerBox">
-      <tableTitle :name="useTemplateName"/>
-      <div class="thumbnailBox">
-        <div class="thumbnailItem" @click="showImg(item.url)" v-for="item in userData">
-          <div class="thumbnailItemBox">
-            <img :src="item.url">
-            <div class="thumbnailItemTitle">{{item.name}}</div>
-          </div>
+        <div class="layerBox">
+            <tableTitle :name="useTemplateName" />
+            <div class="thumbnailBox">
+                <div class="thumbnailItem" @click="showImg(item.url)" v-for="item in userData">
+                    <div class="thumbnailItemBox">
+                        <img :src="item.url">
+                        <div class="thumbnailItemTitle">{{ item.name }}</div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <!--步骤按钮 start------------------------------------------------------------>
-    <div class="btnBox">
-      <el-button type="info" @click="goBase">上一步</el-button>
-      <el-button type="primary" @click="editData" v-if="this.$route.query.step>=2">编辑并进入下一步</el-button>
-      <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
-    </div>
-    <!--步骤按钮 end------------------------------------------------------------>
-    <!--表格内容 end------------------------------------------------------------>
-
-    <!--弹出框 start------------------------------------------------------------>
-    <el-dialog title="模板详情" :visible.sync="windowStatus" :close-on-click-modal="false">
-      <div class="imgZoomBox">
-        <img :src="classPic">
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <div class="alignCenterBox">
-          <el-button @click="windowStatus=false">关闭</el-button>
+        <!--步骤按钮 start------------------------------------------------------------>
+        <div class="btnBox">
+            <el-button type="info" @click="goBase">上一步</el-button>
+            <el-button type="primary" @click="addData">下一步</el-button>
         </div>
-      </div>
-    </el-dialog>
-    <!--弹出框 end------------------------------------------------------------>
-  </div>
+        <!--步骤按钮 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!--弹出框 start------------------------------------------------------------>
+        <el-dialog title="模板详情" :visible.sync="windowStatus" :close-on-click-modal="false">
+            <div class="imgZoomBox">
+                <img :src="classPic">
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <div class="alignCenterBox">
+                    <el-button @click="windowStatus = false">关闭</el-button>
+                </div>
+            </div>
+        </el-dialog>
+        <!--弹出框 end------------------------------------------------------------>
+    </div>
 </template>
 
 <script>
@@ -95,323 +99,302 @@ import '@/styles/global.less';
 import step from './public/step';
 
 export default {
-  components: {
-    tableTitle,//表格标题
-    step//步骤条
-  },
-  data() {
-    return {
-      //1.列表和分页相关 start ------------------------------------------------------------>
-      templateStepTitle:"仅需四步，即可完成模板创建",
-      tableDivTitle:"模板列表",
-      useTemplateName:"已选择风格",
-      allClass:[],//所有风格
-      windowStatus:false,//弹出框
-      classPic:"",//放大缩略图
-      tableData:[],//内容
-      getApiData:{//搜索功能
-        website_id:"",
-        template_class_id:"",
-        page:1,
-        pageSize:10
-      },
-      //用户选择的页面模板
-      userData:[],
-      userTemplateId:"",//用户选择的模板风格id
-      allCount:0,//总条数
-      //分页相关 end ------------------------------------------------------------>
-    }
-  },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //上一步  
-    goBase(){
-      //先判断当前的url里面是否存在website_id和step
-      if(this.$route.query.step!=undefined&&this.$route.query.website_id!=undefined){
-        this.$router.push({
-          path: '/templateBase',
-          query: {
-            website_id: this.$route.query.website_id,
-            step:this.$route.query.step
-          }
-        });
-      }else{
-        this.$router.push({
-          path: '/templateBase',
-          query: {
-            website_id: this.$route.query.website_id
-          }
-        });
-      }
-    },
-    //放大缩略图
-    showImg(img){
-      this.windowStatus = true;
-      this.classPic = img;
+    components: {
+        tableTitle,//表格标题
+        step//步骤条
     },
-    //0.全局操作 end ------------------------------------------------------------>
-
-    //1.风格列表 start ------------------------------------------------------------>
-    //1.1 获得所有风格
-    getAllClass(type){
-      this.$store.dispatch('template/getAllTemplateClass',this.getApiData).then(res=> {
-        if(res.code!=200){
-          this.$message.error(res.message)
-        }else{
-          for(let item of res.data){
-            let data = {};
-            data.value = item.id
-            data.label = item.name
-            this.allClass.push(data)
-          }
-        }
-      })
-    },
-    //1.2 获得所有模板
-    getData(type){
-      this.$store.dispatch('template/getWebsiteTemplateList',this.getApiData).then(res=> {
-        if(res.code != 200){
-          this.$message.error(res.message)
-          //展示数据
-          this.tableData = [];
-          //总条数
-          this.allCount = 0;
-          //还原当前页数
-          this.getApiData.page = 1;
-        }else{
-          for(let item of res.data.rows){
-            item.status = 0;
-          }
-          console.log(res.data.rows)
-          //展示数据
-          this.tableData = res.data.rows;
-          //总条数
-          this.allCount = res.data.count;
-          //判断是否需要回显选择
-          if(this.$route.query.step!=undefined&&this.$route.query.step>=2){
-            this.getUserTemplate();
-          }
+    data() {
+        return {
+            //1.列表和分页相关 start ------------------------------------------------------------>
+            templateStepTitle: "仅需四步，即可完成模板创建",
+            tableDivTitle: "模板列表",
+            useTemplateName: "已选择风格",
+            allClass: [],//所有风格
+            windowStatus: false,//弹出框
+            classPic: "",//放大缩略图
+            tableData: [],//内容
+            getApiData: {//搜索功能
+                website_id: "",
+                template_class_id: "",
+                keyword: [],
+                page: 1,
+                page_size: 10
+            },
+            //用户选择的页面模板
+            userData: [],
+            userTemplateId: "",//用户选择的模板风格id
+            allCount: 0,//总条数
+            //分页相关 end ------------------------------------------------------------>
         }
-      })
-    },
-    //1.3 选中一个模板
-    useIt(item){
-      for(let item of this.tableData){
-        item.status = 0;
-      }
-      item.status = 1;
-      this.userData = item.template_img;
-      this.userTemplateId = item.id;
     },
-    //1.4 列表内容分页
-    //直接跳转
-    handleSizeChange(val) {
-      this.getApiData.page = val;
-      this.getData();
-    },
-    //1.5 点击分页
-    handleCurrentChange(val) {
-      this.getApiData.page = val;
-      this.getData();
-    },
-    //1.风格列表 end ------------------------------------------------------------>
-    //2.提交风格模板 start ------------------------------------------------------------>
-    addData(){
-      //2.1 判断是否已经选择了模板
-      console.log(this.userData.length)
-      if(this.userData.length==0){
-        console.log("未选择模板")
-        this.$message.error("必须选择一个模板风格！")
-      }else{
-        let data = {
-          website_id:this.$route.query.website_id,
-          template_id:this.userTemplateId
-        }
-        //console.log(this.userTemplateId)
-        //this.$route.query.website_id
-        this.$store.dispatch('template/addWebsiteTemplateclassintel',data).then(res=> {
-          if(res.code!=200){
-            this.$message.error(res.message)
-          }else{
-            this.$message.success('模板风格保存成功！');
-            //保存模板风格成功,开始构建网站
+    methods: {
+        //0.全局操作 start ------------------------------------------------------------>
+        //上一步  
+        goBase() {
             this.$router.push({
-              path: '/templateCreat',
-              query: {
-                website_id: this.$route.query.website_id,
-                step:2,
-                style:1
-              }
+                path: '/templateBase',
+                query: {
+                    website_id: this.$route.query.website_id
+                }
             });
-          }
-        })
-      }
-    },
-    //回显数据
-    getUserTemplate(){
-      this.$store.dispatch('template/getWebsiteTemplateclassintel',{website_id:this.$route.query.website_id}).then(res=> {
-        let that = this;
-        if(res.code!=200){
-          this.$message.error(res.message)
-        }else{
-          for(let item of that.tableData){
-            if(item.id == res.data.tid){
-              item.status = 1;
+        },
+        //放大缩略图
+        showImg(img) {
+            this.windowStatus = true;
+            this.classPic = img;
+        },
+        //0.全局操作 end ------------------------------------------------------------>
+
+        //1.风格列表 start ------------------------------------------------------------>
+        //1.1 获得所有风格
+        getAllClass(type) {
+            this.$store.dispatch('template/getAllTemplateClass', this.getApiData).then(res => {
+                if (res.code != 200) {
+                    this.$message.error(res.message)
+                } else {
+                    for (let item of res.data) {
+                        let data = {};
+                        data.value = item.id
+                        data.label = item.name
+                        this.allClass.push(data)
+                    }
+                }
+            })
+        },
+        //1.2 获得所有模板
+        getData(type) {
+            this.$store.dispatch('template/getWebsiteTemplateList', this.getApiData).then(res => {
+                if(res.code == 200){
+                    console.log(res.data)
+                    let data = res.data.template.data;
+                    //格式化data中的template_img
+                    for(let item of data){
+                        item.template_img = JSON.parse(item.template_img);
+                        console.log(item.template_img[0].url)
+                        item.status = 0;
+                    }
+                    console.log(data)
+                    //展示数据
+                    this.tableData = data;
+                    //总条数
+                    this.allCount = res.data.template.total;
+                    //标记用户之前的选择
+                    if(res.data.template_id==0||res.data.template_id==null){
+                        console.log("用户从未选择过皮肤！")
+                    }else{
+                        this.userTemplateId = res.data.template_id;
+                        for(let item of this.tableData){
+                            if(item.id == this.userTemplateId){
+                                item.status = 1;
+                                this.userData = item.template_img;
+                                this.userTemplateId = item.id;
+                            }
+                        }
+                    }
+                }else{
+                    this.$message.error(res.message)
+                }
+            })
+        },
+        //1.3 选中一个模板
+        useIt(item) {
+            for (let item of this.tableData) {
+                item.status = 0;
             }
-          }
-          //给与所选缩略图
-          this.userData = res.data.template_img;
-          //给与所选id
-          this.userTemplateId = res.data.tid;
-        }
-      })
-    },
-    editData(){
-      //编辑的时候就不用判断是否有选中了，因为必定有选中的
-      let data = {
-        website_id:this.$route.query.website_id,
-        template_id:this.userTemplateId
-      }
-      //console.log(this.userTemplateId)
-      //this.$route.query.website_id
-      this.$store.dispatch('template/addWebsiteTemplateclassintel',data).then(res=> {
-        if(res.code!=200){
-          this.$message.error(res.message)
-        }else{
-          this.$message.success('模板风格编辑成功！');
-          //保存模板风格成功,开始构建网站
-          this.$router.push({
-            path: '/templateCreat',
-            query: {
-              website_id: this.$route.query.website_id,
-              step:this.$route.query.step,
-              style:1
+            item.status = 1;
+            this.userData = item.template_img;
+            this.userTemplateId = item.id;
+        },
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.getApiData.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.getApiData.page = val;
+            this.getData();
+        },
+        //1.风格列表 end ------------------------------------------------------------>
+        //2.提交风格模板 start ------------------------------------------------------------>
+        addData() {
+            //2.1 判断是否已经选择了模板
+            console.log(this.userData.length)
+            if (this.userData.length == 0) {
+                console.log("未选择模板")
+                this.$message.error("必须选择一个模板风格！")
+            } else {
+                let data = {
+                    website_id: this.$route.query.website_id,
+                    template_id: this.userTemplateId
+                }
+                //console.log(this.userTemplateId)
+                //this.$route.query.website_id
+                this.$store.dispatch('template/addWebsiteTemplateclassintel', data).then(res => {
+                    if (res.code != 200) {
+                        this.$message.error(res.message)
+                    } else {
+                        this.$message.success('模板风格保存成功！');
+                        //保存模板风格成功,开始构建网站
+                        this.$router.push({
+                            path: '/templateCreat',
+                            query: {
+                                website_id: this.$route.query.website_id,
+                                style: 1
+                            }
+                        });
+                    }
+                })
             }
-          });
-        }
-      })
-    }
-    //2.提交风格模板 end ------------------------------------------------------------>
-  },
-  mounted(){
-    //给与网站id
-    this.getApiData.website_id = this.$route.query.website_id;
-    //获取所有风格
-    this.getAllClass();
-    //获取所有模板
-    this.getData();
-    
-    if(this.$route.query.step!=undefined&&this.$route.query.step>=2){
-      console.log("编辑风格！")
-      //this.getUserTemplate();
-    }else{
-      console.log("选择风格！")
+        },
+        //回显数据
+        getUserTemplate() {
+            this.$store.dispatch('template/getWebsiteTemplateclassintel', { website_id: this.$route.query.website_id }).then(res => {
+                let that = this;
+                if (res.code == 200) {
+                    for (let item of that.tableData) {
+                        if (item.id == res.data.tid) {
+                            item.status = 1;
+                        }
+                    }
+                    //给与所选缩略图
+                    this.userData = res.data.template_img;
+                    //给与所选id
+                    this.userTemplateId = res.data.tid;
+                } else {
+                    this.$message.error(res.message)
+                }
+            })
+        },
+        //2.提交风格模板 end ------------------------------------------------------------>
+    },
+    mounted() {
+        //给与网站id
+        this.getApiData.website_id = this.$route.query.website_id;
+        //获取所有风格
+        this.getAllClass();
+        //获取所有皮肤
+        this.getData();
     }
-  }
 }
 </script>
 
 <style scoped lang="less">
-  .searchBtnBox {
+.searchBtnBox {
     padding-top: 26px;
     text-align: right;
-  }
-  .paginationBox {
+}
+
+.paginationBox {
     padding: 20px 0 0 0;
     text-align: center;
-  }
-  .btnBox {
-    padding:0 0 40px 0;
+}
+
+.btnBox {
+    padding: 0 0 40px 0;
     text-align: center;
-  }
-  .thumbnailBox {
+}
+
+.thumbnailBox {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    justify-content:flex-start;
+    justify-content: flex-start;
+
     .thumbnailItem {
-      //width: 12.5%;
-      width: 180px;
-      height: 180px;
-      text-align: center;
-      padding: 0 10px 10px 10px;
-      .thumbnailItemBox {
-        background: #ECEFFD;
-        border-radius: 10px;
-        padding: 10px;
-        position: relative;
-        cursor: pointer;
-        .thumbnailItemTitle {
-          position: absolute;
-          bottom: 10px;
-          left: 10px;
-          background: rgba(0,0,0,0.5);
-          color: #fff;
-          font-size: 14px;
-          text-align: center;
-          padding: 5px 10px;
-          border-radius: 4px;
+        //width: 12.5%;
+        width: 180px;
+        height: 180px;
+        text-align: center;
+        padding: 0 10px 10px 10px;
+
+        .thumbnailItemBox {
+            background: #ECEFFD;
+            border-radius: 10px;
+            padding: 10px;
+            position: relative;
+            cursor: pointer;
+
+            .thumbnailItemTitle {
+                position: absolute;
+                bottom: 10px;
+                left: 10px;
+                background: rgba(0, 0, 0, 0.5);
+                color: #fff;
+                font-size: 14px;
+                text-align: center;
+                padding: 5px 10px;
+                border-radius: 4px;
+            }
         }
-      }
     }
+
     img {
-      width: 140px;
-      height: 140px;
-      display: block;
+        width: 140px;
+        height: 140px;
+        display: block;
     }
-  }
-  .templateStyleBox {
+}
+
+.templateStyleBox {
     padding: 20px 20px 0 20px;
     background-color: #F5F7FB;
     display: flex;
     flex-wrap: wrap;
+
     .templateStyleItem {
-      width: 20%;
-      box-sizing: border-box;
-      padding: 10px 10px 10px 10px;
-      text-align: center;
-      cursor: pointer;
-      margin-bottom: 20px;
-      .templateStyleItemBox {
-        background: #fff;
-        border-radius: 10px;
-        padding:20px 20px 0 20px;
-        border-top: 5px solid #E9EDF7;
-        border-bottom: 5px solid #E9EDF7;
-        border-left: 1px solid #E9EDF7;
-        border-right: 1px solid #E9EDF7;
-        // &:hover {
-        //   border-top: 5px solid #E9EDF7;
-        //   border-bottom: 5px solid #E9EDF7;
-        //   border-left: 1px solid #E9EDF7;
-        //   border-right: 1px solid #E9EDF7;
-        // }
-      }
-      .active {
-        border-top: 5px solid #5570F1;
-        border-bottom: 5px solid #5570F1;
-        border-left: 1px solid #5570F1;
-        border-right: 1px solid #5570F1;
-      }
-      .templateStyleItemTitle {
-        font-size: 14px;
-        color: #333;
+        width: 20%;
+        box-sizing: border-box;
+        padding: 10px 10px 10px 10px;
         text-align: center;
-        padding: 10px 0;
-      }
-      img {
-        width: 200px;
-        height: 340px;
-      }
+        cursor: pointer;
+        margin-bottom: 20px;
+
+        .templateStyleItemBox {
+            background: #fff;
+            border-radius: 10px;
+            padding: 20px 20px 0 20px;
+            border-top: 5px solid #E9EDF7;
+            border-bottom: 5px solid #E9EDF7;
+            border-left: 1px solid #E9EDF7;
+            border-right: 1px solid #E9EDF7;
+            // &:hover {
+            //   border-top: 5px solid #E9EDF7;
+            //   border-bottom: 5px solid #E9EDF7;
+            //   border-left: 1px solid #E9EDF7;
+            //   border-right: 1px solid #E9EDF7;
+            // }
+        }
+
+        .active {
+            border-top: 5px solid #5570F1;
+            border-bottom: 5px solid #5570F1;
+            border-left: 1px solid #5570F1;
+            border-right: 1px solid #5570F1;
+        }
+
+        .templateStyleItemTitle {
+            font-size: 14px;
+            color: #333;
+            text-align: center;
+            padding: 10px 0;
+        }
+
+        img {
+            width: 100%;
+            height: 340px;
+        }
     }
-  }
-  .imgZoomBox {
+}
+
+.imgZoomBox {
     img {
-      width: 100%;
+        width: 100%;
     }
-  }
-  .alignCenterBox {
+}
+
+.alignCenterBox {
     text-align: center;
-  }
+}
 </style>
-