视频广告顶部关闭声音页面处理，处理拼别人团再看看跳转等细节

pages/mission/videoPlay/videoPlay.vue

@@ -1,8 +1,20 @@
 <template>
     <view class="videoContainer">
-        <!-- @timeupdate='timeupdate' -->
-        <video v-if="src!=''" class="video" :controls='false' :src="src" autoplay loop direction='0' :muted='muted' />
-        <cover-view class="currentDown">倒计时</cover-view>
+        <view class="currentDownFixed">
+            <view class="currentDown">
+                <view class="currentDownItem">
+                    <view>视频</view>
+                    <view class="line"> </view>
+                    <view>{{duration>0?duration+'秒后':''}}可获得奖励</view>
+                </view>
+                <view class="currentDownItem">
+                    <u-icon :name="muted?'volume-off':'volume'" color='#fff' @click='muted =! muted' />
+                    <view class="line"> </view>
+                    <view> 关闭</view>
+                </view>
+            </view>
+        </view>
+        <video v-if="src!=''" @timeupdate='timeupdate' class="video" :src="src" :controls='false' autoplay direction='0' :muted='muted' />
     </view>
 </template>
 
@@ -34,12 +46,9 @@
             })
         },
         methods: {
-            // timeupdate(e){
-            //     this.duration = e.detail.duration - e.detail.currentTime - 4
-            //     if(this.duration == 0){
-            //         uni.navigateBack()
-            //     }
-            // }
+            timeupdate(e) {
+                this.duration = parseInt(e.detail.duration - e.detail.currentTime)
+            }
         },
     }
 </script>
@@ -48,24 +57,53 @@
     .videoContainer {
         width: 100vw;
         height: 100vh;
-        background-color: pink;
+        background-color: #000;
         position: relative;
-        @extend .ios-top;
 
         .video {
             width: 100%;
-            height: 100%;
-            position: absolute;
-            z-index: 1;
-            top: 0;
+            height: calc(100% - 200rpx);
         }
 
-        .currentDown {
-            position: fixed;
-            z-index: 2;
-            right: $margin;
+        .currentDownFixed {
+            width: 100%;
             background-color: #000;
             color: #fff;
+            font-size: 28rpx;
+            height: 160rpx;
+            padding: var(--status-bar-height) $padding $padding - 10 $padding;
+            box-sizing: border-box;
+
+            .currentDown {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                box-sizing: border-box;
+                padding-top: 20rpx;
+
+                .currentDownItem {
+                    position: relative;
+                    z-index: 3;
+                    border: solid 1rpx rgba(255, 255, 255, 0.2);
+                    border-radius: 50rpx;
+                    padding: 14rpx $padding+4;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: center;
+                    box-sizing: border-box;
+
+                    .line {
+                        width: 2rpx;
+                        height: 30rpx;
+                        background-color: rgba(255, 255, 255, 0.3);
+                        margin: 0 20rpx;
+                    }
+                }
+            }
         }
+
+
     }
 </style>