|
|
|
|
@ -15,16 +15,23 @@
|
|
|
|
|
</view>
|
|
|
|
|
</u-swiper>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="videoList.length>0&&showSwiperFlag==1">
|
|
|
|
|
<u-swiper :list="videoList" @change="changeVideo" keyName="url"
|
|
|
|
|
:height="'360rpx'" :interval='4000' :duration='500' :autoplay='false' circular>
|
|
|
|
|
<view v-if="videoList.length>0&&showSwiperFlag==1" class="video-overlay">
|
|
|
|
|
<u-icon name="arrow-left" color="#fff" size="40" class="video-arrow"
|
|
|
|
|
@click.stop="slideVideo('prev')" v-if="videoList.length>1"></u-icon>
|
|
|
|
|
|
|
|
|
|
<view slot="indicator" class="indicator">
|
|
|
|
|
<view class="indicator__dot" v-for="(item, index) in videoList" :key="index"
|
|
|
|
|
:class="[index === videocurrent && 'indicator__dot--active']">
|
|
|
|
|
</view>
|
|
|
|
|
<view class="video-main" @click="openVideoPopup(videoList[videocurrent], videocurrent)">
|
|
|
|
|
<u-icon name="play-right-fill" color="#fff" size="60"></u-icon>
|
|
|
|
|
<!-- <view class="video-count">
|
|
|
|
|
<text>视频 {{videocurrent+1}} / {{videoList.length}}</text>
|
|
|
|
|
<text class="en-text">{{videocurrent+1}} / {{videoList.length}} Videos</text>
|
|
|
|
|
</view> -->
|
|
|
|
|
<!-- <view class="video-title" v-if="videoList[videocurrent] && (videoList[videocurrent].name || videoList[videocurrent].title)">
|
|
|
|
|
<text>{{videoList[videocurrent].name || videoList[videocurrent].title}}</text>
|
|
|
|
|
</view> -->
|
|
|
|
|
</view>
|
|
|
|
|
</u-swiper>
|
|
|
|
|
|
|
|
|
|
<u-icon name="arrow-right" color="#fff" size="40" class="video-arrow"
|
|
|
|
|
@click.stop="slideVideo('next')" v-if="videoList.length>1"></u-icon>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="changePicVideo">
|
|
|
|
|
@ -39,6 +46,14 @@
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
<u-popup class="video-popup" :show="showVideoPlayer" mode="center" closeable="true" @close="closeVideoPopup">
|
|
|
|
|
<view class="video-wrapper">
|
|
|
|
|
<video id="studyVideo" class="study-video" :src="currentVideoUrl" controls
|
|
|
|
|
show-center-play-btn enable-play-gesture show-fullscreen-btn
|
|
|
|
|
@fullscreenchange="handleFullScreenChange">
|
|
|
|
|
</video>
|
|
|
|
|
</view>
|
|
|
|
|
</u-popup>
|
|
|
|
|
<view v-html="studyInfo.content" style="padding-bottom: 160rpx;">
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -81,6 +96,11 @@
|
|
|
|
|
studyTime: "00:00", // 学习时间
|
|
|
|
|
studyMin: -1, // 倒计时
|
|
|
|
|
timer: null,
|
|
|
|
|
videoDirection: 90,
|
|
|
|
|
showVideoPlayer: false,
|
|
|
|
|
currentVideoUrl: '',
|
|
|
|
|
videoContext: null,
|
|
|
|
|
videoPoster: require('../../static/img/ptfk.png')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
@ -144,9 +164,6 @@
|
|
|
|
|
changeImg(e){
|
|
|
|
|
this.imgcurrent = e.current
|
|
|
|
|
},
|
|
|
|
|
changeImg(e){
|
|
|
|
|
this.videocurrent = e.current
|
|
|
|
|
},
|
|
|
|
|
changeSwiperImg(){
|
|
|
|
|
this.showSwiperFlag=0
|
|
|
|
|
this.imgcurrent=0
|
|
|
|
|
@ -154,6 +171,48 @@
|
|
|
|
|
changeSwiperVideo(){
|
|
|
|
|
this.showSwiperFlag=1
|
|
|
|
|
this.videocurrent=0
|
|
|
|
|
},
|
|
|
|
|
slideVideo(direction){
|
|
|
|
|
if(this.videoList.length<=1){
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if(direction === 'prev'){
|
|
|
|
|
this.videocurrent = (this.videocurrent - 1 + this.videoList.length) % this.videoList.length
|
|
|
|
|
}else if(direction === 'next'){
|
|
|
|
|
this.videocurrent = (this.videocurrent + 1) % this.videoList.length
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
openVideoPopup(item, index){
|
|
|
|
|
if(!item || !item.url){
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.currentVideoUrl = item.url
|
|
|
|
|
this.showVideoPlayer = true
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.videoContext = uni.createVideoContext('studyVideo', this)
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
|
|
this.videoContext.requestFullScreen({
|
|
|
|
|
direction: this.videoDirection
|
|
|
|
|
})
|
|
|
|
|
// #endif
|
|
|
|
|
this.videoContext.play()
|
|
|
|
|
}, 200)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
closeVideoPopup(){
|
|
|
|
|
if(this.videoContext){
|
|
|
|
|
this.videoContext.pause()
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
|
|
this.videoContext.exitFullScreen()
|
|
|
|
|
// #endif
|
|
|
|
|
}
|
|
|
|
|
this.showVideoPlayer = false
|
|
|
|
|
},
|
|
|
|
|
handleFullScreenChange(e){
|
|
|
|
|
if(!e.detail.fullScreen){
|
|
|
|
|
this.closeVideoPopup()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -215,6 +274,53 @@
|
|
|
|
|
height: 360rpx;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.video-overlay{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: rgba(0,0,0,0.75);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding: 0 30rpx;
|
|
|
|
|
gap: 20rpx;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.video-main{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 100%;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.video-count{
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
}
|
|
|
|
|
.video-count .en-text{
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
margin-top: 8rpx;
|
|
|
|
|
color: rgba(255,255,255,0.85);
|
|
|
|
|
}
|
|
|
|
|
.video-title{
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: rgba(255,255,255,0.9);
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.video-arrow{
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.service-show .changePicVideo{
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 80rpx;
|
|
|
|
|
@ -249,4 +355,18 @@
|
|
|
|
|
.button-text > view:first-child {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
.video-popup /deep/ .u-popup__content{
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
.video-wrapper{
|
|
|
|
|
width: 640rpx;
|
|
|
|
|
height: 360rpx;
|
|
|
|
|
background: #000;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.study-video{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
