learning-system-portal/src/components/Course/collectItem.vue

<template>
  <div style="cursor: pointer;">
    <div class="uc-course" v-for="(item, idx) in items" :key="idx" @click="coudetail(item)">

      <div class="uc-course-img" style="width: 212px;height: 119px;" @click="jump(item)">
        <course-image :course="item"></course-image>
        <!-- <img :src="imageUrl(item)" /><span v-if="isShow" class="two-line-ellipsis">{{item.title}}</span> -->
      </div>
      <div class="flex-between" @click="jump(item)">
        <div class="uc-course-name one-line-ellipsis">
          <span :class="contentTypeFilter(item.contentType).class">{{ contentTypeFilter(item.contentType).text }}</span>
          <span>{{ item.title }}</span>
        </div>
        <div class="uc-course-text">讲师：{{ item.authorName}}</div>
        <div class="uc-course-text">收藏时间：{{ item.time || item.favoritesTime}}</div>
      </div>
     <div class="flex-between">
        <el-button v-if="remove" @click.stop="delItem(item)" type="text" icon="el-icon-remove" style="color:#8590A6;font-size:14px;">
          取消收藏
        </el-button>
      </div>
      <!-- <div class="uc-course-info">
        <div style="display: flex;justify-content: space-between;">
          <router-link target="_blank" :to="'/course/detail?id='+item.objId" class="uc-course-name">
            <span :class="contentTypeFilter(item.contentType).class">{{contentTypeFilter(item.contentType).text}}</span>
            <span>{{ item.title }}</span>
          </router-link>
          <div><el-button v-if="remove" @click="delItem(item)" type="text" icon="el-icon-remove">取消收藏</el-button></div>
        </div>
        <div style="display: flex;justify-content: space-between;align-items: flex-end;">
          <div>
            <div class="uc-course-text">讲师：{{item.authorName}}</div>
            <div class="uc-course-text">收藏日期：{{item.time}}</div>
          </div>
          <interactBar :type="0" :data="item" :views="false" :shares="false"></interactBar>
        </div>
      </div> -->
      <!-- </router-link> -->
    </div>
  </div>
</template>

<script>
import interactBar from '@/components/Portal/interactBar.vue';
import courseImage from '@/components/Course/courseImage.vue';
export default {
  name: 'comStudyItem',
  props: {
    items: {
      //name,
      type: Array,
      default: () => []
    },
    remove: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShow: false,
      oData: {
        comments: '100',
        favorites: '20',
        praises: '30'
      },
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL
    };
  },
  components: {
    interactBar,
    courseImage
  },
  methods: {
    coudetail(item) {
      // let routeData = this.$router.resolve({ path: '/course/detail?id=' + item.objId });
      // window.open(routeData.href, '_blank');
      if(item.contentType == '20') {
        this.$router.push({path:'/course/detail',query:{id:item.objId || item.id}})
      } else {
        this.$router.push({path:'/course/micro',query:{id:item.objId || item.id}})
      }
      
    },
    delItem(item) {
      this.$confirm('您确定要删除所选收藏吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$emit('confirm', item);
        })
        .catch(() => {});
    },
    contentTypeFilter(value) {
      let obj = {};
      switch (value) {
        case '10': {
          obj.class = 'uc-course-type2';
          obj.text = '录播';
          break;
        }
        case '21': {
          obj.class = 'uc-course-type2';
          obj.text = '直播';
          break;
        }
        case '20': {
          obj.class = 'uc-course-type2';
          obj.text = '录播';
          break;
        }
        case '30': {
          obj.class = 'uc-course-type2';
          obj.text = '面授';
          break;
        }
        case '90': {
          obj.class = 'uc-course-type2';
          obj.text = '混合';
          break;
        }
      }
      return obj;
    },
    imageUrl(item) {
      if (item && item.image && item.image != '') {
        return process.env.VUE_APP_FILE_BASE_URL + item.image;
      } else {
        this.isShow = true;
        return this.webBaseUrl + '/images/bgimg/course.png';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.one-line-ellipsis{
  display: -webkit-box;
  white-space:pre-wrap;
  // word-wrap: break-word;
  word-break:break-all;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.uc-course {
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #e8e8e8;
  padding-left: 0px;
  padding-bottom: 20px;
  padding-top: 15px;
  // margin-bottom: 10px;
  // margin-left: 10px;
  .flex-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    .uc-course-text {
      color: #747474;
      margin-right: 20px;
    }
    &:last-of-type{
      margin-left: auto;
      justify-content: flex-end;
    }
    // &:last-of-type {

    //   align-items: flex-start;
    // }
  }
  .uc-course-img {
    position: relative;
   ::v-deep img {
      width: 212px;
      height: 119px;
      border: 1px solid #f4f4f5;
    }
    > span {
      position: absolute;
      top: 30px;
      left: 10px;
      width: 100%;
      height: 100%;
      color: #ffffff;
      font-size: 16px;
    }
  }
  .uc-course-name {
    font-size: 16px;
    font-weight: 400;
    > span:last-of-type {
      margin-left: 8px;
    }
  }
}
</style>