|
|
@@ -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>
|
natasha