gdpao

pageB/video/video.nvue

@@ -1,16 +1,18 @@
 <template>
     <view>
-        <video id="videoId" :style="videoSize" :src="src" autoplay="true" :loop="true" :show-fullscreen-btn="false" @play="playing"
+        <video id="videoId" :style="videoSize" :src="src" autoplay="true" :show-fullscreen-btn="false" @play="playing" @timeupdate="timeupdate"
             :show-play-btn="false" controls="false" @click="stoping" :enable-progress-gesture="false"></video>
         <cover-image class="close" @click="goBack" src="../../static/close.png">
         </cover-image>
-        <cover-view class="" src="../../static/videoPlay.png">
-        </cover-view>
+        <cover-image class="pause" @click="stoping" src="../../static/videoPlay.png" v-if="!is_play">
+        </cover-image>
+        <!-- 用户操作 -->
+        <userinfo class="user-info" :list="list" :cart="cart_type" :comment="is_comment" :num="comment_num" @openCart="openPopup"></userinfo>
         <cover-view class="info-box">
             <view class="video-info-box">
-                <image class="image-play" src="../../static/videoPlay.png" mode=""></image>
+                <image class="image-play" src="../../static/videoIcon.png" mode=""></image>
                 <text class="video-slip">视频</text>
-                <text class="time">{{ time_count }}s</text>
+                <text class="time">{{ time_count == 1 ? 0 : time_count }}s</text>
             </view>
             <view>
                 <text class="name">@{{ list.member_nickname }}</text>
@@ -23,7 +25,7 @@
             </view>
             <view class="label-box">
                 <block v-for="(item,index) in list.label" :key="index">
-                    <text class="label" :style="{ width: item.name.length * 40 + 'rpx' }">{{ item.name }}</text>
+                    <text class="label" :style="{ width: labelLen[index] * 40 + 'rpx' }">{{ item.name }}</text>
                 </block>
             </view>
         </cover-view>
@@ -31,22 +33,28 @@
 </template>
 
 <script>
+    import userinfo from "../components/userinfo/index" // 点赞组件
     export default {
+        components:{
+            userinfo
+        },
         data() {
             return {
                 videoSize: {},
                 list: {},
+                labelLen: [],
+                cart_type: false, // 显示购物车
+                is_comment: false, // 显示评论
+                comment_num: 0, // 评论数
                 src: "",
                 is_play: true,
-                timer: null,
-                alltime: 7,
-                time_count: 7,
+                time_count: 0,
+                linear: null,
             };
         },
         onLoad(option) {
             this.getVideoInfo(option.id);
             this.getInfo();
-            this.aaa();
         },
         onReady() {
             this.videoBox = uni.createVideoContext("videoId", this);
@@ -60,9 +68,24 @@
                     data: {
                         article_id: article_id
                     },
+                    header: {
+                    	Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
+                    },
                     success: (res) => {
                         this.list = res.data.data.info;
                         this.src = res.data.data.info.video_path;
+                        let item = res.data.data.info.label;
+                        let arr = [];
+                        item.forEach(data => {
+                            let str = escape(data.name);
+                            if(str.indexOf('%u')){
+                                // console.log(data.name);
+                                arr.push(Math.floor(data.name.length / 2));
+                            } else {
+                                arr.push(data.name.length);
+                            }
+                        })
+                        this.labelLen = arr;
                     }
                 })
             },
@@ -79,11 +102,8 @@
             },
             // 播放
             playing(e) {
-                console.log(e);
+                // console.log(e);
                 if (e.type == "play") {
-                    this.alltime = 7;
-                    this.time_count = 7;
-                    this.aaa();
                 }
             },
             // 暂停
@@ -91,24 +111,19 @@
                 this.is_play = !this.is_play;
                 if (this.is_play) {
                     this.videoBox.play();
-                    this.aaa();
                 } else {
                     this.videoBox.pause();
-                     clearInterval(this.timer);
-                     this.temp_time = this.time_count;
-                     console.log(this.temp_time);
                 }
             },
-            // 倒计时
-            aaa() {
-                this.timer = setInterval(() => {
-                    if (this.time_count > 0 && this.time_count <= this.alltime) {
-                        this.time_count--;
-                    } else {
-                        clearInterval(this.timer);
-                        this.timer = null;
-                    }
-                }, 1000);
+            // 监听视频
+            timeupdate(e) {
+                this.time_count = parseInt(e.detail.duration) - parseInt(e.detail.currentTime);
+                if (e.detail.duration == e.detail.currentTime) {
+                     this.is_play = false;
+                }
+                // let num = parseInt((e.detail.currentTime/e.detail.duration)*100);
+                // this.linear = num + "%";
+                // console.log(this.time_count);
             },
             goBack() {
                 uni.navigateBack({
@@ -128,7 +143,23 @@
         width: 30rpx;
         height: 30rpx;
     }
-
+    
+    /* 暂停 */
+    .pause {
+        position: fixed;
+        top: 600rpx;
+        left: 330rpx;
+        width: 100rpx;
+        height: 100rpx;
+    }
+    
+    /* 用户操作 */
+    .user-info {
+        position: fixed;
+        top: 360rpx;
+        right: 30rpx;
+    }
+    
     /* 底部信息 */
     .info-box {
         position: fixed;