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://146.56.223.227:9527/'
|
||||
// let url_config = 'http://localhost:85/'
|
let url_config = 'http://localhost:9527/' |
||||
export default url_config |
export default url_config |
||||
Loading…
Reference in new issue