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

<template>
  <div style="">
    <div class="article-list" v-for="(item,idx) in items" :key="idx">
      <div class="article-info ">
        <div class="article-info-title " >
          <div style="width:85%" class=" ">
          <router-link :to="'/case/detail?id='+item.cases.id"  ><div class="case-tit title-line-ellipsis">{{item.cases.title}} <span v-if="isAll" class="bq-case">#案例#</span> </div>  </router-link>

          </div>
          <div class="article-info-date">
            <el-button @click="delItem(item)" type="text" style="color: #8590A6;font-size:14px" icon="el-icon-star-on">取消收藏</el-button>
          </div>
        </div>
        <div class="article-info-tools">
          <authorInfo :avatar="item.avatar" :aid="item.cases.authorId" :name="item.name" :info="item.orgInfo" :sex="item.sex" :sign="item.sign"></authorInfo>
          <span class="userbq">{{ item.sign }}</span>
          <!-- <span style="margin-top:2px">发布时间：{{ item.cases.sysCreateTime || item.publishTime | timeFilter }}</span> -->
          <!-- <span style="margin-top:2px">收藏时间：{{ item.time || item.favoritesTime | timeFilter }}</span> -->
          <!-- <interactBar :type="0" :data="item.cases" :shares="false" :views="false"></interactBar> -->
        </div>
        <div class="article-info-summary ">
         <!-- <router-link :to="'/case/detail?id='+item.cases.id"  > -->
          {{displayAll(item)}}
          <span style="color:#588afc;cursor:pointer;" v-if="item.cases.summary.length>150" @click="changeIsAll(item,idx)">
                 {{item.isAll?'收起':'展开'}}
            </span>
          <!-- </router-link> -->

        </div>
        <div>
            <interactBar   :type="3" :readonly="true" :data="item.cases" :views="false" :shares="false"></interactBar>

        </div>

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

<script>
  import authorInfo from '@/components/Portal/authorInfo.vue';
  import interactBar from '@/components/Portal/interactBar.vue';
  export default {
    name: 'articleItems',
    props: {
      items: { //name,
        type: Array,
        default:()=>[]
      },
      isAll:{
            type:Boolean,
            default:false,
          }
    },
    filters:{
      timeFilter(item){
        return item.split(' ')[0]
      }
    },
    methods:{
       displayAll(item) {
      if (!item.isAll && item.cases.summary && item.cases.summary.length > 150) {
        return item.cases.summary.slice(0, 150) + "...";
      }
      return item.cases.summary;
    },
     changeIsAll(item,idx) {
      console.log(item.isAll)
      item.isAll = !item.isAll;
      this.$set(this.items, idx, item);
    },
      delItem(item){
        this.$confirm('您确定要取消收藏所选案例吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('confirm',item)
        }).catch(() => {
        });
      }
    },
    components:{
      interactBar,
      authorInfo
    }
  }
</script>

<style lang="scss" scoped>
.userbq{
  font-size: 14px;
  color: #666666;
  line-height: 35px;
}
.case-tit{
  color: #333333;
  font-size: 18px;
  font-weight: 600;
}
.bq-case{
  font-size: 16px;
  color: #333333;
  font-weight: normal;
  margin-left: 5px;
}
.title-line-ellipsis{
   display: -webkit-box;
   overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
  word-break:break-all;
}
.three-line-ellipsis{
   width: 100%;
   display: -webkit-box;
   overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
  word-break:break-all;
}
  .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 {
    margin: 5px 0;
    border-bottom: 1px solid #dddddd;
    padding: 0px;
    padding-bottom: 25px;
  }

  .article-info {

    .article-info-title {
      font-size: 16px;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      display: flex;
      // width: 80%;
      .article-info-date {
        flex: 1;
        height: 40px;
        text-align: right;
        line-height: 40px;
        font-weight: 200;
        color: #999999;
        i {
          margin-right: 5px;
        }
      }
    }
    .article-info-summary {
     color: #333330;
     font-size: 15px;
     line-height: 25px;
     margin-bottom: 15px;
    }
    .article-info-tools {
      height: 45px;
      color: #999999;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      >span{
        font-size: 13px;
        margin-top: -2px;
        margin-left: 10px;
      }
      >span:last-of-type{
        margin-top: -4px;
        margin-right:auto;
      }
    }
  }

</style>