界面优化

im-ui/src/api/enums.js

@@ -6,6 +6,7 @@ const MESSAGE_TYPE = {
 	AUDIO:3,
 	VIDEO:4,
 	RECALL:10,
+	TIP_TIME:20,
 	RTC_CALL: 101,
 	RTC_ACCEPT: 102,
 	RTC_REJECT: 103,

im-ui/src/components/chat/ChatBox.vue

@@ -18,7 +18,7 @@
 							</ul>
 						</div>
 					</el-main>
-					<el-footer height="200px" class="im-chat-footer">
+					<el-footer height="240px" class="im-chat-footer">
 						<div class="chat-tool-bar">
 							<div title="表情" class="icon iconfont icon-biaoqing" ref="emotion" @click="switchEmotionBox()">
 							</div>
@@ -40,9 +40,11 @@
 							</div>
 							<div title="聊天记录" class="el-icon-chat-dot-round" @click="showHistoryBox()"></div>
 						</div>
-						<textarea v-model="sendText" ref="sendBox" class="send-text-area" :disabled="lockMessage" @keydown.enter="sendTextMessage()"></textarea>
+						<textarea v-model="sendText" ref="sendBox" class="send-text-area" 
+						:disabled="lockMessage" @keydown.enter="sendTextMessage()"
+						placeholder="聊点什么吧~"></textarea>
 						<div class="im-chat-send">
-							<el-button type="primary" @click="sendTextMessage()">发送</el-button>
+							<el-button type="primary" size="small" @click="sendTextMessage()">发送</el-button>
 						</div>
 					</el-footer>
 				</el-container>
@@ -502,6 +504,8 @@
 				width: 100%;
 				flex: 1;
 				resize: none;
+				font-size: 16px;
+				color: black;
 				background-color: #f8f8f8 !important;
 				outline-color: rgba(83, 160, 231, 0.61);
 			}

im-ui/src/components/chat/ChatHistory.vue

@@ -5,7 +5,7 @@
 			<el-scrollbar  class="chat-history-scrollbar" ref="scrollbar" id="historyScrollbar" >
 				<ul>
 					<li v-for="(msgInfo,idx) in messages" :key="idx">
-						<chat-message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
+						<chat-message-item :mode="2" :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
 						 :msgInfo="msgInfo" :menu="false">
 						</chat-message-item>
 					</li>

im-ui/src/components/chat/ChatItem.vue

@@ -130,9 +130,9 @@
 			flex-direction: column;
 			padding-left: 10px;
 			text-align: left;
-
+			overflow: hidden;
 			.chat-name {
-				font-size: 16px;
+				font-size: 15px;
 				font-weight: 600;
 				line-height: 30px;
 				white-space: nowrap;
@@ -141,13 +141,13 @@
 
 			.chat-content {
 				display: flex;
-
+				line-height: 30px;
 				.chat-content-text {
-					flex: 2;
+					flex:1;
 					font-size: 14px;
 					white-space: nowrap;
 					overflow: hidden;
-
+					text-overflow: ellipsis;
 					img {
 						width: 30px !important;
 						height: 30px !important;
@@ -155,7 +155,6 @@
 				}
 
 				.chat-time {
-					flex: 1;
 					font-size: 13px;
 					text-align: right;
 					color: #888888;

im-ui/src/components/chat/ChatMessageItem.vue

@@ -1,12 +1,17 @@
 <template>
 	<div class="chat-msg-item">
 		<div class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.RECALL">{{msgInfo.content}}</div>
-		<div class="chat-msg-normal" v-show="msgInfo.type!=$enums.MESSAGE_TYPE.RECALL" :class="{'chat-msg-mine':mine}">
+		<div class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.TIP_TIME">{{$date.toTimeText(msgInfo.sendTime)}}</div>
+		
+		<div class="chat-msg-normal" v-show="msgInfo.type>=0 && msgInfo.type<10" :class="{'chat-msg-mine':mine}">
 			<div class="head-image">
-				<head-image :url="headImage" :id="msgInfo.sendId"></head-image>
+				<head-image :size="40" :url="headImage" :id="msgInfo.sendId"></head-image>
 			</div>
 			<div class="chat-msg-content">
-				<div class="chat-msg-top">
+				<div v-show="mode==1 && msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
+					<span>{{showName}}</span>
+				</div>
+				<div v-show="mode==2" class="chat-msg-top">
 					<span>{{showName}}</span>
 					<span>{{$date.toTimeText(msgInfo.sendTime)}}</span>
 				</div>
@@ -60,6 +65,10 @@
 			RightMenu
 		},
 		props: {
+			mode:{
+				type: Number,
+				default :1 
+			},
 			mine: {
 				type: Boolean,
 				required: true
@@ -161,7 +170,7 @@
 			}
 		},
 		mounted() {
-			//console.log(this.msgInfo);
+			console.log(this.msgInfo);
 		}
 	}
 </script>
@@ -171,15 +180,16 @@
 
 		.chat-msg-tip {
 			line-height: 50px;
+			font-size: 14px;
 		}
 
 		.chat-msg-normal {
 			position: relative;
 			font-size: 0;
-			margin-bottom: 10px;
 			padding-left: 60px;
-			min-height: 68px;
-
+			min-height: 50px;
+			margin-top: 10px;
+			
 			.head-image {
 				position: absolute;
 				width: 40px;
@@ -190,7 +200,7 @@
 
 			.chat-msg-content {
 				text-align: left;
-
+				
 				.chat-msg-top {
 					display: flex;
 					flex-wrap: nowrap;
@@ -210,18 +220,18 @@
 					.chat-msg-text {
 						display: block;
 						position: relative;
-						line-height: 35px;
-						margin-top: 10px;
-						padding: 14px;
+						line-height: 30px;
+						margin-top: 3px;
+						padding: 7px;
 						background-color: rgb(235,235,245);
 						border-radius: 10px;
 						color: black;
 						display: block;
-						font-size: 17px;
+						font-size: 16px;
 						text-align: left;
 						white-space: pre-wrap;
 						word-break: break-all;
-
+						box-shadow: 2px 2px 2px #c0c0f0;	
 						&:after {
 							content: "";
 							position: absolute;
@@ -232,7 +242,7 @@
 							border-style: solid dashed dashed;
 							border-color: rgb(235,235,245) transparent transparent;
 							overflow: hidden;
-							border-width: 13px;
+							border-width: 10px;
 						}
 					}
 
@@ -243,14 +253,16 @@
 						align-items: center;
 
 						.send-image {
-							min-width: 300px;
-							min-height: 200px;
-							max-width: 600px;
-							max-height: 400px;
+							min-width: 200px;
+							min-height: 150px;
+							max-width: 400px;
+							max-height: 300px;
 							border: #dddddd solid 1px;
+							box-shadow: 2px 2px 2px #c0c0c0;
+							border-radius: 6px;
 							cursor: pointer;
 						}
-
+c
 						.send-fail {
 							color: #e60c0c;
 							font-size: 30px;
@@ -270,10 +282,10 @@
 							display: flex;
 							flex-wrap: nowrap;
 							align-items: center;
-							width: 20%;
 							min-height: 80px;
+							box-shadow: 5px 5px 2px #c0c0c0;
 							border: #dddddd solid 1px;
-							border-radius: 3px;
+							border-radius: 6px;
 							background-color: #eeeeee;
 							padding: 10px 15px;
 
@@ -284,9 +296,14 @@
 								font-size: 14px;
 
 								.chat-file-name {
+									display: inline-block;
+									min-width: 150px;
+									max-width: 300px;
 									font-size: 16px;
 									font-weight: 600;
 									margin-bottom: 15px;
+									white-space: pre-wrap;
+									word-break: break-all;
 								}
 							}
 
@@ -349,7 +366,7 @@
 							background-color: rgb(88, 127, 240);
 							color: #fff;
 							vertical-align: top;
-
+							box-shadow: 2px 2px 1px #ccc;
 							&:after {
 								left: auto;
 								right: -10px;

im-ui/src/components/common/FullImage.vue

@@ -1,6 +1,9 @@
 <template>
-	<el-dialog width="40%" :visible.sync="visible"   :before-close="handleClose">
-		<img class="full-img" :src="url" />
+	<el-dialog  width="60%" :visible.sync="visible"   :before-close="handleClose" :modal="true">
+		<div class="image-box">
+			<img class="full-img" :src="url" />
+		</div>
+		
 	</el-dialog>
 </template>
 
@@ -28,8 +31,12 @@
 </script>
 
 <style>
-	.full-img {
-		width: 100%;
-		height: 100%;
+	.image-box{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		
 	}
+	
 </style>

im-ui/src/components/friend/FriendItem.vue

@@ -69,6 +69,9 @@
 				type: Boolean,
 				default: true
 			}
+		},
+		mounted() {
+			console.log(this.menu)
 		}
 	
 	}
@@ -110,7 +113,7 @@
 			text-align: left;
 
 			.friend-name {
-				font-size: 16px;
+				font-size: 15px;
 				font-weight: 600;
 				line-height: 30px;
 				white-space: nowrap;

im-ui/src/components/group/AddGroupMember.vue

@@ -8,7 +8,7 @@
 				<el-scrollbar style="height:400px;">
 					<div v-for="(friend,index) in friends" :key="friend.id">
 						<friend-item v-show="friend.nickName.startsWith(searchText)" :showDelete="false" @click.native="handleSwitchCheck(friend)"
-						 :friend="friend" :index="index" :active="index === activeIndex">
+						 :menu="false" :friend="friend" :index="index" :active="index === activeIndex">
 							<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox" v-model="friend.isCheck"
 							 size="medium"></el-checkbox>
 						</friend-item>
@@ -19,7 +19,9 @@
 				<div class="agm-select-tip"> 已勾选{{checkCount}}位好友</div>
 				<el-scrollbar style="height:400px;">
 					<div v-for="(friend,index) in friends" :key="friend.id">
-						<friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend" :index="index" :active="false" @del="handleRemoveFriend(friend,index)">
+						<friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend" 
+						:index="index" :active="false" @del="handleRemoveFriend(friend,index)"
+						:menu="false">
 						</friend-item>
 					</div>
 				</el-scrollbar>

im-ui/src/components/group/GroupItem.vue

@@ -63,7 +63,7 @@
 			line-height: 65px;
 			white-space: nowrap;
 			overflow: hidden;
-			font-size: 16px;
+			font-size: 14px;
 			font-weight: 600;
 		}
 	}

im-ui/src/store/chatStore.js

@@ -8,7 +8,7 @@ export default {
 
 	mutations: {
 		initChatStore(state) {
-			//state.activeIndex = -1;
+			
 		},
 		openChat(state, chatInfo) {
 			let chat = null;
@@ -120,6 +120,14 @@ export default {
 					return;
 				}
 			}
+			// 间隔大于10分钟插入时间显示
+			let lastTimeMsg = chat.messages.findLast(m=>m.type==MESSAGE_TYPE.TIP_TIME);
+			if(!lastTimeMsg || (lastTimeMsg.sendTime < msgInfo.sendTime - 600*1000)){
+				chat.messages.push({
+					sendTime: msgInfo.sendTime,
+					type: MESSAGE_TYPE.TIP_TIME,
+				});
+			}
 			// 新的消息
 			chat.messages.push(msgInfo);
 			

im-ui/src/view/Chat.vue

@@ -8,7 +8,8 @@
 			</div>
 			<el-scrollbar class="l-chat-list" >
 				<div v-for="(chat,index) in chatStore.chats" :key="index">
-					<chat-item :chat="chat" :index="index" 
+					<chat-item v-show="chat.showName.startsWith(searchText)"
+					:chat="chat" :index="index" 
 					@click.native="handleActiveItem(index)" 
 					@delete="handleDelItem(index)"
 					@top="handleTop(index)"

im-uniapp/common/enums.js

@@ -6,6 +6,7 @@ const MESSAGE_TYPE = {
 	AUDIO:3,
 	VIDEO:4,
 	RECALL:10,
+	TIP_TIME:20,
 	RTC_CALL: 101,
 	RTC_ACCEPT: 102,
 	RTC_REJECT: 103,

im-uniapp/components/chat-item/chat-item.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="chat-item" @click="showChatBox()">
 		<view class="left">
-			<image class="head-image" :src="chat.headImage"  mode="aspectFill"  lazy-load="true" ></image>
+			<image class="head-image" :src="chat.headImage" mode="aspectFill" lazy-load="true"></image>
 			<view v-show="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</view>
 		</view>
 		<view class="chat-right">
@@ -31,9 +31,9 @@
 			}
 		},
 		methods: {
-			showChatBox(){
+			showChatBox() {
 				uni.navigateTo({
-					url: "/pages/chat/chat-box?chatIdx="+this.index
+					url: "/pages/chat/chat-box?chatIdx=" + this.index
 				})
 			}
 		}
@@ -51,10 +51,11 @@
 		padding-right: 10rpx;
 		background-color: white;
 		white-space: nowrap;
+
 		&:hover {
 			background-color: #eeeeee;
 		}
-		
+
 		.left {
 			position: relative;
 			display: flex;
@@ -62,14 +63,14 @@
 			align-items: center;
 			width: 100rpx;
 			height: 100rpx;
-			
-			.head-image{
+
+			.head-image {
 				width: 100%;
 				height: 100%;
 				border-radius: 10%;
 				border: #eeeeee solid 1px;
 			}
-			
+
 			.unread-text {
 				position: absolute;
 				background-color: red;
@@ -90,6 +91,7 @@
 			flex-direction: column;
 			padding-left: 20rpx;
 			text-align: left;
+			overflow: hidden;
 
 			.chat-name {
 				font-size: 30rpx;
@@ -103,15 +105,15 @@
 				display: flex;
 
 				.chat-content-text {
-					flex: 2;
+					flex: 1;
 					font-size: 28rpx;
 					white-space: nowrap;
 					overflow: hidden;
 					line-height: 50rpx;
+					text-overflow: ellipsis;
 				}
 
 				.chat-time {
-					flex: 1;
 					font-size: 26rpx;
 					text-align: right;
 					color: #888888;
@@ -120,51 +122,5 @@
 				}
 			}
 		}
-
-		.mid {
-			margin-left: 20rpx;
-			flex: 2;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-			flex-shrink: 0;
-			overflow: hidden;
-	
-			
-			.show-name {
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				font-size: 36rpx;
-				flex: 3;
-			}
-
-			.msg-text {
-				flex: 2;
-				font-size: 28rpx;
-				color: #888888;
-				white-space: nowrap;
-			}
-		}
-
-		.right {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			align-items: flex-end;
-			height: 80rpx;
-			flex-shrink: 0;
-			overflow: hidden;
-			
-			.msg-time {
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				font-size: 14px;
-				color: #888888;
-				white-space: nowrap;
-			}
-		}
 	}
-
-</style>
+</style>

im-uniapp/components/chat-message-item/chat-message-item.vue

@@ -1,17 +1,18 @@
 <template>
 	<view class="chat-msg-item">
 		<view class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.RECALL">{{msgInfo.content}}</view>
-
-		<view class="chat-msg-normal" v-show="msgInfo.type!=$enums.MESSAGE_TYPE.RECALL"
+		<view class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.TIP_TIME">
+		{{$date.toTimeText(msgInfo.sendTime)}}</view>
+		
+		<view class="chat-msg-normal" v-show="msgInfo.type>=0 && msgInfo.type<10"
 			:class="{'chat-msg-mine':msgInfo.selfSend}">
 			<view class="avatar" @click="onShowUserInfo(msgInfo.sendId)">
 				<image class="head-image" :src="headImage" lazy-load="true"></image>
 			</view>
 
 			<view class="chat-msg-content" @longpress="onShowMenu($event)">
-				<view class="chat-msg-top">
+				<view v-show="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
 					<text>{{showName}}</text>
-					<text>{{$date.toTimeText(msgInfo.sendTime)}}</text>
 				</view>
 
 				<view class="chat-msg-bottom">
@@ -189,7 +190,7 @@
 
 <style scoped lang="scss">
 	.chat-msg-item {
-		padding: 20rpx;
+		padding: 2rpx 20rpx;
 
 		.chat-msg-tip {
 			line-height: 60rpx;
@@ -200,16 +201,16 @@
 			position: relative;
 			font-size: 0;
 			margin-bottom: 15rpx;
-			padding-left: 120rpx;
-			min-height: 120rpx;
+			padding-left: 100rpx;
+			min-height: 80rpx;
 
 			.avatar {
 				position: absolute;
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				width: 100rpx;
-				height: 100rpx;
+				width: 70rpx;
+				height: 70rpx;
 				top: 0;
 				left: 0;
 
@@ -229,42 +230,39 @@
 					display: flex;
 					flex-wrap: nowrap;
 					color: #333;
-					font-size: 14px;
-					line-height: 20px;
+					font-size: 24rpx;
+					line-height: 24rpx;
 
-					text {
-						margin-right: 12px;
-					}
 				}
 
 				.chat-msg-bottom {
 					display: inline-block;
-					padding-right: 120rpx ;
+					padding-right: 80rpx ;
 					.chat-msg-text {		
 						position: relative;
-						line-height: 30px;
-						margin-top: 10px;
-						padding: 10px;
+						line-height: 60rpx;
+						margin-top: 10rpx;
+						padding: 10rpx;
 						background-color: rgb(235,235,245);
-						border-radius: 3px;
+						border-radius: 10rpx;
 						color: #333;
-						font-size: 16px;
+						font-size: 30rpx;
 						text-align: left;
 						display: block;
 						word-break: break-all;
 						white-space: pre-line;
-
+						box-shadow: 2px 2px 2px #c0c0f0;
 						&:after {
 							content: "";
 							position: absolute;
-							left: -10px;
-							top: 13px;
+							left: -20rpx;
+							top: 26rpx;
 							width: 0;
 							height: 0;
 							border-style: solid dashed dashed;
 							border-color: rgb(235,235,245) transparent transparent;
 							overflow: hidden;
-							border-width: 10px;
+							border-width: 20rpx;
 						}
 					}
 
@@ -284,6 +282,7 @@
 								max-width: 400rpx;
 								max-height: 300rpx;
 								border: #dddddd solid 1px;
+								box-shadow: 2px 2px 2px #c0c0c0;
 								cursor: pointer;
 							}
 						}
@@ -309,19 +308,19 @@
 							display: flex;
 							flex-wrap: nowrap;
 							align-items: center;
-							width: 65%;
 							min-height: 80px;
 							border: #dddddd solid 1px;
-							border-radius: 3px;
+							border-radius: 10rpx;
 							background-color: #eeeeee;
 							padding: 10px 15px;
-
+							box-shadow: 2px 2px 2px #c0c0c0;
 							.chat-file-info {
 								flex: 1;
 								height: 100%;
 								text-align: left;
 								font-size: 14px;
-
+								width: 300rpx;
+	
 								.chat-file-name {
 									font-size: 16px;
 									font-weight: 600;
@@ -361,7 +360,7 @@
 			&.chat-msg-mine {
 				text-align: right;
 				padding-left: 0;
-				padding-right: 120rpx;
+				padding-right: 100rpx;
 
 				.avatar {
 					left: auto;
@@ -370,23 +369,15 @@
 
 				.chat-msg-content {
 					text-align: right;
-					.chat-msg-top {
-						flex-direction: row-reverse;
-
-						text {
-							margin-left: 12px;
-							margin-right: 0;
-						}
-					}
-
+					
 					.chat-msg-bottom {
-						padding-left: 120rpx ;
+						padding-left: 80rpx ;
 						padding-right: 0;
 						.chat-msg-text {
 							margin-left: 10px;
 							background-color: rgb(88, 127, 240);
 							color: #fff;
-						
+							box-shadow: 2px 2px 1px #ccc;
 							&:after {
 								left: auto;
 								right: -10px;

im-uniapp/store/chatStore.js

@@ -127,6 +127,15 @@ export default {
 					return;
 				}
 			}
+			// 间隔大于10分钟插入时间显示
+			let lastTimeMsg = chat.messages.findLast(m=>m.type==MESSAGE_TYPE.TIP_TIME);
+			if(!lastTimeMsg || (lastTimeMsg.sendTime < msgInfo.sendTime - 600*1000)){
+				chat.messages.push({
+					id:0,
+					sendTime: msgInfo.sendTime,
+					type: MESSAGE_TYPE.TIP_TIME,
+				});
+			}
 			// 新的消息
 			chat.messages.push(msgInfo);
 			console.log(chat.unreadCount)