Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
863b4af1 1 parent 2f3d1d46

✨ feat(视频组件): 状态图片替换不透明，状态图片显示条件控制

Inline Side-by-side
Showing 5 changed files with 23 additions and 4 deletions

14.8 KB | W: | H:

11 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

16.6 KB | W: | H:

13.8 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

15.3 KB | W: | H:

12.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
<template>
<div class="video-wrapper" style="position: relative;">
<div v-if="mp" class="status">
<div v-if="mp && detail.showStatus" class="status">
<van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_enable" />
<van-image v-if="item.status === 'REFUSE'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_refuse" />
<van-image v-if="item.status === 'APPLY'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_apply" />
......@@ -102,6 +102,16 @@ export default {
})
this.mp = mp; // 渲染速度问题，只有视频控件渲染完成后显示
this.detail = _.cloneDeep(this.item);
this.detail.showStatus = true;
var video = mp.video();
// 监听原生video事件，审核状态标签显示控制
var _this = this;
video && video.addEventListener('play', function (event) {
_this.detail.showStatus = false;
});
video && video.addEventListener('pause', function (event) {
_this.detail.showStatus = true;
});
}, 500);
},
methods: {
......
<template>
<div class="video-wrapper" style="position: relative;">
<div v-if="status === 'PROCESS'" class="status">
<div v-if="status === 'PROCESS' && detail.showStatus" class="status">
<van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
:src="icon_enable" />
<van-image v-if="item.status === 'DISABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
......@@ -87,7 +87,6 @@
import icon_up from '@images/icon-guanbi@2x.png'
import icon_down from '@images/icon-zhankai@2x.png'
// TODO: 让娜娜做一张不是透明的看看效果
import icon_refuse from '@images/icon-jujue@2x.png'
import icon_apply from '@images/icon-shenhe@2x.png'
import icon_enable from '@images/icon-tongguo@2x.png'
......@@ -151,7 +150,17 @@ export default {
]
})
this.mp = mp;
this.detail = _.cloneDeep(this.item)
this.detail = _.cloneDeep(this.item);
this.detail.showStatus = true;
var video = mp.video();
// 监听原生video事件，审核状态标签显示控制
var _this = this;
video && video.addEventListener('play', function (event) {
_this.detail.showStatus = false;
});
video && video.addEventListener('pause', function (event) {
_this.detail.showStatus = true;
});
}, 500);
},
methods: {
......