YNUtdPlatform/pages/realName/workbench/exam/trainVideo.vue

<template>
  <view class="page">
    <u-navbar class="u-navbar" title="培训学习" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	<view class="file-box">
		<video :src="webUrl1" controls :autoplay="autoPlay" @timeupdate="onTimeUpdate" style="width: 100%;height: 80vh;"></video>
	</view>
	<u-loading-page :loading="isloading"></u-loading-page>
	<view class="bottom-box">
		<view class="btn1" @click="leftClick">返回</view>
		<view class="btn2" v-if="pdfInfo.isFinish==0" @click="complete">完成学习</view>
		<view class="btn2" v-if="pdfInfo.isFinish==1" @click="leftClick">完成学习</view>
	</view>
  </view>
</template>

<script>
import PdfView from '../../components/PdfView.vue';
import config from '@/config'
export default {
  components: { PdfView },
  data() {
    return {
		idNumber:uni.getStorageSync('realNameUser').idNumber,
		pdfInfo:{},
		trainInfo:{},
		types:"",
		foreignId:"",
		webUrl1:"",
		isloading:false,
		autoPlay:true,
		currentTime: 0,
		totalTime: 0,
    }
  },
  onLoad(option) {
    this.pdfInfo=JSON.parse(option.pdfInfo);
    this.trainInfo=JSON.parse(option.trainInfo);
	this.types=option.types
	this.foreignId=option.foreignId
	this.webUrl1=config.realFileUrl+this.pdfInfo.filePath;//+`?currentPage=${this.pdfInfo.trainProgress}`
    console.log('🚀 ~ mounted ~ mounted-index:'+this.webUrl1)  
  },
  onShow() {
  },
  methods: {
	onTimeUpdate(event) {
		// 获取视频播放的当前时间，单位为秒
		this.currentTime = Math.floor(event.detail.currentTime);
		this.totalTime = Math.floor(event.detail.duration);
	},
	complete(){ 
			this.isloading=true;
			console.log(this.currentTime)
			console.log(this.totalTime)
			let percentage= Math.floor((this.currentTime / this.totalTime) *100);
			var isFinish = "0";
			if(this.totalTime==this.currentTime){
				isFinish = "1";
			}else{
				isFinish = "0";
			}
			console.log(percentage)
			let param={
				type:this.types,
				foreignId:this.foreignId,
				idNumber:this.trainInfo.idNumber,
				proId:this.trainInfo.proId,
				postId:this.trainInfo.postId,
				einTime:this.trainInfo.einTime,
				id:this.pdfInfo.id,
				trainProgress:this.currentTime,
				trainPercentage:percentage,
				isFinish: isFinish
			}
			console.log(param)
			uni.request({
			  url: config.realExamUrl+'/train/uploadTrainData',
			  method: 'post',
			  data: param,
			  header: {
				'Content-Type': 'application/json',
				Authorization: uni.getStorageSync('realNameToken')
			  },
			  success: res => {
				console.log(res)
				res = res.data;
				if(res.code==200){
					uni.showToast({
						title: "学习结束",
						icon: 'none'
					})
					setTimeout(()=>{
						this.isloading=false;
						uni.navigateBack({
							delta: 1 // 返回到已存在的页面
						});
					},1000)
				}
			  },
			  fail: err => {
				console.log(err)
			  }
			})
	},
	// fillContract(){
	// 	uni.navigateTo({
	// 		url: `/pages/realName/workbench/electronicContract/contractFill`
	// 	})
	// },
    // 返回
    leftClick() { 
	console.log('返回')
	if(this.pdfInfo.isFinish==0){
		this.complete()
	}else{
		uni.navigateBack({
			delta: 1 // 返回
		});
	}
    }
  },

}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	position: relative;
	.file-box{
		width: 100%;
		height: 80vh;
		// overflow-y: auto;
		 
	}
	.bottom-box{
		width: 90%;
		margin: 0 auto;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btn1{
			width: 40%;
			height: 80rpx;
			display: flex;
			align-items: center;justify-content: center;
			color: #FFF;
			background: #00337A;
			border-radius: 10rpx;
		}
		.btn2{
			width: 40%;
			height: 80rpx;
			display: flex;
			align-items: center;justify-content: center;
			color: #FFF;
			background: #00337A;
			border-radius: 10rpx;
		}
	}
}
</style>