FE_occupationlab_miniProgram/course/courseDetail/courseDetail.vue

<template>
	<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>
			<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> -->
			</template>
			
			<cover-view v-show="!playListVisible && curRow.fileUrl" 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>
						<cover-view class="section" v-if="item.subsectionList.length">
							<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://eduvessel.com/images/occupationlab/exts/ppt.png" alt="" mode="widthFix" />
							  <cover-image v-else-if="section.fileType === 'mp4'" class="ext" src="https://eduvessel.com/images/occupationlab/exts/video.png" alt="" mode="widthFix" />
							  <cover-image v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" class="ext"
								src="https://eduvessel.com/images/occupationlab/exts/word.png" alt="" mode="widthFix" />
							  <cover-image v-else-if="section.fileType === 'txt'" class="ext" src="https://eduvessel.com/images/occupationlab/exts/txt.png" alt="" mode="widthFix" />
							  <cover-image v-else-if="section.fileType === 'pdf'" class="ext" src="https://eduvessel.com/images/occupationlab/exts/pdf.png" alt="" mode="widthFix" />
							  <cover-image v-else class="ext" src="https://eduvessel.com/images/occupationlab/exts/pic.png" alt="" mode="widthFix" />
							  <cover-view class="text">{{ section.name }}</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</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">
			
			<!-- 课程介绍 -->
			<view v-show="!curTab" class="des">
				<mp-html class="des-html" :tag-style="mpStyle" :content="briefIntroduction"/>
			</view>
			
			<!-- 课程目录 -->
			<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">
							{{ item.name }}
							<uni-icons class="arrow" type="bottom" color="#909090" @click="toggleChapter(item)"></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)">
							  <image v-if="section.fileType === 'pptx'" class="ext" src="https://eduvessel.com/images/occupationlab/exts/ppt.png" alt="">
							  <image v-else-if="section.fileType === 'mp4'" class="ext" src="https://eduvessel.com/images/occupationlab/exts/video.png" alt="">
							  <image v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" class="ext"
								src="https://eduvessel.com/images/occupationlab/exts/word.png" alt="">
							  <image v-else-if="section.fileType === 'txt'" class="ext" src="https://eduvessel.com/images/occupationlab/exts/txt.png" alt="">
							  <image v-else-if="section.fileType === 'pdf'" class="ext" src="https://eduvessel.com/images/occupationlab/exts/pdf.png" alt="">
							  <image v-else class="ext" src="https://eduvessel.com/images/occupationlab/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, detailsOfGoods, queryPracticeByStudent, queryAssessmentByStudent, getPlayAuth, playRecordSave, recordRecentUsage } from '@/apis/modules/course.js'
	export default {
		data() {
			return {
				cid: '',
				mallId: '',
				startTime: Date.now(), // 页面进来的时间
				curTab: 1,
				tabs: [
					{
						name: '课程介绍',
						id: 0
					},
					{
						name: '课程目录',
						id: 1
					},
					{
						name: '练习成绩',
						id: 2
					},
					{
						name: '考核成绩',
						id: 3
					}
				],
				searchTimer: null,
				keyword: '',
				chapterList: [],
				coverUrl: '',
				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,
				webviewStyles: {
					progress: {
						color: '#FF3333'
					},
					width: '100%',
					height: '400'
				}
			}
		},
		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()
				}
			}
		},
	    onUnload () {
			console.log('hide fn')
			// 记录播放时长
			if (this.cid) {
				playRecordSave({
					courseId: this.cid,
					courseType: 0,
					playTime: Math.ceil((Date.now() - this.startTime) / 1000 / 60)
				})
			}
	    },
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.cid = options.cid
			this.mallId = options.mallId
			this.getInfo()
			this.getChapter()
			this.addRecord()
		},
		methods: {
			// 获取章节小节
			async getChapter () {
			    if (this.cid) {
					const res = await queryChaptersAndSubsections({
						keyword: this.keyword,
						courseId: this.cid,
					})
					this.chapterList = res.chapterList
			    }
			},
			// 获取介绍
			async getInfo () {
			  if (this.mallId) {
				const res = await detailsOfGoods({
					mallId: this.mallId
				})
				const e = res.orderDetails.mall
				this.coverUrl = e.coverDrawing
				this.briefIntroduction = e.detailedIntroduction
			  }
			},
			// 记录最近使用
			async addRecord () {
			    await recordRecentUsage(this.mallId)
			},
			// 练习成绩
			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()
			},
			// 章节收缩
			toggleChapter(item) {
				this.$set(item, 'shrink', !item.shrink)
			},
			// 练习跳转
			toPrac(row) {
				this.$util.to(`../practiceDetail/practiceDetail?cid=${this.cid}&projectId=${row.projectId || ''}&paperId=${row.paperId || ''}`)
			},
			
			// 判断文件是图片/视频/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)) {
					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) {
				  // 阿里云视频点播
				  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 => { });
				  }
				} 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()
					// 	}
					// })
				}
			},
			// 视频全屏回调
			fullScreenChange(e) {
				console.log(444, e)
				const { fullScreen } = e.detail
				this.playListVisible = false
				this.videoFullScreen = fullScreen
			},
			// 选集
			showPlayList() {
				this.playListVisible = !this.playListVisible
			},
			hidePlayList() {
				this.playListVisible = false
			}
		}
	}
</script>

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

			&.active {
			    color: #007EFF;
			}
		}
		.ext {
			width: 18px;
			// 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;
	padding: 30rpx;
	background-color: #fff;
	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: 0 30rpx 30rpx;
	.chapters {
		margin-top: 20rpx;
	}
	.chapter {
		margin-bottom: 40rpx;
		.chapterName {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: #333;
		}
		.arrow {
			font-size: 28rpx;
		}
		.section {
			height: auto;
			transition: .5s;
			overflow: hidden;
			&.shrink {
				height: 0;
				// transform: scaleY(0);
			}
		}
		.sectionName {
			display: flex;
			align-items: center;
			margin: 30rpx 0;
			font-size: 24rpx;
			color: #333;

			&.active {
			    color: #007EFF;
			}
		}
		.ext {
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
		}
	}
	.list {
		.item {
			position: relative;
			padding: 20rpx 0;
			&:not(:last-child) {
				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>