learning-system-portal/src/components/HomePage/articleList.vue

<template>
    <div class="article-list">
        <ul v-if="list.length > 0">
            <li class="article-list-index" v-for="item in list" :key="item.id">
                <p v-if="isDynamic" class="portal-summary-text" style="margin-bottom:18px">
                    <span v-if="!personal || isFollow">{{item.aname}}</span>{{item.cusInfo}}
                    <span style="margin-left:28px">{{item.eventTime}}</span>
                    <span v-if="item.aid == userInfo.aid" class="follow-hide pointer" style="float:right" >
                      <span v-if="item.hidden">已隐藏</span>
                      <span v-else  @click="emitHide(item.id)">  <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏 </span>
                    </span>
                </p>
                <h6 class="article-title-info follow-home-title"><span  @click="jumpDetail(item)">{{item.info.title || item.contentInfo}}</span>
                    <span class="follow-hide pointer" style="float:right" v-if="!isDynamic && personal">
                        <span v-if="item.hidden">已隐藏</span>
                        <span v-else  @click="emitHide(item.id)">  <svg-icon style="margin-right: 10px;font-size:22px;padding-top: 4px;" icon-class="eyes"></svg-icon>隐藏 </span>
                    </span>
                </h6>
                <div style="height:58px;padding-top:14px ">
                    <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex" :aid="item.authorInfo.aid"></author>
                </div>
                <p class="article-text">
                    {{displayAll(item)}}
                    <!-- <span v-html="displayAll(item)"></span> -->
                    <span style="color:#0B4D9D;cursor:pointer;" v-if="item.info.summary && item.info.summary.length>250" @click.stop="changeIsAll(item)">
                        {{item.isAll?'收起':'全文展开'}}
                    </span>
                </p>
                <div>
                    <interactBar :type="2" :data="item.info" :shares="false" :views="false" :readonly="true"></interactBar>
                </div>
            </li>
        </ul>
        <!-- <div v-else class="home-no-list">
            <img class="img" style="width:150px;height:160px" :src="`${webBaseUrl}/images/homeWu/no-article.png`" alt="" srcset="">
            <p v-if="isFollow" class="text">暂时没有动态</p>
            <p v-else class="text">还没有文章</p>
        </div> -->
    </div>
  </template>

  <script>
    import interactBar from "@/components/Portal/interactBar.vue";
    import author from "@/components/Portal/authorInfo.vue";
    import { mapGetters,mapActions } from 'vuex';
      export default{
        name:"articleList",
        components: {
          interactBar,
          // timeShow,
          author
        },
        props:{
            list:{
                type:Array,
                default:()=>[]
            },
            isDynamic:{
                type:Boolean,
                default:false,
            },
            personal:{
                type:Boolean,
                default:false,
            },
            isFollow:{//用于判断是否事我的关注页面，显示人名
                type:Boolean,
                default:false,
            }
        },
        computed: {
          ...mapGetters(['userInfo']),
        },
          data(){
              return{
                articleList:[]
              }
          },
      methods:{
        jumpDetail(item){
          if(item.info.deleted){
            this.$message.warning("此文章已删除");
            return;
          }
          this.$router.push('/article/detail?id='+item.contentId)
        },
        emitHide(id) {
          this.$emit('hideIndex',id)
        },
        displayAll(item) {
          if (!item.isAll && item.info.summary && item.info.summary.length > 250) {
            return item.info.summary.slice(0, 180) + "...";
          }
          return item.info.summary;
        },
         //展示全部
         changeIsAll(item) {
          item.isAll = !item.isAll;
        },

       }
      }
  </script>

  <style lang="scss" scoped>
    .article-list{
        ul{
            margin: 0;
        }
        .article-list-index{
            padding: 30px 0;
            border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
            ::v-deep .interact-bar-btns{
                .interact-bar-btn{
                    text-align: right;
                    min-width: 78px !important;
                    margin-right: 0;
                }
            }
        }
        .article-title-info{
            margin: 0;
            margin-bottom: 16px;
        }
        .article-text{
            margin-bottom: 18px;
            font-size: 14px;
            color: #333330;
            word-break:break-all;
            line-height: 20px;
        }
    }
  </style>