课程去掉试看第一节

src/views/bookShelf/components/CourseList.vue

@@ -1,12 +1,19 @@
 <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
+      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>
@@ -15,120 +22,129 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import { getLogin } from "@/api/ajax";
-import { getToken } from '@/utils/auth'
+import { getToken } from "@/utils/auth";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { },
-  props: ["data", "isBuy","LoginNavIndex","userBg","headerBorder","headerBg","cardType"],
+  components: {},
+  props: [
+    "data",
+    "isBuy",
+    "LoginNavIndex",
+    "userBg",
+    "headerBorder",
+    "headerBg",
+    "cardType",
+  ],
   data() {
     //这里存放数据
-    return {
-        
-    }
+    return {};
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {
-
-  },
+  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:''
-                    },
-                });
-            // }
-        }
-    }
+    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() {
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-ul{
-    list-style: none;
-    padding: 0;
-    margin: 0;
+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;
-        }
+.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>
+</style>