deming/pageB/video/video.nvue

<template>
    <view class="container">
        <video id="videoId" :style="videoSize" :src="src" autoplay="true" :show-fullscreen-btn="false" @play="playing"
            @pause="pausing" @ended="videoEnd" @timeupdate="timeupdate" :show-play-btn="false" controls="false" @click="stoping"
            :enable-progress-gesture="false" :show-center-play-btn="false"></video>
        <!-- 用户操作 -->
        <userinfo class="user-info" :style="{ top: fixTop }" :list="list" :cart="cart_type" :comment="is_comment" :num="comment_num"
            @openCart="openPopup"></userinfo>
        <!-- 视频信息 -->
        <cover-view class="info-box" @click="stopClick">
            <view class="video-info-box" :style="{ width: time_count > 99 ? '180rpx' : '160rpx' }">
                <image class="image-play" src="../../static/videoIcon.png" mode=""></image>
                <text class="video-slip">视频</text>
                <text class="time">{{ 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>
        <!-- 单个商品 -->
        <cover-view class="good-one" :style="{ bottom: fixTop - 100 }" v-if="cart_len == 1 && cart_type">
            <view class="one-list" v-for="(item,index) in list.goods" :key="index" @click="goGoodInfo(item.goods_id)">
                <image class="one-image" :src="item.goods_image" mode=""></image>
                <view class="one-box">
                    <text class="title-one">{{ item.goods_advword }}</text>
                    <text class="content-one">{{ item.goods_name }}</text>
                    <text class="good-price">￥{{ item.goods_promotion_price }}</text>
                </view>
            </view>
        </cover-view>
        <!-- 遮罩层 -->
        <cover-view class="mask" @click.stop="stopClick" :style="videoSize" v-if="is_edit || is_comment || cart_type && cart_len >= 2">
            <!-- 评论 -->
            <cover-view class="content-box" v-if="is_comment" ref="contentBox">
                <view class="content-title">
                    <text class="tips">评论</text>
                    <text class="close-down" @click="closeComment">×</text>
                </view>
                <scroller class="comment-list">
                    <view class="" v-for="(item,index) in commentList" :key="index">
                        <view class="comment-list-box">
                            <view class="comment-list-header">
                                <image class="avatar" :src="item.member_avatar" mode=""></image>
                                <view>
                                    <text class="comment-title">{{ item.member_nickname }}</text>
                                    <text class="comment-time">{{ item.create_time }}</text>
                                </view>
                            </view>
                            <text class="reply" @click="openKeyInput(item,index)">回复</text>
                        </view>
                        <view class="content-main">
                            <text class="content-style">{{ item.content }}</text>
                        </view>
                        <view class="more-content-box">
                            <view class="child-box" v-for="(child,cid) in allList[item.id]" :key="cid">
                                <view class="child-info">
                                    <image class="child-avatar" :src="child.member_avatar" mode=""></image>
                                    <text class="child-name">{{ child.member_nickname }}</text>
                                    <text v-if="0">{{ child.reply_member_nickname }}</text>
                                </view>
                                <text class="child_content">{{ child.content }}</text>
                            </view>
                            <view>
                                <text class="more-comment" @click="getReplyList(item.id)" v-if="item.reply_count">展开更多回复</text>
                                <text></text>
                            </view>
                        </view>
                    </view>
                    <view class="send-box" @click="openKeyInput">
                        <input class="send-val" type="text" :placeholder="edit_text" placeholder-class="placeholder-class"
                            disabled="true" @click="openKeyInput" />
                        <text class="btn-send">发送</text>
                    </view>
                    <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                        <loading-indicator class="indicator"></loading-indicator>
                        <text class="indicator-text">努力加载中</text>
                    </loading>
                </scroller>
            </cover-view>
            <!-- 评论框 -->
            <cover-view class="edit-box" :style="videoSize" v-if="is_edit" @click="hideEdit">
                <view class="input-main">
                    <input class="edit-input" type="text" :focus="is_focus" :placeholder=" edit_text_other ? edit_text_other : edit_text"
                        placeholder-class="placeholder-class" v-model="send_value" />
                    <text class="btn-send" @click="sendComment">发送</text>
                </view>
                <!-- <view class="key-height" :style="{ height: editTop }"></view> -->
            </cover-view>
            <!-- 购物车 -->
            <cover-view class="cart-box" v-if="cart_type">
                <view class="cart-title">
                    <text class="tips">全部商品</text>
                    <text class="close-down" @click="cart_type = false">×</text>
                </view>
                <scroller class="cart-list">
                    <view class="" v-for="(item,index) in list.goods" :key="index">
                        <view class="cart-list-header" @click="goGoodInfo(item.goods_id)">
                            <image class="goods-img" :src="item.goods_image" mode=""></image>
                            <view class="goods-info">
                                <text class="good-title">{{ item.goods_advword }}</text>
                                <text class="good-price">{{ item.goods_promotion_price }}</text>
                            </view>
                        </view>
                    </view>
                    <loading v-if="0" class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                        <loading-indicator class="indicator"></loading-indicator>
                        <text class="indicator-text">努力加载中</text>
                    </loading>
                </scroller>
            </cover-view>
        </cover-view>
        <!-- 返回按钮 -->
        <cover-image class="close" @click="goBack" src="../../static/close.png">
        </cover-image>
        <!-- 暂停按钮 -->
        <cover-view class="pause" :style="{ top: fixTop + 100 }">
            <cover-image class="pause-img" src="../../static/videoPlay.png" @click="stoping" v-if="!is_play">
            </cover-image>
        </cover-view>
    </view>
</template>

<script>
    import userinfo from "../components/userinfo/index" // 点赞组件
    const temp_url = "https://dmmall.sdbairui.com/api/";
    export default {
        components: {
            userinfo
        },
        data() {
            return {
                videoSize: {},
                fixTop: 0,
                editTop: 0,
                list: {},
                labelLen: [],
                cart_len: 0, // 购物车个数
                cart_type: false, // 显示购物车
                is_comment: false, // 显示评论
                is_edit: false, // 显示输入
                is_focus: false, // 
                comment_num: 0, // 评论数
                edit_text: "有爱评论，说点好听的 ~",
                edit_text_other: "有爱评论，说点好听的 ~",
                pid: 0, // 主键
                reply_id: 0, // 回复id
                allList: {}, // 全部子评论
                page_: {},
                page: 0,
                comment_id: 0,
                send_value: "", // 评论
                commentList: [], // 评论列表
                src: "",
                is_play: true,
                time_count: 0,
                linear: null,
                loadinging: false,
            };
        },
        onLoad(option) {
            this.article_id = option.id;
            this.getVideoInfo(option.id);
            this.getInfo();
            this.allList = {};
        },
        onReady() {
            this.videoBox = uni.createVideoContext("videoId", this);
        },
        onBackPress() {
            if (this.cart_type) {
                this.cart_type = !this.cart_type;
            } else if (this.is_edit) {
                this.is_edit = !this.is_edit;
            } else if (this.is_comment) {
                this.is_comment = !this.is_comment;
            } else {
                return false;
            }
            return true;
        },
        methods: {
            moveHandle() {
                return false;
            },
            // 获取信息
            getVideoInfo(article_id) {
                uni.request({
                    url: temp_url + "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;
                        this.cart_len = res.data.data.info.goods.length;
                        console.log(this.cart_len);
                        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;
                    }
                })
            },
            // 获取评论
            getComment() {
                uni.request({
                    url: temp_url + "article/articleCommentList",
                    method: "POST",
                    data: {
                        article_id: this.article_id,
                        page: this.page,
                    },
                    success: (res) => {
                        if (res.data.errCode == 0) {
                            // console.log(res.data);
                            this.commentList = res.data.data;
                        }
                    }
                })
            },
            // 发布评论	
            sendComment() {
                console.log(this.article_id, this.send_value, this.pid, this.reply_id);
                if (this.send_value.length == 0) {
                    uni.showToast({
                        title: "输入内容不能为空！",
                        icon: "none"
                    })
                    return;
                }
                uni.request({
                    url: temp_url + "article/articleAddComment",
                    method: "POST",
                    data: {
                        article_id: this.article_id,
                        content: this.send_value,
                        pid: this.pid,
                        reply_id: this.reply_id,
                    },
                    header: {
                        Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
                    },
                    success: (res) => {
                        console.log(res);
                        this.is_edit = false;
                        this.send_value = "";
                        if (res.data.errCode == 0) {
                            this.comment_num = res.data.num;
                            let p_id = res.data.data.data.pid;
                            console.log(this.pid, this.reply_id, this.comment_id);
                            if (res.data.data.data.pid) {
                                this.commentList[this.comment_id].reply_count = true;
                                console.log(this.allList[p_id]);
                                if (this.allList[p_id]) {
                                    this.allList[p_id].push(res.data.data.data);
                                } else {
                                    this.allList[p_id] = [];
                                    this.allList[p_id].push(res.data.data.data);
                                }
                                console.log(this.allList);
                            } else {
                                this.commentList.unshift(res.data.data.data);
                            }
                            // console.log(this.commentList);
                        } else if (res.data.errCode == 401) {
                            uni.showToast({
                                title: "您还没有登录，请先登录！",
                                icon: "none",
                                // success: () => {
                                //     setTimeout(function() {
                                //         this.$u.route("/pageA/login/login")
                                //     }, 2000)
                                // }
                            })
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: "none"
                            })
                        }
                    }
                })
            },
            // 发现回复列表
            getReplyList(id) {
                uni.showLoading({
                    title: "loading..."
                })
                if (!this.page_[id] === 0) {}
                console.log(id);
                uni.request({
                    url: temp_url + "article/articleReplyList",
                    method: "POST",
                    data: {
                        id: id,
                        page: this.page_[id],
                    },
                    header: {
                        Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
                    },
                    success: (res) => {
                        uni.hideLoading();
                        if (res.data.errCode == 0) {
                            if (res.data.data.length < 10) {
                                this.is_more = false;
                            }
                            this.page_[id]++;
                            this.allList[id] = res.data.data;
                            this.$forceUpdate();
                            // console.log(this.page_[id]);
                            // console.log(this.allList);
                        }
                    }
                })
            },
            // 获取手机信息
            getInfo() {
                uni.getSystemInfo({
                    success: (res) => {
                        this.videoSize = {
                            width: "750rpx",
                            height: res.screenHeight + "px",
                        }
                        this.fixTop = "400rpx";
                        this.fixTop = res.screenHeight / 3;
                        // #ifdef H5
                        this.fixTop = 400 + 'rpx'
                        // #endif
                    }
                })
            },
            // 播放
            playing(e) {
                // console.log(e);
                if (e.type == "play") {}
            },
            pausing(e) {
                if (e.type == "pause") {
                    this.is_play = false;
                }
            },
            // 结束
            videoEnd(e) {
                // console.log(e);
                if (e.type == "ended") {
                    this.is_play = false;
                    this.time_count = 0;
                }
            },
            // 暂停
            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);
                // console.log(e.detail.currentTime,e.detail.duration);
                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);
            },
            // 打开弹窗
            openPopup(data) {
                // console.log(data);
                if (this.cart_len >= 2) {

                }
                this.cart_type = data.cart;
                this.is_comment = data.comment;
                if (this.is_comment) {
                    this.page = 0;
                    this.getComment();
                    // this.is_play = true;
                }
            },
            // 打开评论输入
            openKeyInput(data, index) {
                // console.log(data);
                let me = this;
                this.is_focus = true;
                setTimeout(() => {
                    this.is_edit = true;
                }, 500)
                uni.onKeyboardHeightChange(function(res) {
                    console.log(res);
                    if (res.height == 0) {
                        me.is_focus = false;
                        me.is_edit = false;
                    } else {
                        me.editTop = res.height + "rpx";
                    }
                })
                this.comment_id = index;
                if (data.id) {
                    this.edit_text_other = "回复@" + data.member_nickname;
                    this.pid = data.id;
                    this.reply_id = data.member_id;
                } else {
                    this.edit_text_other = "有爱评论，说点好听的 ~";
                    this.pid = "";
                    this.reply_id = "";
                }
                // console.log(this.pid, this.edit_text_other);
            },
            blue() {
                this.is_focus = false;
            },
            // 关闭评论
            closeComment() {
                this.is_comment = false;
                this.is_edit = false;
                // console.log(this.is_comment,this.is_play);
                // if (!this.is_comment && this.is_play) {
                //     console.log(1);
                //     this.is_play = false;
                // }
            },
            // 下拉加载
            onloading(e) {
                console.log(e);
                this.loadinging = true;
                setTimeout(() => {
                    this.loadinging = false;
                }, 2000)
            },
            // 跳转
            goGoodInfo(id) {
                uni.navigateTo({
                    url: "/pageB/sdetails/index?id=" + id + "&type=" + 1,
                })
            },
            // 收起键盘
            hideEdit() {},
            // stop
            stopClick(event) {
                event.stopPropagation();
            },
            goBack() {
                uni.navigateBack({
                    delta: 1
                })
            }
        }
    }
</script>

<style>
    .container {
        position: relative;
    }

    /* 关闭 */
    .close {
        z-index: 99;
        position: fixed;
        top: 100rpx;
        right: 70rpx;
        width: 30rpx;
        height: 30rpx;
    }

    /* 暂停 */
    .pause {
        z-index: 99;
        position: fixed;
        left: 330rpx;
        width: 100rpx;
        height: 100rpx;
    }
    
    .pause-img {
        width: 100rpx;
        height: 100rpx;
    }

    /* 用户操作 */
    .user-info {
        position: fixed;
        right: 30rpx;
    }

    /* 底部信息 */
    .info-box {
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 30rpx;
    }

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

    .good-one {
        position: fixed;
        right: 160rpx;
        width: 420rpx;
        padding: 20rpx;
        border-radius: 10rpx;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .one-list {
        flex-direction: row;
    }

    .one-image {
        width: 160rpx;
        height: 160rpx;
        margin-right: 20rpx;
        border-radius: 4rpx;
    }

    .one-box {
        justify-content: space-around;
        color: #333;
    }

    .title-one {
        width: 200rpx;
        font-size: 28rpx;
        color: #fff;
        lines: 1;
        text-overflow: ellipsis;
    }

    .content-one {
        width: 200rpx;
        font-size: 24rpx;
        color: #fff;
        lines: 2;
        text-overflow: ellipsis;
    }

    .mask {
        z-index: 10000;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .content-box {
        z-index: 999;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 700rpx;
        padding-bottom: 50rpx;
        margin-bottom: 88rpx;
        background-color: #fff;
    }

    .content-title {
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        height: 88rpx;
        padding: 0 20rpx;
        background-color: #ECECEC;
    }

    .comment-list {
        margin-bottom: 50rpx;
    }

    .comment-list-box {
        padding: 20rpx 30rpx;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .content-main {
        flex-direction: row;
        padding-left: 100rpx;
    }


    .content-style {
        width: 600rpx;
        font-size: 28rpx;
        color: #333;
        lines: 2;
    }

    .more-content-box {
        margin-left: 100rpx;
    }

    .child-box {}

    .child-info {
        margin: 10rpx 0;
        flex-direction: row;
        align-items: center;
    }

    .child-avatar {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
        border-radius: 50%;
    }

    .child-name {
        font-size: 22rpx;
        color: #333;
    }

    .child_content {
        padding: 4rpx 0;
        margin-left: 40rpx;
        font-size: 26rpx;
    }

    .more-comment {
        margin: 10rpx 0;
        font-size: 22rpx;
        color: #999;
    }

    .comment-list-header {
        flex-direction: row;
    }

    .avatar {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
        border-radius: 50%;
    }

    .comment-title {
        font-size: 26rpx;
        color: #333;
    }

    .comment-time,
    .reply {
        font-size: 22rpx;
        color: #999;
    }

    .tips {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
    }

    .send-box {
        z-index: 10000;
        position: fixed;
        bottom: 0;
        left: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 750rpx;
        height: 88rpx;
        padding: 10rpx 30rpx;
        border-top-width: 1rpx;
        border-color: #ececec;
        background-color: #fff;
    }

    .send-val {
        width: 600rpx;
        height: 88rpx;
        font-size: 36rpx;
    }

    .btn-send {
        font-size: 28rpx;
        color: #666;
    }

    .close-down {
        padding: 10rpx;
        font-size: 50rpx;
        text-align: center;
        color: #333;
    }

    .edit-box {
        z-index: 1000;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .input-main {
        position: fixed;
        left: 0;
        bottom: 0;
        /* #ifdef H5 */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 750rpx;
        padding: 0 20rpx;
        line-height: 80rpx;
        background-color: #fff;
        border-top-right-radius: 10rpx;
        border-top-left-radius: 10rpx;
    }

    .key-height {
        width: 750rpx;
        background-color: #fff;
    }

    .edit-input {
        width: 600rpx;
        height: 80rpx;
        padding: 0 10rpx;
        font-size: 24rpx;
        color: #333;
    }

    .cart-box {
        z-index: 1000;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 700rpx;
        background-color: #fff;
    }

    .cart-title {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 88rpx;
        padding: 0 20rpx;
        border-color: #f2f2f2;
        border-bottom-width: 1rpx;
        background-color: #fff;
    }

    .cart-list {}

    .cart-list-header {
        padding: 20rpx;
        flex-direction: row;
        border-bottom-width: 1rpx;
        border-bottom-color: #ececec;
    }

    .goods-img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }

    .goods-info {
        justify-content: space-around;
    }

    .good-title {
        width: 500rpx;
        color: #333;
        font-size: 30rpx;
        lines: 2;
        text-overflow: ellipsis;
    }

    .good-price {
        font-size: 28rpx;
        color: #FF3131;
    }

    .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 {
        width: 100rpx;
        height: 40rpx;
        padding: 4rpx 10rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
        font-size: 26rpx;
        text-align: center;
        line-height: 38rpx;
        color: #666666;
        border-radius: 10rpx;
        background-color: rgba(255, 255, 255, .6);
    }

    .loading {
        width: 750rpx;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .indicator-text {
        font-size: 20rpx;
        text-align: center;
        color: #999;
    }

    .indicator {
        width: 30rpx;
        height: 30rpx;
        color: #999;
    }

    .placeholder-class {
        font-size: 13px;
        color: #666;
    }
</style>