learning-system-portal/src/components/Article/collectList.vue

<template>
  <div style="cursor: pointer;">
    <div class="article-list" v-for="(item, idx) in items" :key="idx">
      <div class="article-info-date"></div>
      <div @click="jump(item)">
        <div class="article-info">
          <div class="art-hear one-line-ellipsis">
            <span class="article-info-title">
              {{ item.title }}
              <span class="art-tit">#文章#</span>
            </span>
            <el-button @click.stop="delItem(item)" type="text" style="color: #8590A6" icon="el-icon-star-on">取消收藏</el-button>
          </div>
           <div class="article-info-tools">
            <authorInfo :avatar="item.avatar" :name="item.name" :info="item.orgInfo" :sex="item.sex"> </authorInfo>
            <!-- <span>发布时间：{{ item.sysCreateTime || item.publishTime || item.favoritesTime | timeFilter }}</span> -->
            <!-- <span>收藏时间：{{ item.time || item.favoritesTime | timeFilter }}</span> -->
          </div>
          <div class="article-info-summary two-line-ellipsis">{{ item.summary || item.content}}</div>
            <interactBar   :type="2" :readonly="true" :data="item" :views="false" :shares="false"></interactBar>

         
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import interactBar from '@/components/Portal/interactBar.vue';
import authorInfo from '@/components/Portal/authorInfo.vue';
export default {
  name: 'articleItems',
  props: {
    items: {
      //name,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  components: {
    interactBar,
    authorInfo
  },
  filters: {
    timeFilter(item) {
      return item.split(' ')[0];
    }
  },
  methods: {
    jump(item) {
      this.$router.push({path:'/article/detail',query:{id:item.articleId || item.id}})
    },
    delItem(item) {
      this.$confirm('您确定要取消收藏所选文章吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$emit('confirm', item);
        })
        .catch(() => {});
    },
    // jump(item){
    //    this.$router.push({path:'/article/detail',query:{id:item.articleId}})
    //  // window.open('/article/detail?id=' + item.articleId)
    // }
  }
};
</script>

<style lang="scss" scoped>
.art-hear{
  display: flex;
  button{
    margin-left: auto;
  }
}
.art-tit{
  font-size: 16px;
  color: #333333;
  margin-left: 5px;
  font-weight: 400;
}
.article-status1 {
  padding: 3px;
  border: 1px dotted #1ea0fa;
  color: #1ea0fa;
}
.article-status2 {
  padding: 3px;
  border: 1px dotted #00aa00;
  color: #00aa00;
}
.article-status3 {
  padding: 3px;
  border: 1px dotted #ff0000;
  color: #ff0000;
}
.article-list {
  position: relative;
  margin: 5px 0;
  padding-bottom: 15px;
  padding-top: 10px;
  // border: 1px solid #dddddd;
  border-bottom: 1px solid #e8e8e8;
}
.article-info-date {
  position: absolute;
  top: 80px;
  left: 93%;
  height: 40px;
  line-height: 40px;
  float: right;
  font-weight: 200;
  color: #666;
  margin-bottom: 10px;
  margin-top: 10px;
  i {
    margin-right: 5px;
  }
}
.article-info {
  .article-info-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
  }
  .article-info-summary {
    // height: 65px;
    color: #333;
    margin-bottom: 15px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;
  }
  .article-info-tools {
    color: #999999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > span {
      font-size: 14px;
      margin-top: 2px;
      margin-left: 10px;
      color: #747474;
    }
    > span:last-of-type {
      // margin-top: -4px;
      margin-right: auto;
    }
  }
}
</style>