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>
			<image v-if="showFav" class="top_left_box_collect" :src="isFav?collect:notCollect" @click="$emit('onFav', isFav)"></image>
		</view>
		<view class="bottom-message">
			<!-- 对话信息 -->
			<view class="jhim-message-box">
			  <view class="jhim-message" v-for="(item, index) in imMsgs.slice(0,5)" :key="index">
				<text class="jhim-message-text" style="color: #C8C8C8;">{{item.name}}：</text>
				<text class="jhim-message-text">{{item.text}}</text>
			  </view>
			</view>
			<!-- 下方功能 -->
			<view v-if="showIm" class="bottom-box">
				<view v-if="!imStatus" class="jhim-input-box">
				  <image class="jhim-icon" :src="inputIcon"/>
				  <input 
					class="jhim-input"
					placeholder="请输入" 
					placeholder-style="color:#fff;font-size: 14px;" 
					v-model="imInput"
					confirm-type="send" @confirm="$emit('onImSend', imInput)" />
				</view>
				<view v-else class="jhim-logining"><text class="jhim-logining-text">{{imStatus}}</text></view>
				<!-- 按钮 -->
				<view class="bottom-box-btns">
					<!-- <view class="" v-if="isAuthor && showBeauty" @click="btnBeautify"> -->
					<view v-if="isAuthor&&showBeauty" class="bottom-box-btns-arr" @click="btnBeautify">
						<image class="btns-icon" :src="beautyIcon"/>
						<text class="btns-text">美颜</text>
					</view>
					<!-- <view class="" v-if="isAuthor && showSwitch" @click="btnChangeCamera"> -->
					<view v-if="isAuthor&&showSwitch" class="bottom-box-btns-arr" @click="btnChangeCamera">
						<image class="btns-icon" :src="switchIcon"/>
						<text class="btns-text">切换</text>
					</view>
					<view class="bottom-box-btns-arr" v-for="(item,index) in btns" :key="index" @click="clickBtns(index, item)">
						<image class="btns-icon" :src="item.picture"/>
						<text v-if="item.title" class="btns-text">{{item.title}}</text>
					</view>
					<view v-if="isAuthor&&showLike" class="bottom-box-btns-arr" @click="btnLike">
						<image class="btns-icon" :src="likeIcon"/>
					</view>
				</view>
			</view>
		</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 {
				imInput: '',
				userSig: '',
				beautifyLevel: false,
				collect:"../static/images/live-collect.png", // 已收藏图标
				notCollect: "../static/images/live-notCollect.png", // 未收藏图标
				inputIcon: "../static/images/live-chat.png", // 输入框图标
				beautyIcon:"../static/images/live-beauty.png", // 美颜图标
				switchIcon: "../static/images/live-switch.png", // 切换摄像头图标
				likeIcon: "../static/images/live-support.png"
			};
		},

		props: {
			sdkAppID: Number,
			secretKey: String,
			userId: String,
			roomId: String,
			isAuthor: Boolean,
			linkMic: Boolean,
			title: String,
			avatar: String,
			subtitle: String,
			isFav: {default: false,type: Boolean}, // 是否显示收藏
			showFav: {default: false,type: Boolean}, // 是否显示收藏
			showBeauty: {default: false,type: Boolean}, // 是否显示美颜
			showSwitch: {default: false,type: Boolean}, // 是否显示切换摄像头
			showLike: {default: false,type: Boolean},
			showIm: {default: false,type: Boolean},
			btns:{
				default: [],
				type: Array
			}, // 按钮数组
			imMsgs:{
				default: [],
				type: Array
			},
			imStatus:{
				default: '',
				type: String
			}
		},
		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 && this.$refs.liveView.enterRoom && this.$refs.liveView.enterRoom());
			},
			exitRoom() {
				console.log(LOGTAG + 'exitRoom');
				this.$refs.liveView.exitRoom();
			},
			cleanImInput() {
				this.imInput = '';
			},
			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, item) {
				this.$emit("onBtnClick", index, item);
			}
		}
	};
</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;
		/* z-index: -1; */
	}

	.top_left_box {
		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;
		justify-content: center;
		align-items: center;
	}

	.top_left_box_img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 1000px;
		background-color: white;
	}
    .top_left_box_collect {
		width: 26px;
		height: 26px;
	}
	.top_left_box_text {
		margin-left: 10px;
		margin-right: 10px;
	}

	.top_left_box_text1 {
		font-size: 28rpx;
		color: white;
		margin-bottom: 5px;
	}

	.top_left_box_text2 {
		font-size: 20rpx;
		color: white;
	}
	
	.bottom-message {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		position: absolute;
		bottom: 0px;
	}
	.bottom-box {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		bottom: 0px;
		background-color:rgba(0, 0, 0, 0.4);
	}
	.jhim-message-box {
	  /* position: absolute; */
	  /* padding: 5;
	  left: 5px; */
	  /* display: flex; */
	  /* z-index: 100; */
	}
	.jhim-message {
	  /* flex: 1; */
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  background-color: rgba(115,119,120,0.3);
	  padding: 5px;
	  border-radius: 12px;
	  margin-bottom: 10px;
	}
	.jhim-message-text {
	  color: #fff;
	  font-size: 14px;
	}
	.jhim-input-box {
	  padding: 10px;
	  margin: 10px;
	  align-items: center;
	  display: flex;
	  flex-direction: row;
	  background-color:rgba(50, 50, 50, 0.3);
	  border-radius: 15px;
	  flex: 1;
	}
	.jhim-icon {
		width: 14px;
		height: 14px;
		margin-right: 5px;
	}
	.jhim-input {
	  flex: 1;
	  color: #fff;
	  font-size: 28rpx;
	}
	.jhim-logining {
	  padding: 5px;
	  flex: 1;
	}
	.jhim-logining-text {
	  color: #fff;
	  font-size: 28rpx;
	}
	.bottom-box-btns {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.bottom-box-btns-arr {
		margin-right: 5px;
	}
	.btns-icon {
		width: 40px;
		height: 40px;
	}
	.btns-text {
		text-align: center;
	}
</style>