|
|
|
|
@ -48,6 +48,10 @@ |
|
|
|
|
<a v-else class="entry" @click="entry"></a> |
|
|
|
|
<div class="list"> |
|
|
|
|
<h4 class="title">{{ courseName }}</h4> |
|
|
|
|
<div> |
|
|
|
|
<h6 class="pro-title">我的学习进度</h6> |
|
|
|
|
<el-progress :stroke-width="12" :percentage="schedule" :text-color="'#fff'"></el-progress> |
|
|
|
|
</div> |
|
|
|
|
<div class="chapters"> |
|
|
|
|
<template v-if="chapterList.length"> |
|
|
|
|
<div class="chapter" v-for="(item,index) in chapterList" :key="index"> |
|
|
|
|
@ -61,6 +65,7 @@ |
|
|
|
|
<img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt=""> |
|
|
|
|
<img v-else src="@/assets/img/exts/pic.png" alt=""> |
|
|
|
|
{{ section.name }} |
|
|
|
|
<i :class="['icon', section.whetherToStudyOrNot ? 'el-icon-success' : 'circle']" @click.stop="studySection(item, section)"></i> |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -69,7 +74,10 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="tabs"> |
|
|
|
|
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: item.id == active}" @click="tabChange(item)">{{ item.name }}</a> |
|
|
|
|
</div> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="l-title"> |
|
|
|
|
<img src="@/assets/img/course1.png" alt=""> |
|
|
|
|
@ -127,7 +135,7 @@ export default { |
|
|
|
|
return { |
|
|
|
|
startTime: Date.now(), // 页面进来的时间 |
|
|
|
|
systemIds: '', |
|
|
|
|
courseId: this.$route.query.courseId, |
|
|
|
|
courseId: +this.$route.query.courseId, |
|
|
|
|
curriculumName: this.$route.query.curriculumName, |
|
|
|
|
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4", |
|
|
|
|
chapterList: [], // 章节列表 |
|
|
|
|
@ -137,6 +145,25 @@ export default { |
|
|
|
|
teachingObjectives: "", // 课程目标 |
|
|
|
|
assessmentList: "", // 考核列表 |
|
|
|
|
curLink: "", // 当前选中 |
|
|
|
|
active: 1, |
|
|
|
|
tabs: [ |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
name: '课程介绍' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
name: '课程笔记' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 3, |
|
|
|
|
name: '全国排行榜' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 4, |
|
|
|
|
name: '教学互动' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
playAuth: "", |
|
|
|
|
player: null, |
|
|
|
|
previewImg: "", |
|
|
|
|
@ -161,7 +188,7 @@ export default { |
|
|
|
|
loading: false, |
|
|
|
|
curProject: '', |
|
|
|
|
overdue: 0, //是否过期 |
|
|
|
|
buyVisible: false |
|
|
|
|
buyVisible: false, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
@ -207,13 +234,14 @@ export default { |
|
|
|
|
}).then(({ isRenew }) => { |
|
|
|
|
// 1正常显示资源，0显示续费 |
|
|
|
|
this.overdue = isRenew |
|
|
|
|
this.getChapter() |
|
|
|
|
this.getChapter(1) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
async getChapter() { |
|
|
|
|
let res = await this.$get(`${this.api.curriculumChapter}/${this.courseId}`); |
|
|
|
|
async getChapter(first) { |
|
|
|
|
let res = await this.$post(`${this.api.courseLearningProgress}?courseId=${this.courseId}`); |
|
|
|
|
this.chapterList = res.chapterList; |
|
|
|
|
if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length) { |
|
|
|
|
this.schedule = res.schedule.replace('%', '') |
|
|
|
|
if (first && this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length) { |
|
|
|
|
this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name, 1); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -245,6 +273,24 @@ export default { |
|
|
|
|
if('mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv'.includes(suf)) return '视频' |
|
|
|
|
return suf |
|
|
|
|
}, |
|
|
|
|
// tab切换 |
|
|
|
|
tabChange(item) { |
|
|
|
|
this.active = item.id |
|
|
|
|
}, |
|
|
|
|
// 勾选/取消勾选学习进度 |
|
|
|
|
studySection(chapter, section) { |
|
|
|
|
section.whetherToStudyOrNot ? |
|
|
|
|
this.$post(`${this.api.deleteLearningProgress}?id=${section.learningProgressId}`).then(({ isRenew }) => { |
|
|
|
|
this.getChapter() |
|
|
|
|
}).catch(res => {}) : |
|
|
|
|
this.$post(this.api.saveLearningProgress, { |
|
|
|
|
chapterId: chapter.id, |
|
|
|
|
cid: this.courseId, |
|
|
|
|
subsectionId: section.id, |
|
|
|
|
}).then(({ isRenew }) => { |
|
|
|
|
this.getChapter() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
preview(row, chapterName, showDia = 0) { |
|
|
|
|
// 如果没过期，则正常预览，否则显示购买弹框 |
|
|
|
|
if (this.overdue || showDia) { |
|
|
|
|
@ -513,6 +559,17 @@ $height: 700px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
.pro-title { |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
/deep/.el-progress-bar { |
|
|
|
|
width: 95%; |
|
|
|
|
} |
|
|
|
|
/deep/.el-progress__text { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.desc-wrap{ |
|
|
|
|
position: relative; |
|
|
|
|
.desc{ |
|
|
|
|
@ -567,6 +624,8 @@ $height: 700px; |
|
|
|
|
margin-top: 12px; |
|
|
|
|
background-color: #121214; |
|
|
|
|
.sectionName{ |
|
|
|
|
position: relative; |
|
|
|
|
padding-right: 15px; |
|
|
|
|
margin: 12px 0; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #999; |
|
|
|
|
@ -575,6 +634,18 @@ $height: 700px; |
|
|
|
|
img { |
|
|
|
|
margin-right: 8px; |
|
|
|
|
} |
|
|
|
|
.icon { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 0; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #00c935; |
|
|
|
|
} |
|
|
|
|
.circle { |
|
|
|
|
width: 14px; |
|
|
|
|
height: 14px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
border: 1px solid #ccc; |
|
|
|
|
} |
|
|
|
|
&.active{ |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
@ -736,6 +807,25 @@ $height: 700px; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tabs { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
.item { |
|
|
|
|
padding: 0 10px; |
|
|
|
|
margin-right: 16px; |
|
|
|
|
font-size: 17px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #333; |
|
|
|
|
line-height: 50px; |
|
|
|
|
border-bottom: 3px solid transparent; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&.active { |
|
|
|
|
color: #007EFF; |
|
|
|
|
border-color: #007EFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1430px) { |
|
|
|
|
.wrap { |
|
|
|
|
padding: 12px 100px 20px; |
|
|
|
|
|
