security_study_h5/study/studydetails.vue

<template>
	<view class="">
		<!-- <u-navbar
			:title="title"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar> -->
		<view class="page-wrap">
			<view class="base-info">
				<view class="title">{{pageData.title}}</view>
				<view class="info u-flex u-row-between">
					<view class="time">{{pageData.createTime}}</view>
					<view class="view-count">{{pageData.studyUserNum}}人已学</view>
				</view>
			</view>
			<view class="content-wrap">
				<view class="content" v-if="pageData.libType!=2">
					<u-parse :content="pageData.content"></u-parse>
				</view>
				<view class="video-wrap" v-else>
					<video 
						id="myVideo" :src="pageData.videoUrl"
					    @error="videoErrorCallback" 
						:show-fullscreen-btn="true"
						@timeupdate="timeupdate"
						@ended="ended"
						:initial-time="initial_time"
						@loadedmetadata="loadedmetadata"
						:controls="true">
					</video>
					<view class="video-tip">{{videoTip}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			pageHeight:null,
			windowTop:null,
			windowHeight:null,
			scrollHeight:null,
			title:'详情',
			id:null,
			type:'',
			pageData:{
				title:'',
				content:''
			},
			swiperDetails:{},
			// 视频创建dom
			videoContext: uni.createVideoContext('myVideo', this),
			// 视频已经播放时间
			playedTime: 0,
			// 视频总时长
			duration: 0,
			// 视频实时时间
			initial_time:0,
			// 视频实际时间
			video_real_time: 0,
			// 视频总时长
			duration: 0,
			// 当前视频选中播放
			currentDuration: 0,
			// 视频信息
			videoInfo: {},
			hasAddView:false,
			videoTip:'请完整学习视频!(未完成)'
		}
	},
	onLoad(page) {
		this.id = page.id;
		this.getDetails(this.id);
		
	},
	onReady(){
		this.windowTop = uni.getSystemInfoSync().windowTop;
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
		this.pageHeight = this.windowTop + this.windowHeight;
		this.scrollHeight = document.documentElement.scrollHeight;
		// console.log('this.pageHeight',this.pageHeight);
		// console.log('this.scrollHeight',this.scrollHeight);
		if(this.scrollHeight>this.pageHeight){
			console.log('有滚动条');
		}else{
			console.log('没有滚动条');
		}
		
	},
	// 在 onPageScroll 监听函数中监听滚动事件
	onPageScroll(e) {
		// console.log('onPageScroll',e);
		// console.log('this.pageHeight',this.pageHeight);
		// console.log('this.scrollHeight',this.scrollHeight);
		// console.log('document.body.scrollTop',document.body.scrollTop);
	  // 如果页面滚动到底部，则执行相应的操作
	  if (e.scrollTop + this.windowHeight >= this.scrollHeight) {
		  console.log('页面滚动到底部');
	    // 执行操作
	  }
	},
	beforeDestroy() {
		if(this.pageData.libType==2){
			console.log('hasAddView',this.hasAddView);
		}
	},
	methods:{
		getDetails(id){
			this.$u.api.courseDetails({id:id}).then(res=>{
				this.pageData = res.data;
				
				if(this.pageData.libType!=2){
					this.addViewCount(this.id)
				}
				
				// console.log('res',res);
				}).catch(err=>{
				console.log('courseDetails',err.data);
			})
		},
		addViewCount(id){
			this.$u.api.addViewCount({id:id}, { custom: { noload: true } }).then(res=>{
				this.videoTip = '请完整学习视频!(已完成)';
				// console.log('res',res);
				}).catch(err=>{
				console.log('addViewCount',err.data);
			})
		},
		timeupdate(e){
			// console.log('timeupdate',e.detail);
			//播放的总时长
			let duration = e.detail.duration;
			//实时播放进度 秒数
			let jumpTime = parseInt(e.detail.currentTime);
			//当前视频进度
			if (jumpTime - this.playedTime > 3) {
			  // 差别过大，调用seek方法跳转到实际观看时间
			  this.videoContext.seek(this.playedTime);
			  wx.showToast({
			    title: '未完整看完该视频，不能快进',
			    icon: 'none',
			    duration: 2000
			  });
			} else {
			  this.video_real_time = parseInt(e.detail.currentTime);
			  this.currentDuration = e.detail.currentTime;
			  if (this.video_real_time > this.playedTime) {
			    this.playedTime = this.video_real_time;
			  }
			}
			// console.log('playedTime',this.playedTime);
			// console.log('duration',parseInt(duration));
			// 距离播放完成多少秒算看完,并调用接口
			if(parseInt(duration)-this.playedTime==5&&this.hasAddView==false){
				// console.log('看完了');
				this.hasAddView = true;
				this.addViewCount(this.id)
			}
		},
		loadedmetadata(data) {
		  this.duration = data.detail.duration;
		},
		ended() {
		  // 用户把进度条拉到最后，但是实际观看时间不够，跳转回去会自动暂停。
		  // 这里加个判断。
		  if (this.videoUrl) {
		    this.$emit(
		      'recordDuration',
		      { playDuration: this.playedTime, duration: this.duration, currentDuration: this.currentDuration },
		      this.videoIndex,
		      true
		    );
		  }
		}
	}
}
</script>
<style>
page{background-color: #F5F9FC;}
</style>
<style lang="scss" scoped>
.title{
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	line-height: 50rpx;
	margin-bottom: 20rpx;
	text-align: center;
}
.info{
	margin-bottom: 50rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 33rpx;
}
.page-wrap{
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
	line-height: 44rpx;
	p{
		text-indent: 2em;
	}
	/deep/ .u-image{
		margin-bottom: 20rpx;
	}
}
.content{
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
	line-height: 44rpx;
	margin: 20rpx 0;
}
.u-image{
	max-width: 100%;
}
.video-wrap{
	video{
		width:100%;
	}
	.video-tip{
		text-align: center;
		margin: 20rpx;
	}
}
</style>