增加属性

jhlive/jhlive.nvue

@@ -1,277 +1,307 @@
 <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">{{name}}</text>
-        <text class="top_left_box_text2" >{{num}}</text>
-      </view>
-    </view>
+		<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" @click="btnBeautify">
-        <text class="top-right-box-btn-text">美颜</text>
-      </view>
-      <view class="top-right-box-btn" v-if="isAuthor" @click="btnChangeCamera">
-        <text class="top-right-box-btn-text">切换</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="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
 
-import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";
+	const LOGTAG = '--JHLIVE--:';
+	const EXPIRETIME = 604800;
 
-// #ifdef MP-WEIXIN
-import JhliveApp from './live-wechat';
-//#endif
+	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: false,
+				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) {
+				
+			}
 
-const LOGTAG = '--JHLIVE--:';
-const EXPIRETIME = 604800;
+		}
+	};
+</script>
 
-export default {
-  name: 'jhlive',
-  // #ifdef MP-WEIXIN
-  components: {JhliveApp},
-  //#endif
+<style scoped>
+	.container-jhlive {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		background-color: black;
+		width: 100%;
+		height: 100%;
+	}
 
-	data() {
-		return {
-      userSig: '',
-      beautifyLevel: false,
-		};
-	},
+	.liveView {
+		flex: 1;
+	}
 
-	props: {
-    sdkAppID: Number,
-    secretKey: String,
-    userId: String,
-    roomId: String,
-    isAuthor: Boolean,
-    linkMic: Boolean,
-    name: String,
-    avatar: String,
-    num: 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.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);
+	.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;
 	}
-};
-</script>
 
-<style scoped>
+	.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;
+		display: flex;
+		flex-direction: row;
+	}
 
-.container-jhlive {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  background-color: black;
-  width: 100%;
-  height: 100%;
-}
+	.top-right-box-btn {
+		color: white;
+		margin-left: 5px;
+	}
 
-.liveView {
-  flex: 1;
-}
+	.top-right-box-btn-text {
+		color: white;
+	}
 
-.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;
-}
 
+	.bottom-left-box {
+		left: 0;
+		bottom: 0;
+		margin-left: 10px;
+		margin-bottom: 10px;
+		position: absolute;
+		z-index: 100;
+	}
 
-.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-login {
+		color: white;
+	}
 
+	.bottom-left-box-messages {}
 
-.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-message {
+	.bottom-left-box-input-box {}
 
-}
-.bottom-left-box-input-box {
+	.bottom-left-box-input {
+		color: #fff;
+		font-size: 30rpx;
+	}
 
-}
-.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 {
-  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;
-}
+	.bottom-right-box-btn {
+		color: white;
+		margin-left: 5px;
+	}
 
+	.bottom-right-box-btn-text {
+		color: white;
+	}
 </style>

pagesGood/liveDetail.nvue

@@ -1,7 +1,7 @@
 <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" />
+		 :isAuthor="isAuthor" :linkMic="linkMic" :avatar="avatar" :subtitle="num" :likes="likes" :title="name" />
 		<jhimlive ref="jhimlive" class="jhimlive" :sdkAppID="sdkAppID" :secretKey="secretKey" :userId="userId" :roomId="roomId"
 		 :isAuthor="isAuthor" :avatar="avatar" :name="name" @onMemberCount="num=$event" />
 		<view class="popup-open" @click="openPop()">