mianxueyoupin/pages/user/ketangDetail.vue

<template>
<view class="ketangDetails">
	<u-navbar class="navbar"  bgColor="#fff" :autoBack="true" :placeholder="true">
		 <view  class="u-nav-slot titleContent"  slot="left">
		    <u-icon  class="icon"  name="arrow-left" :color="'#000'" size="20"></u-icon>
			<text style="color:#000">{{title}}</text>
		</view>
	</u-navbar>
	<view class="videoContent">
		<video
		  id="myVideo"
		  :src="path+videoSrc"
		  :controls="true"
		  :autoplay="false"
		></video>
	</view>
	<view class="tabs">
		<view class="tabItem" @click="getabItem(item)"  v-for="item in list" :key="item.id">
			<text :class="item.id==activeIndex?'active':''">{{item.name}}</text>
			<view class="flag" v-if="item.id==activeIndex"></view>
		</view>
	</view>
	<view class="bottomContent" v-if="activeIndex==0">
		<u-collapse accordion>
			<u-collapse-item>
				<text slot="title" class="u-page__item__title__slot-title itemTitle">第一章</text>
				<view class="u-collapse-content">
					<view class="" v-for="item in 6" :key="item">
						<image src="../../static/images/img/bof.png" mode=""></image>
						<text>第一课    春眠不觉晓</text>
					</view>
				</view>
			</u-collapse-item>
			<!-- <u-collapse-item
					title="组件全面"
			>
				<u-icon name="tags-fill" size="20" slot="icon"></u-icon>
				<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
			</u-collapse-item>
			<u-collapse-item
					title="众多利器"
			>
				<text slot="value" class="u-page__item__title__slot-title">自定义内容</text>
				<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
			</u-collapse-item> -->
		</u-collapse>
	</view>
	
	 
	<!-- <u-search placeholder="搜索视频" bgColor="#ffffff" v-model="keyword" @search="getList" height="90rpx" :showAction="false"></u-search>
	<u-tabs :list="catagoryData" keyName="name" lineColor="#EB6100"
	 :activeStyle="{'font-weight': 'bold','font-size': '36rpx','color': '#222222'}"
	 @click="clickHandle"></u-tabs>
	<view class="list">
		<view class="listItem" v-for="item in list" :key="item.id">
			
			<video
			  id="myVideo"
			  :src="path+item.video_url"
			  :controls="true"
			  :autoplay="false"
			  style="width: 100%; height: 380rpx;"
			></video>
			<view class="title">
				{{item.class_name}}
			</view>
		</view>
	</view> -->
</view>
</template>

<script>
export default{
	data(){
		return{
			title:'',
			list:[
				{name:'课程表',id:0},
				{name:'评论',id:1},
			],
			path:this.path,
			videoSrc:'',
			activeIndex:0,
		}
	},
	onReachBottom(){
		// if(this.list.length<this.total){
		// 	this.page++;
		// 	await uni.request({
		// 		url: '/wanlshop/gongyivideo/getvideolist',
		// 		method:'post',
		// 		data:{
		// 			class_type:this.class_type,
		// 			class_name:this.keyword,
		// 			page:this.page,
		// 		},
		// 		success: res => {
		// 			this.list.push(...res.data.data);
		// 		}
		// 	});
		// }
	},
	methods:{
		getabItem(val){
			
			this.activeIndex = val.id
		},
		getDetails(id){
			uni.request({
				url: '/wanlshop/gongyivideo/getdetail',
				method:'post',
				data:{
					id:id,
					
				},
				success: res => {
					console.log(res,"mnb")
					this.title = res.data.class_name;
					this.videoSrc = res.data.video_url
				}
			});
		},
	},
	onLoad(option) {
		console.log(option,"88")
		this.getDetails(option.id)
	}
}
</script>

<style scoped lang="scss">
.ketangDetails{
	background-color: #F2F3F4;
	height: calc(100vh);
	display: flex;
	flex-direction: column;
	.videoContent{
		height:460rpx;
		width:100%;
		#myVideo{
			height:460rpx;
			width:100%;
		}
	}
	.tabs{
		display: flex;
		justify-content: space-around;
		padding:20rpx;
		width: 60%;
		margin: 0 auto;
		.tabItem{
			border:1px solid red;
			text-align: center;
			text{
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
			}
			.flag{
				width: 68rpx;
				height: 8rpx;
				background: #EB6100;
				border-radius: 4rpx;
				margin: 8rpx auto 0 auto;
			}
			.active{
				
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
			}
			
		}
	}
	.bottomContent{
		border: 1px solid red;
		flex: 1;
		overflow: auto;
		padding:0 24rpx;
		// ::v-deep 
		.itemTitle{
			color:#000;
		}
	}
	
}
::v-deep .u-navbar__content__left{
	width:100%;
}
.titleContent{
		
	width: 100%;
	text-align: center;
	position: relative;
	text{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #000;
	}
	::v-deep .u-icon{
		position: absolute;
		left:0;
		top:0;
	}
}
</style>