P0006/src/view/member.vue

<template>
  <el-main class="main-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>会员产品</el-breadcrumb-item>
    </el-breadcrumb>
    <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">SICA简介</div> -->
          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
              {{item.channelName}}</div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card shadow="never" style="margin: 0 10px;">
          <ul style="list-style: none">
            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
            v-for="(item,index) in dataList" :key="index">{{ index+1 }}、{{item.title}}<span style="float:right">{{item.publishTime}}</span></li>
          </ul>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
          </el-pagination>
        </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: []
    }
  },
  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){
            //   console.log(JSON.stringify(res.data))
              this.titleList = 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
              console.log("this.dataList:"+JSON.stringify(this.dataList))
          }
      },

      changeType(index){
          this.activeIndex = index;
          this.getChannelInformationsRequest(this.titleList[index].id)
      }
  },
  mounted() {
    this.getChannelsRequest()
  }
}
</script>