qjd-shell-uniapp/pagesMedia/liveDetail.nvue

<template>
	<view class="container" :style="'height: '+windowHeight+'px;'">
    <jhlive 
			ref="jhlive" 
			class="jhlive"
			:sdkAppID="sdkAppID" 
			:secretKey="secretKey"
			:userId="userId"
			:roomId="roomId"
			:isAuthor="isAuthor"
			:linkMic="linkMic" 
			:avatar="avatar"
			:num="num"
			:likes="likes"
      :name="name" />
    <jhimlive 
			ref="jhimlive" 
			class="jhimlive"
			:sdkAppID="sdkAppID" 
			:secretKey="secretKey"
			:userId="userId"
			:roomId="roomId"
			:isAuthor="isAuthor"
			:avatar="avatar"
      :name="name" 
			@onMemberCount="num=$event"/>
	</view>
</template>

<script>
	import jhlive from "@/jhlive/jhlive";
	import jhimlive from "@/jhim/jhimlive";
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		components: { jhlive, jhimlive },
		data() {
			return {
        isAuthor: true,
        linkMic: false,
        sdkAppID:API.sdkAppID,
			  secretKey:API.secretKey,
				windowWidth: 0,
				windowHeight: 0,
				userId: '',
				roomId: '',
				liveId: '',
				num: 0,
				likes: 0,
				name:"",
				avatar:"../static/images/loginLogo.png",
        userData: {},
        enabledIM: false,
				imReady: false,
				imMsgs: [],
			}
		},
		onLoad(options) {
			this.liveId = options.liveId
      this.userData = uni.getStorageSync("userData");
      this.userId = this.userData.userId;
			let info = uni.getSystemInfoSync();
			this.windowWidth = info.windowWidth;
      this.windowHeight = info.windowHeight;
		},
		onReady() {
      // this.isAuthor = false;
      // this.linkMic = true;
      // this.userId = "123";
      // this.name = 'test';
      // this.roomId = '1';
      // this.$nextTick(() => this.enterRoom());
      // return;

      this.init();	
		},
		onUnload() {
      this.exitRoom();
		},
		methods: {
      init() {
        NET.request(API.startStream+2, 'GET').then(res => {
          this.avatar = res.data.imgUrl;
          this.name = res.data.liveName;
          this.roomId = Number(res.data.roomId);
          this.$nextTick(() => this.enterRoom());
        }).catch(res => {
          uni.showToast({
            title: error.data.msg,
            duration: 2000
          });
        })
      },
			enterRoom() {
        this.$refs.jhimlive&&this.$refs.jhimlive.enterRoom();
				this.$refs.jhlive&&this.$refs.jhlive.enterRoom();
			},
			exitRoom() {
        this.$refs.jhimlive&&this.$refs.jhimlive.exitRoom();
        this.$refs.jhlive&&this.$refs.jhlive.exitRoom();
        
        NET.request(API.creatLive, {
          liveId: this.liveId,
          liveStatus: 2
        }, 'GET');
			},
			handleShop(msg) {			
			}
		},
	}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 750rpx;
}

.jhlive {
  width: 750rpx;
  flex: 1;
}

.jhimlive {
  width: 400rpx;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: blue;
}
</style>