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-if="videoList.length">
			<swiper circular :indicator-dots="true" indicator-color="rgba(99, 99, 99, 1)" style="height: 390rpx;">
				<swiper-item v-for="(item,index) in videoList" :key="index">
					<video id="myVideo" show-mute-btn :src="item.url" :is-live="true" :controls="item.controlsBool" :enable-progress-gesture="false"
						@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"  class="btn" @click="goHiidden" v-if="pageData.examPaperId">开始考试</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				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;
				let startExamBool = true;
				that.videoList.map(item => {
					if(!item.isVideoOver){
						startExamBool = false;
					}
				})
				if(startExamBool){
					that.isStartExam = false;
				} else {
					that.isStartExam = true;
				}
				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;
							}
							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%;
		}

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

		.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>