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

<template>
	<view class="video-wrapper" id="video-container">
		<view class="marsk" @click="playVideo" v-if="showLayer">
			<image class="animg" src="/static/images/start.png"></image>
		</view>
		<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
			<video id="video_play" @click="stopPlay" :controls="false" :src="videoObj.videoUrl" @ended="videoEnded()" :autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop" style="width: 100%;height: 100%;" object-fit="cover"></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> -->
					<view class="anitem1">
						<image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
						<view class="antxt1">{{ask}}</view>
					</view>
					<view class="anitem" @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList"
						:key="index">
						<image class="animg" src="/static/videos/skin_bg_1a.png"></image>
						<view class="antxt">{{item.channel}}</view>
						<view class="judd jdok" v-show="isOk && item.choose === 'true'">
							<image class="judimg" src="/static/images/icon-ok.png"></image>
						</view>
						<view class="judd jderr" v-show="isError && item.choose === 'false'">
							<image class="judimg" src="/static/images/icon-err.png"></image>
						</view>
					</view>
				</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-show="resCheck">
				<view class="popup-layer" @click="toResVideo()">
					<p>重新选择逃生路线</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		name: "s-video",
		data() {
			return {
				videoContext: null,
				isLoop: false,
				resVideoUrl: "",
				resVideoUrlTmp: "",
				resNodeId: 2,
				resNodeIdTmp: 2,
				videoHeight: 300,
				videoObjList: [],
				videoObj: {},
				answerList: [],
				start: true,
				end: false,
				auto: true,
				question: false,
				questionFreId: "",
				preQuestionId: "",
				correct: "",
				ask: "",
				isOk: false,
				isError: false,
				resCheck: false,
				showLayer: false,
			};
		},
		computed: {
			...mapState('m_user', ['userId'])
		},
		watch: {
			jsonId: {
				handler: function() {
					this.getBindJson();
				}
			}
		},
		props: {
			jsonId: {
				type: String,
				default: "",
			},
			sceneId: {
				type: String,
				default: "",
			}
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.videoHeight = res.screenHeight;
				}
			});

			// this.videoContext = uni.createVideoContext("video_play");
			// this.videoContext.requestFullScreen();
			// this.getBindJson();
		},
		// watch: {
		// 	current: {
		// 		immediate: true,
		// 		handler: function() {
		// 			this.videoContext = uni.createVideoContext('video_play', this);
		// 			this.$nextTick(() => {
		// 				if (this.current != this.videoIndex) {
		// 					this.stopPlay()
		// 				} else {
		// 					this.playVideo()
		// 				}
		// 			})
		// 		}
		// 	}
		// },
		mounted() {
			// 创建视频对象
			this.videoContext = uni.createVideoContext('video_play', this);
		},
		methods: {
			playVideo() {
				this.showLayer = false;
				this.videoContext.play();
			},
			stopPlay() {
				this.showLayer = true;
				this.videoContext.pause();
			},
			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 {
					if (this.resVideoUrl == "") {
						// 为空表示答题正确正常跳转
						this.end = true;
						this.answerList = [];
						this.question = false;
						uni.navigateTo({
							url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' +
								this.jsonId + '&sceneId=' + this.sceneId
						})
					} else {
						// 不为空表示答题错误展示返回重新选择
						this.resCheck = true;
						this.question = false;
					}
				}
			},
			toResVideo() {
				// 返回播放上一视频
				this.hasNodeId(this.resNodeId);
				this.videoObj.videoUrl = this.resVideoUrl;
				this.start = false;
				this.question = false;
				this.auto = true;
				this.resCheck = false;
				this.resVideoUrl = "";
			},
			nextQuestion(outId, obj) {
				// 点击开始后先增加题次
				if (2 == outId) {
					this.$api.addQuestionFre({
							roleId: this.jsonId,
							sceneId: this.sceneId,
							// userId : this.userId
							userId: '007'
						})
						.then(res => {
							this.questionFreId = res.data;
						}).catch((e) => console.log(e)); //捕获异常
				}

				var isCorrect = 0;
				// 先提交所选答案
				if (null != obj) {
					// 判断答题是否正确
					if (this.correct == obj.channel.slice(0, 1)) {
						// 控制选中答案单条显示对错
						this.$set(obj, 'choose', 'true');
						isCorrect = 1
						this.isError = false;
						this.isOk = true;
					} else {
						// 控制选中答案单条显示对错
						this.$set(obj, 'choose', 'false');
					}
					var param = {
						answer: obj.channel,
						ask: this.ask,
						questionFreId: this.questionFreId,
						questionId: this.preQuestionId,
						correctAnswer: this.correct,
						analysis: obj.analysis,
						correct: isCorrect,
					}
					this.$api.addAnswer(param)
						.then(res => {
							console.log(res);
						}).catch((e) => console.log(e)); //捕获异常
				}

				// 所选答案错误处理1: 用于之前的对错提示展示
				if (isCorrect == 0 && 2 != outId) {
					this.isError = true;
					this.isOk = false;
				} else {
					this.isError = false;
					this.isOk = true;
				}

				// 延长0.5秒播放下一视频
				const that = this;
				setTimeout(function() { // setInterval同理
					that.isError = false;
					that.isOk = false;
					that.hasNodeId(outId);
					that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl

					// 用于记录上一个视频
					if (null == obj) {
						that.resVideoUrl = that.videoObj.videoUrl;
						that.resNodeId = outId;
						that.resVideoUrlTmp = that.resVideoUrl;
						that.resNodeIdTmp = that.resNodeId;
					} else if (isCorrect == 1) {
						that.resVideoUrl = that.videoObj.videoUrl;
						that.resNodeId = outId;
						that.resVideoUrlTmp = that.resVideoUrl;
						that.resNodeIdTmp = that.resNodeId;
					} else if (isCorrect != 1) {
						that.resVideoUrl = that.resVideoUrlTmp;
						that.resNodeId = that.resNodeIdTmp;
					} else if (obj != null && obj.questionId == 'google') {
						that.resVideoUrl = "";
						that.resNodeId = "";
					}

					that.start = false;
					that.question = false;
					that.auto = true;
				}, 300);
			},
			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.correct = this.videoObjList[i].correct;
						this.ask = this.videoObjList[i].ask;
					}
				}
				this.preQuestionId = this.videoObj.questionId;
				// 直接自动开始播放
				if (nodeId == 1) {
					this.nextQuestion(2, null)
				}
			},
			getAnswer(outId) {
				for (var i = 0; i < this.videoObjList.length; i++) {
					if (outId == this.videoObjList[i].nodeId) {
						this.answerList.push(this.videoObjList[i]);
					}
				}
				if (this.answerList.length == 1 && this.answerList[0].questionId == 'google') {
					this.end = true;
					this.answerList = [];
					this.question = false;
					uni.navigateTo({
						url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' + this
							.jsonId + '&sceneId=' + this.sceneId
					})
				}
			}
		}
	}
</script>

<style>
	/* 设置弹出层 */
	.marsk {
		position: absolute;
		z-index: 999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .35);
	}
	.animg {
		position:absolute;
		top:0;left:0;right:0;bottom:0;
		margin:auto;
		width: 100px;
		height: 100px;
	}
	
	/* 首先设置背景层 */
	.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; */
		color: #fff;
		padding: 20px;
		z-index: 9999;
	}

	.popup-layer .anitem1 {
		position: relative;
		/* margin: 80rpx; */
		width: 650rpx;
		height: 200rpx;
		/* text-align: center; */
	}

	.popup-layer .anitem1 .animg1 {
		width: 100%;
		height: 100%;
	}

	.popup-layer .anitem1 .antxt1 {
		position: absolute;
		top: 45%;
		left: 10%;
		width: 100%;
		font-size: 1.2rem;
	}

	.popup-layer .anitem {
		position: relative;
		margin: 80rpx;
		width: 600rpx;
		height: 100rpx;
		text-align: center;
	}

	.popup-layer .anitem .animg {
		width: 100%;
		height: 160rpx;
	}

	.popup-layer .anitem .antxt {
		position: absolute;
		top: 30%;
		width: 100%;
		font-size: 1.2rem;
	}

	.judd {
		position: absolute;
		top: -20rpx;
		right: -50rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.jdok {
		background-color: rgba(3, 173, 55, .35);
	}

	.jderr {
		background-color: rgba(249, 21, 43, .35);
	}

	.judd .judimg {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 50%;
		height: 50%;
	}

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