FE_occupationlab_miniProgram/course/courseDetail/courseDetail.vue

<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">
				<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 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-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="" />
							  <cover-view class="text">{{ section.name }}</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</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">
				<view v-if="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 }}&emsp;&emsp;练习次数：{{ item.practiceNum }}</view>
						<view class="line">累计练习时长（小时）：{{ item.hightScore }}</view>
						<view class="line">最近练习时间：{{ item.lastTime }}</view>
						<view class="btn">练习情况</view>
					</view>
				</view>
				<empty v-else />
			</view>
			
			
			<!-- 考核成绩 -->
			<view v-show="curTab === 3">
				<view v-if="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 }}&emsp;&emsp;耗时：{{ item.timeSum }}min</view>
						<view class="line">考核开始时间：{{ item.startTime }}</view>
						<view class="line">考核结束时间：{{ item.submitTime }}</view>
						<view class="btn">成绩报告</view>
					</view>
				</view>
				<empty v-else />
			</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: {},
				playListVisible: false,
				videoFullScreen: false
			}
		},
		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)) {
					row.isVideo = true
				} else if (this.$util.exts.img.includes(row.fileType)) {
					row.isPic = true
				}
				this.curRow = row
			},
			// 预览文件
			secClick(row) {
				this.playListVisible = false
				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 => { });
				  }
				}
			},
			// 视频全屏回调
			fullScreenChange(e) {
				console.log(444, e)
				const { fullScreen } = e.detail
				this.playListVisible = false
				this.videoFullScreen = fullScreen
			},
			// 选集
			showPlayList() {
				this.playListVisible = !this.playListVisible
			}
		}
	}
</script>

<style scoped lang="scss">
.file-wrap {
	position: relative;
	.pic, .video {
		width: 100%;
		height: 400rpx;
	}
	.pic {
		object-fit: cover;
	}
	
	.select-epi {
	    z-index: 1000;
	    position: fixed;
	    top: 30rpx;
	    right: -5rpx;
		padding: 8rpx;
		background-color: rgba(0, 0, 0, .6);
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		.icon {
			width: 20rpx;
			height: 20rpx;
		}
	}
}
.chapters-full {
	position: fixed;
	top: 0;
	right: 0;
	width: 50vw;
	height: 100vh;
	padding: 15rpx;
	color: #fff;
	background-color: rgba(0, 0, 0, .6);
	box-sizing: border-box;
	.chapters-scroll {
		height: 95vh;
		overflow: scroll;
	}
	.chapter {
		margin-bottom: 10rpx;
		.chapterName {
			display: flex;
			justify-content: space-between;
			font-size: 14rpx;
		}
		.section {
			margin: 5rpx 0;
		}
		.sectionName {
			display: flex;
			align-items: center;
			padding: 0 6rpx;
			margin: 8rpx 0;
			font-size: 12rpx;
		}
		.ext {
			width: 18px;
			height: 18px;
			margin-right: 12rpx;
		}
	}
}
.tabs {
	position: sticky;
	top: 0;
	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>