qjd-shell-uniapp/jhlive/jhlive.nvue

<template>
	<view class="container-jhlive" data-type="jhlive">
    <liveView 
      class="liveView"
      ref="liveView"
      :sdkAppID="sdkAppID"
      :userSig="userSig"
      :userid="userid" 
      :roomid="roomid" 
      :isAuthor="isAuthor"
      :linkMic="linkMic" />
    <view class="top_left_box">
      <image class="top_left_box_img" :src="avtar"></image>
      <view class="top_left_box_text">
        <text class="top_left_box_text1">{{name}}</text>
        <text class="top_left_box_text2" >{{num||1}}</text>
      </view>
    </view>
    <view class="top-right-box">
			<view class="top-right-box-btn" v-if="isAuthor" @click="btnChangeCamera">
        <text class="top-right-box-btn-text">切换</text>
      </view>
    </view>

    <view class="bottom-left-box" v-if="!imReady">
      <view class="bottom-left-box-login"><text>登录中...</text></view>
    </view>
    <view class="bottom-left-box" v-if="imReady">
			<view class="bottom-left-box-messages" v-for="(item, index) in imMsgs" :key="index">
			  <view class="bottom-left-box-message">
          <image :src="item.avatar" />
          <text>{{item.name}}：{{item.text}}</text>
        </view>
		  </view>
		  <view class="bottom-left-box-input-box">
        <input 
          class="bottom-left-box-input"
          placeholder="说点什么..." placeholder-style="color:#fff" 
          v-model="imMsgInput"
          confirm-type="send" @confirm="btnImSend" />
      </view>
    </view>
    <view class="bottom-right-box">
			<view class="bottom-right-box-btn" @click="btnShop">
        <text class="bottom-right-box-btn-text">商品</text>
      </view>
      <view class="bottom-right-box-btn" @click="btnLike">
        <text class="bottom-right-box-btn-text">点赞</text>
      </view>
    </view>
	</view>
</template>

<script>

import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";

// #ifdef MP-WEIXIN
import liveView from './live-wechat';
//#endif
// #ifdef H5
import liveView from './live-wechat';
//#endif
// #ifdef APP-PLUS
import liveView from './live-app';
//#endif

const EXPIRETIME = 604800;

export default {
  name: 'jhlive',
  components: { liveView },

	data() {
		return {
      userSig: '',
      imMsgInput: '',
		};
	},

	props: {
    sdkAppID: Number,
    secretKey: String,
    userid: String,
    roomid: String,
    isAuthor: Boolean,
    linkMic: Boolean,
    name: String,
    avtar: String,
    num: Number,
    likes: Number,
    imReady: Boolean,
    imMsgs: Array,
	},
	mounted: function() {
    this.init();
	},
	destroyed: function() {
		this.destroy();
	},
	methods: {
    init() {
      uni.setKeepScreenOn({
        keepScreenOn: true
      });
    },
    destroy() {
      uni.setKeepScreenOn({
        keepScreenOn: false
      });
      this.exitRoom()
    },
		enterRoom() {
      const generator = new LibGenerateTestUserSig(this.sdkAppID, this.secretKey, EXPIRETIME);
      this.userSig = generator.genTestUserSig(this.userid);
      
      setTimeout(()=>{
				this.$refs.liveView.enterRoom();
			}, 1000)
		},
		exitRoom() {
			this.$refs.liveView.exitRoom();
    },
    btnChangeCamera() {
      this.$refs.liveView.ChangeCamera();
    },
    btnImSend() {
      this.$emit('imSend', this.imMsgInput);
      this.imMsgInput = '';
    },
    btnLike() {
      this.$emit('like');
    },
    btnShop() {
      this.$emit('shop');
    }
	}
};
</script>

<style scoped>

.container-jhlive {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: black;
  width: 100%;
  height: 100%;
}

.liveView {
  flex: 1;
}

.top_left_box {
  left: 0;
  top: 0;
  margin-left: 10px;
  margin-top: 10px;
  position: absolute;
  z-index: 100;
  background-color:rgba(0, 0, 0, 0.4);
  border-radius: 1000px;
  display: flex;
  flex-direction: row;
  padding: 10px;
}
.top_left_box_img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 1000px;
  background-color: white;
}
.top_left_box_text {
  margin-left: 10px;
  flex: 1;
}
.top_left_box_text1 {
  font-size: 28rpx;
  color: white;
}
.top_left_box_text2 {
  font-size: 20rpx;
  color: white;
}


.top-right-box {
  right: 0;
  top: 0;
  margin-top: 10px;
  margin-right: 10px;
  position: absolute;
  z-index: 100;
}
.top-right-box-btn {
	color: white;
}
.top-right-box-btn {
  color: white;
}


.bottom-left-box {
  left: 0;
  bottom: 0;
  margin-left: 10px;
  margin-bottom: 10px;
  position: absolute;
  z-index: 100;
}
.bottom-left-box-login {
  color: white;
}
.bottom-left-box-messages {

}
.bottom-left-box-message {

}
.bottom-left-box-input-box {

}
.bottom-left-box-input {
  color: #fff;
  font-size: 30rpx;
}


.bottom-right-box {
  right: 0;
  bottom: 0;
  margin-bottom: 10px;
  margin-right: 10px;
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: row;
}
.bottom-right-box-btn {
	color: white;
  margin-left: 5px;
}
.bottom-right-box-btn-color {
	color: white;
}

</style>