mkw-visit-wx/pages/visit/study.vue

<template>
	<view class="containers">
		<view class="steps">
			<uni-steps :options="steps" :active="stepActive" active-color="#4f607e" />
		</view>
		<view class="study" style="padding:0 20rpx">
			<view class="service-show" v-if="studyInfo.file_detail.length>0">
				<view v-if="picList.length>0&&showSwiperFlag==0">
					<u-swiper :list="picList" @change="changeImg" keyName="url"
						:height="'360rpx'" :interval='4000' :duration='500' :autoplay='false' circular>
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in picList" :key="index"
								:class="[index === imgcurrent && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
				</view>
				<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 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-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">
					<view @click='changeSwiperImg' v-if="picList.length>0">
						<image src="../../static/img/pic.png">
						</image>{{picList.length}}
					</view>
					<view @click='changeSwiperVideo' v-if="videoList.length>0">
						<image src="../../static/img/video.png">
						</image>{{videoList.length}}
					</view>
				</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>
		<view class="asks">

		</view>

		<button @click="goTest" :class="studyMin==-1?'goTest':'noTest'" :disabled="studyMin==-1?false:true">
			<view v-if="studyMin==-1" class="button-text">
				<view>去测验</view>
				<view class="en-text">Go to Test</view>
			</view>
			<view v-else class="button-text">
				<view>需要学习{{studyInfo.minute?studyInfo.minute:""}}分钟可去测验({{studyTime}})</view>
				<view class="en-text">Need to study {{studyInfo.minute?studyInfo.minute:""}} minutes before test ({{studyTime}})</view>
			</view>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				steps: [{
					title: '填报\nRegistration'
				}, {
					title: '学习\nStudy'
				}, {
					title: '完成\nComplete'
				}],
				stepActive: 1,
				studyInfo: {},
				picList:[],
				videoList:[],
				showSwiperFlag:0,
				imgcurrent: 0,
				videocurrent:0,
				studyTime: "00:00", // 学习时间
				studyMin: -1, // 倒计时
				timer: null,
				videoDirection: 90,
				showVideoPlayer: false,
				currentVideoUrl: '',
				videoContext: null,
				videoPoster: require('../../static/img/ptfk.png')
			}
		},
		onLoad(options) {
			// uni.navigateTo({
			// 	url:'/pages/visit/testStudy?type=1'
			// })
			// return
			let that = this
			this.type = options.type
			this.getStudy()
			if (this.timer) {
				clearInterval(this.timer)
			} else {
				this.timer = setInterval(function() {
					that.loadTime()
				}, 1000)
			}

		},
		methods: {
			async getStudy() {
				let that = this
				this.util.request({
					api: '/api/mobile/visit/get-ask',
					data: {
						type: that.type
					},
					utilSuccess: function(res) {
						that.studyInfo = res
						for(var k of res.file_detail){
							if(k.extension=='mp4'){
								that.videoList.push(k)
							}else{
								that.picList.push(k)
							}
						}
						that.showSwiperFlag = that.picList.length==0? 1 : 0
						that.studyMin = res.minute * 60
						// that.studyMin = .1 * 60
					},
					utilFail: function(res) {}
				})
			},
			loadTime() {
				if (this.studyMin >= 0) {
					let minutes = Math.floor(this.studyMin / 60);
					let seconds = Math.floor(this.studyMin % 60);
					minutes = minutes < 10 ? "0" + minutes : minutes
					seconds = seconds < 10 ? "0" + seconds : seconds
					this.studyTime = minutes + ":" + seconds
						--this.studyMin;
				} else {
					clearInterval(this.timer);
				}
			},
			goTest() {
				uni.redirectTo({
					url: '/pages/visit/testStudy?type=' + this.type
				})
			},
			changeImg(e){
				this.imgcurrent = e.current
			},
			changeSwiperImg(){
				this.showSwiperFlag=0
				this.imgcurrent=0
			},
			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()
				}
			}
			

		}
	}
</script>

<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: #fff;
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #4f607e;
			}
		}
	}
</style>
<style scoped>
	.containers {
		background-color: #fff;
		min-height: 100vh;
		padding: 20rpx;
		/* padding-bottom: 60rpx; */
		position: relative;
	}

	.containers>button {
		position: absolute;
		bottom: 60rpx;
		margin: 20rpx;
		width: 90%;
	}

	.steps {
		margin-bottom: 40rpx
	}

	.goTest {
		background-color: #4f607e;
		color: #fff;
	}

	.noTest {
		background-color: #ddd;
		color: #000
	}

	.service-show {
		width: 100%;
		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;
		    bottom: 25rpx;
	}
	.service-show .changePicVideo view{
		    background: rgba(0,0,0,0.5);
		        display: inline-block;
		        padding: 5rpx 20rpx;
		        margin: 6rpx;
		        border-radius: 15rpx;
		        color: #fff;
		        font-size: 28rpx;
	}
	.service-show .changePicVideo view image{
		width:24rpx;
		height:21rpx;
		margin-right: 10rpx;
	}
	.button-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.button-text .en-text {
		font-size: 20rpx;
		opacity: 0.85;
		margin-top: -25rpx;
		font-weight: normal;
	}
	.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>