qingyuan/components/template/tabs/tabs.vue

<template>
	<view class="">
		<scroll-view class="tabs-bar" :scroll-x="true">
			<view class="tabs-bar-item" v-for="(item1,index1) in tabList" :key="index1"
			 :class="current_index==index1?'active': ''" @click="changeIndex(index1)">
				{{item1.name}}
			</view>
		</scroll-view>
		<view class="tabs-content">
			<swiper class="tabs-banner" :indicator-dots="true">
				<swiper-item v-for="(item2,index2) in bannerList" :key="index2" @click="navigatorTo(item2.link)">
					<image :src="item2.thumb" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<scroll-view class="tabs-video" :scroll-x="true">
				<view v-for="(item3,index3) in videoList" :key="index3" class="tabs-video-item">
					<view style="">
						<video @click="handleV(item3)" :src="item3.video_link" object-fit="cover"
						 :show-center-play-btn="false" :controls="false" :direction="0"></video>
						
					</view>
					<view class="video-txt">
						{{item3.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<PopManager :show="videoshow" type="center">
			<view v-if="videoshow" style="width: 100vw;height: 100vh;position: relative;background-color: #000;">
				<video id="myvideo" :src="videolint" @fullscreenchange="videoControl"
				  style="width: 100%;position: absolute;top: 50%;transform: translateY(-50%);"
				  @click.stop="" :show-fullscreen-btn="false" :autoplay="true" :direction="0"></video>
				<view class="status_bar"></view>
				<view class="videoNavBar">
				 	<text class="iconfont icon-roundleftfill" style="font-size: 48upx;" @click="videoshow = false"></text>
				</view>
				<cover-view class="videoTxt">
					{{videoTxt}}
				</cover-view>
			</view>
		</PopManager>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import PopManager from '@/components/template/PopManager';
	export default{
		data(){
			return {
				current_index: 0,
				tabList: [],
				child_id: 0,
				bannerList: [],
				videoList: [],
				videoshow: false,
				videolint: '',
				videoTxt: '',
			}
		},
		components: {
			PopManager
		},
		props: {
			pageType: {
				type: Number | String,
				default: ''
			},
			cc_id: {
				type: Number | String,
				default: 0
			}
		},
		created() {
			this.getTabData();
		},
		mounted() {
			// 页面初次渲染！  createVideoContext uni video自带 上下文 如果不懂可以去百度
			// this.videoContext = uni.createVideoContext('myvideo', this);
			// this.videoContext.requestFullScreen();
		},
		methods: {
			getTabData(){
				App._post_form(
					`&p=cultivateClass&do=getCultivateClassChildList`,
					{cc_id: this.cc_id},
					res => {
						if(res.data.length>0){
							this.tabList = res.data;
							console.log(res.data);
							this.child_id = res.data[0].id;
							this.getInfoData();
							this.$emit('changeChildType',this.child_id);
						}
					},
					false,
					() => {
						// this.loadlogo = true;
					}
				);
			},
			getInfoData(){
				App._post_form(
					`&p=cultivateClass&do=getCultivateClassInfo`,
					{cc_id: this.child_id},
					res => {
						this.bannerList = res.data.advs;
						this.videoList = res.data.video;
						// this.videoList = [...res.data.video, ...res.data.video, ...res.data.video, ...res.data.video];
					},
					false,
					() => {
						// this.loadlogo = true;
					}
				);
			},
			changeIndex(i){
				this.current_index = i;
				this.child_id = this.tabList[i].id;
				this.getInfoData();
				this.$emit('changeChildType',this.child_id);
			},
			navigatorTo(link){
				console.log(23232)
				uni.navigateTo({
					url:'/'+link
				})
			},
			handleV(content){
				console.log(111, content);
				this.videoshow = true;
				this.videolint = content.video_link;
				this.videoTxt = content.title;
				// this.videoContext.requestFullScreen({
				// 	direction:0
				// })
			},
			videoControl(e){
				// console.log(e)
				// if(e.detail.fullScreen){  //e.detail.fullScreen是否为全屏
				// 	this.videoContext.play();
				// }else{
				// 	//停止播放
				// 	// this.videoContext.stop();   各位老板不要选择stop 选择了stop 缩小视频还会自动播放
				// 	this.videoContext.pause();
				// }
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.tabs-bar{
		width: 100%;
		height: 40px;
		padding: 0px 10upx;
		box-sizing: border-box;
		white-space: nowrap;
		
		::-webkit-scrollbar{
			display: none;
		}
		
		.tabs-bar-item{
			display: inline-block;
			line-height: 20px;
			padding: 10px;
			font-size: 14px;
			color: #666;
			&.active{
				font-weight: bold;
				color: #333;
				position: relative;
			}
			&.active::after{
				content: '';
				width: 20px;
				height: 3px;
				position: absolute;
				bottom: 0px;
				left: 50%;
				transform: translateX(-50%);
				background-color: #f00;
			}
		}
	}
	.tabs-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		
		.tabs-banner{
			width: 100%;
			height: 300upx;
			border-radius: 20upx;
			transform: translate3d(0, 0, 0);
			overflow: hidden;
			background-color: #fff;
			margin-bottom: 40upx;
			
			image{
				width:100%;
			}
		}
		.tabs-video{
			width: 100%;
			white-space: nowrap;
			
			::-webkit-scrollbar{
				display: none;
			}
			
			.tabs-video-item{
				width: 200upx;
				display: inline-block;
				margin-right: 20upx;
			}
			video{
				width: 200upx;
				height: 300upx;
				border-radius: 20upx;
				overflow: hidden;
			}
			.video-txt{
				width: 100%;
				font-size: 14px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	.status_bar{
		height: calc(var(--status-bar-height) * 2);
		width: 100%;
	}
	.videoNavBar{
		width: 100vw;
		position: absolute;
		left: 0upx;
		top: calc(var(--status-bar-height) * 2);
		z-index: 1;
		color: #999;
		padding: 10upx 30upx 16upx;
	}
	.videoTxt{
		width: 100vw;
		position: absolute;
		left: 0upx;
		bottom: 0;
		z-index: 1;
		font-size: 28upx;
		padding: 20upx 30upx 80upx;
		box-sizing: border-box;
		color: #ddd;
		// background-color: rgba(255,255,255,0.1);
		white-space: break-spaces;
	}
</style>