You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
418 lines
10 KiB
418 lines
10 KiB
<template>
|
|
<view class="video-wrapper" id="video-container">
|
|
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
|
|
<video id="video_play" :controls="false" :src="videoObj.videoUrl" @ended="videoEnded()" @loadedmetadata="onMetadataLoaded" :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>{{ask}}</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="autoChannel===item.channel?'antxtCheck':'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><image style="position: absolute; top: 20%; left: 10%;" :src="failUrl"></image></view>
|
|
<view class="popup-layer" style="color: red;" @click="toResVideo()">
|
|
<view class="anitem1">
|
|
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
|
|
<!-- <view class="antxt1">重新选择逃生路线</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapState } from 'vuex'
|
|
export default {
|
|
name: "s-video",
|
|
data() {
|
|
return {
|
|
isLoop: false,
|
|
resVideoUrl: "",
|
|
resVideoUrlTmp: "",
|
|
resNodeId: 2,
|
|
resNodeIdTmp: 2,
|
|
videoHeight: 300,
|
|
videoObjList: [],
|
|
videoObj:{},
|
|
answerList: [],
|
|
autoAnswerList: [],
|
|
autoIndex: 0,
|
|
autoChannel: "",
|
|
txtColor: "",
|
|
start: true,
|
|
end: false,
|
|
auto: true,
|
|
question: false,
|
|
preQuestionId: "",
|
|
correct: "",
|
|
ask: "",
|
|
isOk: false,
|
|
isError: false,
|
|
resCheck: false,
|
|
isResVideo: false,
|
|
innerAudioContext: null,
|
|
failUrl: uni.$http.baseUrl +"/profile//images/fail_2.gif",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('m_user', ['userId'])
|
|
},
|
|
watch:{
|
|
jsonId:{
|
|
handler:function(){
|
|
this.getBindJson();
|
|
}
|
|
},
|
|
questionFreId: {
|
|
handler: function() {
|
|
this.queryQAByFreId();
|
|
}
|
|
}
|
|
},
|
|
props:{
|
|
jsonId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
sceneId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
questionFreId: {
|
|
type: String,
|
|
default: "",
|
|
}
|
|
},
|
|
created() {
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
this.videoHeight = res.screenHeight;
|
|
}
|
|
});
|
|
|
|
this.videoContext = uni.createVideoContext("video_play");
|
|
this.videoContext.requestFullScreen();
|
|
|
|
// this.queryQAByFreId();
|
|
},
|
|
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])
|
|
}
|
|
|
|
// 在这里进行答案自动选择
|
|
var that = this;
|
|
setTimeout(function () {
|
|
for(var i=0; i<that.answerList.length; i++) {
|
|
if(that.answerList[i].channel == that.autoAnswerList[that.autoIndex].answer) {
|
|
that.autoChannel = that.autoAnswerList[that.autoIndex].answer;
|
|
that.nextQuestion(that.answerList[i].outs[0], that.answerList[i]);
|
|
}
|
|
}
|
|
that.autoIndex++
|
|
}, 500);
|
|
} else {
|
|
if(this.resVideoUrl == "") {
|
|
// 为空表示答题正确正常跳转
|
|
this.end = true;
|
|
this.answerList = [];
|
|
this.question = false;
|
|
// uni.navigateTo({
|
|
// url: '/subpkg/complete/complete?questionFreId='+this.questionFreId+'&roleId='+this.jsonId
|
|
// })
|
|
} else {
|
|
// 不为空表示答题错误展示返回重新选择
|
|
this.resCheck = true;
|
|
this.question = false;
|
|
this.toResVideo();
|
|
}
|
|
}
|
|
},
|
|
toResVideo() {
|
|
// 返回播放上一视频
|
|
this.hasNodeId(this.resNodeId);
|
|
this.videoObj.videoUrl = this.resVideoUrl;
|
|
this.start = false;
|
|
this.question = false;
|
|
this.auto = true;
|
|
this.resCheck = false;
|
|
this.resVideoUrl = "";
|
|
this.isResVideo = true;
|
|
},
|
|
onMetadataLoaded(event) {
|
|
if(this.isResVideo) {
|
|
this.isResVideo = false;
|
|
const duration = event.detail.duration;
|
|
this.videoContext.seek(duration);
|
|
}
|
|
},
|
|
nextQuestion(outId, obj) {
|
|
// 点击开始后先增加题次
|
|
if(2==outId) {
|
|
// this.$api.addQuestionFre({
|
|
// roleId : this.jsonId,
|
|
// // 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.toUpperCase() == obj.channel.slice(0, 1).toUpperCase()) {
|
|
// 控制选中答案单条显示对错
|
|
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,
|
|
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);
|
|
if(!that.videoObj.videoUrl.includes("http")) {
|
|
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)); //捕获异常
|
|
},
|
|
queryQAByFreId() {
|
|
this.$api.queryQAByFreId(this.questionFreId)
|
|
.then(res => {
|
|
this.autoAnswerList.push(...res.data);
|
|
}).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
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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>
|