FE_IASF_client/src/components/rightColumns/index.vue

<template>
  <div :class="['right', {party}]">
    <el-tree class="column"
             ref="column"
             :data="columns"
             highlight-current
             :expand-on-click-node="false"
             :props="defaultProps"
             node-key="id"
             @node-click="columnTo"></el-tree>

    <template v-if="site == 2">
      <p class="l-title">{{ $t('column.latestNews') }}</p>
      <ul class="list">
        <li v-for="(item, i) in site2News"
            :key="i"
            :title="item.title"
            @click="toArtice(item)">
          <p class="text">{{ item.title }}</p>
          <span class="date">{{ item.releaseTime }}</span>
        </li>
      </ul>
    </template>
    <template v-else>
      <p class="l-title">{{$t('column.hot')}}</p>
      <ul class="list">
        <li v-for="(item, i) in hots"
            :key="i"
            :title="item.title"
            @click="toArtice(item)">
          <p class="text">{{ item.title }}</p>
          <span class="date">{{ item.releaseTime }}</span>
        </li>
      </ul>

      <p class="l-title">{{$t('column.latestNews')}}</p>
      <ul class="list">
        <li v-for="(item, i) in news"
            :key="i"
            :title="item.title"
            @click="toArtice(item)">
          <p class="text">{{ item.title }}</p>
          <span class="date">{{ item.releaseTime }}</span>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
import Util from '@/libs/util'
import mixins from '@/mixins/article'
export default {
  props: ['party'],
  mixins: [mixins],
  data () {
    return {
      columns: [],
      defaultProps: {
        value: 'id',
        label: 'columnName'
      },
      news: [],
      site2News: [],
      hots: []
    }
  },
  mounted () {
    this.getColumn()
  },
  methods: {
    // 资讯
    getColumn () {
      this.$post(this.api.listWithTreeMenuVisible, Util.rsa({
        siteId: this.site,
        columnName: '',
        templateId: '',
        typeId: '',
        isSort: 1
      })).then(({ data }) => {
        this.columns = data
        this.$parent.getInfo && this.$parent.getInfo()
      }).catch(err => { })

      this.$post(this.api.hotContent, Util.rsa(this.site)).then(({ data }) => {
        this.hots = Util.removeTag(data)
      }).catch(err => { })

      if (this.site == 2) {
        this.$post(this.api.newlyPublishedArticles, Util.rsa({
          siteId: this.site,
          columnIds: [411, 412, 413],
          pageNum: 1,
          pageSize: 8,
        })).then(({ data }) => {
          this.site2News = Util.removeTag(data.records);
        }).catch((res) => { });
      } else {
        this.$post(this.api.newlyPublishedArticles, Util.rsa({
          pageNum: 1,
          pageSize: 5,
          siteId: this.site
        })).then(({ data }) => {
          this.news = Util.removeTag(data.records)
        }).catch(res => { })
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.right {
    width: 20%;
    /deep/ .el-tree-node__label {
        font-size: 0.78rem;
    }
}
.column {
    width: 100%;
    margin-bottom: 1.56rem;

    .el-tree-node:focus > .el-tree-node__content {
        background-color: #e5edf8;
    }
    /deep/.el-tree-node__content {
        height: 2.75rem;
        background-color: #e5edf8;
        border-bottom: 2px solid #fff;
    }
    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        color: #fff;
        background-color: #0f5698;
    }
}
.list {
    margin-bottom: 20px;
    li {
        padding: 16px 0;
        border-bottom: 1px solid #d8d8d8;
    }
    .text {
        margin-bottom: 5px;
        font-size: 14px;
        cursor: pointer;
        &:hover {
            color: $main-color;
        }
    }
    .date {
        font-size: 12px;
        color: #999;
    }
}
.party {
    .el-tree-node:focus > .el-tree-node__content,
    /deep/.el-tree-node__content {
        background-color: $lightPartyTheme;
    }

    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        background-color: $partyTheme;
    }
}
</style>