|
|
|
|
@ -1,31 +1,50 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap pb"> |
|
|
|
|
<breadcrumb ref="breadcrumb" :data="'课程学习/' + courseName" :query="breadcrumbQuery"></breadcrumb> |
|
|
|
|
<breadcrumb ref="breadcrumb" |
|
|
|
|
:data="'课程学习/' + courseName" |
|
|
|
|
:query="breadcrumbQuery"></breadcrumb> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<div class="cover" :class="{'is-word': showMask1}"> |
|
|
|
|
<img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%"> |
|
|
|
|
<div class="cover" |
|
|
|
|
:class="{'is-word': showMask1}"> |
|
|
|
|
<img v-if="coverUrl" |
|
|
|
|
:src="coverUrl" |
|
|
|
|
alt="" |
|
|
|
|
width="100%" |
|
|
|
|
height="100%"> |
|
|
|
|
<template v-else-if="iframeSrc"> |
|
|
|
|
<iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe> |
|
|
|
|
<iframe class="inner fileIframe" |
|
|
|
|
id="fileIframe" |
|
|
|
|
:src="iframeSrc" |
|
|
|
|
frameborder="0"></iframe> |
|
|
|
|
<template v-if="showMask"> |
|
|
|
|
<div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div> |
|
|
|
|
<div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div> |
|
|
|
|
<div class="mask" |
|
|
|
|
style="width: 500px;height: 30px;top: 53px;right: 320px"></div> |
|
|
|
|
<div class="mask" |
|
|
|
|
style="width: 175px;height: 30px;top: 53px;right: 5px"></div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="showMask1"> |
|
|
|
|
<div class="word-mask" style="height: 40px;"></div> |
|
|
|
|
<div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div> |
|
|
|
|
<div class="word-mask" |
|
|
|
|
style="height: 40px;"></div> |
|
|
|
|
<div class="word-mask2" |
|
|
|
|
style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="showMask2"> |
|
|
|
|
<div class="excel-mask1" style="height: 48px;"></div> |
|
|
|
|
<div class="excel-mask1" |
|
|
|
|
style="height: 48px;"></div> |
|
|
|
|
</template> |
|
|
|
|
</template> |
|
|
|
|
<div class="pdf inner" v-else-if="pdfSrc"> |
|
|
|
|
<div class="pdf inner" |
|
|
|
|
v-else-if="pdfSrc"> |
|
|
|
|
<p class="arrow"> |
|
|
|
|
<span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span> |
|
|
|
|
<span @click="changePdfPage(0)" |
|
|
|
|
class="turn el-icon-arrow-left" |
|
|
|
|
:class="{grey: currentPage==1}"></span> |
|
|
|
|
{{currentPage}} / {{pageCount}} |
|
|
|
|
<span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span> |
|
|
|
|
<span @click="changePdfPage(1)" |
|
|
|
|
class="turn el-icon-arrow-right" |
|
|
|
|
:class="{grey: currentPage==pageCount}"></span> |
|
|
|
|
</p> |
|
|
|
|
<pdf |
|
|
|
|
class="pdf-wrap" |
|
|
|
|
<pdf class="pdf-wrap" |
|
|
|
|
:src="pdfSrc" |
|
|
|
|
:page="currentPage" |
|
|
|
|
@num-pages="pageCount=$event" |
|
|
|
|
@ -33,31 +52,55 @@ |
|
|
|
|
@loaded="loadPdfHandler"> |
|
|
|
|
</pdf> |
|
|
|
|
</div> |
|
|
|
|
<div class="inner" v-else-if="playAuth"> |
|
|
|
|
<div class="video_wid" id="player"></div> |
|
|
|
|
<div class="inner" |
|
|
|
|
v-else-if="playAuth"> |
|
|
|
|
<div class="video_wid" |
|
|
|
|
id="player"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="catalog"> |
|
|
|
|
<div class="list"> |
|
|
|
|
<h4 class="title">{{courseName}}</h4> |
|
|
|
|
<div class="desc-wrap"> |
|
|
|
|
<div class="desc" :class="{active: desShrink}" v-html="description"></div> |
|
|
|
|
<i class="arrow" :class="{active: desShrink}" v-if="description && description.length > 40"> |
|
|
|
|
<div class="desc" |
|
|
|
|
:class="{active: desShrink}" |
|
|
|
|
v-html="description"></div> |
|
|
|
|
<i class="arrow" |
|
|
|
|
:class="{active: desShrink}" |
|
|
|
|
v-if="description && description.length > 40"> |
|
|
|
|
</i> |
|
|
|
|
</div> |
|
|
|
|
<div class="chapters"> |
|
|
|
|
<template v-if="chapterList && chapterList.length"> |
|
|
|
|
<div class="chapter" v-for="(item,index) in chapterList" :key="index"> |
|
|
|
|
<div class="chapter" |
|
|
|
|
v-for="(item,index) in chapterList" |
|
|
|
|
:key="index"> |
|
|
|
|
<div class="chapterName">{{item.name}}</div> |
|
|
|
|
<div class="section" v-if="item.subsectionList.length"> |
|
|
|
|
<div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)"> |
|
|
|
|
<p class="sectionName" :class="{active: curLink === `${item.name}${section.name}`}"> |
|
|
|
|
<img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" src="@/assets/img/exts/word.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt=""> |
|
|
|
|
<img v-else src="@/assets/img/exts/pic.png" alt=""> |
|
|
|
|
<div class="section" |
|
|
|
|
v-if="item.subsectionList.length"> |
|
|
|
|
<div v-for="(section,i) in item.subsectionList" |
|
|
|
|
:key="i" |
|
|
|
|
@click="preview(section, item.name)"> |
|
|
|
|
<p class="sectionName" |
|
|
|
|
:class="{active: curLink === `${item.name}${section.name}`}"> |
|
|
|
|
<img v-if="section.fileType === 'pptx'" |
|
|
|
|
src="@/assets/img/exts/ppt.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'mp4'" |
|
|
|
|
src="@/assets/img/exts/video.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" |
|
|
|
|
src="@/assets/img/exts/word.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'txt'" |
|
|
|
|
src="@/assets/img/exts/txt.png" |
|
|
|
|
alt=""> |
|
|
|
|
<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 }} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
@ -183,7 +226,6 @@ export default { |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
this.curLink = `${chapterName}${row.name}`; |
|
|
|
|
this.player = null |
|
|
|
|
this.playauth = '' |
|
|
|
|
this.coverUrl = '' |
|
|
|
|
this.pdfSrc = '' |
|
|
|
|
@ -192,23 +234,27 @@ export default { |
|
|
|
|
this.isWord = false |
|
|
|
|
this.isExcel = false |
|
|
|
|
if (this.transferType(row.fileType) == '视频') { |
|
|
|
|
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => { |
|
|
|
|
this.playAuth = res.data.playAuth |
|
|
|
|
this.$get(`${this.api.getPlayAuthNakadai}/${row.fileId}`).then(res => { |
|
|
|
|
this.playAuth = res.playAuth |
|
|
|
|
// 如果已经产生了实例，则销毁重新创建，不然播放器会播放上一个视频 |
|
|
|
|
if (this.player) { |
|
|
|
|
this.player.dispose() |
|
|
|
|
this.player = null |
|
|
|
|
} |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
if (this.player) { |
|
|
|
|
this.player.replayByVidAndPlayAuth(row.fileId,this.playAuth) |
|
|
|
|
this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth); |
|
|
|
|
} else { |
|
|
|
|
this.player = new Aliplayer({ |
|
|
|
|
id: 'player', |
|
|
|
|
width: '100%', |
|
|
|
|
id: "player", |
|
|
|
|
width: "100%", |
|
|
|
|
autoplay: false, |
|
|
|
|
vid: row.fileId, |
|
|
|
|
playauth: this.playAuth, |
|
|
|
|
encryptType:1, //当播放私有加密流时需要设置。 |
|
|
|
|
}) |
|
|
|
|
encryptType: 1 //当播放私有加密流时需要设置。 |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} else if (this.transferType(row.fileType) == '图片') { |
|
|
|
|
this.coverUrl = row.fileUrl |
|
|
|
|
@ -289,7 +335,8 @@ export default { |
|
|
|
|
</style> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
$height: 700px; |
|
|
|
|
.video_wid,.cover{ |
|
|
|
|
.video_wid, |
|
|
|
|
.cover { |
|
|
|
|
position: relative; |
|
|
|
|
width: 76%; |
|
|
|
|
height: $height !important; |
|
|
|
|
@ -316,7 +363,8 @@ $height: 700px; |
|
|
|
|
.fileIframe { |
|
|
|
|
height: $height !important; |
|
|
|
|
} |
|
|
|
|
.video_wid,.inner{ |
|
|
|
|
.video_wid, |
|
|
|
|
.inner { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100% !important; |
|
|
|
|
border: 0; |
|
|
|
|
@ -344,7 +392,7 @@ $height: 700px; |
|
|
|
|
background: url(../../../assets/img/entry.png) 0 0/100% 100% no-repeat; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:hover { |
|
|
|
|
opacity: .9; |
|
|
|
|
opacity: 0.9; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -427,10 +475,10 @@ $height: 700px; |
|
|
|
|
} |
|
|
|
|
.el-image-viewer__wrapper { |
|
|
|
|
transform: translateY(-10px); |
|
|
|
|
transition: transform .5s; |
|
|
|
|
transition: transform 0.5s; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
transform: translateY(0) |
|
|
|
|
transform: translateY(0); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.el-image-viewer__close { |
|
|
|
|
@ -537,12 +585,12 @@ $height: 700px; |
|
|
|
|
width: 238px; |
|
|
|
|
padding: 16px; |
|
|
|
|
margin: 0 20px 20px 0; |
|
|
|
|
background-color: #F6F8FA; |
|
|
|
|
background-color: #f6f8fa; |
|
|
|
|
border-radius: 16px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:hover { |
|
|
|
|
span { |
|
|
|
|
color: #007EFF; |
|
|
|
|
color: #007eff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&:nth-child(3n) { |
|
|
|
|
|
