navbar.vue

<template>
    <div 
        class="navbar" 
        :style="{'height' : navHeight + 'px','padding-top':navTop+'px'}"
    >
        <div class="back" @click="back">
            <span class="iconfont iconzuo"></span>
        </div>
        <div class="user-info"  v-if="!isSetBeauty" :style="{'width' : liveInfo.liveBroadcastState != 0 ? '160px' : '114px'}">
            <div class="user-info-left">
                <div class="avatar">
                    <img :src="liveInfo.logoUrl" alt="">
                </div>
                <div class="username text-overflow" v-if="!status">{{liveInfo.shopName}}</div>
            </div>
            
            <div class="logining-info" v-if="status">
                <div class="info-left">
                    <div class="login-name text-overflow">{{liveInfo.shopName}}</div>
                    <div class="login-time">{{time}}</div>
                </div>
                
            </div>
            <div class="over-live" @click="endLive" v-if="liveInfo.liveBroadcastState ==1 || liveInfo.liveBroadcastState == 3">结束</div>
        </div>
    </div>
</template>

<script>
import { setTimes } from '../../utils'
import liveApi from '@/api/liveing'
export default {
    props:{
        navTop:{
            type:Number,
            default:0
        },
        navHeight:{
            type:Number,
            default:0
        },
        type:{ //1:直播间 2：结束直播间
            type:Number,
            default:1
        },
        isLive : {
            type:Boolean,
            default : false
        },
        //直播间id
        id : {
            type : Number,
            default:0
        },
        isSetBeauty : {
            type:Boolean,
            default:false
        },
        pusher:{
            type:Object,
            default:null
        },
        realStartTime:{
            type:Number,
            default:0
        },
        liveInfo:{
            type:Object,
            default : null
        }
    },
    data(){
        return{
            status : false,
            userInfo : null,

            time : '00:00:00',

            starttime : 0,

            timer : null,

        }
    },
    watch:{
        isLive(newVal,oldVal){
            this.status = newVal && this.type == 1 ? true : false
            
            this.starttime = this.realStartTime
            if(newVal){
                this.liveTimeHandler()
            }
        }
    },
    created(){
    },  
    onShow(){
        clearInterval(this.timer)
    },
    onReady(){
        this.userInfo = this.$store.state.userInfo;
    },
    onHide(){
        clearInterval(this.timer)
    },
    onUnload(){
        clearInterval(this.timer)
    },
    
    methods:{
        //结束直播
        endLive(){
            wx.showModal({
                title: '',
                content: '是否结束本场直播',
                confirmText : '结束直播',
                confirmColor : '#07c160',
                success : res => {
                    if (res.confirm) {

                        this.$emit('changeOver',0);
                        this.changeLiveStatus(2);
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                }
            })
        },
        back(){

            if(this.isSetBeauty){
                this.$emit('closeSetBeauty',false)
            }else{
                if(this.type == 1 && this.liveInfo.liveBroadcastState == 1){
                    liveApi.updateLiveStatus({
                        id : this.id,
                        liveBroadcastState : 3
                    }).then(res => {
                        if(res.data.code == '200'){
                            console.log('stop')
                            this.pusher.pause()
                            clearInterval(this.timer); //结束直播
                            wx.reLaunch({url:'../liveList/main'})
                        }
                    })
                }else if(this.type == 1 && this.liveInfo.liveBroadcastState == 0){
                    wx.reLaunch({url:'../liveList/main'})
                }else if(this.type == 2){
                    wx.reLaunch({url:'../liveList/main'})
                }else if(this.type == 3){
                    wx.redirectTo({url:`../historyLive/main`})
                }else{
                    wx.navigateBack();
                }
            }
            
            
            
        },
        //改变直播状态
        changeLiveStatus(val){
            liveApi.updateLiveStatus({
                id : this.id,
                liveBroadcastState : val
            }).then(res => {
                if(res.data.code == '200'){
                    this.$set(this.liveInfo,'liveBroadcastState',2);
                    if(val == 2){
                        // console.log(this.queryDataTimer + '2222222')
                        console.log('over')
                        clearInterval(this.timer); //结束直播
                        this.$emit('clearAllInterval')
                    }
                    // 
                    console.log(this.id)
                    console.log(JSON.stringify(this.liveInfo))

                    this.$set(this.liveInfo,'boStream','')
                    this.$set(this.liveInfo,'tuiStream','')
                    this.pusher.stop();
                    
                    wx.navigateTo({url:`../liveOver/main?id=${this.id}&liveInfo=${JSON.stringify(this.liveInfo)}`})
                }
            })
        },
        liveTimeHandler(){
            if(this.isLive){
                this.time = setTimes(++this.starttime);
                this.timer = setInterval(() => {
                    this.time = setTimes(++this.starttime);
                },1000)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.navbar{
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    .back{
        width: 33.5px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconzuo{
            color: white;
            font-size: 13px;
        }
    }
    .user-info{
        .user-info-left{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 2px;
        }
        height: 30px;
        line-height: 30px;
        background-color: rgba(0,0,0,.6);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .avatar{
            width: 26px;
            height: 26px;
            border-radius: 50%;
            overflow: hidden;
            // background-color: rosybrown;
            // padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .username{
            width: 75px;
            text-align: center;
            font-size: 12px;
            color: white;

        }
        .logining-info{
            .info-left{
                text-align: center;
                width: 70px;
                color: white;
                margin-left: 10px;
                .login-name{
                    width: 70px;
                    font-size: 12px;
                    line-height: 14px;
                }
                .login-time{
                    font-size: 10px;
                    line-height: 14px;
                }
            }
            
        }
        .over-live{
            width: 35px;
            height: 19px;
            border-radius: 9.5px;
            text-align: center;
            line-height: 19px;
            font-size: 12px;
            color: white;
            margin-right : 4px;
            background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
            background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
            background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
            background-image: linear-gradient(to right,#FF877D, #FB566D);
        }
    }
}
</style>