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

<template>
    <div class="">
      <ul class="data-info-ul" v-if="list.length > 0">
        <li class="data-info" v-for="item in list" :key="item.id">
          <p  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>
          <div style="display:flex;">
               <div style="width:254px" class="pointer" @click="jumpDetail(item)">
                <course-image width="254px" height="144px" :course="item.info"></course-image>
            </div>
            <div class="data-cen pointer" @click="jumpDetail(item)">
              <div class="tit-float" >
                 <h6 class="course-tit portal-title-tow">{{item.info.courseName || item.contentInfo}}
                </h6>
                 <div class="sysType-box">
                     <span class="sysType-name" v-if="item.info.sysType1 !='' && item.info.sysType1 != 0">{{sysTypeName(item.info.sysType1)}}</span>
                     <span class="sysType-name" v-if="item.info.sysType2 !='' && item.info.sysType2 != 0">{{sysTypeName(item.info.sysType2)}}</span>
                     <span class="sysType-name" v-if="item.info.sysType3 !='' && item.info.sysType3 != 0">{{sysTypeName(item.info.sysType3)}}</span>
                     <span  class="score-info" v-if="toScore(item.info.lastScore) > 0">{{toScore(item.info.lastScore)}}分</span>
                 </div>
              </div>
               
                <p class="title-info">{{item.info.summary}}</p>
                <div class="pro-line"> <div>当前进度：</div> <div style="width:200px"><el-progress :percentage="item.info.progress"></el-progress></div></div>
                <p class="portal-time">最新一次学习时间：{{item.eventTime}}</p>
                
            </div>
            <div class="btn-box">
                  <div class="btn-right">
                     <el-button class="btn" type="primary" @click="jumpDetail(item)">{{personal? '继续学习' : '我也去学'}}</el-button>
                  </div>
             </div>
            
          </div>

        </li>
      </ul>
     <!-- <div v-else class="home-no-list">
            <img class="img" :src="`${webBaseUrl}/images/homeWu/no-course.png`" alt="" srcset="">
            <p v-if="isFollow" class="text">暂时没有动态</p>
            <p v-else class="text">还没有课程</p>
      </div> -->
    </div>
  </template>

  <script>
  import { toScore} from '@/utils/tools.js';
    import courseImage from "@/components/Course/courseImage.vue";
    import { mapGetters } from 'vuex'
      export default{
          data(){
              return{
                pageId:'',
                toScore,
                courseList:[]
              }
          },
          computed:{
            ...mapGetters(['curIdentity','identity','userInfo','sysTypeMap']),
          },
          components: {
            courseImage,
        },
          props:{
            list:{
                type:Array,
                default:()=>[]
            },
            isDynamic:{
                type:Boolean,
                default:false,
            },
            personal:{
              type:Boolean,
              default:false,
            },
            isFollow:{//用于判断是否事我的关注页面，显示人名
                type:Boolean,
                default:false,
            }
          },
          mounted() {
            this.pageId = this.$xpage.getHomeId(this.$route);
          },
          methods:{
            sysTypeName(code){
              if(code==''){return '';}
              return this.sysTypeMap.get(code);
            },
            emitHide(id) {
              this.$emit('hideIndex',id)
            },
            jumpDetail(data) {
                if(!data.contentId){
                  return;
                }
                if(!data.info.enabled || data.info.deleted){
                  this.$message.warning("此课程已停用或已删除");
                  return;
                }
                this.$router.push({ path: '/course/studyindex?id=', query: { id: data.contentId } });
            }
          }
      }
  </script>

  <style lang="scss" scoped>
    .tit-float{
      height: 25px;
    }
    .sysType-box{
      float: left;
    }
    .sysType-name{
              display: inline-block;
              padding:0px 8px;
              line-height: 24px;
              font-size: 12px;
              border-radius:2px;
              margin-right: 8px;
              color: #2C68FF;
              height: 24px;
              background: rgba(44,104,255,0.06);
            }
    .data-info-ul{
        margin: 0;
        // padding-top: 32px;
    }
  .data-info{
    border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2);
    padding-bottom: 38px;
    padding-top: 32px;
    .data-cen{
        flex: 100%;
        margin: 0 28px;
        .course-tit{
            margin: 0;
            font-size: 18px !important;
            line-height: 25px;
            float: left;
        }
        .title-info{
            font-size: 14px;
            color: #333333;
            margin-top: 14px;
        }
        .pro-line{
           margin: 22px 0 16px 0;
           font-size: 14px;
           color: #333333;
           display: flex;
        }

    }
    .btn-right{
            margin-top: 48px;
            .btn{
                width: 140px;
                height: 40px;
            }
        }
  }
  </style>