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 ? 'buy' : '']"
      @click="handleLink(item, isBuy, 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 ‘《组件路径》';
import { getLogin } from "@/api/ajax";
import { getToken } from "@/utils/auth";
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;
        // if(getToken()){
        //     let MethodName = "/CourseServer/Client/ReadingManager/RecordMyPlayLocation_LBCourse";
        //     let data = {
        //         cs_item_id: item.id
        //     }
        //     getLogin(MethodName, data)
        //     .then((res) => {
        //         if(res.status === 1){
        //             this.$router.push({
        //                 path: this.cardType===1?"/courseDetail":"/videoDetail",
        //                 query: {
        //                     headerConfig: encodeURIComponent(url),
        //                     index: index,
        //                     id: this.$route.query.id?this.$route.query.id:''
        //                 },
        //             });
        //         }
        //     })
        // }else{
        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>