kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

演练回顾, 视频结算时获取勋章

h5_css
蟑螂恶霸 3 years ago
committed by yanyan
parent
1c3a94e0e6
commit
7bb75b28c2
7 changed files with 154 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      api/question.js
  2. 58
      components/s-video/res-s-video.vue
  3. 121
      components/s-video/s-video.vue
  4. 10
      subpkg/complete/complete.vue
  5. 4
      subpkg/medal/medal.vue
  6. 1
      subpkg/respractice/respractice.vue
  7. 2
      subpkg/role/role.vue

2
api/question.js
View File

@ -39,7 +39,7 @@ export const getAnswerByFreId = (data) => {
/** 获取答题顺序 */ /** 获取答题顺序 */
export const queryQAByFreId = (data) => { export const queryQAByFreId = (data) => {
return $http({ return $http({
method: 'POST', method: 'GET',
url: 'small/questionAnswer/queryQAByFreId/'+data url: 'small/questionAnswer/queryQAByFreId/'+data
}) })
} }

58
components/s-video/res-s-video.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class="video-wrapper" id="video-container"> <view class="video-wrapper" id="video-container">
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}"> <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> <video id="video_play" :controls="false" :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="question"></view>
<view class="popup-layer-back" v-if="!start" v-show="question"> <view class="popup-layer-back" v-if="!start" v-show="question">
<!-- <view class="popup-layer-close" @click="question=false">关闭</view> --> <!-- <view class="popup-layer-close" @click="question=false">关闭</view> -->
@ -10,7 +10,8 @@
<view>{{ask}}</view> <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> <image class="animg" src="/static/videos/skin_bg_1a.png"></image>
<view class="antxt">{{item.channel}}</view> <!-- <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 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 jderr" v-show="isError && item.choose === 'false'"><image class="judimg" src="/static/images/icon-err.png"></image></view>
</view> </view>
@ -22,7 +23,7 @@
</view> </view>
</view> --> </view> -->
<view class="popup-layer-back" v-show="resCheck"> <view class="popup-layer-back" v-show="resCheck">
<view class="popup-layer" @click="toResVideo()"> <view class="popup-layer" style="color: red;" @click="toResVideo()">
<p>重新选择逃生路线</p> <p>重新选择逃生路线</p>
</view> </view>
</view> </view>
@ -45,6 +46,10 @@
videoObjList: [], videoObjList: [],
videoObj:{}, videoObj:{},
answerList: [], answerList: [],
autoAnswerList: [],
autoIndex: 0,
autoChannel: "",
txtColor: "",
start: true, start: true,
end: false, end: false,
auto: true, auto: true,
@ -95,6 +100,18 @@
for(var i=0; i<this.videoObj.outs.length; i++) { for(var i=0; i<this.videoObj.outs.length; i++) {
this.getAnswer(this.videoObj.outs[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 { } else {
if(this.resVideoUrl == "") { if(this.resVideoUrl == "") {
// 为空表示答题正确正常跳转 // 为空表示答题正确正常跳转
@ -108,6 +125,7 @@
// 不为空表示答题错误展示返回重新选择 // 不为空表示答题错误展示返回重新选择
this.resCheck = true; this.resCheck = true;
this.question = false; this.question = false;
this.toResVideo();
} }
} }
}, },
@ -124,14 +142,14 @@
nextQuestion(outId, obj) { nextQuestion(outId, obj) {
// 点击开始后先增加题次 // 点击开始后先增加题次
if(2==outId) { if(2==outId) {
this.$api.addQuestionFre({ // this.$api.addQuestionFre({
roleId : this.jsonId, // roleId : this.jsonId,
// userId : this.userId // // userId : this.userId
userId : '007' // userId : '007'
}) // })
.then(res => { // .then(res => {
this.questionFreId = res.data; // this.questionFreId = res.data;
}).catch((e) => console.log(e)); //捕获异常 // }).catch((e) => console.log(e)); //捕获异常
} }
var isCorrect = 0; var isCorrect = 0;
@ -156,10 +174,10 @@
correctAnswer : this.correct, correctAnswer : this.correct,
correct : isCorrect, correct : isCorrect,
} }
this.$api.addAnswer(param) // this.$api.addAnswer(param)
.then(res => { // .then(res => {
console.log(res); // console.log(res);
}).catch((e) => console.log(e)); //捕获异常 // }).catch((e) => console.log(e)); //捕获异常
} }
// 所选答案错误处理1: 用于之前的对错提示展示 // 所选答案错误处理1: 用于之前的对错提示展示
@ -216,7 +234,7 @@
queryQAByFreId() { queryQAByFreId() {
this.$api.queryQAByFreId('084ddf84e4be4b02acdcfad396c28f98') this.$api.queryQAByFreId('084ddf84e4be4b02acdcfad396c28f98')
.then(res => { .then(res => {
console.log(res); this.autoAnswerList.push(...res.data);
}).catch((e) => console.log(e)); //捕获异常 }).catch((e) => console.log(e)); //捕获异常
}, },
hasNodeId(nodeId) { hasNodeId(nodeId) {
@ -296,6 +314,14 @@
font-size: 1.2rem; font-size: 1.2rem;
} }
.antxtCheck {
position: absolute;
top: 60%;
width: 100%;
font-size: 1.2rem;
color: red;
}
.judd { .judd {
position: absolute; position: absolute;
top: -20rpx; top: -20rpx;

121
components/s-video/s-video.vue
View File

@ -1,18 +1,26 @@
<template> <template>
<view class="video-wrapper" id="video-container"> <view class="video-wrapper" id="video-container">
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}"> <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> <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="question"></view>
<view class="popup-layer-back" v-if="!start" v-show="question"> <view class="popup-layer-back" v-if="!start" v-show="question">
<!-- <view class="popup-layer-close" @click="question=false">关闭</view> --> <!-- <view class="popup-layer-close" @click="question=false">关闭</view> -->
<view class="popup-layer"> <view class="popup-layer">
<!-- <h2>请选择</h2> --> <!-- <h2>请选择</h2> -->
<view>{{ask}}</view> <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> <image class="animg" src="/static/videos/skin_bg_1a.png"></image>
<view class="antxt">{{item.channel}}</view> <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 jdok" v-show="isOk && item.choose === 'true'">
<view class="judd jderr" v-show="isError && item.choose === 'false'"><image class="judimg" src="/static/images/icon-err.png"></image></view> <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>
</view> </view>
@ -31,11 +39,15 @@
</template> </template>
<script> <script>
import { mapMutations, mapState } from 'vuex' import {
mapMutations,
mapState
} from 'vuex'
export default { export default {
name: "s-video", name: "s-video",
data() { data() {
return { return {
videoContext: null,
isLoop: false, isLoop: false,
resVideoUrl: "", resVideoUrl: "",
resVideoUrlTmp: "", resVideoUrlTmp: "",
@ -43,7 +55,7 @@
resNodeIdTmp: 2, resNodeIdTmp: 2,
videoHeight: 300, videoHeight: 300,
videoObjList: [], videoObjList: [],
videoObj:{}, videoObj: {},
answerList: [], answerList: [],
start: true, start: true,
end: false, end: false,
@ -61,14 +73,14 @@
computed: { computed: {
...mapState('m_user', ['userId']) ...mapState('m_user', ['userId'])
}, },
watch:{ watch: {
jsonId:{ jsonId: {
handler:function(){ handler: function() {
this.getBindJson(); this.getBindJson();
} }
} }
}, },
props:{ props: {
jsonId: { jsonId: {
type: String, type: String,
default: "", default: "",
@ -81,28 +93,54 @@
} }
}); });
this.videoContext = uni.createVideoContext("video_play"); // this.videoContext = uni.createVideoContext("video_play");
this.videoContext.requestFullScreen(); // this.videoContext.requestFullScreen();
// this.getBindJson(); // 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: { methods: {
playVideo() {
// this.videoContext.play();
},
stopPlay() {
// this.videoContext.pause();
},
videoEnded() { videoEnded() {
this.auto = false; this.auto = false;
this.question = true; this.question = true;
// 出答案 // 出答案
if(this.videoObj.outs.length>0) { if (this.videoObj.outs.length > 0) {
this.answerList =[]; this.answerList = [];
for(var i=0; i<this.videoObj.outs.length; i++) { for (var i = 0; i < this.videoObj.outs.length; i++) {
this.getAnswer(this.videoObj.outs[i]) this.getAnswer(this.videoObj.outs[i])
} }
} else { } else {
if(this.resVideoUrl == "") { if (this.resVideoUrl == "") {
// 为空表示答题正确正常跳转 // 为空表示答题正确正常跳转
this.end = true; this.end = true;
this.answerList = []; this.answerList = [];
this.question = false; this.question = false;
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/complete/complete?questionFreId='+this.questionFreId+'&roleId='+this.jsonId url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' +
this.jsonId
}) })
} else { } else {
// 不为空表示答题错误展示返回重新选择 // 不为空表示答题错误展示返回重新选择
@ -123,11 +161,11 @@
}, },
nextQuestion(outId, obj) { nextQuestion(outId, obj) {
// 点击开始后先增加题次 // 点击开始后先增加题次
if(2==outId) { if (2 == outId) {
this.$api.addQuestionFre({ this.$api.addQuestionFre({
roleId : this.jsonId, roleId: this.jsonId,
// userId : this.userId // userId : this.userId
userId : '007' userId: '007'
}) })
.then(res => { .then(res => {
this.questionFreId = res.data; this.questionFreId = res.data;
@ -136,9 +174,9 @@
var isCorrect = 0; 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'); this.$set(obj, 'choose', 'true');
isCorrect = 1 isCorrect = 1
@ -149,12 +187,12 @@
this.$set(obj, 'choose', 'false'); this.$set(obj, 'choose', 'false');
} }
var param = { var param = {
answer : obj.channel, answer: obj.channel,
ask : this.ask, ask: this.ask,
questionFreId : this.questionFreId, questionFreId: this.questionFreId,
questionId : this.preQuestionId, questionId: this.preQuestionId,
correctAnswer : this.correct, correctAnswer: this.correct,
correct : isCorrect, correct: isCorrect,
} }
this.$api.addAnswer(param) this.$api.addAnswer(param)
.then(res => { .then(res => {
@ -163,7 +201,7 @@
} }
// 所选答案错误处理1: 用于之前的对错提示展示 // 所选答案错误处理1: 用于之前的对错提示展示
if(isCorrect == 0 && 2 != outId) { if (isCorrect == 0 && 2 != outId) {
this.isError = true; this.isError = true;
this.isOk = false; this.isOk = false;
} else { } else {
@ -173,27 +211,27 @@
// 延长0.5秒播放下一视频 // 延长0.5秒播放下一视频
const that = this; const that = this;
setTimeout(function () { // setInterval同理 setTimeout(function() { // setInterval同理
that.isError = false; that.isError = false;
that.isOk = false; that.isOk = false;
that.hasNodeId(outId); that.hasNodeId(outId);
that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl
// 用于记录上一个视频 // 用于记录上一个视频
if(null==obj) { if (null == obj) {
that.resVideoUrl = that.videoObj.videoUrl; that.resVideoUrl = that.videoObj.videoUrl;
that.resNodeId = outId; that.resNodeId = outId;
that.resVideoUrlTmp = that.resVideoUrl; that.resVideoUrlTmp = that.resVideoUrl;
that.resNodeIdTmp = that.resNodeId; that.resNodeIdTmp = that.resNodeId;
} else if(isCorrect == 1) { } else if (isCorrect == 1) {
that.resVideoUrl = that.videoObj.videoUrl; that.resVideoUrl = that.videoObj.videoUrl;
that.resNodeId = outId; that.resNodeId = outId;
that.resVideoUrlTmp = that.resVideoUrl; that.resVideoUrlTmp = that.resVideoUrl;
that.resNodeIdTmp = that.resNodeId; that.resNodeIdTmp = that.resNodeId;
} else if(isCorrect != 1) { } else if (isCorrect != 1) {
that.resVideoUrl = that.resVideoUrlTmp; that.resVideoUrl = that.resVideoUrlTmp;
that.resNodeId = that.resNodeIdTmp; that.resNodeId = that.resNodeIdTmp;
} else if(obj != null && obj.questionId =='google') { } else if (obj != null && obj.questionId == 'google') {
that.resVideoUrl = ""; that.resVideoUrl = "";
that.resNodeId = ""; that.resNodeId = "";
} }
@ -201,7 +239,7 @@
that.start = false; that.start = false;
that.question = false; that.question = false;
that.auto = true; that.auto = true;
},300); }, 300);
}, },
getBindJson() { getBindJson() {
this.start = true; this.start = true;
@ -214,8 +252,8 @@
}).catch((e) => console.log(e)); //捕获异常 }).catch((e) => console.log(e)); //捕获异常
}, },
hasNodeId(nodeId) { hasNodeId(nodeId) {
for(var i=0; i<this.videoObjList.length; i++) { for (var i = 0; i < this.videoObjList.length; i++) {
if(nodeId == this.videoObjList[i].nodeId) { if (nodeId == this.videoObjList[i].nodeId) {
this.videoObj = this.videoObjList[i]; this.videoObj = this.videoObjList[i];
this.correct = this.videoObjList[i].correct; this.correct = this.videoObjList[i].correct;
this.ask = this.videoObjList[i].ask; this.ask = this.videoObjList[i].ask;
@ -223,22 +261,23 @@
} }
this.preQuestionId = this.videoObj.questionId; this.preQuestionId = this.videoObj.questionId;
// 直接自动开始播放 // 直接自动开始播放
if(nodeId == 1) { if (nodeId == 1) {
this.nextQuestion(2, null) this.nextQuestion(2, null)
} }
}, },
getAnswer(outId) { getAnswer(outId) {
for(var i=0; i<this.videoObjList.length; i++) { for (var i = 0; i < this.videoObjList.length; i++) {
if(outId == this.videoObjList[i].nodeId) { if (outId == this.videoObjList[i].nodeId) {
this.answerList.push(this.videoObjList[i]); 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.end = true;
this.answerList = []; this.answerList = [];
this.question = false; this.question = false;
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/complete/complete?questionFreId='+this.questionFreId+'&roleId='+this.jsonId url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' + this
.jsonId
}) })
} }
} }

10
subpkg/complete/complete.vue
View File

@ -77,6 +77,7 @@
return { return {
"questionFreId":"59088ceb55644b03b8d0c7d48d2f7d39", "questionFreId":"59088ceb55644b03b8d0c7d48d2f7d39",
"roleId":"5f96b1baae1a47fbb17215a5dc46f5ce", "roleId":"5f96b1baae1a47fbb17215a5dc46f5ce",
"sceneId": "",
questionList: [], questionList: [],
recordList: [], recordList: [],
"ask":"", "ask":"",
@ -149,6 +150,15 @@
//uni.$showMsg('数据请求成功！') //uni.$showMsg('数据请求成功！')
}, },
async editUserMedal() {
const {
data: res
} = await uni.$http.post('/small/wechat/editUserMedal',{medal:this.sceneId})
if (!res.success) return uni.$showMsg()
// this.recordList = res.data
//uni.$showMsg('数据请求成功！')
},
backIndex(){ backIndex(){
uni.switchTab({ uni.switchTab({
url:'/pages/index/index' url:'/pages/index/index'

4
subpkg/medal/medal.vue
View File

@ -74,7 +74,9 @@
const { const {
data: res data: res
} = await uni.$http.post('/small/wechat/showMyMedal',{guid:this.userId}) } = await uni.$http.post('/small/wechat/showMyMedal',{
guid:this.userId,
})
if (!res.success) return uni.$showMsg() if (!res.success) return uni.$showMsg()
res.data.forEach(item=>{ res.data.forEach(item=>{

1
subpkg/respractice/respractice.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<view class="role-container"> <view class="role-container">
<view class="wrap"> <view class="wrap">
<!-- <view class="video-wrapper" id="video-container"></view> -->
<view class="secbar"> <span class="back" @click="back()"></span></view> <view class="secbar"> <span class="back" @click="back()"></span></view>
<view class="mainwrap3"> <view class="mainwrap3">
<view class="role_wrap"><sVideo :jsonId="jsonId"></sVideo></view> <view class="role_wrap"><sVideo :jsonId="jsonId"></sVideo></view>

2
subpkg/role/role.vue
View File

@ -114,7 +114,7 @@
} }
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/practice/practice?roleId='+this.roleId url: '/subpkg/practice/practice?roleId='+this.roleId
//url: '/subpkg/practice/respractice?roleId='+this.roleId // url: '/subpkg/respractice/respractice?roleId='+this.roleId
}) })
}, },
back(){ back(){

Write Preview
Loading…
Cancel
Save