backend-Tv/pages/player/player.vue

<template>
	<view>
		<unitv-page id="playPage" :show="true" ref="playPage" @back="pageBack">
			<view class="movie-contain">
				<unitv-video id="player" class="player" :src="moiveUrl" :autoplay="true">
				</unitv-video>
				<view class="movie-inter">
					<view class="movie-title">{{moiveData.title}}</view>
					<view class="movie-info"><text>影片信息：{{moiveData.info}}</text></view>
					<view class="movie-content">简介：{{moiveData.comment}}</view>
					<view>
						<unitv-zone id="btn-zone" :autoFous="true" :column="2" down="list-zone" :item="0" :values="[0,1]" class="btn-zone">
							<unitv-item :item="0" class="fullscreen-btn" @click="switchFullScreen">
								<image mode="aspectFit" src="../../static/fullscreen.png"></image>
								<view>全屏播放</view>
							</unitv-item>
							<unitv-item :item="1" class="favicon-btn">
								<image mode="aspectFit" src="../../static/favicon.png"></image>
								<view>收藏</view>
							</unitv-item>
						</unitv-zone>
					</view>
				</view>
			</view>
			<unitv-zone id="list-zone" class="list-zone" up="btn-zone" :down="(moiveType == 'multiple') ? 'resource-zone' : ''" :values="item" :column="8">
				<unitv-item v-for="(a,index) in item" :item="index" :key="index" class="item" :style="a.movieFlag == '1' ? 'background-color: #CD7F32;' : ''" @click="websiteClick(a)" @hover="websiteHover(a)">{{a.website}}</unitv-item>
			</unitv-zone>
			<view class="title" v-if="moiveType == 'multiple'">影视剧集</view>
			<unitv-zone id="resource-zone" class="resource-zone" up="list-zone" :values="moiveUrlList" :column="moiveUrlList.length" v-if="moiveType == 'multiple'">
				<unitv-scroll>
					<unitv-item v-for="(a,index) in moiveUrlList" :item="index" :key="index" class="item-resource">
						<view class="item-resource-info">{{a.name}}</view>
					</unitv-item>
				</unitv-scroll>
			</unitv-zone>
		</unitv-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: [],
				status:0,
				handEvt:false,
				currentTime:0,
				moiveData:{
					
				},
				moiveType: '',
				moiveUrl: "",
				moiveUrlList:[]
			}
		},
		onBackPress(options) {
			this.$refs.playPage.evtBack();
			return true;
		},
		onReady() {
			this.viderContext = uni.createVideoContext("player");
		},
		onLoad(e){
			console.log(e)
			this.$api.get('/platCupfox/detail/'+e.id, null).then(res => {
				console.log(res)
				if(res == undefined || res == null || res == ''){
					uni.showToast({
					    title: '视频资源数据异常，请检查接口数据',
						icon:'none',
					    duration: 5000
					});
					return;
				}
				this.moiveData = res;
				this.moiveType = res.type;
				this.item = res.resources;
				if(res.resources != null && res.resources.length > 0){
					let aa = res.resources[0];
					if(aa.movieFlag == '1'){
						this.moiveUrl = aa.movieUrl;	
						if(res.type == 'multiple'){
							this.moiveUrlList = aa.resourceUrlList;
						}
					}
				}
				
			})
		},
		methods: {
			switchFullScreen() {
				this.viderContext.requestFullScreen();
			},
			websiteClick(data){
				if(data.movieFlag == '1'){
					if(this.moiveType == 'multiple'){
						this.moiveUrlList = data.resourceUrlList;
					} else {
						this.moiveUrl = data.movieUrl;
					}
					
				}else {
					uni.showToast({
					    title: '当前站点视频还未解析，请联系系统管理员处理',
						icon:'none',
					    duration: 2000
					});
				}
				
			},
			websiteHover(data){
				console.log("websiteHover");
				
				/* if(data.movieFlag == '1'){
					if(this.moiveType == 'multiple'){
						this.moiveUrlList = data.resourceUrlList;
					}
				} */
			},
			pageBack(e){
				console.log("按了返回");
				uni.reLaunch({
					url: '../index/index'
				});
				return false;
			},
		}
	}
</script>

<style>
	page {
		background-color: #070707;
		background-image: linear-gradient(0deg, #222222 0%, #1f1f1f 51%, #1d1d1d 75%);
		color: white;
		padding: 10rpx;
		background-image: linear-gradient(to bottom, #2E3092, #797979);
	}

	.movie-contain {
		display: flex;
		flex-direction: row;
	}

	.player {
		width: 375rpx;
		height: 200rpx;
	}

	.movie-inter {
		width: 355rpx;
		padding: 0 10rpx;
	}

	.movie-title {
		font-size: 18rpx;
		padding-bottom: 5rpx;
	}

	.movie-year {
		padding-left: 5rpx;
	}

	.movie-year,
	.movie-info,
	.movie-content {
		font-size: 16rpx;
		color: #dadade;
		line-height: 28rpx;
	}

	.movie-content {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 20rpx;
		margin-bottom: 10rpx;
	}

	.btn-zone {
		display: flex;
		flex-direction: row;
	}

	.fullscreen-btn,
	.favicon-btn {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
		background: #3e3e3e;
		font-size: 12rpx;
		border-radius: 2rpx;
		text-align: center;
	}

	.fullscreen-btn image,
	.favicon-btn image {
		width: 22rpx;
		height: 32rpx;
	}
	.list-zone {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
		margin-bottom: 10rpx;
		align-items: center;
		padding: 5px;
	}
	.resource-zone{
		width: 100%;
		display: flex;
		white-space: nowrap;
		align-items: center;
		padding: 1px;
	}
	.resource-zone .item-resource{
		display: inline-block;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 82rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 5rpx;
		background-color: #6b6b6b;
		border-radius: 5rpx;
		font-size: 12rpx;
	}
	
	.item-resource-info4 {
		display: flex;
		flex-wrap:wrap;
		align-items: center;
		justify-content: center;
		text-align: center;
		white-space: normal;
		height: 80rpx;
		line-height: 80rpx;
		width: 82rpx;
	}
	
	

	.item {
		width: 82rpx;
		height: 30rpx;
		margin: 5rpx;
		text-align: center;
		background-color: #6b6b6b;
		border-radius: 5rpx;
		align-items: center;
		display: flex;
		justify-content: center;
		font-size: 12rpx;
	}
	.itemMovieFlag{
		background-color: #CD7F32;
	}
	.item-hover {
		transform: scale(1.04);
		box-shadow: 2px 4px 6px #585dfa;
		animation: glow 1500ms ease-out infinite alternate;
		-webkit-transform: scale(1.04);
		-webkit-box-shadow: 2px 4px 6px #585dfa;
		-webkit-animation: glow 1500ms ease-out infinite alternate;
		zoom: 1.05;
	}
	.title{
		font-size: 15rpx;
	}
</style>