front/src/views/index/components/index-card-news.vue

<template>
  <index-card simple title="热门资讯" more-text="查看全部" @more="handleMore">
    <div class="bg-white pd20 rd8" style="height: 270px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabChanged">
        <el-tab-pane v-for="type in newsTypes" :key="type" :name="type" :label="type">
          <el-row>
            <el-col v-for="news in getSafeNews(type)" :key="news.id" :span="8">
              <div class="fx-row fx-sta-cen pf f-333 pr40" style="line-height: 35px">
                <span class="text-ellipsis new-title pointer" :title="news.title" @click="goNewsWithType(type,news)">
                {{ news.title }}</span>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </index-card>
</template>

<script>
import IndexCard from '@/views/index/components/index-card'
import loginCheckMixin from '@/views/index/blocks/index-login-interceptor-mixin'
import transferMixin from '@/components/mx-transfer-mixin'
import * as career from '@/api/webApi/career-news'

export default {
  mixins: [transferMixin, loginCheckMixin],
  name: 'index-card-news',
  components: {IndexCard},
  data() {
    return {
      morePath: {name: 'NewsAll'},
      newsTypes: [],
      activeName: '',
      newsCache: {}
    }
  },
  mounted() {
    this.getTypes()
  },
  methods: {
    getTypes() {
      this.newsTypes = ['中考资讯','家长学校','中考学生辅导','心灵课堂']
      this.activeName = this.newsTypes.first()
      this.getList(this.activeName)
    },
    handleTabChanged() {
      this.getList(this.activeName)
    },
    getList(type) {
      if (!type) return
      if (this.newsCache.hasOwnProperty(type)) return
      career.listNoToken({
        pageNum: 1,
        pageSize: 15,
        type: type
      }).then(res => {
        this.$set(this.newsCache, type, res.rows)
      })
    },
    getSafeNews(type) {
      return this.newsCache[type] || []
    },
    async handleMore() {
      await this.loginCheck()
      this.transferTo(this.morePath)
    },
    async goNewsWithType(type, news) {
      await this.loginCheck()
      this.transferTo(this.morePath, {type, news})
    }
  }
}
</script>

<style lang="scss" scoped>
.new-title:hover {
  color: #47C6A2;
}
</style>