|
|
|
|
@ -1,26 +1,31 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="wrap"> |
|
|
|
|
<view class="file-wrap"> |
|
|
|
|
<image v-if="curRow.isPic" class="pic" :src="curRow.fileUrl" mode="widthFix"></image> |
|
|
|
|
<video v-else-if="curRow.isVideo" class="video" :key="curRow.fileUrl" width="100%" height="100%" autoplay controls :src="curRow.fileUrl" type="video/mp4" @fullscreenchange="fullScreenChange"></video> |
|
|
|
|
<!-- --> |
|
|
|
|
<cover-view v-if="videoFullScreen" class="select-epi"> |
|
|
|
|
<!-- <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 v-if="curRow.fileUrl" class="file-wrap"> |
|
|
|
|
<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> --> |
|
|
|
|
|
|
|
|
|
<cover-view v-show="!playListVisible" class="select-epi"> |
|
|
|
|
<cover-image class="icon" src="https://eduvessel.com/images/occupationlab/list.png" mode="widthFix" @click="showPlayList" /> |
|
|
|
|
</cover-view> |
|
|
|
|
|
|
|
|
|
<cover-view v-if="chapterList.length && playListVisible" class="chapters-full"> |
|
|
|
|
<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> |
|
|
|
|
<cover-view class="section" v-if="item.subsectionList.length"> |
|
|
|
|
<cover-view v-for="(section, j) in item.subsectionList" :key="j"class="sectionName" :class="{ active: curLink === `${item.name}${section.name}` }" @click="secClick(section, item)"> |
|
|
|
|
<cover-image v-if="section.fileType === 'pptx'" class="ext" src="https://izhixinyun.com/images/exts/ppt.png" alt="" /> |
|
|
|
|
<cover-image v-else-if="section.fileType === 'mp4'" class="ext" src="https://izhixinyun.com/images/exts/video.png" alt="" /> |
|
|
|
|
<cover-view v-for="(section, j) in item.subsectionList" :key="j"class="sectionName" :class="{ active: curRow.id === section.id }" @click="secClick(section, item)"> |
|
|
|
|
<cover-image v-if="section.fileType === 'pptx'" class="ext" src="https://izhixinyun.com/images/exts/ppt.png" alt="" mode="widthFix" /> |
|
|
|
|
<cover-image v-else-if="section.fileType === 'mp4'" class="ext" src="https://izhixinyun.com/images/exts/video.png" alt="" mode="widthFix" /> |
|
|
|
|
<cover-image v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" class="ext" |
|
|
|
|
src="https://izhixinyun.com/images/exts/word.png" alt="" /> |
|
|
|
|
<cover-image v-else-if="section.fileType === 'txt'" class="ext" src="https://izhixinyun.com/images/exts/txt.png" alt="" /> |
|
|
|
|
<cover-image v-else-if="section.fileType === 'pdf'" class="ext" src="https://izhixinyun.com/images/exts/pdf.png" alt="" /> |
|
|
|
|
<cover-image v-else class="ext" src="https://izhixinyun.com/images/exts/pic.png" alt="" /> |
|
|
|
|
src="https://izhixinyun.com/images/exts/word.png" alt="" mode="widthFix" /> |
|
|
|
|
<cover-image v-else-if="section.fileType === 'txt'" class="ext" src="https://izhixinyun.com/images/exts/txt.png" alt="" mode="widthFix" /> |
|
|
|
|
<cover-image v-else-if="section.fileType === 'pdf'" class="ext" src="https://izhixinyun.com/images/exts/pdf.png" alt="" mode="widthFix" /> |
|
|
|
|
<cover-image v-else class="ext" src="https://izhixinyun.com/images/exts/pic.png" alt="" mode="widthFix" /> |
|
|
|
|
<cover-view class="text">{{ section.name }}</cover-view> |
|
|
|
|
</cover-view> |
|
|
|
|
</cover-view> |
|
|
|
|
@ -29,10 +34,11 @@ |
|
|
|
|
</cover-view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<ul class="tabs"> |
|
|
|
|
<li v-for="(item, i) in tabs" :key="i" :class="{active: curTab === item.id}" @click="tabChange(item.id)">{{ item.name }}</li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<view class="detail"> |
|
|
|
|
<ul class="tabs"> |
|
|
|
|
<li v-for="(item, i) in tabs" :key="i" :class="{active: curTab === item.id}" @click="tabChange(item.id)">{{ item.name }}</li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<!-- 课程介绍 --> |
|
|
|
|
<view v-show="!curTab" class="des"> |
|
|
|
|
@ -50,7 +56,7 @@ |
|
|
|
|
<uni-icons class="arrow" type="bottom" color="#909090"></uni-icons> |
|
|
|
|
</view> |
|
|
|
|
<view class="section" v-if="item.subsectionList.length"> |
|
|
|
|
<view v-for="(section, j) in item.subsectionList" :key="j"class="sectionName" :class="{ active: curLink === `${item.name}${section.name}` }" @click="secClick(section, item)"> |
|
|
|
|
<view v-for="(section, j) in item.subsectionList" :key="j"class="sectionName" :class="{ active: curRow.id === section.id }" @click="secClick(section, item)"> |
|
|
|
|
<image v-if="section.fileType === 'pptx'" class="ext" src="https://izhixinyun.com/images/exts/ppt.png" alt=""> |
|
|
|
|
<image v-else-if="section.fileType === 'mp4'" class="ext" src="https://izhixinyun.com/images/exts/video.png" alt=""> |
|
|
|
|
<image v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" class="ext" |
|
|
|
|
@ -158,7 +164,14 @@ |
|
|
|
|
player: null, |
|
|
|
|
curRow: {}, |
|
|
|
|
playListVisible: false, |
|
|
|
|
videoFullScreen: false |
|
|
|
|
videoFullScreen: false, |
|
|
|
|
webviewStyles: { |
|
|
|
|
progress: { |
|
|
|
|
color: '#FF3333' |
|
|
|
|
}, |
|
|
|
|
width: '100%', |
|
|
|
|
height: '400' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
@ -270,25 +283,23 @@ |
|
|
|
|
this.$util.to(`../practiceDetail/practiceDetail?cid=${this.cid}&projectId=${row.projectId || ''}&paperId=${row.paperId || ''}`) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 判断文件格式 |
|
|
|
|
transferType (ext) { |
|
|
|
|
const suf = ext.toLowerCase() |
|
|
|
|
if ('jpg,jpeg,png,gif,svg,psd'.includes(suf)) return '图片' |
|
|
|
|
if ('mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv'.includes(suf)) return '视频' |
|
|
|
|
return suf |
|
|
|
|
}, |
|
|
|
|
// 判断文件是图片/视频/pdf等 |
|
|
|
|
handleFileType(row) { |
|
|
|
|
if (this.$util.exts.video.includes(row.fileType)) { |
|
|
|
|
const type = row.fileType |
|
|
|
|
if (this.$util.exts.video.includes(type)) { |
|
|
|
|
row.isVideo = true |
|
|
|
|
} else if (this.$util.exts.img.includes(row.fileType)) { |
|
|
|
|
} else if (this.$util.exts.img.includes(type)) { |
|
|
|
|
row.isPic = true |
|
|
|
|
} else if (this.$util.exts.doc.includes(type)) { |
|
|
|
|
row.isDoc = true |
|
|
|
|
if (type === 'pptx' || type === 'ppt') row.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + row.fileUrl |
|
|
|
|
} |
|
|
|
|
this.curRow = row |
|
|
|
|
}, |
|
|
|
|
// 预览文件 |
|
|
|
|
secClick(row) { |
|
|
|
|
this.playListVisible = false |
|
|
|
|
this.videoFullScreen = false |
|
|
|
|
this.handleFileType(row) |
|
|
|
|
// debugger |
|
|
|
|
if (this.curRow.isVideo) { |
|
|
|
|
@ -317,6 +328,36 @@ |
|
|
|
|
}) |
|
|
|
|
}).catch(res => { }); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
// const that = this |
|
|
|
|
// uni.downloadFile({ |
|
|
|
|
// // url: this.curRow.fileUrl, |
|
|
|
|
// url: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/1732589800544.xlsx', |
|
|
|
|
// success: function(res) { |
|
|
|
|
// console.log(11, res) |
|
|
|
|
// uni.hideLoading(); |
|
|
|
|
// uni.showLoading({ |
|
|
|
|
// title: '正在打开', |
|
|
|
|
// mask: true |
|
|
|
|
// }) |
|
|
|
|
// // 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。 |
|
|
|
|
// uni.openDocument({ |
|
|
|
|
// filePath: res.tempFilePath, |
|
|
|
|
// // fileType: that.curRow.fileType, // 文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx |
|
|
|
|
// fileType: 'xlsx', |
|
|
|
|
// showMenu: true, // 允许出现分享功能 |
|
|
|
|
// success: res => { |
|
|
|
|
// uni.hideLoading() |
|
|
|
|
// }, |
|
|
|
|
// fail: openError => { |
|
|
|
|
// uni.hideLoading() |
|
|
|
|
// } |
|
|
|
|
// }) |
|
|
|
|
// }, |
|
|
|
|
// fail: function(err) { |
|
|
|
|
// uni.hideLoading() |
|
|
|
|
// } |
|
|
|
|
// }) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 视频全屏回调 |
|
|
|
|
@ -329,18 +370,29 @@ |
|
|
|
|
// 选集 |
|
|
|
|
showPlayList() { |
|
|
|
|
this.playListVisible = !this.playListVisible |
|
|
|
|
}, |
|
|
|
|
hidePlayList() { |
|
|
|
|
this.playListVisible = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.wv { |
|
|
|
|
display: block; |
|
|
|
|
height: 100vh !important; |
|
|
|
|
} |
|
|
|
|
.file-wrap { |
|
|
|
|
position: relative; |
|
|
|
|
.pic, .video { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 400rpx; |
|
|
|
|
} |
|
|
|
|
.webview { |
|
|
|
|
display: block; |
|
|
|
|
// height: 400rpx !important; |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
object-fit: cover; |
|
|
|
|
} |
|
|
|
|
@ -348,62 +400,88 @@ |
|
|
|
|
.select-epi { |
|
|
|
|
z-index: 1000; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 30rpx; |
|
|
|
|
right: -5rpx; |
|
|
|
|
padding: 8rpx; |
|
|
|
|
top: 30px; |
|
|
|
|
right: -5px; |
|
|
|
|
padding: 8px; |
|
|
|
|
background-color: rgba(0, 0, 0, .6); |
|
|
|
|
border-top-left-radius: 10rpx; |
|
|
|
|
border-bottom-left-radius: 10rpx; |
|
|
|
|
border-top-left-radius: 10px; |
|
|
|
|
border-bottom-left-radius: 10px; |
|
|
|
|
.icon { |
|
|
|
|
width: 20rpx; |
|
|
|
|
height: 20rpx; |
|
|
|
|
width: 20px; |
|
|
|
|
// height: 20rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.chapters-full { |
|
|
|
|
z-index: 2; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
width: 50vw; |
|
|
|
|
width: 70vw; |
|
|
|
|
height: 100vh; |
|
|
|
|
padding: 15rpx; |
|
|
|
|
padding: 15px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: rgba(0, 0, 0, .6); |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
.close { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 10px; |
|
|
|
|
right: 10px; |
|
|
|
|
width: 24px; |
|
|
|
|
height: 24px; |
|
|
|
|
} |
|
|
|
|
.chapters-scroll { |
|
|
|
|
height: 95vh; |
|
|
|
|
overflow: scroll; |
|
|
|
|
} |
|
|
|
|
.chapter { |
|
|
|
|
margin-bottom: 10rpx; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
.chapterName { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
font-size: 14rpx; |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
.section { |
|
|
|
|
margin: 5rpx 0; |
|
|
|
|
margin: 5px 0; |
|
|
|
|
} |
|
|
|
|
.sectionName { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 0 6rpx; |
|
|
|
|
margin: 8rpx 0; |
|
|
|
|
font-size: 12rpx; |
|
|
|
|
padding: 0 6px; |
|
|
|
|
margin: 8px 0; |
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
color: #007EFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.ext { |
|
|
|
|
width: 18px; |
|
|
|
|
height: 18px; |
|
|
|
|
margin-right: 12rpx; |
|
|
|
|
// height: 18px; |
|
|
|
|
margin-right: 12px; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
max-width: 95%; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.full-screen { |
|
|
|
|
width: 50vw; |
|
|
|
|
.close { |
|
|
|
|
top: 30px; |
|
|
|
|
right: 30px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tabs { |
|
|
|
|
z-index: 1; |
|
|
|
|
position: sticky; |
|
|
|
|
top: 0; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-bottom: 32rpx; |
|
|
|
|
padding: 30rpx; |
|
|
|
|
background-color: #fff; |
|
|
|
|
li { |
|
|
|
|
position: relative; |
|
|
|
|
text-align: center; |
|
|
|
|
@ -427,7 +505,7 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.detail { |
|
|
|
|
padding: 34rpx 32rpx; |
|
|
|
|
padding: 0 30rpx 30rpx; |
|
|
|
|
background-color: #fff; |
|
|
|
|
.chapters { |
|
|
|
|
margin-top: 20rpx; |
|
|
|
|
@ -452,6 +530,10 @@ |
|
|
|
|
margin: 30rpx 0; |
|
|
|
|
font-size: 26rpx; |
|
|
|
|
color: #333; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
color: #007EFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.ext { |
|
|
|
|
width: 36rpx; |
|
|
|
|
|
