GSExamProj/pages/eduPage/eduPage.vue

<template>
	<view>
		<view class="nav-bar"></view>
		<view class="upper-info">
			<h4>{{ upperData.title }}</h4>
			<h4>发起人：{{ upperData.user }}</h4>
			<h4 style="font-size: 14px;">学习期限：{{ upperData.startTime + ' ~ ' + upperData.endTime }}</h4>
		</view>
		<view class="lower-material">
			<h4>线上学习</h4>
			<view>
				<view
					class="single-video"
					v-for="(video, videoIndex) in lowerVideo"
					:key="videoIndex"
					@click="jumpVideoPage(video.materialsPath, noticeId, video.id, video.compRate, video.watchLong, video.materialsDuration)"
				>
					<view class="single-lef">
						<view class="single-lef-top">
							<image src="../../static/video.png" mode=""></image>
							视频
							<span>{{ video.formatDuration }}</span>
						</view>
						<view class="single-lef-bot">
							{{ video.materialsName }}
						</view>
					</view>
					<view class="single-rig">
						<u-line-progress :percentage="video.compRate" activeColor="#64A3D8"></u-line-progress>
					</view>
				</view>
			</view>
			<view>
				<view
					class="single-file"
					v-for="(file, fileIndex) in lowerFile"
					:key="fileIndex"
					@click="jumpPdfPage(file.materialsPath, file.id)"
				>
					<view class="single-lef">
						<view class="single-lef-top">
							<image src="../../static/file.png" mode=""></image>
							{{ file.materialsPath.split('.')[file.materialsPath.split('.').length - 1] }}文件
							<span>{{ file.materialsDuration }}页</span>
						</view>
						<view class="single-lef-bot">
							{{ file.materialsName }}
						</view>
					</view>
					<view class="single-rig">
						<u-line-progress :percentage="file.compRate" activeColor="#64A3D8"></u-line-progress>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { publicPath } from '../../public';
	export default {
		data() {
			return {
				upperData: {
					title: '',
					user: '',
					startTime: '',
					endTime: ''
				},
				noticeId: '',
				lowerVideo: [],
				lowerFile: [],
			}
		},
		methods: {
			jumpVideoPage (url, noticeId, materialsId, compRate, watchLong, duration) {
				uni.navigateTo({
					url: `/pages/videoPage/videoPage?url=${url}&noticeId=${noticeId}&materialsId=${materialsId}&compRate=${compRate}&watchLong=${watchLong}&duration=${duration}`
				})
			},
			jumpPdfPage (pdfUrl, id) {
				uni.navigateTo({
					url: `/pages/pdfPage/pdfPage?pdfUrl=${pdfUrl}&id=${id}`
				})
			},
			// 转换时分秒
			formatHms (time) {
				
				const h = parseInt(time / 3600)
				const minute = parseInt(time / 60 % 60)
				const second = Math.ceil(time % 60)    
				const hours = h < 10 ? '0' + h : h
				const formatSecond = second > 59 ? 59 : second
				return `${hours > 0 ? `${hours}时` : ''}${minute < 10 ? '0' + `${minute}分` : `${minute}分`}${formatSecond < 10 ? '0' + `${formatSecond}秒` : `${formatSecond}秒`}`
			}
		},
		onLoad(params) {
			console.log(params);
			this.noticeId = params.noticeId
		},
		onShow() {
			let that = this
			that.lowerFile = []
			that.lowerVideo = []
			// 获取培训页面数据
			uni.request({
				url: publicPath + '/backstage/app/getNoticeTrainData',
				method: 'POST',
				header: {
					'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {
					userId: uni.getStorageSync('id'),
					id: this.noticeId
				},
				success: (res) => {
					console.log(res);
					if (res.data.code == 200) {
						let data = res.data.data
						that.upperData.title = data.noticeTheme
						that.upperData.user = data.userName
						that.upperData.startTime = data.startTime
						that.upperData.endTime = data.endTime
						for (let i = 0; i < data.materialsList.length; i++) {
							data.materialsList[i].formatDuration = that.formatHms(Math.round(data.materialsList[i].materialsDuration * 60)) 
							console.log(data.materialsList[i].materialsPath.split('.')[data.materialsList[i].materialsPath.split('.').length - 1]);
							if (data.materialsList[i].materialsPath.split('.')[data.materialsList[i].materialsPath.split('.').length - 1] == 'mp4' || data.materialsList[i].materialsPath.split('.')[data.materialsList[i].materialsPath.split('.').length - 1] == 'MP4') {
								that.lowerVideo.push(data.materialsList[i])
							} else {
								that.lowerFile.push(data.materialsList[i])
							}
						}
						console.log(that.lowerFile, that.lowerVideo);
					}
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	body{
		background-color: #F3F4F5;
	}
	.nav-bar{
		width: 100%;
		height: var(--status-bar-height);
		padding-top: var(--status-bar-height);
	}
	.upper-info{
		width: 100%;
		box-sizing: border-box;
		padding: 25rpx;
		background-color: #fff;
		h4{
			font-weight: normal;
			margin-bottom: 10rpx;
		}
		h4:first-child{
			font-weight: bold;
		}
	}
	.lower-material{
		width: 100%;
		box-sizing: border-box;
		padding: 25rpx;
		background-color: #fff;
		margin-top: 15rpx;
		h4{
			font-weight: normal;
			margin-bottom: 25rpx;
		}
		view{
			.single-video, .single-file{
				width: 100%;
				height: 150rpx;
				box-sizing: border-box;
				padding: 15rpx 30rpx;
				background-color: #F7F8FA;
				display: flex;
				margin-bottom: 20rpx;
				.single-lef{
					width: 75%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.single-lef-top{
						width: 100%;
						display: flex;
						font-size: 12px;
						image{
							width: 6%;
							height: 100%;
							margin-right: 10rpx;
						}
						span{
							padding-left: 15rpx;
						}
					}
					.single-lef-bot{
						width: 100%;
						font-size: 14px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.single-rig{
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	// .bottom{
	// 	width: 100%;
	// 	height: 100rpx;
	// 	position: fixed;
	// 	background-color: #fff;
	// 	left: 0;
	// 	bottom: 0;
	// 	display: flex;
	// 	justify-content: right;
	// 	.lef{
	// 		width: 50%;
	// 		height: 100%;
	// 	}
	// 	.rig{
	// 		font-size: 14px;
	// 		flex: 1;
	// 		display: flex;
	// 		justify-content: space-around;
	// 		align-items: center;
	// 		button{
	// 			background-color: #007AFB;
	// 			color: #fff;
	// 			font-size: 14px;
	// 		}
	// 		uni-button{
	// 			line-height: 2;
	// 		}
	// 	}
	// }
	.video-pop{
		width: 600rpx;
		height: 700rpx;
		background-color: #fff;
	}
</style>