P0006/src/view/km.vue

<template>
  <el-main style="width: 960px;margin: 0 auto;min-height: 500px">
    <el-row class="card_menu">
      <el-col :span="4">
        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
          <div slot="header">
            <span>知识产权与标准化</span>
          </div>
          <!-- <div class="menu-item active">标准化创新基地介绍</div>
          <div class="menu-item">协会团标</div>
          <div class="menu-item">申请编写团标</div> -->

          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
              {{item.title}}</div>

        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card shadow="never" style="margin: 0 10px;">
          <h2 style="text-align: center;color: #333">
            <span>协会团标</span>
          </h2>
          <el-row>
            <el-col :span="6" v-for="(item,index) in dataList" :key="index" >
              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }">
                <img :src="item.aboutImg" style="border-radius: 10px;margin: 10px 0" width="100%"/>
              <p style="color: #333">{{item.title}}</p>
              </el-card>
            </el-col>
          </el-row>

        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import {getChannelInformationsRequest, getChannelsRequest, 
        getChannelSecond} from "../api/data";

export default {
  data () {
    return {
        titleList: [],
        activeIndex: 0,
        dataList: [],
        total: 0
    }
  },
  methods: {
      async getChannelsRequest(){
          let res = await getChannelsRequest({current:1,size:100})
          if(res.code == 200){
              res.data.records.map((item) => {
                  if(item.channelName == '知识产权'){
                      this.getChannelSecond(item.id)
                  }
              })
          }
      },

      async getChannelSecond(id){
          let res = await getChannelSecond(id)
          if(res.code == 200){
              this.titleList = res.data
              console.log("this.titleList:"+JSON.stringify(res.data))
              if(this.titleList){
                this.getChannelInformationsRequest(this.titleList[0].id)
              }
              
          }
      },

      async getChannelInformationsRequest(id){
          let res = await getChannelInformationsRequest({channelId: id})
          if(res.code == 200){
              this.dataList = res.data.records
              this.total = res.data.total
          }
      },

      changeType(index){
          this.activeIndex = index;
          console.log(this.titleList[index].id)
          this.getChannelInformationsRequest(this.titleList[index].id)
      }
  },
  mounted() {
    this.getChannelsRequest()
  }
}
</script>
<style>
.menu-item{
  text-align: center;
  padding: 10px;
  width: 100%;
}
.card_menu .menu-item.active{
  border-left: 2px solid #427FCE;
  background: #eee;
}
</style>