zdxtDrillProgram/components/s-video/s-video.vue

<template>
	<view class="video-wrapper" id="video-container">
		<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
			<video id="video_play" :src="videoObj.videoUrl" @ended="videoEnded()" :autoplay="auto" style="width: 100%;height: 100%;"></video>
			<view class="question"></view>
			<view class="popup-layer-back" v-if="!start" v-show="question">
				<!-- <view class="popup-layer-close" @click="question=false">关闭</view> -->
				<view class="popup-layer">
					<h2>请选择</h2>
					<p @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList">{{item.channel}}</p>
				</view>
			</view>
			<view class="popup-layer-back" v-if="start">
				<view class="popup-layer" @click="nextQuestion(2, null)">
					<p>开始</p>
				</view>
			</view>
			<view class="popup-layer-back" v-if="end">
				<view class="popup-layer" @click="getBindJson()">
					<p>重新开始</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations, mapState } from 'vuex'
	export default {
		name: "s-video",
		data() {
			return {
				videoHeight: 300,
				videoObjList: [],
				videoObj:{},
				answerList: [],
				start: true,
				end: false,
				auto: true,
				question: false,
				questionFreId: "",
				preQuestionId: "",
			};
		},
		computed: {
		  ...mapState('m_user', ['userId'])
		},
		watch:{
		   jsonId:{
			   handler:function(){
				   this.getBindJson();
			   }
		   }	
		},
		props:{
			jsonId: {
				type: String,
				default: "",
			}
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.videoHeight = res.screenHeight;
				}
			});
			
			this.videoContext = uni.createVideoContext("video_play");
			this.videoContext.requestFullScreen();
			this.getBindJson();
		},
		methods: {
		
			videoEnded() {
				this.auto = false;
				this.question = true;
				// 出答案
				if(this.videoObj.outs.length>0) {
					this.answerList =[];
					for(var i=0; i<this.videoObj.outs.length; i++) {
						this.getAnswer(this.videoObj.outs[i])
					}
				} else {
					this.end = true;
					this.answerList = [];
					this.question = false;
					uni.navigateTo({
					  url: '/subpkg/complete/complete'
					})
				}
			},
			nextQuestion(outId, obj) {
				// 点击开始后先增加题次
				if(2==outId) {
					this.$api.addQuestionFre({
						roleId : this.jsonId,
						userId : this.userId
					})
						.then(res => {
							this.questionFreId = res.data;
							console.log(this.questionFreId);
						}).catch((e) => console.log(e)); //捕获异常
				}
				
				// 先提交所选答案
				if(null!=obj) {
					var param = {
						answer : obj.channel,
						questionFreId : this.questionFreId,
						questionId : this.preQuestionId
					}
					this.$api.addAnswer(param)
						.then(res => {
							console.log(res);
						}).catch((e) => console.log(e)); //捕获异常
				}
				// 播放下一视频
				this.hasNodeId(outId);
				this.videoObj.videoUrl = uni.$http.baseUrl + this.videoObj.videoUrl
				this.start = false;
				this.question = false;
				this.auto = true;
			},
			getBindJson() {
				this.start = true;
				this.end = false;
				this.videoObjList = [];
				this.$api.getBindJson(this.jsonId)
					.then(res => {
						this.videoObjList.push(...res.data);
						this.hasNodeId(1);
					}).catch((e) => console.log(e)); //捕获异常
			},
			hasNodeId(nodeId) {
				for(var i=0; i<this.videoObjList.length; i++) {
					if(nodeId == this.videoObjList[i].nodeId) {
						this.videoObj = this.videoObjList[i];
					}
				}
				this.preQuestionId = this.videoObj.questionId;
			},
			getAnswer(outId) {
				for(var i=0; i<this.videoObjList.length; i++) {
					if(outId == this.videoObjList[i].nodeId) {
						this.answerList.push(this.videoObjList[i]);
					}
				}
			}
		}
	}
</script>

<style>
	/* 首先设置背景层 */
	.popup-layer-back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9998;
	}

	/* 然后设置弹出层 */
	.popup-layer {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		padding: 20px;
		z-index: 9999;
	}

	/* 设置关闭按钮 */
	.popup-layer-close {
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
	}
</style>