zhgdyunapp/pages/personLocation/exam/studydetails/studydetails.vue

<template>
	<view class="main-content">
		<headers :showBack="true" :themeType="true">
			<view class="headerName">
				学习详情
			</view>
		</headers>
		<view class="video" v-show="videoList.length">
			<video v-for="(item,index) in videoList" :key="index" id="myVideo" class="disable-progress" style="width: 100%;height: 390rpx;"
				:muted="false" :show-mute-btn="true" :src="item.url" :enable-progress-gesture="false"
				:controls="item.controlsBool" @play="videoStart(index)" @ended="videoEnd(index)">
			</video>
			<!-- <swiper circular :indicator-dots="false" indicator-color="rgba(99, 99, 99, 1)"
				style="width: 100%;height: 390rpx;">
				<swiper-item v-for="(item,index) in videoList" :key="index" style="width: 100%;height: 390rpx;">
					<video id="myVideo" class="disable-progress" style="width: 100%;height: 390rpx;"
						:muted="true" :show-mute-btn="true" :src="item.url" :enable-progress-gesture="false"
						:controls="item.controlsBool" @play="videoStart(index)" @ended="videoEnd(index)">
					</video>
				</swiper-item>
			</swiper> -->
		</view>
		<view class="studybox" v-if="videoList.length">
			<view class="studybox-line"></view>
			<view class="studybox-text1">
				<!-- <text>安全教育——视频</text> -->
				<text>{{responseData.courseName}}</text>
			</view>
		</view>
		<button type="primary" :disabled="isStartExam" class="btn" @click="goHiidden"
			v-if="pageData.examPaperId">开始考试</button>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	export default {
		data() {
			return {
				videoUrl: "",
				videoList: [],
				pageData: {},
				videoStartTime: "",
				userInfo: "",
				responseData: {},
				isStartExam: false
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			// this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onLoad(options) {
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo"))
			this.pageData = JSON.parse(options.transportData)
			console.log(this.pageData)
			this.getDataFn();
		},
		methods: {
			videoStart(index) {
				this.videoStartTime = this.$formatDates(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss');
			},
			videoEnd(index) {
				var that = this
				// 判断是否可以开始考试，需要视频全部看完
				that.videoList[index].isVideoOver = true;
				that.videoList[index].controlsBool = true;
				// 尝试多次刷新视图
				that.$forceUpdate();
				setTimeout(function(){
					that.$forceUpdate();
				},500)
				let startExamBool = true;
				that.videoList.map(item => {
					if (!item.isVideoOver) {
						startExamBool = false;
					}
				})
				if (!startExamBool) {
					that.isStartExam = true;
				} else {
					that.isStartExam = false;
				}
				let requestData = {
					workerId: this.userInfo.id,
					trainId: this.pageData.trainId,
					beginTime: this.videoStartTime,
					endTime: this.$formatDates(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss')
				}
				this.sendRequest({
					url: "xmgl/workerExam/submitStudy",
					data: requestData,
					method: 'post',
					success(res) {}
				})
			},
			getDataFn() {
				var that = this
				let requestData = {
					courseId: this.pageData.courseId
				}
				this.sendRequest({
					url: "xmgl/workerExam/queryCourse",
					data: requestData,
					method: 'post',
					success(res) {
						console.log('试题信息', res)
						if (res.result) {
							that.responseData = res.result;
							that.videoList = res.result.fileUrl ? JSON.parse(res.result.fileUrl) : [],
								that.videoList.map(item => {
									item.isVideoOver = false
									item.controlsBool = false
								})
							if (that.videoList.length) {
								that.isStartExam = true;
								that.videoUrl = that.videoList[0].url
							}
							console.log(that.src)
						}
					}
				})
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			goHiidden() {
				var that = this
				let requestData = {
					id: this.pageData.trainRecordId
				}
				this.sendRequest({
					url: "xmgl/workerExam/startExam",
					data: requestData,
					method: 'post',
					success(res) {
						if (res.code == 200) {
							uni.navigateTo({
								url: '../beginexam/beginexam?transportData=' + JSON.stringify(that
									.pageData)
							});
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">

	.main-content {
		.video {
			width: 100%;

			:deep() {
				.uni-video-ball {
					display: none !important;
				}
			}
		}

		// #myVideo {
		// 	width: 100%;
		// 	height: 386.25rpx;
		// 	position: relative;
		// }

		.studybox {
			height: 170rpx;
			background: #FFFFFF;
			box-shadow: 18rpx 8rpx 16rpx 4rpx rgba(168, 193, 255, 0.17);
			display: flex;
			align-items: center;

			.studybox-line {
				width: 14rpx;
				height: 100%;
				background: #4B8DEC;
			}

			.studybox-text1 {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 40rpx;
				color: #000000;
				margin-left: 40rpx;
			}
		}

		.btn {
			margin: 159.62rpx 40.38rpx;
		}
	}
</style>