discounts-minapp/study/courseDetail.vue

<template>
	<view class="courseDetail">
		<video class="video" show-mute-btn enable-play-gesture page-gesture show-progress show-fullscreen-btn show-play-btn enable-progress-gesture :src="info.chapters[current].chapterUrl" :autoplay="autoplay" controls @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.courseName}}
			</view>
			<view class="type-box">
				<view class="type">
					天文课程-天眼
				</view>
				<view class="times">
					10465次播放
				</view>
			</view>
			
			<view class="intro" v-show="tab == 0">
				<view class="intro-title">
					课程简介
				</view>
				<view class="desc">
					{{info.courseMsg}}
				</view>
			</view>
			
			<!-- 章节 -->
			<view class="catalogue" v-show="tab == 1">
				<view class="item" v-for="(item,index) in info.chapters" :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.chapterName}}
						</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 {videoDetail} from '@/api/study.js'
	export default {
		data() {
			return {
				tab:0,
				current:0,
				autoplay:true,
				info:{
					chapters:[],
					columnId:0,
					courseImg:'',
					id:0,
					courseMsg:'',
					courseName:''
				},
				// 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
			},
			videoDetail(id){
				videoDetail({id}).then(res=>{
					if(res.state == 'Success'){
						this.info = res.content
					}
				})
			}
		},
		onLoad(options) {
			this.videoDetail(options.id)
		}
	}
</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>