|
|
|
@ -1,7 +1,9 @@ |
|
|
|
<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> |
|
|
|
<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> --> |
|
|
|
@ -11,12 +13,17 @@ |
|
|
|
<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"> |
|
|
|
<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 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> |
|
|
|
@ -31,7 +38,7 @@ |
|
|
|
<view class="anitem1"> |
|
|
|
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image> |
|
|
|
<!-- <view class="antxt1">重新选择逃生路线</view> --> |
|
|
|
<!-- </view> |
|
|
|
<!-- </view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
<view class="popup-layer-back" v-show="resCheck"> |
|
|
|
@ -41,13 +48,16 @@ |
|
|
|
<view class="popup-layer fullbox" @click="toResVideo()"> |
|
|
|
<view class="btnsty">重新选择逃生路线</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapMutations, mapState } from 'vuex' |
|
|
|
import { |
|
|
|
mapMutations, |
|
|
|
mapState |
|
|
|
} from 'vuex' |
|
|
|
export default { |
|
|
|
name: "s-video", |
|
|
|
data() { |
|
|
|
@ -59,7 +69,7 @@ |
|
|
|
resNodeIdTmp: 2, |
|
|
|
videoHeight: 300, |
|
|
|
videoObjList: [], |
|
|
|
videoObj:{}, |
|
|
|
videoObj: {}, |
|
|
|
answerList: [], |
|
|
|
autoAnswerList: [], |
|
|
|
autoIndex: 0, |
|
|
|
@ -77,25 +87,25 @@ |
|
|
|
resCheck: false, |
|
|
|
isResVideo: false, |
|
|
|
innerAudioContext: null, |
|
|
|
failUrl: uni.$http.baseUrl +"/profile//images/fail.gif", |
|
|
|
failUrl: uni.$http.baseUrl + "/profile//images/fail.gif", |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState('m_user', ['userId']) |
|
|
|
...mapState('m_user', ['userId']) |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
jsonId:{ |
|
|
|
handler:function(){ |
|
|
|
this.getBindJson(); |
|
|
|
} |
|
|
|
}, |
|
|
|
questionFreId: { |
|
|
|
watch: { |
|
|
|
jsonId: { |
|
|
|
handler: function() { |
|
|
|
this.getBindJson(); |
|
|
|
} |
|
|
|
}, |
|
|
|
questionFreId: { |
|
|
|
handler: function() { |
|
|
|
this.queryQAByFreId(); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
props:{ |
|
|
|
props: { |
|
|
|
jsonId: { |
|
|
|
type: String, |
|
|
|
default: "", |
|
|
|
@ -115,10 +125,10 @@ |
|
|
|
this.videoHeight = res.screenHeight; |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
this.videoContext = uni.createVideoContext("video_play"); |
|
|
|
this.videoContext.requestFullScreen(); |
|
|
|
|
|
|
|
|
|
|
|
// this.queryQAByFreId(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -126,17 +136,17 @@ |
|
|
|
this.auto = false; |
|
|
|
this.question = true; |
|
|
|
// 出答案 |
|
|
|
if(this.videoObj.outs.length>0) { |
|
|
|
this.answerList =[]; |
|
|
|
for(var i=0; i<this.videoObj.outs.length; i++) { |
|
|
|
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) { |
|
|
|
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]); |
|
|
|
} |
|
|
|
@ -144,7 +154,7 @@ |
|
|
|
that.autoIndex++ |
|
|
|
}, 500); |
|
|
|
} else { |
|
|
|
if(this.resVideoUrl == "") { |
|
|
|
if (this.resVideoUrl == "") { |
|
|
|
// 为空表示答题正确正常跳转 |
|
|
|
this.end = true; |
|
|
|
this.answerList = []; |
|
|
|
@ -172,7 +182,7 @@ |
|
|
|
this.isResVideo = true; |
|
|
|
}, |
|
|
|
onMetadataLoaded(event) { |
|
|
|
if(this.isResVideo) { |
|
|
|
if (this.isResVideo) { |
|
|
|
this.isResVideo = false; |
|
|
|
const duration = event.detail.duration; |
|
|
|
this.videoContext.seek(duration); |
|
|
|
@ -180,7 +190,7 @@ |
|
|
|
}, |
|
|
|
nextQuestion(outId, obj) { |
|
|
|
// 点击开始后先增加题次 |
|
|
|
if(2==outId) { |
|
|
|
if (2 == outId) { |
|
|
|
// this.$api.addQuestionFre({ |
|
|
|
// roleId : this.jsonId, |
|
|
|
// // userId : this.userId |
|
|
|
@ -190,10 +200,10 @@ |
|
|
|
// this.questionFreId = res.data; |
|
|
|
// }).catch((e) => console.log(e)); //捕获异常 |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var isCorrect = 0; |
|
|
|
// 先提交所选答案 |
|
|
|
if(null!=obj) { |
|
|
|
if (null != obj) { |
|
|
|
// 判断答题是否正确 |
|
|
|
// if(this.correct.toUpperCase() == obj.channel.slice(0, 1).toUpperCase()) { |
|
|
|
if (this.correct.toUpperCase().includes(obj.channel.slice(0, 1).toUpperCase())) { |
|
|
|
@ -207,21 +217,21 @@ |
|
|
|
this.$set(obj, 'choose', 'false'); |
|
|
|
} |
|
|
|
var param = { |
|
|
|
answer : obj.channel, |
|
|
|
ask : this.ask, |
|
|
|
questionFreId : this.questionFreId, |
|
|
|
questionId : this.preQuestionId, |
|
|
|
correctAnswer : this.correct, |
|
|
|
correct : isCorrect, |
|
|
|
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) { |
|
|
|
if (isCorrect == 0 && 2 != outId) { |
|
|
|
this.isError = true; |
|
|
|
this.isOk = false; |
|
|
|
} else { |
|
|
|
@ -231,29 +241,29 @@ |
|
|
|
|
|
|
|
// 延长0.5秒播放下一视频 |
|
|
|
const that = this; |
|
|
|
setTimeout(function () { // setInterval同理 |
|
|
|
setTimeout(function() { // setInterval同理 |
|
|
|
that.isError = false; |
|
|
|
that.isOk = false; |
|
|
|
that.hasNodeId(outId); |
|
|
|
if(!that.videoObj.videoUrl.includes("http")) { |
|
|
|
if (!that.videoObj.videoUrl.includes("http")) { |
|
|
|
that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl |
|
|
|
} |
|
|
|
|
|
|
|
// 用于记录上一个视频 |
|
|
|
if(null==obj) { |
|
|
|
if (null == obj) { |
|
|
|
that.resVideoUrl = that.videoObj.videoUrl; |
|
|
|
that.resNodeId = outId; |
|
|
|
that.resVideoUrlTmp = that.resVideoUrl; |
|
|
|
that.resNodeIdTmp = that.resNodeId; |
|
|
|
} else if(isCorrect == 1) { |
|
|
|
} else if (isCorrect == 1) { |
|
|
|
that.resVideoUrl = that.videoObj.videoUrl; |
|
|
|
that.resNodeId = outId; |
|
|
|
that.resVideoUrlTmp = that.resVideoUrl; |
|
|
|
that.resNodeIdTmp = that.resNodeId; |
|
|
|
} else if(isCorrect != 1) { |
|
|
|
} else if (isCorrect != 1) { |
|
|
|
that.resVideoUrl = that.resVideoUrlTmp; |
|
|
|
that.resNodeId = that.resNodeIdTmp; |
|
|
|
} else if(obj != null && obj.questionId =='google') { |
|
|
|
} else if (obj != null && obj.questionId == 'google') { |
|
|
|
that.resVideoUrl = ""; |
|
|
|
that.resNodeId = ""; |
|
|
|
} |
|
|
|
@ -261,7 +271,7 @@ |
|
|
|
that.start = false; |
|
|
|
that.question = false; |
|
|
|
that.auto = true; |
|
|
|
},300); |
|
|
|
}, 300); |
|
|
|
}, |
|
|
|
getBindJson() { |
|
|
|
this.start = true; |
|
|
|
@ -280,8 +290,8 @@ |
|
|
|
}).catch((e) => console.log(e)); //捕获异常 |
|
|
|
}, |
|
|
|
hasNodeId(nodeId) { |
|
|
|
for(var i=0; i<this.videoObjList.length; i++) { |
|
|
|
if(nodeId == this.videoObjList[i].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; |
|
|
|
@ -289,17 +299,17 @@ |
|
|
|
} |
|
|
|
this.preQuestionId = this.videoObj.questionId; |
|
|
|
// 直接自动开始播放 |
|
|
|
if(nodeId == 1) { |
|
|
|
if (nodeId == 1) { |
|
|
|
this.nextQuestion(2, null) |
|
|
|
} |
|
|
|
}, |
|
|
|
getAnswer(outId) { |
|
|
|
for(var i=0; i<this.videoObjList.length; i++) { |
|
|
|
if(outId == this.videoObjList[i].nodeId) { |
|
|
|
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') { |
|
|
|
if (this.answerList.length == 1 && this.answerList[0].questionId == 'google') { |
|
|
|
this.end = true; |
|
|
|
this.answerList = []; |
|
|
|
this.question = false; |
|
|
|
@ -321,14 +331,18 @@ |
|
|
|
height: 100%; |
|
|
|
background-color: rgba(0, 0, 0, .35); |
|
|
|
} |
|
|
|
|
|
|
|
.animg { |
|
|
|
position:absolute; |
|
|
|
top:0;left:0;right:0;bottom:0; |
|
|
|
margin:auto; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
margin: auto; |
|
|
|
width: 100px; |
|
|
|
height: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 首先设置背景层 */ |
|
|
|
.popup-layer-back { |
|
|
|
position: absolute; |
|
|
|
@ -351,9 +365,12 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.popup-layer .anitem1 { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
position: relative; |
|
|
|
width: 650rpx; |
|
|
|
height: 200rpx; |
|
|
|
width: 100vw; |
|
|
|
height: 240rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.popup-layer .anitem1 .animg1 { |
|
|
|
@ -362,37 +379,45 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.popup-layer .anitem1 .antxt1 { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
position: absolute; |
|
|
|
top: 45%; |
|
|
|
left: 10%; |
|
|
|
width: 100%; |
|
|
|
font-size: 1.2rem; |
|
|
|
left: 6%; |
|
|
|
width: 90%; |
|
|
|
font-size: 1.1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.popup-layer .anitem { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
position: relative; |
|
|
|
margin: 80rpx; |
|
|
|
width: 600rpx; |
|
|
|
height: 100rpx; |
|
|
|
text-align: center; |
|
|
|
margin: 20rpx auto; |
|
|
|
width: 100vw; |
|
|
|
height: 180rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.popup-layer .anitem .animg { |
|
|
|
width: 100%; |
|
|
|
height: 160rpx; |
|
|
|
width: 98%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.popup-layer .anitem .antxt { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
position: absolute; |
|
|
|
top: 30%; |
|
|
|
width: 100%; |
|
|
|
margin: 10%; |
|
|
|
width: 82%; |
|
|
|
font-size: 1.1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.judd { |
|
|
|
position: absolute; |
|
|
|
top: -20rpx; |
|
|
|
right: -50rpx; |
|
|
|
right: 0; |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
border-radius: 50%; |
|
|
|
@ -424,17 +449,17 @@ |
|
|
|
width: 560rpx; |
|
|
|
height: 560rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.failed-tip image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.fullbox { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btnsty { |
|
|
|
position: absolute; |
|
|
|
left: 20%; |
|
|
|
@ -451,7 +476,7 @@ |
|
|
|
color: #fff; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 设置关闭按钮 */ |
|
|
|
.popup-layer-close { |
|
|
|
position: absolute; |
|
|
|
|
