277 lines
6.2 KiB
Vue
277 lines
6.2 KiB
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>
|