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 24 additions and 5 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
1 <template> 1 <template>
2 <div class="video-wrapper" style="position: relative;"> 2 <div class="video-wrapper" style="position: relative;">
3 - <div v-if="mp" class="status"> 3 + <div v-if="mp && detail.showStatus" class="status">
4 <van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_enable" /> 4 <van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_enable" />
5 <van-image v-if="item.status === 'REFUSE'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_refuse" /> 5 <van-image v-if="item.status === 'REFUSE'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_refuse" />
6 <van-image v-if="item.status === 'APPLY'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_apply" /> 6 <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 { ...@@ -102,6 +102,16 @@ export default {
102 }) 102 })
103 this.mp = mp; // 渲染速度问题，只有视频控件渲染完成后显示 103 this.mp = mp; // 渲染速度问题，只有视频控件渲染完成后显示
104 this.detail = _.cloneDeep(this.item); 104 this.detail = _.cloneDeep(this.item);
105 + this.detail.showStatus = true;
106 + var video = mp.video();
107 + // 监听原生video事件，审核状态标签显示控制
108 + var _this = this;
109 + video && video.addEventListener('play', function (event) {
110 + _this.detail.showStatus = false;
111 + });
112 + video && video.addEventListener('pause', function (event) {
113 + _this.detail.showStatus = true;
114 + });
105 }, 500); 115 }, 500);
106 }, 116 },
107 methods: { 117 methods: {
...@@ -149,4 +159,4 @@ export default { ...@@ -149,4 +159,4 @@ export default {
149 159
150 } 160 }
151 } 161 }
152 -</style>
...\ No newline at end of file ...\ No newline at end of file
162 +</style>
......
1 <template> 1 <template>
2 <div class="video-wrapper" style="position: relative;"> 2 <div class="video-wrapper" style="position: relative;">
3 - <div v-if="status === 'PROCESS'" class="status"> 3 + <div v-if="status === 'PROCESS' && detail.showStatus" class="status">
4 <van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;" 4 <van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
5 :src="icon_enable" /> 5 :src="icon_enable" />
6 <van-image v-if="item.status === 'DISABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;" 6 <van-image v-if="item.status === 'DISABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
...@@ -87,7 +87,6 @@ ...@@ -87,7 +87,6 @@
87 import icon_up from '@images/icon-guanbi@2x.png' 87 import icon_up from '@images/icon-guanbi@2x.png'
88 import icon_down from '@images/icon-zhankai@2x.png' 88 import icon_down from '@images/icon-zhankai@2x.png'
89 89
90 -// TODO: 让娜娜做一张不是透明的看看效果
91 import icon_refuse from '@images/icon-jujue@2x.png' 90 import icon_refuse from '@images/icon-jujue@2x.png'
92 import icon_apply from '@images/icon-shenhe@2x.png' 91 import icon_apply from '@images/icon-shenhe@2x.png'
93 import icon_enable from '@images/icon-tongguo@2x.png' 92 import icon_enable from '@images/icon-tongguo@2x.png'
...@@ -151,7 +150,17 @@ export default { ...@@ -151,7 +150,17 @@ export default {
151 ] 150 ]
152 }) 151 })
153 this.mp = mp; 152 this.mp = mp;
154 - this.detail = _.cloneDeep(this.item) 153 + this.detail = _.cloneDeep(this.item);
154 + this.detail.showStatus = true;
155 + var video = mp.video();
156 + // 监听原生video事件，审核状态标签显示控制
157 + var _this = this;
158 + video && video.addEventListener('play', function (event) {
159 + _this.detail.showStatus = false;
160 + });
161 + video && video.addEventListener('pause', function (event) {
162 + _this.detail.showStatus = true;
163 + });
155 }, 500); 164 }, 500);
156 }, 165 },
157 methods: { 166 methods: {
......