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
62ad86ee5b
commit
810a829d5f
7 changed files with 134 additions and 80 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. 101
      components/s-video/res-s-video.vue
  2. 9
      components/s-video/s-video.vue
  3. 9
      subpkg/complete/complete.vue
  4. 2
      subpkg/practice/practice.vue
  5. 64
      subpkg/respractice/respractice.vue
  6. 27
      subpkg/review/review.vue
  7. 2
      subpkg/role/role.vue

101
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" :controls="false" :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: 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> -->
@ -24,7 +24,10 @@
</view> --> </view> -->
<view class="popup-layer-back" v-show="resCheck"> <view class="popup-layer-back" v-show="resCheck">
<view class="popup-layer" style="color: red;" @click="toResVideo()"> <view class="popup-layer" style="color: red;" @click="toResVideo()">
<p>重新选择逃生路线</p> <view class="anitem1">
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
<!-- <view class="antxt1">重新选择逃生路线</view> -->
</view>
</view> </view>
</view> </view>
</view> </view>
@ -54,7 +57,6 @@
end: false, end: false,
auto: true, auto: true,
question: false, question: false,
questionFreId: "",
preQuestionId: "", preQuestionId: "",
correct: "", correct: "",
ask: "", ask: "",
@ -71,12 +73,25 @@
handler:function(){ handler:function(){
this.getBindJson(); this.getBindJson();
} }
} },
questionFreId: {
handler: function() {
this.queryQAByFreId();
}
}
}, },
props:{ props:{
jsonId: { jsonId: {
type: String, type: String,
default: "", default: "",
},
sceneId: {
type: String,
default: "",
},
questionFreId: {
type: String,
default: "",
} }
}, },
created() { created() {
@ -88,7 +103,7 @@
this.videoContext = uni.createVideoContext("video_play"); this.videoContext = uni.createVideoContext("video_play");
this.videoContext.requestFullScreen(); this.videoContext.requestFullScreen();
this.queryQAByFreId(); // this.queryQAByFreId();
}, },
methods: { methods: {
videoEnded() { videoEnded() {
@ -118,9 +133,9 @@
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 {
// 不为空表示答题错误展示返回重新选择 // 不为空表示答题错误展示返回重新选择
this.resCheck = true; this.resCheck = true;
@ -232,7 +247,7 @@
}).catch((e) => console.log(e)); //捕获异常 }).catch((e) => console.log(e)); //捕获异常
}, },
queryQAByFreId() { queryQAByFreId() {
this.$api.queryQAByFreId('084ddf84e4be4b02acdcfad396c28f98') this.$api.queryQAByFreId(this.questionFreId)
.then(res => { .then(res => {
this.autoAnswerList.push(...res.data); this.autoAnswerList.push(...res.data);
}).catch((e) => console.log(e)); //捕获异常 }).catch((e) => console.log(e)); //捕获异常
@ -261,9 +276,9 @@
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
}) // })
} }
} }
} }
@ -271,6 +286,22 @@
</script> </script>
<style> <style>
/* 设置弹出层 */
.marsk {
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .35);
}
.animg {
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
width: 100px;
height: 100px;
}
/* 首先设置背景层 */ /* 首先设置背景层 */
.popup-layer-back { .popup-layer-back {
position: absolute; position: absolute;
@ -293,7 +324,28 @@
padding: 20px; padding: 20px;
z-index: 9999; z-index: 9999;
} }
.popup-layer .anitem1 {
position: relative;
/* margin: 80rpx; */
width: 650rpx;
height: 200rpx;
/* text-align: center; */
}
.popup-layer .anitem1 .animg1 {
width: 100%;
height: 100%;
}
.popup-layer .anitem1 .antxt1 {
position: absolute;
top: 45%;
left: 10%;
width: 100%;
font-size: 1.2rem;
}
.popup-layer .anitem { .popup-layer .anitem {
position: relative; position: relative;
margin: 80rpx; margin: 80rpx;
@ -301,27 +353,19 @@
height: 100rpx; height: 100rpx;
text-align: center; text-align: center;
} }
.popup-layer .anitem .animg { .popup-layer .anitem .animg {
width: 100%; width: 100%;
height: 160rpx; height: 160rpx;
} }
.popup-layer .anitem .antxt { .popup-layer .anitem .antxt {
position: absolute; position: absolute;
top: 60%; top: 30%;
width: 100%; width: 100%;
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;
@ -330,15 +374,15 @@
height: 100rpx; height: 100rpx;
border-radius: 50%; border-radius: 50%;
} }
.jdok { .jdok {
background-color: rgba(3, 173, 55, .35); background-color: rgba(3, 173, 55, .35);
} }
.jderr { .jderr {
background-color: rgba(249, 21, 43, .35); background-color: rgba(249, 21, 43, .35);
} }
.judd .judimg { .judd .judimg {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -348,7 +392,6 @@
width: 50%; width: 50%;
height: 50%; height: 50%;
} }
/* 设置关闭按钮 */ /* 设置关闭按钮 */
.popup-layer-close { .popup-layer-close {

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

@ -5,7 +5,6 @@
</view> </view>
<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="false" :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" @click="stopPlay" :controls="false" :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> -->
@ -15,8 +14,7 @@
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image> <image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
<view class="antxt1">{{ask}}</view> <view class="antxt1">{{ask}}</view>
</view> </view>
<view class="anitem" @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList" <view class="anitem" @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList" :key="index">
: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'"> <view class="judd jdok" v-show="isOk && item.choose === 'true'">
@ -35,7 +33,10 @@
</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" @click="toResVideo()">
<p>重新选择逃生路线</p> <view class="anitem1">
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
<view class="antxt1">重新选择逃生路线</view>
</view>
</view> </view>
</view> </view>
</view> </view>

9
subpkg/complete/complete.vue
View File

@ -119,8 +119,8 @@
clearTimeout(this.timer) clearTimeout(this.timer)
}, 5000) }, 5000)
this.roleId = options.roleId this.roleId = options.roleId
//this.questionFreId = options.questionFreId this.questionFreId = options.questionFreId
//this.sceneId = options.sceneId; this.sceneId = options.sceneId;
this.getQuestionList() this.getQuestionList()
this.getRecordList() this.getRecordList()
this.editUserMedal(); this.editUserMedal();
@ -191,12 +191,13 @@
}, },
reChallenge() { reChallenge() {
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/rechallenge/rechallenge?questionFreId=' + this.questionFreId // url: '/subpkg/rechallenge/rechallenge?questionFreId=' + this.questionFreId
url: '/subpkg/practice/practice?roleId='+this.roleId+'&sceneId='+this.sceneId
}) })
}, },
review() { review() {
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/review/review?questionFreId=' + this.questionFreId url: '/subpkg/review/review?questionFreId=' + this.questionFreId +'&sceneId=' + this.sceneId +"&roleId=" + this.roleId
}) })
}, },
closeShare() { closeShare() {

2
subpkg/practice/practice.vue
View File

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

64
subpkg/respractice/respractice.vue
View File

@ -1,10 +1,8 @@
<template> <template>
<view class="role-container"> <view class="wrap">
<view class="wrap"> <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" :questionFreId="questionFreId" :sceneId="sceneId"></sVideo></view>
<view class="role_wrap"><sVideo :jsonId="jsonId"></sVideo></view>
</view>
</view> </view>
</view> </view>
</template> </template>
@ -16,28 +14,18 @@
data() { data() {
return { return {
page: "", page: "",
jsonId: "", questionFreId: "",
roleId:"", roleId:"",
jsonId:""
}; };
}, },
onLoad(options) { onLoad(options) {
this.jsonId = options.roleId this.jsonId = options.roleId;
}, this.questionFreId = options.questionFreId;
onReady() { console.log(this.questionFreId);
this.QR(); this.sceneId = options.sceneId;
}, },
methods: { methods: {
QR() {
// uni.scanCode({
// onlyFromCamera: true,
// success: (res) => {
// console.log('扫描二维码成功,结果:' + res.result);
// },
// error: (res) => {
// console.log('扫描二维码出现错误')
// }
// })
},
back(){ back(){
uni.navigateBack({ uni.navigateBack({
delta:1,//返回层数，2则上上页 delta:1,//返回层数，2则上上页
@ -53,30 +41,34 @@
<style lang="scss"> <style lang="scss">
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.role-container {
width: 100%;
height: 100%;
}
.secbar { .secbar {
top: 0; position: absolute;
z-index: 1; z-index: 999999;
background-color: transparent;
} }
.secbar ._span.back { .secbar label.back {
top: 50px; position: absolute;
top: 6rpx;
left: 4%;
padding-left: 0;
background: url(/static/images/icon_arbw.png) no-repeat left 40% center;
background-size: auto 50%;
background-color: rgba(255, 255, 255, .2);
border: 1rpx solid rgba(255, 255, 255, .7);
border-radius: 50%;
} }
.mainwrap3 { .mainwrap3 {
top: 0; height: 100%;
height: calc(100% - 70px); background-color: #000;
overflow: hidden;
} }
.role_wrap { .role_wrap {
position: absolute; position: relative;
top: 5%; /* top: -62rpx; */
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%;
} }
</style> </style>

27
subpkg/review/review.vue
View File

@ -14,9 +14,10 @@
</view> </view>
<scroll-view class="question-info" scroll-y> <scroll-view class="question-info" scroll-y>
<view class="question-list"> <view class="question-list">
<view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)"> <image :src="imgUrl" @click="respractice"></image>
<!-- <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
</view> </view> -->
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -30,14 +31,20 @@
"sceneName":"", "sceneName":"",
"roleName":"", "roleName":"",
"total":0, "total":0,
"questionFreId":"", questionFreId: "",
sceneId: "",
roleId: "",
imgUrl: "",
questionList:[] questionList:[]
} }
}, },
onLoad(options) { onLoad(options) {
this.questionFreId = options.questionFreId this.roleId = options.roleId;
this.questionFreId = options.questionFreId;
this.sceneId = options.sceneId;
this.getQuestionList() this.getQuestionList()
this.getRelationInfo() this.getRelationInfo()
this.getFiles();
}, },
methods: { methods: {
async getQuestionList() { async getQuestionList() {
@ -61,6 +68,18 @@
} }
//uni.$showMsg('数据请求成功！') //uni.$showMsg('数据请求成功！')
}, },
async getFiles() {
const {
data: res
} = await uni.$http.get('/small/scene/manage/queryFiles/'+this.sceneId);
this.imgUrl = uni.$http.baseUrl + res.data.filePreview.fileList[0];
//uni.$showMsg('数据请求成功！')
},
respractice() {
uni.navigateTo({
url: '/subpkg/respractice/respractice?questionFreId=' + this.questionFreId +'&sceneId=' + this.sceneId +"&roleId=" + this.roleId
})
},
back(){ back(){
uni.navigateBack({ uni.navigateBack({
delta:1,//返回层数，2则上上页 delta:1,//返回层数，2则上上页

2
subpkg/role/role.vue
View File

@ -113,7 +113,7 @@
} }
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/practice/practice?roleId='+this.roleId+'&sceneId='+this.sceneId url: '/subpkg/practice/practice?roleId='+this.roleId+'&sceneId='+this.sceneId
//url: '/subpkg/practice/respractice?roleId='+this.roleId // url: '/subpkg/respractice/respractice?questionFreId=' + 'b40c04f73cec48389efa8ac81e6a5194' +'&sceneId=' + this.sceneId +"&roleId=" + this.roleId
}) })
}, },
back(){ back(){

Write Preview
Loading…
Cancel
Save