|
|
|
@ -1,18 +1,26 @@ |
|
|
|
<template> |
|
|
|
<view class="video-wrapper" id="video-container"> |
|
|
|
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}"> |
|
|
|
<video id="video_play" @click="stopPlay" :controls="true" :src="videoObj.videoUrl" @ended="videoEnded()" |
|
|
|
:autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop" style="width: 100%;height: 90%;"></video> |
|
|
|
<video id="video_play" :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>{{ask}}</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="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,11 +39,15 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapMutations, mapState } from 'vuex' |
|
|
|
import { |
|
|
|
mapMutations, |
|
|
|
mapState |
|
|
|
} from 'vuex' |
|
|
|
export default { |
|
|
|
name: "s-video", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
videoContext: null, |
|
|
|
isLoop: false, |
|
|
|
resVideoUrl: "", |
|
|
|
resVideoUrlTmp: "", |
|
|
|
@ -43,7 +55,7 @@ |
|
|
|
resNodeIdTmp: 2, |
|
|
|
videoHeight: 300, |
|
|
|
videoObjList: [], |
|
|
|
videoObj:{}, |
|
|
|
videoObj: {}, |
|
|
|
answerList: [], |
|
|
|
start: true, |
|
|
|
end: false, |
|
|
|
@ -59,16 +71,16 @@ |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState('m_user', ['userId']) |
|
|
|
...mapState('m_user', ['userId']) |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
jsonId:{ |
|
|
|
handler:function(){ |
|
|
|
this.getBindJson(); |
|
|
|
} |
|
|
|
} |
|
|
|
watch: { |
|
|
|
jsonId: { |
|
|
|
handler: function() { |
|
|
|
this.getBindJson(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
props:{ |
|
|
|
props: { |
|
|
|
jsonId: { |
|
|
|
type: String, |
|
|
|
default: "", |
|
|
|
@ -80,29 +92,55 @@ |
|
|
|
this.videoHeight = res.screenHeight; |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
this.videoContext = uni.createVideoContext("video_play"); |
|
|
|
this.videoContext.requestFullScreen(); |
|
|
|
|
|
|
|
// 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.videoContext.play(); |
|
|
|
}, |
|
|
|
stopPlay() { |
|
|
|
// 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++) { |
|
|
|
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 == "") { |
|
|
|
if (this.resVideoUrl == "") { |
|
|
|
// 为空表示答题正确正常跳转 |
|
|
|
this.end = true; |
|
|
|
this.answerList = []; |
|
|
|
this.question = false; |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subpkg/complete/complete?questionFreId='+this.questionFreId+'&roleId='+this.jsonId |
|
|
|
url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' + |
|
|
|
this.jsonId |
|
|
|
}) |
|
|
|
} else { |
|
|
|
// 不为空表示答题错误展示返回重新选择 |
|
|
|
@ -123,22 +161,22 @@ |
|
|
|
}, |
|
|
|
nextQuestion(outId, obj) { |
|
|
|
// 点击开始后先增加题次 |
|
|
|
if(2==outId) { |
|
|
|
if (2 == outId) { |
|
|
|
this.$api.addQuestionFre({ |
|
|
|
roleId : this.jsonId, |
|
|
|
// userId : this.userId |
|
|
|
userId : '007' |
|
|
|
}) |
|
|
|
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 (null != obj) { |
|
|
|
// 判断答题是否正确 |
|
|
|
if(this.correct == obj.channel.slice(0, 1)) { |
|
|
|
if (this.correct == obj.channel.slice(0, 1)) { |
|
|
|
// 控制选中答案单条显示对错 |
|
|
|
this.$set(obj, 'choose', 'true'); |
|
|
|
isCorrect = 1 |
|
|
|
@ -149,21 +187,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 { |
|
|
|
@ -173,27 +211,27 @@ |
|
|
|
|
|
|
|
// 延长0.5秒播放下一视频 |
|
|
|
const that = this; |
|
|
|
setTimeout(function () { // setInterval同理 |
|
|
|
setTimeout(function() { // setInterval同理 |
|
|
|
that.isError = false; |
|
|
|
that.isOk = false; |
|
|
|
that.hasNodeId(outId); |
|
|
|
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 = ""; |
|
|
|
} |
|
|
|
@ -201,7 +239,7 @@ |
|
|
|
that.start = false; |
|
|
|
that.question = false; |
|
|
|
that.auto = true; |
|
|
|
},300); |
|
|
|
}, 300); |
|
|
|
}, |
|
|
|
getBindJson() { |
|
|
|
this.start = true; |
|
|
|
@ -214,8 +252,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; |
|
|
|
@ -223,22 +261,23 @@ |
|
|
|
} |
|
|
|
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; |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subpkg/complete/complete?questionFreId='+this.questionFreId+'&roleId='+this.jsonId |
|
|
|
url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' + this |
|
|
|
.jsonId |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
@ -269,7 +308,7 @@ |
|
|
|
padding: 20px; |
|
|
|
z-index: 9999; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.popup-layer .anitem { |
|
|
|
position: relative; |
|
|
|
margin: 80rpx; |
|
|
|
@ -277,19 +316,19 @@ |
|
|
|
height: 100rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.popup-layer .anitem .animg { |
|
|
|
width: 100%; |
|
|
|
height: 160rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.popup-layer .anitem .antxt { |
|
|
|
position: absolute; |
|
|
|
top: 60%; |
|
|
|
width: 100%; |
|
|
|
font-size: 1.2rem; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.judd { |
|
|
|
position: absolute; |
|
|
|
top: -20rpx; |
|
|
|
@ -298,15 +337,15 @@ |
|
|
|
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%; |
|
|
|
|
yanyan