完成风格选择功能

完成风格选择功能

src/views/template/templateBase.vue

@@ -63,7 +63,7 @@
               <el-input type="text" v-model="form.company_address" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="项目LOGO：" class="custom-align-right">
+          <el-form-item label="项目LOGO：" class="custom-align-right" prop="project_logo">
             <div class="uploaderBox">
               <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="projectLogoUpload">
                 <!-- 预览图片 -->
@@ -75,6 +75,7 @@
                   </div>
                 </div>
               </el-upload>
+              <input type="hidden" v-model="form.project_logo">
             </div>
           </el-form-item>
           <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="project_name" class="custom-align-right">
@@ -87,7 +88,7 @@
               <el-input type="text" v-model="form.project_url" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="公司LOGO：" class="custom-align-right">
+          <el-form-item label="公司LOGO：" class="custom-align-right" prop="company_logo">
             <div class="uploaderBox">
               <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="companyLogoUpload">
                 <!-- 预览图片 -->
@@ -99,6 +100,7 @@
                   </div>
                 </div>
               </el-upload>
+              <input type="hidden" v-model="form.company_logo">
             </div>
           </el-form-item>
           <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="company_name" class="custom-align-right">
@@ -131,12 +133,12 @@
               <el-input type="text" v-model="form.record_number_url" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="客服QQ号：" :label-width="formLabelWidth" class="custom-align-right">
+          <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>
             </div>
           </el-form-item>
-          <el-form-item label="通联QQ号：" :label-width="formLabelWidth" class="custom-align-right">
+          <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>
             </div>
@@ -218,6 +220,10 @@ export default {
         record_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         icp_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         record_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        project_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        customer_service_qq: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        communications: [{ required: true, trigger: 'blur', validator: validateEmpty }],
       }
     };
   },
@@ -261,6 +267,7 @@ export default {
                 path: '/templateStyle',
                 query: {
                   website_id: this.$route.query.website_id,
+                  step:1
                 }
               });
             }else{

src/views/template/templateStyle.vue

@@ -11,7 +11,7 @@
           <el-col :span="8">
             <div class="searchBox">
               <div class="searchTitle">模板风格</div>
-              <el-select v-model="getApiData.islink" placeholder="请选择..">
+              <el-select v-model="getApiData.template_class_id" placeholder="请选择..">
                 <el-option
                   v-for="item in allClass"
                   :key="item.value"
@@ -59,7 +59,7 @@
     <!--步骤按钮 start------------------------------------------------------------>
     <div class="btnBox">
       <el-button type="info" @click="goBase">上一步</el-button>
-      <el-button type="primary" @click="editData" v-if="this.$route.query.step!=undefined">编辑并进入下一步</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------------------------------------------------------------>
@@ -71,7 +71,7 @@
         <img :src="classPic">
       </div>
       <div slot="footer" class="dialog-footer">
-        <div>
+        <div class="alignCenterBox">
           <el-button @click="windowStatus=false">关闭</el-button>
         </div>
       </div>
@@ -111,6 +111,7 @@ export default {
       },
       //用户选择的页面模板
       userData:[],
+      userTemplateId:"",//用户选择的模板风格id
       allCount:0,//总条数
       //分页相关 end ------------------------------------------------------------>
     }
@@ -174,6 +175,12 @@ export default {
       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;
@@ -183,16 +190,22 @@ export default {
           this.tableData = res.data.rows;
           //总条数
           this.allCount = res.data.count;
+          //判断是否需要回显选择
+          if(this.$route.query.step!=undefined&&this.$route.query.step>=2){
+            this.getUserTemplate();
+          }
         }
       })
     },
     //1.3 选中一个模板
     useIt(item){
-      console.log(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) {
@@ -204,15 +217,82 @@ export default {
       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,
+                step:2
+              }
+            });
+          }
+        })
+      }
+    },
+    //回显数据
+    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;
+            }
+          }
+          //给与所选缩略图
+          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,
+            }
+          });
+        }
+      })
     }
-
-    //1.风格列表 end ------------------------------------------------------------>
+    //2.提交风格模板 end ------------------------------------------------------------>
   },
   mounted(){
     //给与网站id
@@ -221,9 +301,10 @@ export default {
     this.getAllClass();
     //获取所有模板
     this.getData();
-
-    if(this.$route.query.step!=undefined){
+    
+    if(this.$route.query.step!=undefined&&this.$route.query.step>=2){
       console.log("编辑风格！")
+      //this.getUserTemplate();
     }else{
       console.log("选择风格！")
     }
@@ -258,6 +339,7 @@ export default {
       .thumbnailItemBox {
         background: #ECEFFD;
         border-radius: 10px;
+        padding: 10px;
         position: relative;
         cursor: pointer;
         .thumbnailItemTitle {
@@ -274,7 +356,9 @@ export default {
       }
     }
     img {
-      height: 180px;
+      width: 140px;
+      height: 140px;
+      display: block;
     }
   }
   .templateStyleBox {
@@ -292,7 +376,7 @@ export default {
       .templateStyleItemBox {
         background: #fff;
         border-radius: 10px;
-        padding-top: 10px;
+        padding:20px 20px 0 20px;
         border-top: 5px solid #E9EDF7;
         border-bottom: 5px solid #E9EDF7;
         border-left: 1px solid #E9EDF7;
@@ -317,7 +401,8 @@ export default {
         padding: 10px 0;
       }
       img {
-        width: 100%;
+        width: 200px;
+        height: 340px;
       }
     }
   }
@@ -326,5 +411,8 @@ export default {
       width: 100%;
     }
   }
+  .alignCenterBox {
+    text-align: center;
+  }
 </style>