直播样式

jhlive/jhlive.nvue

@@ -9,42 +9,47 @@
 				<text class="top_left_box_text1">{{title}}</text>
 				<text class="top_left_box_text2">{{subtitle}}人观看</text>
 			</view>
+			<image v-if="showCollect" class="top_left_box_collect" :src="collect"></image>
 		</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 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 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 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 class="bottom-box-btns-arr" @click="btnBeautify">
+						<image class="btns-icon" :src="beautyIcon"/>
+						<text v-if="showBtnText" class="btns-text">美颜</text>
+					</view>
+					<!-- <view class="" v-if="isAuthor && showSwitch" @click="btnChangeCamera"> -->
+					<view class="bottom-box-btns-arr" @click="btnChangeCamera">
+						<image class="btns-icon" :src="switchIcon"/>
+						<text v-if="showBtnText" class="btns-text">切换</text>
+					</view>
+					<view class="bottom-box-btns-arr" v-for="(item,index) in btns" :key="index" @click="clickBtns(index)">
+						<image class="btns-icon" :src="item.picture"/>
+						<text v-if="showBtnText" class="btns-text">{{item.title}}</text>
+					</view>
+				</view>
 			</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 imMsgs.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="!imStatus" class="jhim-input-box">
-	      <input 
-	        class="jhim-input"
-	        placeholder="说点什么..." 
-	        placeholder-style="color:#fff" 
-	        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>
 </template>
 
@@ -68,6 +73,11 @@
 			return {
 				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", // 切换摄像头图标
 			};
 		},
 
@@ -81,20 +91,16 @@
 			title: String,
 			avatar: String,
 			subtitle: String,
-			showBeauty: {
-				default: false,
-				type: Boolean
-			}, // 是否开启美颜
-			showSwitch: {
-				default: false,
-				type: Boolean
-			}, // 是否开启美颜
+			showCollect: {default: true,type: Boolean}, // 是否显示收藏
+			showBeauty: {default: true,type: Boolean}, // 是否显示美颜
+			showSwitch: {default: true,type: Boolean}, // 是否显示切换摄像头
+			showBtnText: {default: false,type: Boolean}, // 是否显示功能按钮的文字
 			btns:{
-				// default: [{picture:"../static/images/loginLogo.png",,title:''}],
+				default: [{picture:"../static/images/live-good.png",title:'商品'},{picture:"../static/images/live-support.png",title:'点赞'}],
 				type: Array
 			}, // 按钮数组
 			imMsgs:{
-				default: [],
+				default: [{avatar: '../static/images/loginLogo.png', name: '小鱼小鱼', text:'好吃'}, {avatar: '../static/images/loginLogo.png', name: '小鱼小鱼hh', text:'还想买哈哈哈哈'}],
 				type: Array
 			},
 			imInput:{
@@ -212,10 +218,10 @@
 
 	.liveView {
 		flex: 1;
+		/* z-index: -1; */
 	}
 
 	.top_left_box {
-		width: 300rpx;
 		left: 0;
 		top: 0;
 		margin-left: 10px;
@@ -227,6 +233,8 @@
 		display: flex;
 		flex-direction: row;
 		padding: 5px;
+		justify-content: center;
+		align-items: center;
 	}
 
 	.top_left_box_img {
@@ -235,10 +243,13 @@
 		border-radius: 1000px;
 		background-color: white;
 	}
-
+    .top_left_box_collect {
+		width: 26px;
+		height: 26px;
+	}
 	.top_left_box_text {
 		margin-left: 10px;
-		flex: 1;
+		margin-right: 10px;
 	}
 
 	.top_left_box_text1 {
@@ -251,92 +262,84 @@
 		font-size: 20rpx;
 		color: white;
 	}
-
-
-	.top-right-box {
-		right: 0;
-		top: 0;
-		margin-top: 10px;
-		margin-right: 10px;
-		position: absolute;
-		z-index: 100;
+	
+	.bottom-message {
+		width: 750rpx;
 		display: flex;
 		flex-direction: row;
-	}
-
-	.top-right-box-btn {
-		color: white;
-		margin-left: 5px;
-	}
-
-	.top-right-box-btn-text {
-		color: white;
-	}
-
-
-	.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: 0px;
 	}
-
-	.bottom-left-box-messages {}
-
-	.bottom-left-box-message {}
-
-	.bottom-left-box-input-box {}
-
-	.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;
+	.bottom-box {
+		width: 750rpx;
 		display: flex;
 		flex-direction: row;
+		position: absolute;
+		bottom: 0px;
+		background-color:rgba(0, 0, 0, 0.4);
 	}
-
-	.bottom-right-box-btn {
-		color: white;
-		margin-left: 5px;
-	}
-
-	.bottom-right-box-btn-text {
-		color: white;
-	}
-	
 	.jhim-message-box {
-	  background-color:rgba(0, 0, 0, 0.4);
-	  border-radius: 1000px;
+	  /* position: absolute; */
 	  padding: 5;
+	  bottom: 60px;
+	  left: 5px;
+	  /* display: flex; */
+	  /* z-index: 100; */
 	}
 	.jhim-message {
+	  /* flex: 1; */
 	  display: flex;
 	  flex-direction: row;
 	  align-items: center;
-	  margin-bottom: 5px;
-	}
-	.jhim-message-avatar {
-	  width: 28rpx;
-	  height: 28rpx;
-	  margin-left: 5px;
+	  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;
+	}
+	.jhim-logining-text {
 	  color: #fff;
 	  font-size: 24rpx;
 	}
+	.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>

pagesGood/liveDetail.nvue

@@ -6,14 +6,14 @@
 		    :isAuthor="isAuthor" :linkMic="linkMic" 
 			:avatar="avatar" :subtitle="num" :title="name" 
 			:imMsgs="imMsgs" @onImSend="onImSend" />
-		<view class="popup-open" @click="openPop()">
+		<!-- <view class="popup-open" @click="openPop()"> -->
 			<!-- #ifdef APP-PLUS -->
-			<text class="nvue-iconfont iconzhibo-shangpin" :style="{fontFamily:'nvueIconfont'}">&#xe63f;</text>
+			<!-- <text class="nvue-iconfont iconzhibo-shangpin" :style="{fontFamily:'nvueIconfont'}">&#xe63f;</text> -->
 			<!-- #endif -->
 			<!-- #ifdef MP-WEIXIN -->
-			<text class="iconfont iconzhibo-shangpin"></text>
+			<!-- <text class="iconfont iconzhibo-shangpin"></text> -->
 			<!-- #endif -->
-		</view>
+		<!-- </view> -->
 		<uni-popup ref="popup" animation type="bottom">
 			<view class="popup-box">
 				<view class="popup-close">
@@ -66,7 +66,7 @@
 		},
 		data() {
 			return {
-				isAuthor: false,
+				isAuthor: true,
 				linkMic: false,
 				sdkAppID: API.sdkAppID,
 				secretKey: API.secretKey,
@@ -82,7 +82,7 @@
 				userData: {},
 				enabledIM: false,
 				imReady: false,
-				imMsgs: [],
+				imMsgs:  [{name: '小鱼小鱼', text:'好吃'}, {name: '小鱼小鱼hh', text:'还想买哈哈哈哈'}],
 				videoUrl: '',
 				goodsList: [],
 				goodsIds:[]
@@ -162,7 +162,6 @@
 				});
 			},
 			onImSend(text) {
-				debugger
 				this.imMsgs.push({name: 'xxx', text})
 			}
 		},