football/pages/live/playback.vue

<template>
    <app-layout>
        <view class="box">
            <video class="video"
                   :src="videoUrl"
                   :autoplay="true"
                   object-fit="fill"
                   :show-fullscreen-btn="false">
            </video>
            <view class="bottom-box">
                <view class="video-info-box">
                    <view class="title">{{roomInfo.name}}</view>
                    <view class="user-info">
                        <image mode="aspectFill" class="anchor-img" :src="roomInfo.anchor_img"></image>
                        <span class="anchor-name">{{roomInfo.anchor_name}}</span>
                    </view>
                    <view class="video-box">
                        <view class="item"
                              v-for="(video, index) in videoList"
                              :key="index"
                              v-if="index < 3"
                              :class="{'item-active': index === currentIndex}"
                              @click="itemClick(index, video)">
                            第{{index + 1}}部分
                        </view>
                        <view class="more-box" v-if="videoList.length > 3" @click='moreClick'>
                            <span class="text">更多</span>
                            <image class="icon" src="/static/image/icon/arrow-left-white.png"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="select-box" :class="{'select-box-show': isShowMore === 1, 'select-box-hidden': isShowMore === 2}">
            <image @click="isShowMore = 2" class="close" src="/static/image/icon/icon-close.png"></image>
            <view class="back-title">回放选集</view>
            <view class="video-list">
                <view v-for="(video, index) in videoList"
                      :key="index"
                      @click="itemClick(index, video)"
                      :class="{'video-item-active': index === currentIndex}"
                      class="video-item">
                    第{{index + 1}}部分
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    export default {
        data() {
            return {
                videoList: [],
                roomInfo: {},
                videoUrl: '',
                currentIndex: 0,
                isShowMore: 0,
            }
        },
        methods: {
            getPlayBack() {
                let self = this;
                self.$showLoading({
                    text: '加载中...'
                });
                self.$request({
                    url: self.$api.live.playback,
                    data: {
                        page: 1,
                        room_id: self.roomInfo.id,
                    },
                }).then(response => {
                    self.$hideLoading();
                    if (response.code === 0) {
                        self.videoList = response.data.list;
                        if (self.videoList.length > 0) {
                            self.videoUrl = self.videoList[0].media_url;
                        }
                        if (self.videoList.length === 0) {
                            uni.showModal({
                                content: '该直播间没有回放数据',
                                showCancel: false,
                                confirmText: '我知道了',
                                success: function (res) {
                                    uni.navigateBack();
                                }
                            })
                        }
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000,
                        });
                    }
                }).catch(() => {
                    self.$hideLoading();
                });
            },
            itemClick(index, video) {
                this.currentIndex = index;
                this.videoUrl = video.media_url;
            },
            moreClick() {
                if (this.isShowMore === 0 || this.isShowMore === 2) {
                    this.isShowMore = 1;
                } else  {
                    this.isShowMore = 2;
                }
            },
        },
        onLoad(options) {
            let self = this;
            uni.getStorage({
                key: 'live_playback',
                success(res) {
                    self.roomInfo.name = res.data.room_info.name;
                    self.roomInfo.anchor_name = res.data.room_info.anchor_name;
                    self.roomInfo.anchor_img = res.data.room_info.anchor_img;
                }
            });
            this.roomInfo.id = options.room_id;
            this.getPlayBack();
        }
    }
</script>


<style scoped lang="scss">
    .box {
        width: 100%;
        height: 100vh;

        .video {
            width: 100%;
            height: 100%;
        }

        .bottom-box {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 320#{rpx};
            color: #fff;
            padding: 40#{rpx};
            font-size: 28#{rpx};
            background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.7));
            padding-bottom: 100#{rpx};
            pointer-events: none;

            .video-info-box {
                pointer-events: auto;
            }

            .title {
                font-size: 36#{rpx};
                font-weight: 900;
                width: 670#{rpx};
                overflow: hidden;
                text-overflow: ellipsis;
                white-space:nowrap;
            }

            .user-info {
                display: flex;
                margin-top: 20#{rpx};
                margin-bottom: 28#{rpx};

                .anchor-img {
                    width: 40#{rpx};
                    height: 40#{rpx};
                    border-radius: 50%;
                }

                .anchor-name {
                    margin-left: 20#{rpx};
                    height: 40#{rpx};
                    line-height: 40#{rpx};
                    width: 600#{rpx};
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space:nowrap;
                }
            }

            .video-box {
                display: flex;
                /*justify-content: center;*/
                align-items: center;

                > view {
                    /*flex-grow: 1;*/
                }

                .item {
                    border: 1#{rpx} solid #fff;
                    border-radius: 50#{rpx};
                    margin-right: 10#{rpx};
                    height: 56#{rpx};
                    line-height: 56#{rpx};
                    text-align: center;
                    width: 150#{rpx};

                }

                .item-active {
                    background: #fff;
                    color: #000;
                }

                .more-box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 60#{rpx};

                    .icon {
                        margin-left: 20#{rpx};
                        width: 12#{rpx};
                        height: 24#{rpx};
                        transform: rotate(-90deg);
                    }
                }
            }
        }
    }

    .select-box {
        width: 100%;
        height: 360#{rpx};
        background: #fff;
        border-top-left-radius: 16#{rpx};
        border-top-right-radius: 16#{rpx};
        padding: 0 40#{rpx};
        position: fixed;
        bottom: -360#{rpx};

        .close {
            width: 30#{rpx};
            height: 30#{rpx};
            position: absolute;
            right: 32#{rpx};
            top: 32#{rpx};
        }

        .back-title {
            width: 100%;
            margin: 44#{rpx} 0;
            font-size: 36#{rpx};
            text-align: center;
        }

        .video-list {
            display: flex;
            flex-wrap: wrap;
            height: 200#{rpx};
            overflow-y: auto;

            .video-item {
                width: 150#{rpx};
                height: #{56rpx};
                line-height: #{56rpx};
                text-align: center;
                margin-right: 15#{rpx};
                margin-bottom: 15#{rpx};
                font-size: 26#{rpx};
                color: #666666;
                -webkit-border-radius: 38#{rpx};
                -moz-border-radius: 38#{rpx};
                border-radius: 38#{rpx};
                border: 1#{rpx} solid #bbbbbb;
            }
            .video-item-active {
                color: #ffffff;
                border: none;
                background: #ff4544;
            }
        }
    }

    .select-box-show {
        -webkit-animation: selectShow 0.5s forwards;
        -o-animation: selectShow 0.5s forwards;
        animation: selectShow 0.5s forwards;
    }

    .select-box-hidden {
        -webkit-animation: selectHidden 0.5s forwards;
        -o-animation: selectHidden 0.5s forwards;
        animation: selectHidden 0.5s forwards;
    }

    @keyframes selectShow {
        from {
            bottom: -360#{rpx};
        }
        to {
            bottom: 0;
        }
    }

    @keyframes selectHidden {
        from {
            bottom: 0;
        }
        to {
            bottom: -360#{rpx};
        }
    }
</style>