HM21St_Page_User/src/views/bookShelf/components/CourseList.vue

<template>
  <ul class="courseList">
    <li v-for="(item,index) in data" :key="index" :class="[index===data.length-1?'noborder':'',isBuy||index<1?'buy':'']" @click="handleLink(item,isBuy||index<1,index)">
        <span class="number">{{index+1 + '.'}}</span>
        <b class="title">{{item.name}}</b>
        <span class="teacher">{{item.teacher_name?'主讲教师 '+item.teacher_name:''}}</span>
        <span class="time-length">{{item.timeCn}}</span>
        <i class="el-icon-lock" v-if="!(isBuy||index<1)"></i>
        <i class="el-icon-arrow-right" v-else></i>
    </li>
  </ul>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { },
  props: ["data", "isBuy","LoginNavIndex","userBg","headerBorder","headerBg","cardType"],
  data() {
    //这里存放数据
    return {
        
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {

  },
  //方法集合
  methods: {
    // 跳转
    handleLink(item,flag,index){
        if(flag){
            let url  = this.LoginNavIndex +'&&&'+ this.userBg +'&&&'+ this.headerBorder +'&&&'+ this.headerBg
            this.$router.push({
                path: this.cardType===1?"/courseDetail":"/videoDetail",
                query: {
                    headerConfig: encodeURIComponent(url),
                    index: index,
                    id: this.$route.query.id?this.$route.query.id:''
                },
            });
        }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.courseList{
    li{
        padding: 16px;
        border-bottom: 1px solid #E5E6EB;
        font-size: 16px;
        line-height: 24px;
        color: #2F3742;
        display: flex;
        align-items: center;
        &.noborder{
            border: none;
        }
        &.buy{
            cursor: pointer;
        }
        .number{
            width: 27px;
        }
        .title{
            font-weight: 400;
            margin-right: 16px;
        }
        .teacher,.time-length{
            flex: 1;
            color: #929CA8;
            margin-right: 16px;
        }
        .time-length{
            flex: initial;
        }
    }
}
</style>