feature: pickup app live

config/api.js

@@ -5,6 +5,8 @@ const WX_API_BASE = 'https://www.qianjiadi.com/'
  // const WX_API_BASE = 'http://172.18.1.79:8765/'
 
 module.exports = {
+	sdkAppID: 1400430241,
+	secretKey: '941e01ca06e94057de3013b235b67a784ea28b45c43decbd518e765f7d5fc140',
 	//  微信登录
 	WxLogin: WX_API_BASE + 'app/auth/merchant/wx/login',
 	//  微信登录
@@ -44,6 +46,8 @@ module.exports = {
 	editGood: WX_API_BASE + 'app/product/updateTenantProduct',
 
 
+	// 获取直播信息与开播
+	startStream: WX_API_BASE + 'app/liveAndVideo/merchant/startStream/',
 	//   获取直播Id
 	getLiveId: WX_API_BASE + 'app/liveAndVideo/merchant/liveAndVideoInit',
 	//   获取直播设置详情

jhim/jhim.js

@@ -2,6 +2,7 @@ import TIM from './tim-wx';
 import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";
 
 const EXPIRETIME = 604800;
+const LOGTAG = '--JHIM--:';
 
 export default class JhIm {
   constructor(userId, sdkAppID, secretKey) {
@@ -23,9 +24,21 @@ export default class JhIm {
     this.tim.setLogLevel(1);
     
     this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, event=>{
-      event = event.data.map(v=>v);
-      console.log(11111111111,event);
-      this.onIMMessageReceived&&this.onIMMessageReceived(event);
+      console.log(LOGTAG+'recv',event);
+      let msgs = [];
+      event.data.forEach(v=>{
+        if(v.type == "TIMTextElem") {
+          msgs.push({
+            name: v.nick,
+            avatar: v.avatar,
+            text: v.payload.text
+          })
+        }else if(v.type == "TIMGroupTipElem") {
+          this.onIMGroupTipElem&&this.onIMGroupTipElem(v.payload);
+        }
+      })
+      
+      this.onIMMessageReceived&&this.onIMMessageReceived(msgs);
     }, this);
 
     this.tim.on(TIM.EVENT.SDK_READY, event=>this.onIMSDKReady&&this.onIMSDKReady(event), this);
@@ -68,11 +81,13 @@ export default class JhIm {
           avatar: avatar,
           allowType: TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
         });
+        console.log(LOGTAG+'ready');
         this.onIMReady&&this.onIMReady(event);
         resolve();
         this.tim.off(TIM.EVENT.SDK_READY, cb, this);
       }
       this.tim.on(TIM.EVENT.SDK_READY, cb, this);
+      console.log(LOGTAG+'login');
       this.tim.login({
         userID: this.userId,
         userSig: this.userSig,
@@ -85,10 +100,12 @@ export default class JhIm {
     });
   }
   createGroup(roomId) {
-    this.roomId = roomId;
+    console.log(LOGTAG+'search for createGroup', roomId);
+    this.roomId = String(roomId);
     return this.tim.searchGroupByID(this.roomId).then(()=>{
       return this.joinGroup(roomId);
     },()=>{
+      console.log(LOGTAG+'createGroup');
       return this.tim.createGroup({
         groupID: this.roomId,
         name: this.roomId,
@@ -99,43 +116,36 @@ export default class JhIm {
     });
   }
   dismissGroup() {
-		return this.tim.dismissGroup(this._createGroup.roomId).then(() => {
+    console.log(LOGTAG+'dismissGroup');
+		return this.tim.dismissGroup(this.roomId).then(() => {
       this.groupReady = false;
       this.roomId = null;
     });
   }
   joinGroup(roomId) {
-    this.roomId = roomId;
+    console.log(LOGTAG+'joinGroup',roomId);
+    this.roomId = String(roomId);
     return this.tim.joinGroup({ 
       groupID: this.roomId, 
       type: TIM.TYPES.GRP_AVCHATROOM 
     }).then((imResponse) => {
+      console.log(LOGTAG+'joinGrouped',imResponse.data.status);
 			switch (imResponse.data.status) {
 			  case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
 				  break;
 			  case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
         case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
           this.groupReady = true;
-          this.sendGroupMessage({
-            data: this.userId,
-            description: 'userJoinin',
-            extension: '',
-          });
 				  break;
 			}
 		});
   }
   exitGroup() {
-    return this.sendGroupMessage({
-      data: this.userId,
-      description: 'userJoinin',
-      extension: '',
-    }).then(()=>{
-      return this.tim.quitGroup(this.roomId).then(()=>{
-        this.groupReady = false;
-        this.roomId = null;
-      });
-    })
+    console.log(LOGTAG+'exitGroup');
+    return this.tim.quitGroup(this.roomId).then(()=>{
+      this.groupReady = false;
+      this.roomId = null;
+    });
   }
   sendGroupText(text) {
     const message = this.tim.createTextMessage({
@@ -146,7 +156,7 @@ export default class JhIm {
     return this.tim.sendMessage(message).then(()=>({
       name: this.name,
       avatar: this.avatar,
-      message: text,
+      text: text,
     }));
   }
   sendGroupMessage(payload) {

jhlive/jhlive.nvue

@@ -5,19 +5,22 @@
       ref="liveView"
       :sdkAppID="sdkAppID"
       :userSig="userSig"
-      :userid="userid" 
-      :roomid="roomid" 
+      :userid="userId" 
+      :roomid="roomId" 
       :isAuthor="isAuthor"
       :linkMic="linkMic" />
     <view class="top_left_box">
-      <image class="top_left_box_img" :src="avtar"></image>
+      <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||1}}</text>
+        <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="btnChangeCamera">
+			<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>
@@ -75,18 +78,19 @@ export default {
 		return {
       userSig: '',
       imMsgInput: '',
+      beautifyLevel: false,
 		};
 	},
 
 	props: {
     sdkAppID: Number,
     secretKey: String,
-    userid: String,
-    roomid: String,
+    userId: String,
+    roomId: String,
     isAuthor: Boolean,
     linkMic: Boolean,
     name: String,
-    avtar: String,
+    avatar: String,
     num: Number,
     likes: Number,
     imReady: Boolean,
@@ -112,7 +116,7 @@ export default {
     },
 		enterRoom() {
       const generator = new LibGenerateTestUserSig(this.sdkAppID, this.secretKey, EXPIRETIME);
-      this.userSig = generator.genTestUserSig(this.userid);
+      this.userSig = generator.genTestUserSig(this.userId);
       
       setTimeout(()=>{
 				this.$refs.liveView.enterRoom();
@@ -122,7 +126,18 @@ export default {
 			this.$refs.liveView.exitRoom();
     },
     btnChangeCamera() {
-      this.$refs.liveView.ChangeCamera();
+      this.$refs.liveView.switchCarema();
+    },
+    btnBeautify() {
+      // 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,
+      );
     },
     btnImSend() {
       this.$emit('imSend', this.imMsgInput);
@@ -194,11 +209,14 @@ export default {
   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 {
+.top-right-box-btn-text {
   color: white;
 }
 

jhlive/live-wechat.vue

@@ -163,6 +163,15 @@ export default {
         this.pusherContext = null;
       }
     },
+    switchCarema() {
+      this.pusher.frontCamera = this.pusher.frontCamera=='front'?'back':'front';
+      this.$forceUpdate();
+    },
+    setBeauty(blv, wlv) {
+      this.pusher.beautyLevel = blv;
+      this.pusher.whitenessLevel = wlv;
+      this.$forceUpdate();
+    },
     /** --- pusher event handler --- **/
 		pusherStateChangeHandlerFun: function(event) {
 			const code = event.detail.code;

pages/media/index.vue

@@ -81,8 +81,8 @@
 			}
 		},
 		onShow() {
-			// this.userData = uni.getStorageSync("userData")||{}
-			// this.getBaseData()
+			this.userData = uni.getStorageSync("userData")||{}
+			this.getBaseData()
 		},
 		onPullDownRefresh() {
 			this.getBaseData('refresh')
@@ -141,10 +141,10 @@
 			},
 			//  查看直播详情
 			goToLiveDetail() {
-				uni.navigateTo({
-									url: '/pagesMedia/liveDetail?liveId=' + 1
-								});
-								return;
+				// uni.navigateTo({
+				// 					url: '/pagesMedia/liveDetail?liveId=' + 1
+				// 				});
+				// 				return;
 				if(!this.userData.roleInfos.some(v=>v.menuInfos.some(vv=>vv.label == '开始直播并可选择商品'))){
 					this.$refs.uTips.show({
 						title: '没有授权使用，请联系商户负责人',

pagesMedia/liveDetail.nvue

@@ -1,17 +1,15 @@
 <template>
-	<view 
-		class="container" 
-		:style="'width: '+windowWidth+'px; height: '+windowHeight+'px;'">
+	<view class="container" :style="'width: '+windowWidth+'px; height: '+windowHeight+'px;'">
 		<jhlive 
 			ref="jhlive" 
 			class="jhlive"
-			:sdkAppID="1400430241" 
-			secretKey="941e01ca06e94057de3013b235b67a784ea28b45c43decbd518e765f7d5fc140"
-			userid="123"
-			roomid="1"
-			:isAuthor="false"
-			:linkMic="false" 
-			:avtar="avtar"
+			:sdkAppID="sdkAppID" 
+			:secretKey="secretKey"
+			userid="userId"
+			roomid="roomId"
+			:isAuthor="isAuthor"
+			:linkMic="linkMic" 
+			:avatar="avatar"
 			:num="num"
 			:likes="likes"
 			:name="name" 
@@ -33,15 +31,19 @@
 		components: { jhlive },
 		data() {
 			return {
+        isAuthor: true,
+        linkMic: false,
+        sdkAppID:API.sdkAppID,
+			  secretKey:API.secretKey,
 				windowWidth: 0,
 				windowHeight: 0,
-				userId: '123',
-				roomID: '1',
+				userId: '',
+				roomId: '',
 				liveId: '',
 				num: 0,
 				likes: 0,
 				name:"",
-				avtar:"../static/images/loginLogo.png",
+				avatar:"../static/images/loginLogo.png",
 				userData: {},
 				imReady: false,
 				imMsgs: [],
@@ -53,94 +55,58 @@
 			let info = uni.getSystemInfoSync();
 			this.windowWidth = info.windowWidth;
       this.windowHeight = info.windowHeight;
-			return;
-
-			NET.request(API.getBindedLiveGoods, {
-				liveId: this.liveId
-			}, 'GET').then(res => {
-				let goodsIds = res.data.map(site => {
-					return site.productId
-				}).join(',')
-				this.getAllGoods(goodsIds)
-			}).catch(res => {
-				this.$refs.uTips.show({
-					title: '获取已绑定商品失败',
-					type: 'warning',
-				})
-			})
-			NET.request(API.creatLive, {
-				liveId: this.liveId,
-				liveStatus: 1
-			}, 'GET').then(res => {}).catch(res => {
-				this.$refs.uTips.show({
-					title: '开启直播失败',
-					type: 'warning',
-				})
-			})
-			NET.request(API.startLivePushMessage + options.liveId, {}, 'GET').then(res => {
-
-			}).catch(res => {
-				
-			})
-			NET.request(API.getLiveData + this.liveId, {}, 'POST').then(res => {
-				this.enterRoom({
-					roomID: Number(res.data.roomId),
-					userID: this.userData.userId,
-					template: "grid",
-				});
-				this.avtar = res.data.imgUrl;
-				this.name = res.data.liveName;
-				this.roomID = Number(res.data.roomId);
-				setTimeout(()=>{
-					this.$refs.jhlive&&this.$refs.jhlive.enterRoom();
-				}, 500)
-			}).catch(res => {
-				this.$refs.uTips.show({
-					title: '获取直播设置参数失败',
-					type: 'warning',
-				})
-			})
 		},
 		onReady() {
-			setTimeout(()=>{
-				this.jhim = new Jhim(this.userId, 1400430241, '941e01ca06e94057de3013b235b67a784ea28b45c43decbd518e765f7d5fc140');
+      this.init();	
+		},
+		onUnload() {
+      this.exitRoom();
+		},
+		methods: {
+      init() {
+        NET.request(API.startStream+2, 'GET').then(res => {
+          this.avatar = res.data.imgUrl;
+          this.name = res.data.liveName;
+          this.roomId = Number(res.data.roomId);
+          this.$nextTick(() => this.enterRoom());
+        }).catch(res => {
+          uni.showToast({
+            title: error.data.msg,
+            duration: 2000
+          });
+        })
+      },
+			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.ready)
-					.then(()=>this.jhim.createGroup(this.roomID))
+        this.jhim.login('name', 'avatar').then(()=>this.jhim.createGroup(this.roomId))
+        
 				this.$refs.jhlive&&this.$refs.jhlive.enterRoom();
-			}, 500)		
-		},
-		onUnload() {
-			this.jhim.exitGroup();
-			if(this.isAuthor) this.jhim.dismissGroup();
-			this.jhim.logout();
-
-			// NET.request(API.creatLive, {
-			// 	liveId: this.liveId,
-			// 	liveStatus: 2
-			// }, 'GET').then(res => {}).catch(res => {
-			// 	this.$refs.uTips.show({
-			// 		title: '关闭直播失败',
-			// 		type: 'warning',
-			// 	})
-			// })
-		},
-		methods: {
+			},
+			exitRoom() {
+        if(this.isAuthor) this.jhim.dismissGroup().then(()=>this.jhim.logout());
+        if(!this.isAuthor) this.jhim.exitGroup().then(()=>this.jhim.logout());
+        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) {				
-				let msgObj = {
-				  data: msg,
-				  description: this.userData.headImage,
-				  extension: this.userData.userName
-				};
-
 				this.jhim.sendGroupText(msg).then(msg=>{
 					this.imMsgs.push(msg);
 				});
@@ -154,14 +120,14 @@
 </script>
 
 <style lang="less" scoped>
-	.container {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		align-items: stretch;
-	}
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
 
-	.jhlive {
-		flex: 1;
-	}
+.jhlive {
+  flex: 1;
+}
 </style>

pagesMedia/pickVideo.nvue

@@ -0,0 +1,101 @@
+<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>
+	</view>
+</template>
+
+<script>
+	import jhlive from "@/jhlive/jhlive";
+	const NET = require('@/utils/request')
+	const API = require('@/config/api')
+
+	export default {
+		components: {
+			jhlive
+		},
+		data() {
+			return {   
+        userData: {},
+				orderId: '',
+        goodsList: [],
+        
+        isAuthor: true,
+        linkMic: false,
+        sdkAppID:API.sdkAppID,
+			  secretKey:API.secretKey,
+				windowWidth: 0,
+				windowHeight: 0,
+				userId: '',
+				roomId: '',
+				liveId: '',
+				num: 0,
+				likes: 0,
+				name:"等待用户连接",
+				avatar:"../static/images/loginLogo.png",
+			}
+		},
+		onLoad(options) {
+      this.orderId = options.orderId
+      this.userData = uni.getStorageSync("userData");
+			let info = uni.getSystemInfoSync();
+			this.windowWidth = info.windowWidth;
+      this.windowHeight = info.windowHeight;
+    },
+    onReady() {
+      this.init();
+    },
+		methods: {
+      init() {
+        NET.request(API.creatPickVideo, {orderId: this.orderId}, 'GET').then(res => {
+          this.liveId = res.data.liveId
+          this.roomId = res.data.roomId;
+          this.goodsList = res.data.liveProducResVO
+          this.$nextTick(() => this.enterRoom());
+        }).catch(error => {
+          uni.showToast({
+            title: error.data.msg,
+            duration: 2000
+          });
+        })
+      },
+      enterRoom() {
+				this.$refs.jhlive&&this.$refs.jhlive.enterRoom();
+			},
+			exitRoom() {
+        this.$refs.jhlive&&this.$refs.jhlive.exitRoom();
+			},
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.jhlive {
+  flex: 1;
+}
+</style>