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

演练成功动画样式优化

h5_css
蟑螂恶霸 3 years ago
parent
4fa10af1a5
commit
09d25e0a1f
3 changed files with 139 additions and 98 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. 141
      components/s-video/res-s-video.vue
  2. 39
      components/s-video/s-video.vue
  3. 11
      subpkg/complete/complete.vue

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

@ -1,7 +1,9 @@
<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()" @loadedmetadata="onMetadataLoaded" :autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop" style="width: 100%;height: 100%;" object-fit="cover"></video> <video id="video_play" :controls="false" :src="videoObj.videoUrl" @ended="videoEnded()"
@loadedmetadata="onMetadataLoaded" :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> -->
@ -11,12 +13,17 @@
<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" :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="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'">
<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>
@ -47,7 +54,10 @@
</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() {
@ -59,7 +69,7 @@
resNodeIdTmp: 2, resNodeIdTmp: 2,
videoHeight: 300, videoHeight: 300,
videoObjList: [], videoObjList: [],
videoObj:{}, videoObj: {},
answerList: [], answerList: [],
autoAnswerList: [], autoAnswerList: [],
autoIndex: 0, autoIndex: 0,
@ -77,15 +87,15 @@
resCheck: false, resCheck: false,
isResVideo: false, isResVideo: false,
innerAudioContext: null, innerAudioContext: null,
failUrl: uni.$http.baseUrl +"/profile//images/fail.gif", failUrl: uni.$http.baseUrl + "/profile//images/fail.gif",
}; };
}, },
computed: { computed: {
...mapState('m_user', ['userId']) ...mapState('m_user', ['userId'])
}, },
watch:{ watch: {
jsonId:{ jsonId: {
handler:function(){ handler: function() {
this.getBindJson(); this.getBindJson();
} }
}, },
@ -95,7 +105,7 @@
} }
} }
}, },
props:{ props: {
jsonId: { jsonId: {
type: String, type: String,
default: "", default: "",
@ -126,17 +136,17 @@
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])
} }
// 在这里进行答案自动选择 // 在这里进行答案自动选择
var that = this; var that = this;
setTimeout(function () { setTimeout(function() {
for(var i=0; i<that.answerList.length; i++) { for (var i = 0; i < that.answerList.length; i++) {
if(that.answerList[i].channel == that.autoAnswerList[that.autoIndex].answer) { if (that.answerList[i].channel == that.autoAnswerList[that.autoIndex].answer) {
that.autoChannel = that.autoAnswerList[that.autoIndex].answer; that.autoChannel = that.autoAnswerList[that.autoIndex].answer;
that.nextQuestion(that.answerList[i].outs[0], that.answerList[i]); that.nextQuestion(that.answerList[i].outs[0], that.answerList[i]);
} }
@ -144,7 +154,7 @@
that.autoIndex++ that.autoIndex++
}, 500); }, 500);
} else { } else {
if(this.resVideoUrl == "") { if (this.resVideoUrl == "") {
// 为空表示答题正确正常跳转 // 为空表示答题正确正常跳转
this.end = true; this.end = true;
this.answerList = []; this.answerList = [];
@ -172,7 +182,7 @@
this.isResVideo = true; this.isResVideo = true;
}, },
onMetadataLoaded(event) { onMetadataLoaded(event) {
if(this.isResVideo) { if (this.isResVideo) {
this.isResVideo = false; this.isResVideo = false;
const duration = event.detail.duration; const duration = event.detail.duration;
this.videoContext.seek(duration); this.videoContext.seek(duration);
@ -180,7 +190,7 @@
}, },
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
@ -193,7 +203,7 @@
var isCorrect = 0; var isCorrect = 0;
// 先提交所选答案 // 先提交所选答案
if(null!=obj) { if (null != obj) {
// 判断答题是否正确 // 判断答题是否正确
// if(this.correct.toUpperCase() == obj.channel.slice(0, 1).toUpperCase()) { // if(this.correct.toUpperCase() == obj.channel.slice(0, 1).toUpperCase()) {
if (this.correct.toUpperCase().includes(obj.channel.slice(0, 1).toUpperCase())) { if (this.correct.toUpperCase().includes(obj.channel.slice(0, 1).toUpperCase())) {
@ -207,12 +217,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 => {
@ -221,7 +231,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 {
@ -231,29 +241,29 @@
// 延长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);
if(!that.videoObj.videoUrl.includes("http")) { if (!that.videoObj.videoUrl.includes("http")) {
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 = "";
} }
@ -261,7 +271,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;
@ -280,8 +290,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;
@ -289,17 +299,17 @@
} }
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;
@ -321,10 +331,14 @@
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, .35); background-color: rgba(0, 0, 0, .35);
} }
.animg { .animg {
position:absolute; position: absolute;
top:0;left:0;right:0;bottom:0; top: 0;
margin:auto; left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
@ -351,9 +365,12 @@
} }
.popup-layer .anitem1 { .popup-layer .anitem1 {
display: flex;
align-items: center;
justify-content: center;
position: relative; position: relative;
width: 650rpx; width: 100vw;
height: 200rpx; height: 240rpx;
} }
.popup-layer .anitem1 .animg1 { .popup-layer .anitem1 .animg1 {
@ -362,37 +379,45 @@
} }
.popup-layer .anitem1 .antxt1 { .popup-layer .anitem1 .antxt1 {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 45%; top: 45%;
left: 10%; left: 6%;
width: 100%; width: 90%;
font-size: 1.2rem; font-size: 1.1rem;
} }
.popup-layer .anitem { .popup-layer .anitem {
display: flex;
align-items: center;
justify-content: center;
position: relative; position: relative;
margin: 80rpx; margin: 20rpx auto;
width: 600rpx; width: 100vw;
height: 100rpx; height: 180rpx;
text-align: center;
} }
.popup-layer .anitem .animg { .popup-layer .anitem .animg {
width: 100%; width: 98%;
height: 160rpx; height: 100%;
} }
.popup-layer .anitem .antxt { .popup-layer .anitem .antxt {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 30%; margin: 10%;
width: 100%; width: 82%;
font-size: 1.1rem; font-size: 1.1rem;
} }
.judd { .judd {
position: absolute; position: absolute;
top: -20rpx; top: -20rpx;
right: -50rpx; right: 0;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
border-radius: 50%; border-radius: 50%;

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

@ -365,9 +365,12 @@
} }
.popup-layer .anitem1 { .popup-layer .anitem1 {
display: flex;
align-items: center;
justify-content: center;
position: relative; position: relative;
width: 650rpx; width: 100vw;
height: 200rpx; height: 240rpx;
} }
.popup-layer .anitem1 .animg1 { .popup-layer .anitem1 .animg1 {
@ -376,37 +379,45 @@
} }
.popup-layer .anitem1 .antxt1 { .popup-layer .anitem1 .antxt1 {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 45%; top: 45%;
left: 10%; left: 6%;
width: 100%; width: 90%;
font-size: 1.1rem; font-size: 1.1rem;
} }
.popup-layer .anitem { .popup-layer .anitem {
display: flex;
align-items: center;
justify-content: center;
position: relative; position: relative;
margin: 80rpx; margin: 20rpx auto;
width: 600rpx; width: 100vw;
height: 100rpx; height: 180rpx;
text-align: center;
} }
.popup-layer .anitem .animg { .popup-layer .anitem .animg {
width: 100%; width: 98%;
height: 160rpx; height: 100%;
} }
.popup-layer .anitem .antxt { .popup-layer .anitem .antxt {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 30%; margin: 10%;
width: 100%; width: 82%;
font-size: 1.2rem; font-size: 1.1rem;
} }
.judd { .judd {
position: absolute; position: absolute;
top: -20rpx; top: -20rpx;
right: -50rpx; right: 0;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
border-radius: 50%; border-radius: 50%;

11
subpkg/complete/complete.vue
View File

@ -135,7 +135,7 @@
picStyle:"z-index:-99999", picStyle:"z-index:-99999",
timer:null, timer:null,
resCheck: true, resCheck: true,
successUrl: uni.$http.baseUrl + "/profile//images/success-2.gif", successUrl: uni.$http.baseUrl + "/profile/images/success-2.gif",
}; };
}, },
//分享到好友 //分享到好友
@ -407,10 +407,10 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 9998;
width: 100%; width: 100%;
height: 100%; height: 100%;
// background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
z-index: 9998;
} }
.failed-tip { .failed-tip {
@ -420,6 +420,11 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 560rpx; width: 560rpx;
height: 560rpx; height: 560rpx;
image {
width: 100%;
height: 100%;
}
} }
.popup-layer .animg:first-child { .popup-layer .animg:first-child {

Write Preview
Loading…
Cancel
Save