9 changed files with 572 additions and 33 deletions
@ -0,0 +1,334 @@ |
|||
<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" :show-fullscreen-btn="false" :loop="isLoop" style="width: 100%;height: 90%;"></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="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 { |
|||
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, |
|||
}; |
|||
}, |
|||
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.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]) |
|||
} |
|||
} 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; |
|||
} |
|||
} |
|||
}, |
|||
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, |
|||
// 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, |
|||
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)); //捕获异常 |
|||
}, |
|||
queryQAByFreId() { |
|||
this.$api.queryQAByFreId('084ddf84e4be4b02acdcfad396c28f98') |
|||
.then(res => { |
|||
console.log(res); |
|||
}).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> |
|||
/* 首先设置背景层 */ |
|||
.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 .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: 60%; |
|||
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> |
|||
@ -0,0 +1,83 @@ |
|||
<template> |
|||
<view class="role-container"> |
|||
<view class="wrap"> |
|||
<!-- <view class="video-wrapper" id="video-container"></view> --> |
|||
<view class="secbar"> <span class="back" @click="back()"></span></view> |
|||
<view class="mainwrap3"> |
|||
<view class="role_wrap"><sVideo :jsonId="jsonId"></sVideo></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import sVideo from "@/components/s-video/res-s-video.vue"; |
|||
export default { |
|||
|
|||
data() { |
|||
return { |
|||
page: "", |
|||
jsonId: "", |
|||
roleId:"", |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
this.jsonId = options.roleId |
|||
}, |
|||
onReady() { |
|||
this.QR(); |
|||
}, |
|||
methods: { |
|||
QR() { |
|||
// uni.scanCode({ |
|||
// onlyFromCamera: true, |
|||
// success: (res) => { |
|||
// console.log('扫描二维码成功,结果:' + res.result); |
|||
// }, |
|||
// error: (res) => { |
|||
// console.log('扫描二维码出现错误') |
|||
// } |
|||
// }) |
|||
}, |
|||
back(){ |
|||
uni.navigateBack({ |
|||
delta:1,//返回层数，2则上上页 |
|||
}) |
|||
}, |
|||
}, |
|||
components: { |
|||
sVideo |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
@import url("@/static/base_css.css"); |
|||
.role-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.secbar { |
|||
top: 0; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.secbar ._span.back { |
|||
top: 50px; |
|||
} |
|||
|
|||
.mainwrap3 { |
|||
top: 0; |
|||
height: calc(100% - 70px); |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.role_wrap { |
|||
position: absolute; |
|||
top: 5%; |
|||
margin: 0; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -1,3 +1,3 @@ |
|||
let url_config = 'http://146.56.223.227:9527/' |
|||
// let url_config = 'http://localhost:85/'
|
|||
// let url_config = 'http://146.56.223.227:9527/'
|
|||
let url_config = 'http://localhost:9527/' |
|||
export default url_config |
|||
Loading…
Reference in new issue