hlm_pl_mall_h5/pages/member/live/liveDetail.nvue

<template>
	<member-base :show="false" class="wrapper">
    <cover-view class="div room-bg">
   <video v-if="liveApplyInfo" class="bg-img" :style="'width:'+getBannerStyle.width+'px;height:'+getBannerStyle.height+'px'" id="id_test_video" ref="id_test_video" :src="liveApplyInfo.live_apply_play_rtmp_url" @play="videoPlay"
        @pause="videoPause" @ended="videoEnded">
        
      </video>
      <main-content v-if="isTest || isPlay" :liveApplyInfo="liveApplyInfo" :onlineInfo="onlineInfo"></main-content>
    </cover-view>
		<uni-popup background-color="#fff" ref="confirm" type="dialog">
		  <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content"
		    :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
		</uni-popup>
	</member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
  import {
    mapState,
    mapActions
  } from 'vuex'
  import MemberBase from '../MemberBase'
  import mainContent from './child/main-content'

  import {
    getLiveInfo
  } from '../../../api/memberLive'
  export default {
    data() {
      return {
        dialog: {},
        isTest: 0,
        live_apply_id: 0,
        isPlay: false,
        liveApplyInfo: false,
        onlineInfo:false
      }
    },
    computed: {
      ...mapState({
        config: state => state.config.config,
      }),
    getBannerStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = width
      let itemHeight = height
      return {
        width: itemWidth,
        height: itemHeight
      }
    },
    },
    components: {
      MemberBase,
      mainContent
    },
    onLoad: function(option) {
      this.isTest = option.test ? 1 : 0
      this.fetchConfig({})
      this.live_apply_id = option.live_apply_id
      if (!this.live_apply_id) {
        uni.showToast({
          icon: 'none',
          title: '参数错误'
        })
      }
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      getLiveInfo(this.live_apply_id).then(res => {
        this.liveApplyInfo = res.result.live_apply_info
        this.onlineInfo=res.result.online_info

    this.$nextTick(() => {
        var player = uni.createVideoContext("id_test_video", this)
        player.play()
    })


      }).catch(res => {
        if(res.result.live_apply_info){
          this.isTest=1
          this.liveApplyInfo = res.result.live_apply_info
        }
        uni.showToast({
          icon: 'none',
          title: res.message
        })
      })
    },

    methods: {
      closeDialog() {},
      confirmDialog(value) {
        switch (this.dialog.condition) {
          case 1:
            uni.navigateTo({
              url: '/pages/member/live/LiveList'
            })
            break
          }
      },
      videoPlay() {
        this.isPlay = true
      },
      videoPause() {
        this.isPlay = false
      },
      videoEnded(type) {
        this.dialog = {
          condition: 1,
          content: '主播已离开，是否要看看其他直播?'
        }
        this.$refs.confirm.open()
      },


      ...mapActions({
        fetchConfig: 'fetchConfig'
      }),
    }
  }
</script>
<style lang="scss" scoped>
  .wrapper{
  }
  .room-bg {
    position: relative;
  }

  .bg-img {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
  }
</style>