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;margin-right:23px;" @click="jump(item)">
        <course-image :course="item"></course-image>
        <span class="course-type">{{ contentTypeFilter(item.contentType).text }}</span>
      </div>
      <div class="flex-between" @click="jump(item)">
        <div class="uc-course-name ">
          <div class="uc-coures-name-left  one-line-ellipsis">
            <span >{{ item.title }}
              <span class="bq-coures" v-if="isAll">#课程# </span>
              <span class="score-info" v-if="toScore(item.score) > 0"> {{toScore(item.score)}}分</span>
            </span>
          </div>
        <div class="canfavo">
        <el-button v-if="remove" @click.stop="delItem(item)" type="text" icon="el-icon-star-on" style="color:#8590A6;font-size:14px;">
          取消收藏
        </el-button>
      </div>
        </div>

        <div class="uc-bpttom">
          <div class="uc-course-text"> <i class="el-icon-time"></i> 收藏时间：{{ item.time || item.favoritesTime}}</div>
          <div class="uc-coures-button">
          <el-button type="primary">去上课</el-button>
          </div>
        </div>
        <div class="pro-line"> <div>当前进度：</div> <div style="width:200px"><el-progress :percentage="item.progress == ''? 0 : item.progress"></el-progress></div></div>
      </div>
    </div>
  </div>
</template>

<script>
// import interactBar from '@/components/Portal/interactBar.vue';
import courseImage from '@/components/Course/courseImage.vue';
import { toScore} from '@/utils/tools.js';
export default {
  name: 'comStudyItem',
  props: {
    items: {
      //name,
      type: Array,
      default: () => []
    },
    remove: {
      type: Boolean,
      default: true
    },
    isAll:{
            type:Boolean,
            default:false,
          }
  },
  data() {
    return {
      isShow: false,
      toScore,
      oData: {
        comments: '100',
        favorites: '20',
        praises: '30'
      },
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL
    };
  },
  components: {
    // interactBar,
    courseImage
  },
  mounted() {
  },
  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 val = Number(value);
      let obj = {};
      switch (val) {
        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>
.bq-coures{
  font-size: 16px;
  color: #333333;
  margin-left: 5px;
}
.pro-line{
           font-size: 14px;
           color: #333333;
           display: flex;
           margin-top: 28px;
        }
.uc-bpttom{
  display: flex;
  position: relative;

  .uc-coures-button{
    position: absolute;
    margin-left: auto;
    right:0;
    bottom: -38px;
  }
}
.uc-course-text{
  flex: 1;
  font-size: 14px;
  color: #666666;
  margin-top: 14px;
}
  .course-type {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 60px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background-color: #f99000;
        border-radius: 2px 4px 0px 14px;
        font-size: 12px;
        color: #ffffff;
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
      }
.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;

  .uc-course-img {
    position: relative;
   ::v-deep img {
      width: 212px;
      height: 119px;
      border: 1px solid #f4f4f5;
    }

  }
  .flex-between{
    flex: 1;
  }
  .uc-course-name {
    display: flex;
    width: 100%;
    line-height: 30px;
    height: 30px;
    .uc-coures-name-left{
     flex: 1;
     font-size: 18px;
    }
    .canfavo{
      margin-left:auto;
      // width: 100px;
      button{
        font-size: 12px;

      }
    }
  }
}
</style>