discounts-minapp/pages/activity/courseDetail.vue

<template>
	<view class="courseDetail">
		<video id="courseVideo" class="video" show-mute-btn enable-play-gesture page-gesture show-progress
			show-fullscreen-btn show-play-btn enable-progress-gesture :src="info.courseGoodsDto.chapterUrl"
			:autoplay="autoplay" controls @timeupdate="videoTimeUpdateEvent" @ended="onEnd">

		</video>

		<view class="content">
			<view class="tab-box">
				<view class="tab" :class="[tab == 0 ? 'active' : '']" @click="handleTab(0)">
					简介
				</view>
				<view class="tab" :class="[tab == 1 ? 'active' : '']" @click="handleTab(1)">
					章节
				</view>
			</view>

			<view class="video-title">
				{{ info.courseGoodsDto.courseName }}
			</view>
			<view class="type-box">
				<view class="type">
					课程:{{ info.goodsName }}
				</view>
				<view class="times">
					{{info.courseGoodsDto.viewedCount}} 次播放
				</view>
			</view>

			<view class="intro" v-show="tab == 0">
				<view class="intro-title">
					课程简介
				</view>
				<view class="desc">
					{{ info.courseGoodsDto.courseMsg }}
				</view>
			</view>

			<!-- 章节 -->
			<view class="catalogue" v-show="tab == 1">
				<view class="item" v-for="(item, index) in info.courses" :key="index" @click="handleItem(item, index)">
					<view class="num" :class="[current == index ? 'active' : '']">
						{{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }} </view>
							<view class="video-info">
								<view class="title" :class="[current == index ? 'active' : '']">
									{{ item.courseName }}
								</view>
								<!-- <view class="info">
									<view class="icon-box">
										<image class="icon" src="../static/study/time.png" mode=""></image>
										<view class="text">
											09：05
										</view>
									</view>
									<view class="icon-box">
										<image class="icon" src="../static/study/play-icon.png" mode=""></image>
										<view class="text">
											09：05
										</view>
									</view>
								</view> -->
							</view>
							<image class="btn" :src="current == index ? playIng : playBtn" mode=""></image>

					</view>
				</view>

			</view>
		</view>
</template>

<script>
import { getCourseDetail, updatePer } from '@/api/study.js'
export default {
	data() {
		return {
			tab: 0,
			current: 0,
			autoplay: true,
			info: {
				chapters: [],
				columnId: 0,
				courseImg: '',
				id: 0,
				courseMsg: '',
				courseName: ''
			},
			goods: {},
			videoContext: {},
			query: {},
			timmer: null,
			per: 0,
			// list:[
			// 	{
			// 		title:'火箭发射',
			// 		times:'09：05',
			// 		playTimes:'1.9万',
			// 		video:'https://sns-video-bd.xhscdn.com/spectrum/01e2e095923d542a01837003823d55acab_259.mp4',
			// 		poster: 'https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft15.baidu.com%2Fit%2Fu%3D4149304328%2C1810644736%26fm%3D225%26app%3D113%26f%3DJPEG%3Fw%3D1499%26h%3D843%26s%3D3352508488112DED7E265C1B03007098&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f352,234&n=0&g=0n&q=100?sec=1703215065&t=01d1ccc946fc2cc3600627e2e1aac47f',
			// 	},
			// 	{
			// 		title:'星舰发射',
			// 		times:'09：05',
			// 		playTimes:'1.9万',
			// 		video:'http://flv0.bn.netease.com/00756cf0f624a4622e55ac120cfede7958e925f6eb2ac9a492d01cb163db2ba56e195feabfe3f2c361b91f26fbd86a4969bc4a9669f3e30eeb29cf18d8b8a4fe7727b72ddf34ad1a01d1502ca790f0f7fa40c55400983658284e046bafa6f501687a85211cd279686a278559e76f2a2b36321394c90916b4.mp4',
			// 		poster:'https://nimg.ws.126.net/?url=http%3A%2F%2Fvideoimg.ws.126.net%2Fcover%2F20231221%2FVBtFr5Y9x_cover.jpg&thumbnail=750x2147483647&quality=75&type=jpg',


			// 	}
			// ],
			playBtn: require('@/static/study/play-btn.png'),
			playIng: require('@/static/study/playing.png'),
		}
	},
	methods: {
		// 视频播放结束
		onEnd() {
			if (this.current != this.info.chapters.length - 1) {
				this.current++
			}
		},
		handleTab(tab) {
			this.tab = tab
		},
		handleItem(item, index) {
			this.current = index
			this.info.courseGoodsDto = item
			this.videoContext.play()
		},
		videoDetail(query) {
			this.query = {
				dataId: query.id,
				orderNo: query.orderNo
			}
			getCourseDetail(query).then(res => {
				if (res.state == 'Success') {
					this.info = res.content
				}
			})
		},
		videoTimeUpdateEvent(e) { // 播放进度改变
			//当前进度
			let currentTime = parseInt(e.detail.currentTime);
			//总进度
			let duration = parseInt(e.detail.duration);
			const per = ((currentTime / duration) * 100).toFixed()
			if (per % 5 == 0 && per != this.per) {
				this.per = per
				// console.log('上报进度')
				updatePer({
					...this.query,
					per
				}).then(res => {
					console.log(res)
				})
			}
			// console.log('当前进度:', currentTime, '总进度:', duration,'比例:',per);
		},
	},
	onLoad(options) {
		this.videoDetail({
			id: options.id,
			orderNo: options.orderNo
		})
		this.videoContext = uni.createVideoContext('courseVideo');
	}
}
</script>

<style lang="scss" scoped>
.courseDetail {
	.video {
		width: 100%;
		height: 420rpx;
	}

	.content {
		padding: 0 30rpx;

		.tab-box {
			display: flex;
			color: #222222;
			font-size: 28rpx;
			border-bottom: 1rpx solid #F0F0F0;

			.tab {
				flex: 1;
				padding: 20rpx 0;
				text-align: center;
			}

			.tab.active {
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					width: 40rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background: #3879F9;
					position: absolute;
					bottom: 0%;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.video-title {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
			margin-top: 24rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 显示的最大行数 */
			overflow: hidden;
		}

		.type-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #AAAAAA;
			font-size: 24rpx;
			padding: 28rpx 0;
			border-bottom: 1rpx solid #F0F0F0;
		}

		.intro {
			.intro-title {
				margin: 24rpx 0;
				font-weight: bold;
				color: #222222;
				font-size: 28rpx;
			}

			.desc {
				font-size: 24rpx;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}
		}

		.catalogue {
			.item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #F0F0F0;

				.num.active {
					color: #3879F9;
				}

				.num {
					font-size: 28rpx;
					font-weight: bold;
					color: #AAAAAA;
				}

				.video-info {
					flex: 1;
					margin-left: 18rpx;

					.title.active {
						color: #3879F9;
					}

					.title {
						font-weight: bold;
						color: #333333;
						font-size: 28rpx;
					}

					.info {
						display: flex;
						align-items: center;
						margin-top: 12rpx;

						.icon-box {
							display: flex;
							align-items: flex-end;
							font-size: 24rpx;
							color: #AAAAAA;
							margin-right: 36rpx;

							.icon {
								width: 28rpx;
								height: 28rpx;
							}

							.text {
								margin-left: 6rpx;
							}
						}
					}
				}

				.btn {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}


	}
}
</style>