|
|
|
|
@ -2,20 +2,25 @@ |
|
|
|
|
<view class="wrap"> |
|
|
|
|
<!-- <web-view class="wv" src="https://view.officeapps.live.com/op/view.aspx?src=https://huoran.oss-cn-shenzhen.aliyuncs.com/1732588133977.xlsx"></web-view> --> |
|
|
|
|
<view class="file-wrap"> |
|
|
|
|
<image v-if="!curRow.fileUrl && coverUrl" class="pic" :src="coverUrl" mode="widthFix"></image> |
|
|
|
|
<image v-if="!curRow.viewUrl && coverUrl" class="pic" :src="coverUrl" mode="widthFix"></image> |
|
|
|
|
<template v-else> |
|
|
|
|
<image v-if="curRow.isPic" class="pic" :src="curRow.fileUrl" mode="widthFix" @click="hidePlayList"></image> |
|
|
|
|
<video v-else-if="curRow.isVideo" class="video" :key="curRow.fileUrl" width="100%" height="100%" autoplay controls :src="curRow.fileUrl" type="video/mp4" @click="hidePlayList" @fullscreenchange="fullScreenChange"></video> |
|
|
|
|
<web-view v-else-if="curRow.isDoc" class="webview" :webview-styles="webviewStyles" :fullscreen="false" :src="curRow.fileUrl" @click="hidePlayList"></web-view> |
|
|
|
|
<!-- <web-view v-else-if="curRow.isDoc" class="webview" :webview-styles="webviewStyles" :fullscreen="false" src="https://huoran.oss-cn-shenzhen.aliyuncs.com/1732589800544.xlsx"></web-view> --> |
|
|
|
|
<image v-if="curRow.isPic" class="pic" :src="curRow.viewUrl" mode="widthFix" @click="hidePlayList"></image> |
|
|
|
|
<video v-else-if="curRow.isVideo" class="video" :key="curRow.viewUrl" width="100%" height="100%" autoplay controls :src="curRow.viewUrl" type="video/mp4" @click="hidePlayList" @fullscreenchange="fullScreenChange"></video> |
|
|
|
|
<view v-else-if="curRow.isDoc" class="webview-wrap"> |
|
|
|
|
<web-view class="webview" :webview-styles="webviewStyles" :fullscreen="false" :src="curRow.viewUrl" @click="hidePlayList"></web-view> |
|
|
|
|
<cover-view v-if="curRow.isPpt" class="webview-mask" @click="closePreview"> |
|
|
|
|
<cover-image class="icon" src="https://eduvessel.com/images/occupationlab/close-gray.png" alt="" mode="widthFix" /> |
|
|
|
|
</cover-view> |
|
|
|
|
<cover-image v-else class="webview-close" src="https://eduvessel.com/images/occupationlab/close-gray.png" alt="" mode="widthFix" /> |
|
|
|
|
</view> |
|
|
|
|
<!-- <web-view class="webview" :webview-styles="webviewStyles" :fullscreen="false" src="https://huoran.oss-cn-shenzhen.aliyuncs.com/1732589800544.xlsx"></web-view> --> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<cover-view v-show="!playListVisible && curRow.fileUrl" class="select-epi"> |
|
|
|
|
<cover-view v-show="!playListVisible && curRow.viewUrl && (!curRow.isVideo || videoFullScreen)" class="select-epi"> |
|
|
|
|
<cover-image class="icon" src="https://eduvessel.com/images/occupationlab/list.png" mode="widthFix" @click="showPlayList" /> |
|
|
|
|
</cover-view> |
|
|
|
|
|
|
|
|
|
<cover-view v-show="chapterList.length && playListVisible" :class="['chapters-full', {'full-screen': videoFullScreen}]"> |
|
|
|
|
<cover-image class="close" src="https://eduvessel.com/images/occupationlab/close.png" mode="widthFix" @click="hidePlayList" /> |
|
|
|
|
<cover-view class="chapters-scroll"> |
|
|
|
|
<cover-view v-for="(item, i) in chapterList" :key="i" class="chapter"> |
|
|
|
|
<cover-view class="chapterName">{{ item.name }}</cover-view> |
|
|
|
|
@ -33,6 +38,9 @@ |
|
|
|
|
</cover-view> |
|
|
|
|
</cover-view> |
|
|
|
|
</cover-view> |
|
|
|
|
<cover-view class="close-wrap" @click="hidePlayList"> |
|
|
|
|
<cover-image class="close" src="https://eduvessel.com/images/occupationlab/close.png" mode="widthFix" /> |
|
|
|
|
</cover-view> |
|
|
|
|
</cover-view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
@ -41,7 +49,6 @@ |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<view class="detail"> |
|
|
|
|
|
|
|
|
|
<!-- 课程介绍 --> |
|
|
|
|
<view v-show="!curTab" class="des"> |
|
|
|
|
<mp-html class="des-html" :tag-style="mpStyle" :content="briefIntroduction"/> |
|
|
|
|
@ -51,9 +58,9 @@ |
|
|
|
|
<view v-show="curTab === 1"> |
|
|
|
|
<view v-if="chapterList.length" class="chapters"> |
|
|
|
|
<view class="chapter" v-for="(item, i) in chapterList" :key="i"> |
|
|
|
|
<view class="chapterName"> |
|
|
|
|
<view class="chapterName" @click="toggleChapter(item)"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
<uni-icons class="arrow" type="bottom" color="#909090" @click="toggleChapter(item)"></uni-icons> |
|
|
|
|
<uni-icons :class="['arrow', {shrink: item.shrink}]" type="bottom" size="24" color="#909090"></uni-icons> |
|
|
|
|
</view> |
|
|
|
|
<view :class="['section', {shrink: item.shrink}]" v-if="item.subsectionList.length"> |
|
|
|
|
<view v-for="(section, j) in item.subsectionList" :key="j"class="sectionName" :class="{ active: curRow.id === section.id }" @click="secClick(section, item)"> |
|
|
|
|
@ -347,13 +354,19 @@ |
|
|
|
|
// 判断文件是图片/视频/pdf等 |
|
|
|
|
handleFileType(row) { |
|
|
|
|
const type = row.fileType |
|
|
|
|
if (this.$util.exts.video.includes(type)) { |
|
|
|
|
row.isVideo = true |
|
|
|
|
} else if (this.$util.exts.img.includes(type)) { |
|
|
|
|
row.isPic = true |
|
|
|
|
} else if (this.$util.exts.doc.includes(type)) { |
|
|
|
|
if (type === 'pptx' || type === 'ppt') { |
|
|
|
|
row.isPpt = true |
|
|
|
|
row.isDoc = true |
|
|
|
|
if (type === 'pptx' || type === 'ppt') row.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + row.fileUrl |
|
|
|
|
row.viewUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + row.fileUrl |
|
|
|
|
} else { |
|
|
|
|
if (this.$util.exts.video.includes(type)) { |
|
|
|
|
row.isVideo = true |
|
|
|
|
} else if (this.$util.exts.img.includes(type)) { |
|
|
|
|
row.isPic = true |
|
|
|
|
} else if (this.$util.exts.doc.includes(type)) { |
|
|
|
|
row.isDoc = true |
|
|
|
|
} |
|
|
|
|
row.viewUrl = row.fileUrl |
|
|
|
|
} |
|
|
|
|
this.curRow = row |
|
|
|
|
}, |
|
|
|
|
@ -375,8 +388,13 @@ |
|
|
|
|
this.playListVisible = !this.playListVisible |
|
|
|
|
}, |
|
|
|
|
hidePlayList() { |
|
|
|
|
console.log('close clicked') |
|
|
|
|
this.playListVisible = false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 关闭预览状态 |
|
|
|
|
closePreview() { |
|
|
|
|
this.curRow = {} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
@ -403,35 +421,80 @@ |
|
|
|
|
.select-epi { |
|
|
|
|
z-index: 1000; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 30px; |
|
|
|
|
top: 40px; |
|
|
|
|
right: -5px; |
|
|
|
|
padding: 8px; |
|
|
|
|
padding: 5px 12px; |
|
|
|
|
background-color: rgba(0, 0, 0, .6); |
|
|
|
|
border-radius: 0; |
|
|
|
|
border-top-left-radius: 10px; |
|
|
|
|
border-bottom-left-radius: 10px; |
|
|
|
|
// border-top-right-radius: 0; |
|
|
|
|
// border-bottom-right-radius: 0; |
|
|
|
|
.icon { |
|
|
|
|
width: 20px; |
|
|
|
|
width: 24px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.webview-wrap { |
|
|
|
|
height: 90vh; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.webview-mask { |
|
|
|
|
z-index: 9; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 50rpx; |
|
|
|
|
padding: 0 20rpx; |
|
|
|
|
background-color: #fff; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
.icon { |
|
|
|
|
width: 44rpx; |
|
|
|
|
height: 44rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.webview-close { |
|
|
|
|
z-index: 10; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 20rpx; |
|
|
|
|
right: 30rpx; |
|
|
|
|
width: 44rpx; |
|
|
|
|
height: 44rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.webview { |
|
|
|
|
position: absolute; |
|
|
|
|
top: -80rpx; |
|
|
|
|
} |
|
|
|
|
.chapters-full { |
|
|
|
|
z-index: 2; |
|
|
|
|
z-index: 100; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
width: 70vw; |
|
|
|
|
width: 100vw; |
|
|
|
|
height: 100vh; |
|
|
|
|
padding: 15px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: rgba(0, 0, 0, .6); |
|
|
|
|
background-color: rgba(0, 0, 0, .7); |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
.close { |
|
|
|
|
.close-wrap { |
|
|
|
|
z-index: 100; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 10px; |
|
|
|
|
right: 10px; |
|
|
|
|
width: 24px; |
|
|
|
|
height: 24px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 80rpx; |
|
|
|
|
height: 80rpx; |
|
|
|
|
} |
|
|
|
|
.close { |
|
|
|
|
width: 22px; |
|
|
|
|
height: 22px; |
|
|
|
|
} |
|
|
|
|
.chapters-scroll { |
|
|
|
|
height: 95vh; |
|
|
|
|
@ -450,8 +513,8 @@ |
|
|
|
|
.sectionName { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 0 6px; |
|
|
|
|
margin: 8px 0; |
|
|
|
|
padding: 10rpx 6px; |
|
|
|
|
margin: 6px 0; |
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
@ -459,12 +522,11 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.ext { |
|
|
|
|
width: 18px; |
|
|
|
|
// height: 18px; |
|
|
|
|
width: 14px; |
|
|
|
|
margin-right: 12px; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
max-width: 95%; |
|
|
|
|
max-width: 75vw; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
