feature: im component

jhim/jhim.js

@@ -71,6 +71,8 @@ export default class JhIm {
     return this;
   }
   login(name, avatar) {
+    if(this.logined) return Promise.resolve();
+    
     this.name = name; 
     this.avatar = avatar;
     return new Promise(resolve=>{
@@ -95,6 +97,8 @@ export default class JhIm {
     });
   }
   logout() {
+    if(!this.logined) return Promise.resolve();
+
     return this.tim.logout().then(()=>{
       this.logined = false;
     });

jhim/jhimlive.vue

@@ -0,0 +1,115 @@
+<template>
+	<view class="jhim-container">
+    <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 Jhim from "./jhim";
+const LOGTAG = '--JHIM--:';
+
+export default {
+  name: 'jhim',
+	data() {
+		return {
+      input: '',
+      msgs: [],
+      ready: false,
+		};
+	},
+	props: {
+    sdkAppID: Number,
+    secretKey: String,
+    userId: String,
+    roomId: String,
+    name: String,
+    avatar: String,
+	},
+	methods: {
+		enterRoom() {
+      this.jhim = this.jhim||(Jhim.jhim)||(new Jhim(this.userId, this.sdkAppID, this.secretKey));
+
+      this.jhim.on('onIMMessageReceived', event=>{
+        this.msgs = this.msgs.concat(event);
+      }).on('onIMGroupTipElem', res=>{
+        this.$emit('onMemberCount', this.memberCount = res.memberCount);
+      }).on('onIMSDKNotReady', event=>{
+        this.ready = false;
+      }).on('onIMSDKReady', event=>{
+        this.ready = true;
+      })
+
+      this.jhim.login(this.name, this.avatar).then(()=>this.jhim.createGroup(this.roomId));
+		},
+		exitRoom() {
+      if(this.isAuthor) {
+        this.jhim.dismissGroup().then(()=>this.jhim.logout());
+      }else {
+        this.jhim.exitGroup().then(()=>this.jhim.logout());
+      }
+    },
+    btnImSend() {
+      this.jhim.sendGroupText(this.input).then(msg=>{
+        this.input = '';
+				this.msgs.push(msg);
+			});
+    }
+	}
+};
+</script>
+
+<style scoped>
+
+/* .jhim-container {
+  
+} */
+.jhim-message-box {
+  background-color:rgba(0, 0, 0, 0.4);
+  border-radius: 1000px;
+  padding: 5;
+}
+.jhim-message {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.jhim-message-avatar {
+  width: 24rpx;
+  height: 24rpx;
+  margin-left: 5px;
+}
+.jhim-message-text {
+  color: #fff;
+  font-size: 24rpx;
+}
+.jhim-input-box {
+  padding: 5px;
+}
+.jhim-input {
+  color: #fff;
+  font-size: 24rpx;
+}
+.jhim-logining {
+  padding: 5px;
+}
+.jhim-logining-text {
+  color: #fff;
+  font-size: 24rpx;
+}
+
+</style>

jhlive/jhlive.nvue → jhlive/jhlive.vue

@@ -16,6 +16,7 @@
         <text class="top_left_box_text2" >{{num}}</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>
@@ -25,28 +26,7 @@
       </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>
@@ -62,12 +42,13 @@ import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";
 import liveView from './live-wechat';
 //#endif
 // #ifdef H5
-import liveView from './live-wechat';
+import liveView from './live-app';
 //#endif
 // #ifdef APP-PLUS
 import liveView from './live-app';
 //#endif
 
+const LOGTAG = '--JHLIVE--:';
 const EXPIRETIME = 604800;
 
 export default {
@@ -77,7 +58,6 @@ export default {
 	data() {
 		return {
       userSig: '',
-      imMsgInput: '',
       beautifyLevel: false,
 		};
 	},
@@ -92,14 +72,11 @@ export default {
     name: String,
     avatar: String,
     num: Number,
-    likes: Number,
-    imReady: Boolean,
-    imMsgs: Array,
 	},
-	mounted: function() {
+	onLoad() {
     this.init();
 	},
-	destroyed: function() {
+	onUnload() {
 		this.destroy();
 	},
 	methods: {
@@ -115,20 +92,21 @@ export default {
       this.exitRoom()
     },
 		enterRoom() {
+      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(this.userId);
-      
-      setTimeout(()=>{
-				this.$refs.liveView.enterRoom();
-			}, 1000)
+      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：朦胧
@@ -138,16 +116,6 @@ export default {
         this.beautifyLevel?9:0,
         this.beautifyLevel?0:0,
       );
-    },
-    btnImSend() {
-      this.$emit('imSend', this.imMsgInput);
-      this.imMsgInput = '';
-    },
-    btnLike() {
-      this.$emit('like');
-    },
-    btnShop() {
-      this.$emit('shop');
     }
 	}
 };
@@ -261,7 +229,7 @@ export default {
 	color: white;
   margin-left: 5px;
 }
-.bottom-right-box-btn-color {
+.bottom-right-box-btn-text {
 	color: white;
 }
 

pagesMedia/liveDetail.nvue

@@ -1,34 +1,40 @@
 <template>
-	<view class="container" :style="'width: '+windowWidth+'px; height: '+windowHeight+'px;'">
-		<jhlive 
+	<view class="container" :style="'height: '+windowHeight+'px;'">
+    <jhlive 
 			ref="jhlive" 
 			class="jhlive"
 			:sdkAppID="sdkAppID" 
 			:secretKey="secretKey"
-			userid="userId"
-			roomid="roomId"
+			:userId="userId"
+			:roomId="roomId"
 			:isAuthor="isAuthor"
 			:linkMic="linkMic" 
 			:avatar="avatar"
 			:num="num"
 			:likes="likes"
-			:name="name" 
-			:imReady="imReady"
-			:imMsgs="imMsgs" 
-			@imSend="handleImSend"
-			@like="handleLike"
-			@shop="handleShop"/>
+      :name="name" />
+    <jhimlive 
+			ref="jhimlive" 
+			class="jhimlive"
+			:sdkAppID="sdkAppID" 
+			:secretKey="secretKey"
+			:userId="userId"
+			:roomId="roomId"
+			:isAuthor="isAuthor"
+			:avatar="avatar"
+      :name="name" 
+			@onMemberCount="num=$event"/>
 	</view>
 </template>
 
 <script>
 	import jhlive from "@/jhlive/jhlive";
-	import Jhim from "@/jhim/jhim";
+	import jhimlive from "@/jhim/jhimlive";
 	const NET = require('@/utils/request')
 	const API = require('@/config/api')
 	
 	export default {
-		components: { jhlive },
+		components: { jhlive, jhimlive },
 		data() {
 			return {
         isAuthor: true,
@@ -44,19 +50,29 @@
 				likes: 0,
 				name:"",
 				avatar:"../static/images/loginLogo.png",
-				userData: {},
+        userData: {},
+        enabledIM: false,
 				imReady: false,
 				imMsgs: [],
 			}
 		},
 		onLoad(options) {
 			this.liveId = options.liveId
-			this.userData = uni.getStorageSync("userData");
+      this.userData = uni.getStorageSync("userData");
+      this.userId = this.userData.userId;
 			let info = uni.getSystemInfoSync();
 			this.windowWidth = info.windowWidth;
       this.windowHeight = info.windowHeight;
 		},
 		onReady() {
+      // this.isAuthor = false;
+      // this.linkMic = true;
+      // this.userId = "123";
+      // this.name = 'test';
+      // this.roomId = '1';
+      // this.$nextTick(() => this.enterRoom());
+      // return;
+
       this.init();	
 		},
 		onUnload() {
@@ -77,41 +93,17 @@
         })
       },
 			enterRoom() {
-				this.jhim = new Jhim(this.userData.userId, this.sdkAppID, this.secretKey);
-				this.jhim.on('onIMMessageReceived', event=>{
-					this.imMsgs = this.imMsgs.concat(event);
-				}).on('onIMGroupTipElem', res=>{
-					this.num = res.memberCount;
-				}).on('onIMSDKNotReady', event=>{
-					this.imReady = false;
-				}).on('onIMSDKReady', event=>{
-					this.imReady = true;
-				})
-        this.jhim.login('name', 'avatar').then(()=>this.jhim.createGroup(this.roomId))
-        
+        this.$refs.jhimlive&&this.$refs.jhimlive.enterRoom();
 				this.$refs.jhlive&&this.$refs.jhlive.enterRoom();
 			},
 			exitRoom() {
-        if(this.isAuthor) this.jhim.dismissGroup().then(()=>this.jhim.logout());
-        if(!this.isAuthor) this.jhim.exitGroup().then(()=>this.jhim.logout());
+        this.$refs.jhimlive&&this.$refs.jhimlive.exitRoom();
         this.$refs.jhlive&&this.$refs.jhlive.exitRoom();
         
         NET.request(API.creatLive, {
           liveId: this.liveId,
           liveStatus: 2
-        }, 'GET').then(res => {}).catch(res => {
-          this.$refs.uTips.show({
-            title: '关闭直播失败',
-            type: 'warning',
-          })
-        })
-			},
-			handleImSend(msg) {				
-				this.jhim.sendGroupText(msg).then(msg=>{
-					this.imMsgs.push(msg);
-				});
-			},
-			handleLike(msg) {
+        }, 'GET');
 			},
 			handleShop(msg) {			
 			}
@@ -125,9 +117,19 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  width: 750rpx;
 }
 
 .jhlive {
+  width: 750rpx;
   flex: 1;
 }
+
+.jhimlive {
+  width: 400rpx;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background-color: blue;
+}
 </style>

pagesMedia/pickVideo.nvue

@@ -1,25 +1,18 @@
 <template>
 	<view class="container">
-    <view class="container" :style="'width: '+windowWidth+'px; 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" 
-        :imReady="imReady"
-        :imMsgs="imMsgs" 
-        @imSend="handleImSend"
-        @like="handleLike"
-        @shop="handleShop"/>
-    </view>
+    <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" />
 	</view>
 </template>
 
@@ -29,9 +22,7 @@
 	const API = require('@/config/api')
 
 	export default {
-		components: {
-			jhlive
-		},
+		components: { jhlive },
 		data() {
 			return {   
         userData: {},
@@ -93,9 +84,11 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  width: 750rpx;
 }
 
 .jhlive {
+  width: 750rpx;
   flex: 1;
 }
 </style>