qjd-user-uniapp/jhlive/jhlive.nvue

<template>
	<view class="container-jhlive" data-type="jhlive">
		<JhliveApp class="liveView" ref="liveView" :sdkAppID="sdkAppID" :userSig="userSig" :userid="userId" :roomid="roomId"
		 :isAuthor="isAuthor" :linkMic="linkMic" @onError="onError" @onRemoteUserEnterRoom="onRemoteUserEnterRoom"
		 @onRemoteUserLeaveRoom="onRemoteUserLeaveRoom" />
		<view class="top_left_box">
			<image class="top_left_box_img" :src="avatar"></image>
			<view class="top_left_box_text">
				<text class="top_left_box_text1">{{title}}</text>
				<text class="top_left_box_text2">{{subtitle}}人观看</text>
			</view>
		</view>

		<view class="top-right-box">
			<view class="top-right-box-btn" v-if="isAuthor && showBeauty" @click="btnBeautify">
				<text class="top-right-box-btn-text">美颜</text>
			</view>
			<view class="top-right-box-btn" v-if="isAuthor && showSwitch" @click="btnChangeCamera">
				<text class="top-right-box-btn-text">切换</text>
			</view>
			<view class="top-right-box-btn" v-for="(item,index) in btns" :key="index" @click="clickBtns(index)">
				<image class="top-right-box-btn-text" :src="item.picture"/>
				<text>{{item.title}}</text>
			</view>
		</view>

		<!-- <view class="bottom-right-box">
		  <view class="bottom-right-box-btn" @click="btnLike">
			<text class="bottom-right-box-btn-text">点赞</text>
		  </view>
		</view> -->
		<!-- 留言 -->
	    <!-- <view class="jhim-message-box">
	      <view class="jhim-message" v-for="(item, index) in msgs.slice(0,5)" :key="index">
	        <image class="jhim-message-avatar" :src="item.avatar" />
	        <text class="jhim-message-text" >{{item.name}}：{{item.text}}</text>
	      </view>
	    </view>
	    <view v-if="ready" class="jhim-input-box">
	      <input 
	        class="jhim-input"
	        placeholder="说点什么..." 
	        placeholder-style="color:#fff" 
	        v-model="input"
	        confirm-type="send" @confirm="btnImSend" />
	    </view>
	    <view v-else class="jhim-logining"><text class="jhim-logining-text">登录中...</text></view> -->
	</view>
</template>

<script>
	import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";
	// #ifdef MP-WEIXIN
	import JhliveApp from './live-wechat';
	//#endif

	const LOGTAG = '--JHLIVE--:';
	const EXPIRETIME = 604800;

	export default {
		name: 'jhlive',
		// #ifdef MP-WEIXIN
		components: {
			JhliveApp
		},
		//#endif
		data() {
			return {
				userSig: '',
				beautifyLevel: false,
			};
		},

		props: {
			sdkAppID: Number,
			secretKey: String,
			userId: String,
			roomId: String,
			isAuthor: Boolean,
			linkMic: Boolean,
			title: String,
			avatar: String,
			subtitle: String,
			showBeauty: {
				default: false,
				type: Boolean
			}, // 是否开启美颜
			showSwitch: {
				default: false,
				type: Boolean
			}, // 是否开启美颜
			btns:{
				// default: [{picture:"../static/images/loginLogo.png",,title:''}],
				type: Array
			}, // 按钮数组
		},
		onLoad() {
			this.init();
		},
		onUnload() {
			this.destroy();
		},
		methods: {
			init() {
				this.remoteUsers = [];
				uni.setKeepScreenOn({
					keepScreenOn: true
				});
			},
			destroy() {
				uni.setKeepScreenOn({
					keepScreenOn: false
				});
				this.exitRoom()
			},
			enterRoom() {
				if (!this.$refs.liveView) {
					console.log(LOGTAG + 'no jhlive');
					uni.showToast({
						title: '直播组件初始化失败',
						duration: 2000
					});
					return;
				}
				console.log(LOGTAG + 'enterRoom', this.isAuthor, this.linkMic, this.sdkAppID, this.secretKey, this.userId, this.roomId);
				const generator = new LibGenerateTestUserSig(this.sdkAppID, this.secretKey, EXPIRETIME);
				this.userSig = generator.genTestUserSig(String(this.userId));
				this.$nextTick(() => this.$refs.liveView.enterRoom());
			},
			exitRoom() {
				console.log(LOGTAG + 'exitRoom');
				this.$refs.liveView.exitRoom();
			},
			btnChangeCamera() {
				console.log(LOGTAG + 'btnChangeCamera');
				this.$refs.liveView.switchCarema();
			},
			btnBeautify() {
				console.log(LOGTAG + 'btnBeautify', this.beautifyLevel);
				// blv - 美颜级别取值范围0 - 9； 0表示关闭，1 - 9值越大
				// wlv - 亮度级别取值范围0 - 9； 0表示关闭，1 - 9值越大
				// beautyStyle  美颜风格.三种美颜风格：0 ：光滑 1：自然 2：朦胧
				this.beautifyLevel = !this.beautifyLevel;
				this.$refs.liveView.setBeauty(
					this.beautifyLevel ? 9 : 0,
					this.beautifyLevel ? 9 : 0,
					this.beautifyLevel ? 0 : 0,
				);
			},
			handleLiveEvent(event) {
				if (event.eventName == 'onRemoteUserEnterRoom' && !this.remoteUsers.find(v => v == event.eventData)) {
					this.remoteUsers.push(event.eventData);
					this.$emit('onRemoteUser', this.remoteUsers);
				} else if (event.eventName == 'onRemoteUserLeaveRoom') {
					this.remoteUsers = this.remoteUsers.filter(v => v != event.eventData);
					this.$emit('onRemoteUser', this.remoteUsers);
				} else if (event.eventName == 'onError') {
					this.$emit('onError', event.eventData.msg);
					uni.showToast({
						title: event.eventData.msg,
						duration: 2000
					});
				}
			},
			onError: (e) => {
				uni.showToast({
					title: e.detail,
					duration: 2000
				});
				this.$emit('onError', e.detail);
			},
			onRemoteUserEnterRoom: (e) => {
				if (this.remoteUsers.find(v => v == e.detail)) {
					this.remoteUsers.push(e.detail);
					this.$emit('onRemoteUser', this.remoteUsers);
				}
			},
			onRemoteUserLeaveRoom: (e) => {
				this.remoteUsers = this.remoteUsers.filter(v => v != e.detail);
				this.$emit('onRemoteUser', this.remoteUsers);
			},
			clickBtns(index) {
				
			}

		}
	};
</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 {
		width: 300rpx;
		left: 0;
		top: 0;
		margin-left: 10px;
		margin-top: 10px;
		position: absolute;
		z-index: 100;
		background-color: rgba(115, 111, 117, 0.4);
		border-radius: 1000px;
		display: flex;
		flex-direction: row;
		padding: 5px;
	}

	.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;
		margin-bottom: 5px;
	}

	.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;
		display: flex;
		flex-direction: row;
	}

	.top-right-box-btn {
		color: white;
		margin-left: 5px;
	}

	.top-right-box-btn-text {
		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-text {
		color: white;
	}
</style>