admin_home/src/views/template/templateStyle.vue

<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.islink" placeholder="请选择..">
                <el-option label="全部" value="0"></el-option>
                <el-option label="简约" value="1"></el-option>
                <el-option label="商务" value="2"></el-option>
                <el-option label="科技" value="3"></el-option>
                <el-option label="金融" value="4"></el-option>
                <el-option label="教育" value="5"></el-option>
                <el-option label="医疗" value="6"></el-option>
                <el-option label="政府" value="7"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="searchBtnBox">
              <el-button @click="clearSearchList">重置</el-button>
              <el-button type="primary" @click="getData('search')">搜索</el-button>
            </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.id)">
            <img :src="item.img">
            <div class="templateStyleItemTitle">{{item.title}}</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">
          <div class="thumbnailItemBox">
            <img src="@/assets/template/style1.png">
            <div class="thumbnailItemTitle">首页</div>
          </div>
        </div>
        <div class="thumbnailItem">
          <div class="thumbnailItemBox">
            <img src="@/assets/template/style1.png">
            <div class="thumbnailItemTitle">分类页</div>
          </div>
        </div>
        <div class="thumbnailItem">
          <div class="thumbnailItemBox">
            <img src="@/assets/template/style1.png">
            <div class="thumbnailItemTitle">列表页</div>
          </div>
        </div>
        <div class="thumbnailItem">
          <div class="thumbnailItemBox">
            <img src="@/assets/template/style1.png">
            <div class="thumbnailItemTitle">详情页</div>
          </div>
        </div>
      </div>
    </div>
    <!--步骤按钮 start------------------------------------------------------------>
    <div class="btnBox">
      <el-button type="info" @click="goBase">上一步</el-button>
      <el-button type="primary" @click="goCreat">下一步</el-button>
    </div>
    <!--步骤按钮 end------------------------------------------------------------>
    <!--表格内容 end------------------------------------------------------------>


    <!--弹出框 start------------------------------------------------------------>
    <el-dialog title="模板详情" :visible.sync="windowStatus" :close-on-click-modal="false">
      <el-form :model="form" ref="form" :rules="formRules" label-position="left">
        <div class="imgZoomBox">
          <img src="@/assets/template/style1.png">
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button @click="windowStatus=false">关闭</el-button>
        </div>
      </div>
    </el-dialog>
    <!--弹出框 end------------------------------------------------------------>
  </div>
</template>

<script>
//表格标题
import tableTitle from './public/tableTitle';
//引入公用样式
import '@/styles/global.less';
//步骤条
import step from './public/step';

export default {
  components: {
    tableTitle,//表格标题
    step//步骤条
  },
  data() {
    return {
      //1.列表和分页相关 start ------------------------------------------------------------>
      templateStepTitle:"仅需四步，即可完成模板创建",
      tableDivTitle:"模板列表",
      useTemplateName:"已选择风格",
      windowStatus:false,//弹出框
      tableData:[
        {id:1,img:require("@/assets/template/style1.png"),title:"廉政风云",status:1},
        {id:2,img:require("@/assets/template/style2.png"),title:"误判",status:0},
        {id:3,img:require("@/assets/template/style3.png"),title:"逆转裁判",status:0},
        {id:4,img:require("@/assets/template/style4.png"),title:"寒战",status:0},
        {id:5,img:require("@/assets/template/style5.png"),title:"冲锋车",status:0},
        {id:6,img:require("@/assets/template/style6.png"),title:"无间道",status:0},
        {id:7,img:require("@/assets/template/style7.png"),title:"机动部队",status:0},
        {id:8,img:require("@/assets/template/style8.png"),title:"枪火",status:0},
      ],//内容
      editId:0,//要修改的网站id
      getApiData:{
        
      },
      allCount:0,//总条数
      //分页相关 end ------------------------------------------------------------>
    }
  },
  methods: {
    //0.全局操作 start ------------------------------------------------------------>
    //上一步  
    goBase(){
      this.$router.push({
        path: '/templateBase',
        query: {
          id: this.editId
        }
      });
    },
    //下一步
    goCreat(id){
      let data = {
        id:id
      }
      this.$router.push({
        path: '/templateCreat',
        query: {
          id: this.editId
        }
      });
    },
    //放大缩略图
    showImg(img){
      this.windowStatus = true;
    },
    //0.全局操作 end ------------------------------------------------------------>

    //1.1 开始请求列表信息方法
    getData(type){
      if(type=="search"){
        this.getApiData.page = 1;
      }
      this.$store.dispatch('news/getArticleList',this.getApiData).then(res=> {
        //格式化：islink=0为不使用外面 islink=1为使用外链
        //status=1为显示 status=2为不显示
        let data = [];
        for(let item of res.data.rows){
          // if(item.status==0){item.status="隐藏"}
          // if(item.status==1){item.status="显示"}
          // if(item.status==404){item.status="已删除"}
          if(item.islink==0){item.islink="否"}
          if(item.islink==1){item.islink="是"}
          data.push(item)
        }
        this.tableData = res.data.rows; //给与内容
        this.allCount = res.data.count; //给与总条数
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '网络错误，请重试！'
        });
      })
    },
    
    //选择风格
    useIt(id){
      console.log(id)
      this.tableData.forEach(item=>{
        item.status = 0;
      })
      this.tableData.find(item=>item.id==id).status = 1;
    },













    //1.4 列表内容分页
    //直接跳转
    handleSizeChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.5 点击分页
    handleCurrentChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //列表和分页相关 end ------------------------------------------------------------>
  },
  mounted(){
    if(this.$route.query.id!=undefined){
      this.editId = this.$route.query.id;
      console.log("编辑风格！")
    }else{
      console.log("选择风格！")
    }
  }
}
</script>

<style scoped lang="less">
  .searchBtnBox {
    padding-top: 26px;
    text-align: right;
  }
  .paginationBox {
    padding: 20px 0 0 0;
    text-align: center;
  }
  .btnBox {
    padding:0 0 40px 0;
    text-align: center;
  }
  .thumbnailBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    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;
        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 {
      height: 180px;
    }
  }
  .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-top: 10px;
        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%;
      }
    }
  }
  .imgZoomBox {
    img {
      width: 100%;
    }
  }
</style>