qjd-shell-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" mode="aspectFill"></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 v-if="showFav" class="top_left_box_collect" @click="onLiveFav">
				<text class="top_left_box_collect_text">{{isFav?textFav:textNotFav}}</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"> -->
			<scroll-view :scroll-top="imScrollTop" scroll-y="true" v-if="showIm" class="jhim-message-box">
				<view ref="imScrollContent">
				  <view class="jhim-message" v-for="(item, index) in imMsgs" :key="index">
					<view class="jhim-message-show" >
						<!-- <text class="jhim-message-text2">{{item.name}}：</text> -->
						<text class="jhim-message-text">{{item.name}}：{{item.text}}</text>
					</view>
					<view class="jhim-message-none"></view>
				  </view>
			    </view>
			 </scroll-view>
			<!-- </view> -->
			<!-- 下方功能 -->
			<view v-if="showIm||btns.length" class="bottom-box">
				<view v-if="showIm&&!imStatus" class="jhim-input-box">
				  <image class="jhim-icon" :src="imgs.chat"/>
				  <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-if="showIm&&imStatus" class="jhim-logining"><text class="jhim-logining-text">{{imStatus}}</text></view>
				<view v-if="!showIm" class="jhim-logining"></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="imgs.beauty"/>
					</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="imgs.switch"/>
					</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="showLike" class="bottom-box-btns-arr" @click="btnLike">
						<image class="btns-icon" :src="imgs.like"/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imgs from './res.js'
	import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";
	// #ifdef MP-WEIXIN
	import JhliveApp from './live-wechat';
	//#endif
    // #ifdef APP-PLUS
	const dom = uni.requireNativePlugin('dom');
	//#endif
	const LOGTAG = '--JHLIVE--:';
	const EXPIRETIME = 604800;

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

		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}, // 是否显示收藏
			textFav: {default: '已关注',type: String}, 
			textNotFav: {default: '关注',type: String}, 
			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
			}
		},
		mounted() {
			this.init();
		},
		unmounted() {
			this.destroy();
		},
		watch: {
			imMsgs() {
				// #ifdef APP-PLUS
				setTimeout(() => {
					const el = this.$refs.imScrollContent;
					dom.getComponentRect(el, (e)=>{
						if(e.size.height>200) this.imScrollTop = (e.size.height - 200);
						// el&&dom.scrollToElement(el, {offset: -100})
					})
				},50);
				//#endif
				// #ifndef APP-PLUS
				this.imScrollTop = 10000+ this.imMsgs.length
				//#endif
			}
		},
		methods: {
			init() {
				console.log(LOGTAG + 'init');
				this.remoteUsers = [];
				uni.setKeepScreenOn({
					keepScreenOn: true
				});
			},
			destroy() {
				console.log(LOGTAG + 'destroy');
				uni.setKeepScreenOn({
					keepScreenOn: false
				});
				this.exitRoom()
			},
			enterRoom() {
				if (!this.$refs.liveView||!this.$refs.liveView.enterRoom) {
					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,
				);
			},
			onError(e) {
				console.log(LOGTAG + 'onError', e);
				uni.showToast({
					title: e.detail,
					duration: 2000
				});
				this.$emit('onError', e.detail);
			},
			onRemoteUserEnterRoom(e) {
				console.log(LOGTAG + 'onRemoteUserEnterRoom', e);
				if (!this.remoteUsers.find(v => v == e.detail)) {
					this.remoteUsers.push(e.detail);
				}
				this.$emit('onRemoteUser', this.remoteUsers);
			},
			onRemoteUserLeaveRoom(e) {
				console.log(LOGTAG + 'onRemoteUserLeaveRoom', e);
				this.remoteUsers = this.remoteUsers.filter(v => v != e.detail);
				this.$emit('onRemoteUser', this.remoteUsers);
			},
			clickBtns(index, item) {
				this.$emit("onBtnClick", index, item);
			},
			// 关注点击事件
			onLiveFav() {
				this.$emit("onLiveFav", this.isFav);
			}
		}
	};
</script>

<style scoped>
	.container-jhlive {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		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;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		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; */
		border-radius: 1000px;
		padding: 3px 5px;
		background-color: green;
	}
	.top_left_box_collect_text {
		color: white;
		font-size: 20rpx;
	}
	.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;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: absolute;
		bottom: 0px;
	}
	.bottom-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		bottom: 0px;
		/* background-color:rgba(0, 0, 0, 0.4); */
	}
	.jhim-message-box {
		max-height: 200px;
	}
	.jhim-message {
	  /* #ifndef APP-NVUE */
	  display: flex;
	  /* #endif */
	  flex-direction: row;
	  align-items: center;
	  margin-left: 10px;
	  margin-right: 10px;
	  margin-bottom: 10px;
	}
	.jhim-message-show {
	  background-color: rgba(115,119,120,0.3);
	  border-radius: 15px;
	  padding: 5px;
	}
	.jhim-message-none {
	  flex: 1;
	}
	.jhim-message-text {
	  max-width: 400rpx;
	  
	  color: #fff;
	  font-size: 14px;
	  /* #ifndef APP-NVUE */
	  word-break: break-all;
	  /* #endif */
	  /* #ifdef APP-NVUE */
	  lines: 5; 
	  word-break: anywhere;
	  /* #endif */
	}
	.jhim-message-text2 {
	  color: #C8C8C8;
	  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: 10px;
	  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>