deming/pageB/video/video.nvue

<template>
    <view>
        <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-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/videoIcon.png" mode=""></image>
                <text class="video-slip">视频</text>
                <text class="time">{{ time_count == 1 ? 0 : time_count }}s</text>
            </view>
            <view>
                <text class="name">@{{ list.member_nickname }}</text>
            </view>
            <view>
                <text class="title">{{ list.article_title }}</text>
            </view>
            <view>
                <text class="centent">{{ list.article_content }}</text>
            </view>
            <view class="label-box">
                <block v-for="(item,index) in list.label" :key="index">
                    <text class="label" :style="{ width: labelLen[index] * 40 + 'rpx' }">{{ item.name }}</text>
                </block>
            </view>
        </cover-view>
    </view>
</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,
                time_count: 0,
                linear: null,
            };
        },
        onLoad(option) {
            this.getVideoInfo(option.id);
            this.getInfo();
        },
        onReady() {
            this.videoBox = uni.createVideoContext("videoId", this);
        },
        methods: {
            // 获取信息
            getVideoInfo(article_id) {
                uni.request({
                    url: "https://dmmall.sdbairui.com/api/article/articleInfo",
                    method: "POST",
                    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;
                    }
                })
            },
            // 获取手机信息
            getInfo() {
                uni.getSystemInfo({
                    success: (res) => {
                        this.videoSize = {
                            width: "750rpx",
                            height: res.screenHeight + "px"
                        }
                    }
                })
            },
            // 播放
            playing(e) {
                // console.log(e);
                if (e.type == "play") {
                }
            },
            // 暂停
            stoping() {
                this.is_play = !this.is_play;
                if (this.is_play) {
                    this.videoBox.play();
                } else {
                    this.videoBox.pause();
                }
            },
            // 监听视频
            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({
                    delta: 1
                })
            }
        }
    }
</script>

<style>
    /* 关闭 */
    .close {
        position: fixed;
        top: 80rpx;
        right: 60rpx;
        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;
        bottom: 0;
        left: 0;
        padding: 30rpx;
    }

    .video-info-box {
        flex-direction: row;
        align-items: center;
        width: 160rpx;
        height: 40rpx;
        padding: 4rpx 10rpx;
        margin-bottom: 20rpx;
        color: #666666;
        border-radius: 10rpx;
        background-color: rgba(255, 255, 255, .6);
    }

    .image-play {
        width: 22rpx;
        height: 20rpx;
        margin-right: 10rpx;
    }

    .video-slip {
        color: #666;
        font-size: 24rpx;
        margin-right: 20rpx;
    }

    .time {
        color: #666;
        font-size: 24rpx;
    }

    .name {
        color: #fff;
        font-size: 36rpx;
        margin-bottom: 20rpx;
    }

    .title {
        color: #fff;
        font-size: 26rpx;
        margin-bottom: 20rpx;
    }

    .centent {
        width: 500rpx;
        color: #fff;
        font-size: 28rpx;
        margin-bottom: 20rpx;
        lines: 2;
        text-overflow: ellipsis;
    }

    .label-box {
        flex-direction: row;
    }

    .label {
        lines: 3;
        width: 100rpx;
        height: 40rpx;
        padding: 4rpx 10rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
        font-size: 26rpx;
        text-align: center;
        color: #666666;
        border-radius: 10rpx;
        background-color: rgba(255, 255, 255, .6);
    }
</style>