P0006/src/view/news.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 @click.native="goToList()">新闻资讯</el-breadcrumb-item>
      <el-breadcrumb-item v-if="isShow">详情</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"><router-link to="/vip-service">会员服务</router-link></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" style="padding: 0 10px;">
        <el-card shadow="never"  v-if="!isShow">
          <ul style="list-style: none">
            <li :to='"/detail?id="+item.id' style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
            v-for="(item,index) in dataList" :key="index" @click="goToDetail(item)">
            
                {{ 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-card class="article" shadow="never" style="border-radius: 8px" v-if="isShow">
            <h2 class="title">上海市集成电路行业协会简介</h2>
            <div class="info">作者：SICA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布日期：2011年12月28日&nbsp;星期三</div>
            <div class="content" v-html="activeItem.content"></div>
            </el-card>

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

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

export default {
  data () {
    return {
        titleList: [],
        activeIndex: 0,
        dataList: [],
        total: 0,
        isShow: false,
        activeItem: {}
    }
  },
  methods: {
      goToList(){
        this.isShow = false
        this.$forceUpdate()
      },
      goToDetail(item){
          this.isShow = true
          this.activeItem = {...item}
      },
      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.titleList[0]){
                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
              this.dataList.map((item) => {
                  item.publishTime = this.$moment().format("YYYY-MM-DD")
              })
          }
      },

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

</style>