You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
393 lines
11 KiB
393 lines
11 KiB
<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"> |
|
<!-- <source :src="curRow.fileUrl" type="video/mp4"> |
|
您的终端不支持 video 标签。 --> |
|
</video> |
|
</view> |
|
|
|
<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"> |
|
<mp-html class="des-html" :tag-style="mpStyle" :content="briefIntroduction"/> |
|
</view> |
|
|
|
<!-- 课程目录 --> |
|
<view v-show="curTab === 1"> |
|
<uni-search-bar class="search" radius="30" placeholder="请输入章节名称" v-model="keyword" clearButton="auto" cancelButton="none" /> |
|
|
|
<view v-if="chapterList.length" class="chapters"> |
|
<view class="chapter" v-for="(item, i) in chapterList" :key="i"> |
|
<view class="chapterName"> |
|
{{ item.name }} |
|
<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)"> |
|
<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" |
|
src="https://izhixinyun.com/images/exts/word.png" alt=""> |
|
<image v-else-if="section.fileType === 'txt'" class="ext" src="https://izhixinyun.com/images/exts/txt.png" alt=""> |
|
<image v-else-if="section.fileType === 'pdf'" class="ext" src="https://izhixinyun.com/images/exts/pdf.png" alt=""> |
|
<image v-else class="ext" src="https://izhixinyun.com/images/exts/pic.png" alt=""> |
|
{{ section.name }} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- 练习成绩 --> |
|
<view v-show="curTab === 2 && practices.length" class="list"> |
|
<view v-for="(item, i) in practices" :key="i" class="item" @click="toPrac(item)"> |
|
<view class="c-name">{{ item.projectName }}</view> |
|
<view class="line">最高分：{{ item.hightScore }}  练习次数：{{ item.practiceNum }}</view> |
|
<view class="line">累计练习时长（小时）：{{ item.hightScore }}</view> |
|
<view class="line">最近练习时间：{{ item.lastTime }}</view> |
|
<view class="btn">练习情况</view> |
|
</view> |
|
</view> |
|
|
|
<!-- 考核成绩 --> |
|
<view v-show="curTab === 3 && ass.length" class="list"> |
|
<view v-for="(item, i) in ass" :key="i" class="item" @click="toDetail(item)"> |
|
<view class="c-name">{{ item.experimentalName }}</view> |
|
<view class="line">得分：{{ item.score }}  耗时：{{ item.timeSum }}min</view> |
|
<view class="line">考核开始时间：{{ item.startTime }}</view> |
|
<view class="line">考核结束时间：{{ item.submitTime }}</view> |
|
<view class="btn">成绩报告</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { queryChaptersAndSubsections, curriculumDetail, queryPracticeByStudent, queryAssessmentByStudent, getPlayAuth } from '@/apis/modules/course.js' |
|
// import Aliplayer from 'aliyun-aliplayer'; |
|
// import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'; |
|
export default { |
|
data() { |
|
return { |
|
cid: '', |
|
mallId: '', |
|
curTab: 1, |
|
tabs: [ |
|
{ |
|
name: '课程介绍', |
|
id: 0 |
|
}, |
|
{ |
|
name: '课程目录', |
|
id: 1 |
|
}, |
|
{ |
|
name: '练习成绩', |
|
id: 2 |
|
}, |
|
{ |
|
name: '考核成绩', |
|
id: 3 |
|
} |
|
], |
|
searchTimer: null, |
|
keyword: '', |
|
chapterList: [], |
|
briefIntroduction: '', |
|
|
|
practices: [], |
|
reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据 |
|
status: 'more', // 上拉加载状态 more|loading|noMore |
|
page: 1, |
|
pageSize: 10, |
|
|
|
ass: [], |
|
reachBottomAss: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据 |
|
statusAss: 'more', // 上拉加载状态 more|loading|noMore |
|
pageAss: 1, |
|
pageSizeAss: 10, |
|
|
|
dotsStyles: { |
|
backgroundColor: 'rgba(83, 200, 249,0.3)', |
|
border: '1px rgba(83, 200, 249,0.3) solid', |
|
color: '#fff', |
|
selectedBackgroundColor: 'rgba(83, 200, 249,0.9)', |
|
selectedBorder: '1px rgba(83, 200, 249,0.9) solid' |
|
}, |
|
mpStyle: { |
|
p: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;', |
|
span: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;' |
|
}, |
|
|
|
playAuth: '', |
|
player: null, |
|
curRow: {}, |
|
} |
|
}, |
|
watch: { |
|
keyword () { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.getChapter() |
|
}, 500) |
|
} |
|
}, |
|
// 下拉刷新 |
|
onPullDownRefresh() { |
|
this.curTab === 2 && this.initPrac() |
|
this.curTab === 3 && this.initAss() |
|
setTimeout(() => { |
|
uni.stopPullDownRefresh() |
|
}, 1500) |
|
}, |
|
// 上拉加载 |
|
onReachBottom() { |
|
if (this.curTab === 2) { |
|
// 练习 |
|
if (this.reachBottom >= 0) { |
|
this.reachBottom = 1 |
|
this.status = 'loading' |
|
this.getPractices() |
|
} |
|
} else if (this.curTab === 3) { |
|
// 练习 |
|
if (this.reachBottomAss >= 0) { |
|
this.reachBottomAss = 1 |
|
this.statusAss = 'loading' |
|
this.getAss() |
|
} |
|
} |
|
}, |
|
onShow() { |
|
const pages = getCurrentPages() |
|
const { options } = pages[pages.length - 1] |
|
this.cid = options.cid |
|
this.mallId = options.mallId |
|
this.getChapter() |
|
}, |
|
methods: { |
|
// 获取章节小节 |
|
async getChapter () { |
|
if (this.cid) { |
|
const res = await queryChaptersAndSubsections(this.cid) |
|
this.chapterList = res.chapterList |
|
// if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length && !this.commentId) { |
|
// this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name, 1); |
|
// } |
|
} |
|
}, |
|
// 获取介绍 |
|
async getInfo () { |
|
if (this.cid && this.mallId) { |
|
const { data } = await curriculumDetail(this.cid, this.mallId) |
|
this.briefIntroduction = data.briefIntroduction |
|
} |
|
}, |
|
// 练习成绩 |
|
async getPractices () { |
|
const { page } = await queryPracticeByStudent({ |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
mallId: this.mallId, |
|
curriculumId: this.cid |
|
}) |
|
this.practices = this.reachBottom > 0 ? [...this.practices, ...page.records] : page.records |
|
this.page++ // 每次获取了数据后page+1 |
|
const noMore = this.practices.length === page.total // 是否加载完所有数据 |
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore |
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1 |
|
}, |
|
// 考核成绩 |
|
async getAss () { |
|
const { page } = await queryAssessmentByStudent({ |
|
pageNum: this.pageAss, |
|
pageSize: this.pageSizeAss, |
|
mallId: this.mallId, |
|
curriculumId: this.cid |
|
}) |
|
this.ass = this.reachBottom > 0 ? [...this.ass, ...page.records] : page.records |
|
this.pageAss++ // 每次获取了数据后page+1 |
|
const noMore = this.ass.length === page.total // 是否加载完所有数据 |
|
this.statusAss = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore |
|
this.reachBottomAss = noMore ? -1 : 0 // 加载完了则设置为-1 |
|
}, |
|
initPrac() { |
|
this.page = 1 |
|
this.reachBottom = 0 |
|
this.getPractices() |
|
}, |
|
initAss() { |
|
this.pageAss = 1 |
|
this.reachBottomAss = 0 |
|
this.getAss() |
|
}, |
|
// tab切换 |
|
tabChange(id) { |
|
this.curTab = id |
|
!id && !this.briefIntroduction && this.getInfo() |
|
id === 2 && !this.practices.length && this.initPrac() |
|
id === 3 && !this.ass.length && this.initAss() |
|
}, |
|
// 练习跳转 |
|
toPrac(row) { |
|
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)) { |
|
// this.$set(row, 'isVideo', true) |
|
row.isVideo = true |
|
} else if (this.$util.exts.img.includes(row.fileType)) { |
|
row.isPic = true |
|
} |
|
this.curRow = row |
|
}, |
|
// 预览文件 |
|
secClick(row) { |
|
this.handleFileType(row) |
|
// debugger |
|
if (this.curRow.isVideo) { |
|
// 阿里云视频点播 |
|
if (row.fileId) { |
|
getPlayAuth(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); |
|
} else { |
|
this.player = new Aliplayer({ |
|
id: "player", |
|
width: "100%", |
|
autoplay: false, |
|
vid: row.fileId, |
|
playauth: this.playAuth, |
|
encryptType: 1 //当播放私有加密流时需要设置。 |
|
}); |
|
} |
|
}); |
|
}).catch(res => { }); |
|
} |
|
} |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.file-wrap { |
|
.pic, .video { |
|
width: 100%; |
|
height: 400rpx; |
|
} |
|
.pic { |
|
object-fit: cover; |
|
} |
|
} |
|
.tabs { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-bottom: 32rpx; |
|
li { |
|
position: relative; |
|
text-align: center; |
|
font-size: 28rpx; |
|
color: #333; |
|
white-space: nowrap; |
|
} |
|
.active { |
|
color: #007EFF; |
|
&:after { |
|
content: ''; |
|
position: absolute; |
|
bottom: -12rpx; |
|
left: 50%; |
|
width: 116%; |
|
height: 4rpx; |
|
margin: 10rpx auto 0; |
|
background-color: #007EFF; |
|
transform: translateX(-50%); |
|
} |
|
} |
|
} |
|
.detail { |
|
padding: 34rpx 32rpx; |
|
background-color: #fff; |
|
.chapters { |
|
margin-top: 20rpx; |
|
} |
|
.chapter { |
|
margin-bottom: 40rpx; |
|
.chapterName { |
|
display: flex; |
|
justify-content: space-between; |
|
font-size: 30rpx; |
|
color: #333; |
|
} |
|
.arrow { |
|
font-size: 28rpx; |
|
} |
|
.section { |
|
margin: 20rpx 0; |
|
} |
|
.sectionName { |
|
display: flex; |
|
align-items: center; |
|
margin: 30rpx 0; |
|
font-size: 26rpx; |
|
color: #333; |
|
} |
|
.ext { |
|
width: 36rpx; |
|
height: 36rpx; |
|
margin-right: 20rpx; |
|
} |
|
} |
|
.list { |
|
.item { |
|
position: relative; |
|
padding: 20rpx 0; |
|
border-bottom: 1px solid #e6e6e6; |
|
} |
|
.c-name { |
|
font-size: 32rpx; |
|
font-weight: 600; |
|
color: #333; |
|
} |
|
.line { |
|
margin-top: 14rpx; |
|
font-size: 26rpx; |
|
color: #828282; |
|
} |
|
.btn { |
|
position: absolute; |
|
bottom: 20rpx; |
|
right: 0; |
|
padding: 10rpx 30rpx; |
|
font-size: 28rpx; |
|
color: #fff; |
|
background-color: #007EFF; |
|
border-radius: 36rpx; |
|
} |
|
} |
|
} |
|
</style>
|
|
|