355 lines
9.4 KiB
Vue
355 lines
9.4 KiB
Vue
<template>
|
|
<view class="pages">
|
|
|
|
<!-- <swiper class="swiper" :current="swiperCurrent" :indicator-dots="false" :autoplay="false" :vertical="true"-->
|
|
<!-- :duration="50" @change="currentChange" :style="{height:winHeight} ">-->
|
|
<!-- <swiper-item class="swiperItem" v-for="(videoItem,videoIndex) in videoListData" :key="videoItem._id">-->
|
|
|
|
<!-- <view class="swiperItemContent">-->
|
|
<!-- <view class="payVideo" v-if="videoIndex == swiperCurrent">-->
|
|
<!-- <!– #ifdef APP || H5 –>-->
|
|
<!-- <video class="video"-->
|
|
<!-- v-if="videoItem.src"-->
|
|
<!-- :id="videoItem._id"-->
|
|
<!-- :poster="videoItem.img"-->
|
|
<!-- :autoplay="true"-->
|
|
<!-- object-fit="contain"-->
|
|
<!-- @ended="videoPlayerEnded"-->
|
|
<!-- @loadedmetadata="loadedmetadata"-->
|
|
<!-- :src="videoItem.src"></video>-->
|
|
<!-- <!– #endif –>-->
|
|
<!-- <!– #ifdef MP-WEIXIN –>-->
|
|
<!-- <video class="video"-->
|
|
<!-- v-if="videoItem.media_link"-->
|
|
<!-- :id="videoItem._id"-->
|
|
<!-- :poster="videoItem.img"-->
|
|
<!-- :autoplay="true"-->
|
|
<!-- object-fit="contain"-->
|
|
<!-- @ended="videoPlayerEnded"-->
|
|
<!-- @loadedmetadata="loadedmetadata"-->
|
|
<!-- :src="videoItem.media_link"></video>-->
|
|
<!-- <!– #endif –>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="rightBtnList" v-if="videoIndex == swiperCurrent && videoItem.pays == 2">-->
|
|
<!-- <view class="btnItem" @click="userChangeLike(videoItem)" v-if="userInfo.id">-->
|
|
<!-- <image class="videoBtnImg" v-if="videoItem.like=='2'" src="https://wxtietong.hnjrdzkj.xyz/static/wechat/static/aixinRed.png"-->
|
|
<!-- mode="scaleToFill"></image>-->
|
|
<!-- <image class="videoBtnImg" v-else src="https://wxtietong.hnjrdzkj.xyz/static/wechat/static/aixin.png"-->
|
|
<!-- mode="scaleToFill"></image>-->
|
|
<!-- <view class="btnText">{{videoItem.like_n>0?videoItem.like_n:'0'}}</view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="btnItem" @click="userChangeStar(videoItem)" v-if="userInfo.id">-->
|
|
<!-- <image class="videoBtnImg" v-if="playVideoDetail.iszj=='2'" src="https://wxtietong.hnjrdzkj.xyz/static/wechat/static/scRed.png"-->
|
|
<!-- mode="scaleToFill"></image>-->
|
|
<!-- <image class="videoBtnImg" v-else src="https://wxtietong.hnjrdzkj.xyz/static/wechat/static/sc.png"-->
|
|
<!-- mode="scaleToFill"></image>-->
|
|
<!-- <view class="btnTextRed" v-if="playVideoDetail.iszj=='2'">已追</view>-->
|
|
<!-- <view class="btnText" v-else>追剧</view>-->
|
|
<!-- </view>-->
|
|
<!-- <!– #ifdef H5 –>-->
|
|
<!-- <view class="btnItem" @click="copyShareLink(videoItem)" v-if="userInfo.id">-->
|
|
<!-- <image class="videoBtnImg" src="https://wxtietong.hnjrdzkj.xyz/static/wechat/icon/video_share_icon.png" mode=""></image>-->
|
|
<!-- <view class="btnText">分享</view>-->
|
|
<!-- </view>-->
|
|
<!-- <!– #endif –>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="videoFooter" v-if="videoIndex == swiperCurrent && playVideoDetail.id" @click="showChoice">-->
|
|
<!-- <view class="videoName">-->
|
|
<!-- <image class="footerTv" src="https://wxtietong.hnjrdzkj.xyz/static/wechat/static/video.png" mode="scaleToFill"></image>-->
|
|
<!-- <text class="footerTvText">{{playVideoDetail.name}} · 当前第1集/全{{playVideoDetail.sum}}集</text>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="choiceVideo">-->
|
|
<!-- <text class="choiceVideoTexts">选集</text>-->
|
|
<!-- <uni-icons size="12" type="right" color="#ffffff"></uni-icons>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </swiper-item>-->
|
|
|
|
<!-- </swiper>-->
|
|
|
|
<drama-feed-list
|
|
id="drama-feed-list"
|
|
autoplay
|
|
@watchFullDrama="goPlayer"
|
|
></drama-feed-list>
|
|
<!-- <selectVideo ref="choiceVideoPup" @choiceVideoItem="changePlaying" :play-video-info="playVideoDetail"-->
|
|
<!-- :video-info="videoInfo">-->
|
|
<!-- </selectVideo>-->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import selectVideo from "@/components/select/video.vue"
|
|
import {httpRequest} from "@/utils/request";
|
|
export default {
|
|
components: {
|
|
selectVideo
|
|
},
|
|
data() {
|
|
return {
|
|
page: {
|
|
pageSize: 50,
|
|
currentPage: 1,
|
|
isNextPage: true,
|
|
},
|
|
userInfo: {},
|
|
swiperCurrent: 0,
|
|
playVideoDetail: {}, //
|
|
videoListData: [], //剧集列表
|
|
videoInfo: {},
|
|
swiperData: [], //
|
|
videoId: '',
|
|
imageUrl: "",
|
|
searchBarTop:0,
|
|
searchBarHeight:0,
|
|
winHeight: '800px',
|
|
pupHeight: "400px",
|
|
onPlayVideo: null,
|
|
appid:""
|
|
};
|
|
},
|
|
|
|
onLoad(e) {
|
|
this.appid = this.$config.mini_appid;
|
|
this.userinfo = uni.getStorageSync("userinfo");
|
|
this.getPageDefault();
|
|
},
|
|
onShow() {
|
|
this.page={
|
|
pageSize: 50,
|
|
currentPage: 1,
|
|
isNextPage: true,
|
|
}
|
|
this.videoListData=[];
|
|
// this.getVideoList()
|
|
},
|
|
|
|
|
|
methods: {
|
|
// 获取页面宽高数据& 系统信息
|
|
getPageDefault() {
|
|
console.log(this.system, uni.getSystemInfoSync())
|
|
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
this.searchBarTop = menuButtonInfo.top;
|
|
this.searchBarHeight = menuButtonInfo.height;
|
|
// #endif
|
|
this.winHeight = uni.getWindowInfo().windowHeight+"px";
|
|
console.log(uni.getWindowInfo().windowHeight+"px")
|
|
this.pupHeight =( uni.getWindowInfo().windowHeight - 40 )+ "px";
|
|
uni.getSystemInfo({
|
|
success: res => {
|
|
this.safeArea = res.safeAreaInsets.bottom;
|
|
}
|
|
})
|
|
},
|
|
goPlayer(item) {
|
|
let that = this;
|
|
that.$httpRequest({
|
|
url: "/api/video/dramaIdToVideoId",
|
|
method: "GET",
|
|
data: {
|
|
drama_id: item.detail.dramaId,
|
|
no: 1
|
|
}
|
|
}).then(res => {
|
|
console.log(res)
|
|
// uni.navigateTo({url: "/pages/video/videoDetail?id="+res.data.data.drama_vid})
|
|
uni.navigateTo({url:'/pagesA/player/detailPlayer?vid='+res.data.drama_vid+'&mid='+res.data.id})
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
|
|
|
|
|
|
// uni.navigateTo({url:'/pagesA/player/detailPlayer?vid='+this.videoInfo.id+'&fxpid='+val.fxpid+'&mid='+val.mid+'&num='+val.weigh})
|
|
},
|
|
|
|
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.pages {
|
|
background: #000000;
|
|
height: 100vh;
|
|
}
|
|
|
|
|
|
.header {
|
|
width: 750rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 99;
|
|
}
|
|
|
|
.swiper {
|
|
width: 750rpx;
|
|
flex: 1;
|
|
}
|
|
.swiperItem{
|
|
flex: 1;
|
|
}
|
|
.swiperItemContent {
|
|
position: relative;
|
|
width: 750rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.payVideo {
|
|
width: 750rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
.video {
|
|
width: 750rpx;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.rightBtnList {
|
|
position: absolute;
|
|
right: 34rpx;
|
|
top: 600rpx;
|
|
width: 100rpx;
|
|
text-align: center;
|
|
z-index: 99;
|
|
.btnItem {
|
|
margin-top: 40rpx;
|
|
/* #ifdef MP-WEIXIN || H5 */
|
|
background: none;
|
|
/* #endif */
|
|
text-align: center;
|
|
.videoBtnImg {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.btnText {
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.btnTextRed {
|
|
color: red;
|
|
}
|
|
|
|
.wxClickBtn {
|
|
/* #ifdef MP-WEIXIN || H5 */
|
|
border: none;
|
|
background: none;
|
|
/* #endif */
|
|
width: 100rpx;
|
|
opacity: 0;
|
|
height: 100rpx;
|
|
position: relative;
|
|
top: -100rpx;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.choiceTitleLine {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 40rpx;
|
|
|
|
.appText {
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.schoiceClose {
|
|
padding: 10rpx;
|
|
border-radius: 8rpx;
|
|
background: #f6f6f6;
|
|
}
|
|
}
|
|
|
|
.videoFooter {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-left: 40rpx;
|
|
line-height: 70rpx;
|
|
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
/* #ifdef MP-WEIXIN */
|
|
height: 80rpx;
|
|
/* #endif */
|
|
/* #ifdef H5 */
|
|
height: 90px;
|
|
padding-bottom: 50px;
|
|
/* #endif */
|
|
/* #ifdef APP */
|
|
height: 50px;
|
|
/* #endif */
|
|
.videoName {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.footerTv {
|
|
width: 40rpx;
|
|
height: 26rpx;
|
|
margin-top: 6rpx;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.footerTvText {
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
line-height: 32rpx;
|
|
border-bottom: 2rpx solid #ffffff;
|
|
max-width: 600rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
}
|
|
}
|
|
|
|
.choiceVideo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-right: 20rpx;
|
|
|
|
.choiceVideoTexts {
|
|
font-size: 22rpx;
|
|
line-height: 70rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.footerChoice {
|
|
width: 34rpx;
|
|
height: 32rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style> |