index.vue

<template>
    <div class="container" :style="{'padding-top':navHeight +'px'}">
        <div class="masker"></div>
        <image class="bg-img" :src="overInfo.coverUrl" mode="aspectFill" alt=""></image>
        <div class="conbox">
            <div class="live-over">
                <div class="over-text">直播已结束</div>
                <div class="live-time">直播时长：{{overInfo.liveTime}}</div>
            </div>

            <div class="live-info">
                <div class="info-row item-row-one">
                    <div class="info-item">
                        <div class="item-num">{{overInfo.watchNum}}</div>
                        <div class="item-text">观看</div>
                    </div>
                    <div class="info-item">
                        <div class="item-num">{{overInfo.goodsClickNum}}</div>
                        <div class="item-text">商品点击</div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-item">
                        <div class="item-num">{{overInfo.shareNum}}</div>
                        <div class="item-text">分享</div>
                    </div>
                    <div class="info-item">
                        <div class="item-num">{{overInfo.guestBookNum}}</div>
                        <div class="item-text">评论</div>
                    </div>
                    <div class="info-item">
                        <div class="item-num">{{overInfo.likeNum}}</div>
                        <div class="item-text">赞</div>
                    </div>
                </div>
            </div>
        </div>
        <navBar :navTop="navTop" :liveInfo="liveInfo" :navHeight="navHeight" :type="type"></navBar>

        

    </div>
</template>

<script>
import navBar from '@/components/common/navbar.vue'
import { getNavbarInfo,DFSImg } from '../../utils/common.js'

import liveApi from '@/api/liveing'
export default {
    data(){
        return{
            navTop : '',
            navHeight : '',

            type : 2,

            overInfo : {},

            liveInfo : {}
        }
    },
    components:{
        navBar
    },
    created(){
        //获取导航栏信息
        getNavbarInfo((res) => {
            this.navTop = res.navTop
            this.navHeight = res.navHeight
        })

        
    },
    onShow(){
        // this.overInfo = {}
    },
    onLoad(options){

        this.overInfo = {}

        if(options.type){
            this.type = options.type;
        }

        this.liveInfo = JSON.parse(options.liveInfo)
        
        this.getOverInfo(options.id)
        
    },
    methods:{
        getOverInfo(id){
            liveApi.queryCompleteDetail({
                id : id
            }).then(res => {
                // console.log(res.data.code == 200)
                if(res.data.code == 200){

                    // console.log(res.data.data)
                    res.data.data.coverUrl = DFSImg(res.data.data.coverUrl)
                    this.overInfo = res.data.data

                    console.log(this.overInfo)
                }
            })
        }   
    },

    
}
</script>

<style scoped lang="scss">
    .container{
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        background-color: rgba(102,102,102,.38);
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        .conbox{
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
        }
        .masker{
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            background-color: rgba(102,102,102,.38);
        }
        .bg-img{
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(102,102,102,.38);
        }
        .live-over{
            color: white;
            text-align: center;
            padding-top: 25vh;
            .over-text{
                font-size: 36px;
                color: #FFFFFF;
                font-weight: bold;
            }
            .live-time{
                font-size: 15px;
                line-height: 30px;
            }
        }
        .live-info{
            font-size: 18px;
            color: white;
            margin-top: 10vh;
            width: 100%;
            .info-row{
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-bottom: 40px;
                font-weight: bold;
                .info-item{
                    text-align: center;
                }
            }
            .item-row-one{
                width: 100%;
                padding: 0 60px;
                box-sizing: border-box;
                .info-item{
                    width: 50%;
                }
            }
        }
    }
</style>