Browse Source

演练回顾, 视频结算获取勋章, 视频点击暂停

h5_css
蟑螂恶霸 3 years ago
committed by yanyan
parent
commit
7ee4a6b37e
  1. 38
      components/s-video/s-video.vue
  2. BIN
      static/images/start.png
  3. 92
      subpkg/complete/complete.vue
  4. 6
      subpkg/practice/practice.vue
  5. 2
      subpkg/role/role.vue

38
components/s-video/s-video.vue

@ -1,7 +1,10 @@
<template>
<view class="video-wrapper" id="video-container">
<view class="marsk" @click="playVideo" v-if="showLayer">
<image class="animg" src="/static/images/start.png"></image>
</view>
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
<video id="video_play" @click="stopPlay" :controls="true" :src="videoObj.videoUrl" @ended="videoEnded()"
<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: 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>
@ -68,6 +71,7 @@
isOk: false,
isError: false,
resCheck: false,
showLayer: false,
};
},
computed: {
@ -84,6 +88,10 @@
jsonId: {
type: String,
default: "",
},
sceneId: {
type: String,
default: "",
}
},
created() {
@ -118,10 +126,12 @@
},
methods: {
playVideo() {
// this.videoContext.play();
this.showLayer = false;
this.videoContext.play();
},
stopPlay() {
// this.videoContext.pause();
this.showLayer = true;
this.videoContext.pause();
},
videoEnded() {
this.auto = false;
@ -140,7 +150,7 @@
this.question = false;
uni.navigateTo({
url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' +
this.jsonId
this.jsonId + '&sceneId=' + this.sceneId
})
} else {
// 不为空表示答题错误展示返回重新选择
@ -277,7 +287,7 @@
this.question = false;
uni.navigateTo({
url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' + this
.jsonId
.jsonId + '&sceneId=' + this.sceneId
})
}
}
@ -286,6 +296,22 @@
</script>
<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 {
position: absolute;
@ -324,7 +350,7 @@
.popup-layer .anitem .antxt {
position: absolute;
top: 60%;
top: 30%;
width: 100%;
font-size: 1.2rem;
}

BIN
static/images/start.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

92
subpkg/complete/complete.vue

@ -79,6 +79,7 @@
"questionFreId":"59088ceb55644b03b8d0c7d48d2f7d39",
"roleId":"5f96b1baae1a47fbb17215a5dc46f5ce",
"userId":"",
"sceneId": "",
questionList: [],
recordList: [],
"ask":"",
@ -89,9 +90,6 @@
"showShare":false,
};
},
computed: {
...mapState('m_user', ['userId'])
},
//分享到好友
onShareAppMessage(res) {
if (res.from === 'button') {// 来自页面内分享按钮
@ -118,11 +116,16 @@
}, 5000)
//this.roleId = options.roleId
//this.questionFreId = options.questionFreId
this.sceneId = options.sceneId;
this.getQuestionList()
this.getRecordList()
this.editUserMedal();
},
computed: {
...mapState('m_user', ['userId'])
},
methods: {
async share(){
async share() {
await uni.share({
title: "快来和我一起答题吧",
type: 0,
@ -135,10 +138,12 @@
async getQuestionList() {
const {
data: res
} = await uni.$http.post('/small/questionAnswer/listAll',{questionFreId:this.questionFreId})
} = await uni.$http.post('/small/questionAnswer/listAll', {
questionFreId: this.questionFreId
})
if (!res.success) return uni.$showMsg()
this.questionList = res.data
if (this.questionList.length !=0) {
if (this.questionList.length != 0) {
this.ask = this.questionList[0].ask;
this.answer = this.questionList[0].answer;
}
@ -154,33 +159,48 @@
//uni.$showMsg('数据请求成功!')
},
backIndex(){
async editUserMedal() {
const {
data: res
} = await uni.$http.post('/small/wechat/editUserMedal', {
medal: this.sceneId,
guid: "2752c89b6ca843558991f888f8949da2",
// guid: this.userId,
})
if (!res.success) return uni.$showMsg()
// this.recordList = res.data
this.recordList = res.data
//uni.$showMsg('数据请求成功!')
},
backIndex() {
uni.switchTab({
url:'/pages/index/index'
url: '/pages/index/index'
})
},
shareUser(){
shareUser() {
this.showShare = true
this.showLayer = true
},
reChallenge(){
reChallenge() {
uni.navigateTo({
url: '/subpkg/rechallenge/rechallenge?questionFreId='+this.questionFreId
url: '/subpkg/rechallenge/rechallenge?questionFreId=' + this.questionFreId
})
},
review(){
review() {
uni.navigateTo({
url: '/subpkg/review/review?questionFreId='+this.questionFreId
url: '/subpkg/review/review?questionFreId=' + this.questionFreId
})
},
closeShare(){
closeShare() {
this.showShare = false
this.showLayer = false
},
itemClickHandler(item) {
if(item !== ""){
this.ask= item.ask
this.answer= item.answer
if (item !== "") {
this.ask = item.ask
this.answer = item.answer
this.showAnlysisc = true
}
},
@ -200,7 +220,9 @@
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.popup-layer, .popup-share {
.popup-layer,
.popup-share {
//display: none;
position: absolute;
top: 45%;
@ -222,6 +244,7 @@
height: 500rpx;
background-color: #e4eafe;
border-radius: 30rpx;
.medimg {
position: absolute;
top: -15%;
@ -229,23 +252,31 @@
transform: translate(-50%, -10%);
width: 300rpx;
height: 230rpx;
image {
width: 100%;
height: 100%;
}
}
.congrat {
margin: 25% auto 10%;
color: #ff6b08;
font-size: 40rpx;
text-align: center;
}
.myitem {
margin: 0;
width: 33%;
}
}
.mainwrap3 {
top: 56rpx;
overflow-y: auto;
}
.title {
margin: 50rpx 0;
color: #333;
@ -258,6 +289,7 @@
position: relative;
width: 100%;
}
.question-list {
/*display: flex;
justify-content: space-around;*/
@ -277,18 +309,20 @@
font-weight: bold;
text-align: center;
}
.erritem {
background-color: #fb3737;
}
}
.answer-content {
//display: none;
position: absolute;
position: relative;
z-index: 100;
margin: 2% 3%;
padding: 2%;
width: 90%;
height: 400rpx;
min-height: 400rpx;
background: #fff;
border: 1px solid #18c569;
border-radius: 10px;
@ -304,6 +338,7 @@
.corans {
color: #18c569;
font-weight: bold;
label {
font-size: 36rpx;
}
@ -321,36 +356,42 @@
font-size: 36rpx;
font-weight: bold;
}
view {
color: #666;
line-height: 1.75;
line-height: 1.5;
}
}
.question-record {
margin: 6% 3% 10%;
margin: 3% 3% 5%;
width: 94%;
height: 45%;
height: 25%;
overflow: hidden;
label {
font-size: 32rpx;
font-weight: bold;
line-height: 2;
}
.list {
width: 100%;
height: calc(100% - 80rpx);
line-height: 1.75;
overflow-y: auto;
.item {
margin: 2% 0;
border-bottom: 1px dotted #ddd;
}
}
}
.backIndex {
margin: 2% auto;
width: 86%;
button {
background-color: #1367fe !important;
border-radius: 50rpx !important;
@ -373,17 +414,16 @@
color: #666;
}
.myitem > view > label {
.myitem>view>label {
display: block;
position: relative;
margin: 20rpx auto;
width: 100rpx;
height: 100rpx;
image {
width: 100%;
height: 100%;
}
}
</style>

6
subpkg/practice/practice.vue

@ -4,7 +4,7 @@
<view class="stabar"></view>-->
<view class="secbar"> <label class="back" @click="back()"></label></view>
<view class="mainwrap3">
<view class="role_wrap"><sVideo :jsonId="jsonId"></sVideo></view>
<view class="role_wrap"><sVideo :jsonId="jsonId" :sceneId="sceneId"></sVideo></view>
</view>
</view>
</template>
@ -18,10 +18,12 @@
page: "",
jsonId: "",
roleId:"",
sceneId:"",
};
},
onLoad(options) {
this.jsonId = options.roleId
this.jsonId = options.roleId;
this.sceneId = options.sceneId;
},
onReady() {
this.QR();

2
subpkg/role/role.vue

@ -110,7 +110,7 @@
return uni.$showMsg('请先选择一个角色')
}
uni.navigateTo({
url: '/subpkg/practice/practice?roleId='+this.roleId
url: '/subpkg/practice/practice?roleId='+this.roleId+'&sceneId='+this.sceneId
//url: '/subpkg/practice/respractice?roleId='+this.roleId
})
},

Loading…
Cancel
Save