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

<template>
    <div class="case-list-box">
      <div class="data-content" v-if="list.length >0">
              <div :span="24" v-for="item in list" :key="item.id" class="case-list">
                <div class="case-info">
                  <p  class="portal-summary-text">
                    <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>
                  <div class="case-info-cont">
                      <div class="case-info-title">
                          <div class="case-titdiv" style="">
                            <router-link :to="'/case/detail?id='+item.info.id">
                              <span class="case-tittext" v-html="item.info.title || item.contentInfo"></span>
                            </router-link>
                              <span class="follow-hide pointer"  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>
                          </div>
                      </div>
                      <router-link :to="'/case/detail?id='+item.info.id">
                        <div style="height:58px;padding-top:18px;display:flex">
                          <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex" :aid="item.authorInfo.aid"></author>
                        <div class="sign-text">{{ item.authorInfo.sign }}</div>
                        </div>
                        <div class="keyword-text clearfix">
                          <div style="color:#2974D6;font-weight: 450;" v-if="orgDomainTranslate(item.info.orgDomain)">{{ orgDomainTranslate(item.info.orgDomain) }}</div>
                          <div style="color:#2974D6;font-weight: 450;" v-if="item.info.orgDomain == '' && item.info.orgDomainParent">{{ orgDomainTranslate(item.info.orgDomainParent) }}</div>
                          <div style="color:#2974D6;font-weight: 450;"  v-for="item,idx in item.info.majorType" :key="idx" v-if="item !== ''">{{ majorTypeTranslate(item) }}</div>
                          <div v-if="item.info.keyword1">{{ item.info.keyword1 }}</div>
                          <div v-if="item.info.keyword2">{{ item.info.keyword2 }}</div>
                          <div v-if="item.info.keyword3">{{ item.info.keyword3 }}</div>
                          <div v-if="item.info.keyword4">{{ item.info.keyword4 }}</div>
                          <div v-if="item.info.keyword5">{{ item.info.keyword5 }}</div>
                        </div>

                      <div class="case-info-summary two-line-ellipsis">
                        {{item.info.summary}}
                            <!-- {{displayAll(item)}}
                            <span style="color:#588afc;cursor:pointer;" v-if="item.info.summary && item.info.summary.length>180" @click.stop="changeIsAll(item)">
                                {{item.isAll?'收起':'展开'}}
                            </span> -->
                      </div>
                      <div style="display: flex;justify-content: flex-end;">
                      <div style="margin:8px 0;">
                          <interactBar :type="0" :shares="false" :views="false"  :data="item.info" :readonly="true"></interactBar> </div>
                      </div>
                  </router-link>
                  </div>
                </div>
              </div>
            </div>
        <!-- <div v-else class="home-no-list">
            <img class="img" :src="`${webBaseUrl}/images/homeWu/no-case.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:"caselist",
        components: {
          interactBar,
          // timeShow,
          author
        },
        computed: {
          ...mapGetters(['userInfo','majorTypeMap','orgDomainMap']),
        },
        props:{
          list:{
            type:Array,
            default:()=>[]
          },
          isDynamic:{// 是否全部
                type:Boolean,
                default:false,
            },
          personal:{//显示隐藏，
            type:Boolean,
            default:false,
          },
          isFollow:{//用于判断是否事我的关注页面，显示人名
            type:Boolean,
            default:false,
          }
        },
          data(){
              return{
                // list:[]
              }
          },
          mounted() {
          },
      methods:{
        emitHide(id) {
          this.$emit('hideIndex',id)
        },
        majorTypeTranslate(code){
          if(code==''){return '';}
          return this.majorTypeMap.get(code);
        },
         //展示全部
        displayAll(item) {
          if (!item.isAll && item.info.summary && item.info.summary.length > 180) {
            return item.info.summary.slice(0, 180) + "...";
          }
          return item.info.summary;
        },
        changeIsAll(item) {
          item.isAll = !item.isAll;
        },
        orgDomainTranslate(code){ // 组织领域翻译
          if(code==''|| code==undefined){return '';}
          return this.orgDomainMap.get(code);
        },
        jumpDetail(item){
          if(item.info.deleted){
            this.$message.warning("此案例已删除");
            return;
          }
          this.$router.push('/case/detail?id='+item.contentId)
        },
       }
      }
  </script>

  <style lang="scss" scoped>
    .sign-text{
      color: #666666;
      font-size: 14px;
      line-height: 35px;
      margin-left: 10px;
    }
    .clearfix:after{
      content: "020";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
 .keyword-text {

div {
  padding:0px 8px;
  margin-top: 5px;
  float: left;
  line-height: 24px;
  font-size: 12px;
  border-radius:2px;
  margin-right: 8px;
  color: #2C68FF;
  height: 24px;
  background: rgba(44,104,255,0.06);
}
}
.case-titdiv {
    width: 100%;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    .case-tittext {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      display: -webkit-box;
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      box-sizing: border-box;
    }
  }
    .data-content {
    background-color: #fff;
    // padding: 5px 50px;
    ::v-deep .interact-bar-btns{
      .interact-bar-btn{
        text-align: right;
        min-width: 78px !important;
        margin-right: 0;
      }
    }
  }
  .case-list:last-child {
      // border-bottom: none;
    }

    .case-list {
      border-bottom: 1px solid rgba(153, 153, 153,.2);
      padding-top: 30px;
      // margin: 8px 0px;
      padding-bottom: 15px;
      // padding-left: 5px;
      // padding-right: 5px;
    }
    .case-image {
      width: 230px;
      height: 170px;
      float: left;
      border: 1px solid #eee;
    }

    .case-info {
      .case-info-cont {
        .case-info-title {
          font-size: 15px;
          color: #333;
          font-weight: 600;
          height: 30px;
          line-height: 30px;
          .case-info-date {
            flex: 1;
            text-align: right;
            font-weight: normal;
            // font-size: 12px;
            // height: 30px;
            // font-weight: 200;
            // color: #8590a6;
            i {
              margin-right: 5px;
            }
          }
        }
        .case-info-summary {
          margin-top:16px;
          cursor: pointer;
          // margin-bottom: 5px;
          word-break: break-all;
          line-height: 24px;
          font-size: 14px;
          color: #333330;
          font-weight: 400;
        }
        .case-info-tools {
          height: 30px;
          .case-info-tools-auth {
            float: left;
            font-size: 13px;
            color: #999999;
            img {
              margin-right: 10px;
              width: 30px;
              border: 1px solid #eee;
              border-radius: 50%;
              vertical-align: middle;
            }
          }
          .case-info-tools-btns {
            float: right;
            .case-info-tools-btn {
              margin: 0 0 0 15px;
            }
          }
        }
      }
    }

  </style>