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
bd009b2377
commit
7ee4a6b37e
5 changed files with 192 additions and 124 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. 38
      components/s-video/s-video.vue
  2. BIN
      static/images/start.png
  3. 234
      subpkg/complete/complete.vue
  4. 6
      subpkg/practice/practice.vue
  5. 2
      subpkg/role/role.vue

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

@ -1,7 +1,10 @@
<template> <template>
<view class="video-wrapper" id="video-container"> <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'}"> <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> :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>
@ -68,6 +71,7 @@
isOk: false, isOk: false,
isError: false, isError: false,
resCheck: false, resCheck: false,
showLayer: false,
}; };
}, },
computed: { computed: {
@ -84,6 +88,10 @@
jsonId: { jsonId: {
type: String, type: String,
default: "", default: "",
},
sceneId: {
type: String,
default: "",
} }
}, },
created() { created() {
@ -118,10 +126,12 @@
}, },
methods: { methods: {
playVideo() { playVideo() {
// this.videoContext.play(); this.showLayer = false;
this.videoContext.play();
}, },
stopPlay() { stopPlay() {
// this.videoContext.pause(); this.showLayer = true;
this.videoContext.pause();
}, },
videoEnded() { videoEnded() {
this.auto = false; this.auto = false;
@ -140,7 +150,7 @@
this.question = false; this.question = false;
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' + url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' +
this.jsonId this.jsonId + '&sceneId=' + this.sceneId
}) })
} else { } else {
// 不为空表示答题错误展示返回重新选择 // 不为空表示答题错误展示返回重新选择
@ -277,7 +287,7 @@
this.question = false; this.question = false;
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' + this url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' + this
.jsonId .jsonId + '&sceneId=' + this.sceneId
}) })
} }
} }
@ -286,6 +296,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;
@ -324,7 +350,7 @@
.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;
} }

BIN
static/images/start.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

234
subpkg/complete/complete.vue
View File

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

6
subpkg/practice/practice.vue
View File

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

2
subpkg/role/role.vue
View File

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

Write Preview
Loading…
Cancel
Save