IM界面优化

chat/components/chat/inputbar/inputbar.css

@@ -20,10 +20,10 @@
 }
 
 .other_func image {
-	width: 54px;
-	height: 54px;
+	width: 116rpx;
+	height: 116rpx;
 	display: block;
-	margin-bottom: 5px;
+	margin-bottom: 10rpx;
 }
 
 .open_emoji,
@@ -32,8 +32,8 @@
 .v-record {
 	margin-left: 48rpx;
 	text-align: center;
-	color: #b7b7b7;
-    font-size: 13px;
+	color: #000;
+    font-size: 26rpx;
 }
 
 
@@ -59,7 +59,7 @@
 	height: 145px;
 	padding-top: 10px;
 	display: block;
-	background-color: #f2f2f2;
+	background-color: #fff;
 }
 
 

chat/components/chat/inputbar/inputbar.vue

@@ -1,9 +1,5 @@
 <template>
   <view class="room_bar">
-    <chatSuitEmoji
-      ref="chatSuitEmoji"
-      @newEmojiStr="emojiAction"
-    ></chatSuitEmoji>
     <chatSuitMain
       ref="chatSuitMain"
       :username="username"
@@ -12,7 +8,11 @@
       @openEmoji="openEmoji"
       @openRecordModal="toggleRecordModal"
       @openFunModal="openFunModal"
-    ></chatSuitMain>
+    ></chatSuitMain>
+	<chatSuitEmoji
+	  ref="chatSuitEmoji"
+	  @newEmojiStr="emojiAction"
+	></chatSuitEmoji>
     <chatSuitImage
       ref="chatSuitImage"
       :username="username"

chat/components/chat/inputbar/suit/main/main.css

@@ -7,19 +7,22 @@
 
 .news {
 	width: 100%;
-	font-size: 14px;
-	padding: 0 10px;
+	font-size: 28rpx;
+	padding: 10rpx 24rpx;
 	display: inline-block;
-	margin: 10rpx;
-	line-height: 48rpx;
+	margin: 17rpx 10rpx 17rpx 0;
+	line-height: 50rpx;
 	position: relative;
 	top: 0;
-	background-color: #fff;
-	border-radius: 16px;
+	background-color: #F2F2F2;
+	border-radius: 6rpx;
 	flex: 1;
 	max-height: 200rpx;
-	min-height: 60rpx;
-}
+	min-height: 70rpx;
+	color: #7A7B7F;
+	box-sizing: border-box;
+}
+.placeholder{color: #7A7B7F;}
 
 .send_btn {
 	width: 80rpx;
@@ -38,7 +41,8 @@
 	/* height:100rpx; */
 	display: flex;
 	align-items: center;
-	background-color: #f2f2f2;
+	background-color: #fff;
+	padding-right: 10rpx;
 }
 
 .send-btn-style {
@@ -59,11 +63,11 @@
 }
 
 .icon-mic {
-	width: 22px;
-	height: 22px;
-	padding: 5px 10px;
+	width: 53rpx;
+	height: 53rpx;
+	padding: 0 10rpx;
 	position: relative;
-	top: 2px;
+	/* top: 2px; */
 }
 
 .f-row-x {

chat/components/chat/inputbar/suit/main/main.vue

@@ -7,7 +7,7 @@
 				<image class="icon-mic" src="../../../../../static/voice.png" @tap="openRecordModal"></image>
 			</view>
 			<!-- 输入框 -->
-			<textarea class="f news" type="text" cursor-spacing="65" confirm-type='done' v-model="inputMessage"
+			<textarea placeholder="请输入您要咨询的问题" placeholder-class="placeholder" class="f news" type="text" cursor-spacing="65" confirm-type='done' v-model="inputMessage"
 				@confirm="sendMessage" @input="bindMessage" @tap="focus" @focus="focus" @blur="blur"
 				:confirm-hold="isIPX ? true : false" auto-height :show-confirm-bar='false' maxlength="300" />
 			<view>

chat/components/chat/msglist/msglist.css

@@ -12,7 +12,8 @@
 	right: 0;
 	bottom: 170rpx; */
 	background-color: #FAFAFA;
-	padding-bottom: 100rpx;
+	padding-bottom: 130rpx;
+	padding-top: 124rpx;
 }
 
 .scroll_view_X,
@@ -26,14 +27,21 @@
 	left: 40px;
 	right: 40px;
 	color: #bbb;
-}
+}
+
+.chat-top{position: fixed;top: 0;left: 0;right: 0;padding: 30rpx;justify-content: space-between;background-color: #fafafa;z-index: 50;}
+.chat-top .li{width: 214rpx;height: 64rpx;background: #FFFFFF;border-radius: 32rpx;font-size: 30rpx;color: #000;justify-content: center;}
+.chat-top .li image{width: 48rpx;height: 48rpx;}
+
 .message {
 	width: 100%;
 	height: auto;
 	padding: 0 30rpx;
 	position: relative;
-
+	box-sizing: border-box;
 }
+
+.main-time{font-size: 24rpx;color: #888;margin: 40rpx 0;text-align: center;}
 
 .time {
 	margin: 14rpx 0;
@@ -58,8 +66,8 @@
 }
 
 .avatar {
-	width: 72rpx;
-	height: 72rpx;
+	width: 76rpx;
+	height: 76rpx;
 	margin: 0 20rpx 0 0;
 	border-radius: 6rpx;
 	float: left;
@@ -67,17 +75,16 @@
 
 .msg {
 	display: inline-block;
-	padding: 20rpx;
+	padding: 15rpx 20rpx;
 	max-width: calc(85% - 80rpx);
 	min-height: 40rpx; 
-	font-size: 24rpx;
+	font-size: 30rpx;
 	/*overflow: hidden;*/
 	text-align: left;
 	word-break: break-all;
 	background-color: #fff;
-	border-radius: 26rpx;
+	border-radius: 16rpx;
 	position: relative;
-	margin-top: 24rpx;
 }
 
 .msg .msg_poprightarrow {
@@ -85,7 +92,8 @@
 	right: -10rpx;
 	height: 18rpx;
 	width: 18rpx;
-	margin-top: -10rpx;
+	margin-top: -10rpx;
+	display: none;
 }
 
 .msg .msg_popleftarrow{
@@ -93,12 +101,13 @@
 	left: -14rpx;
 	height: 18rpx;
 	width: 18rpx;
-	margin-top: -10rpx;
+	margin-top: -10rpx;
+	display: none;
 }
 
 .msg .msg-text {
-	line-height: 40rpx;
-	font-size: 32rpx;
+	line-height: 1.5;
+	font-size: 30rpx;
 	margin: 0;
 }
 
@@ -126,8 +135,8 @@
 }
 
 .self .msg {
-	background-color: #0873DE;
-	color: #fff;
+	background-color: #C7E7FF;
+	color: #000;
 }
 
 .self .msg:before {
@@ -152,3 +161,6 @@
 .show{
 	display: block;
 }
+
+.lixian{font-size: 24rpx;color: #888;justify-content: center;margin-top: 50rpx;}
+.lixian button{color: #367BD7;font-size: 24rpx;}

chat/components/chat/msglist/msglist.vue

@@ -13,14 +13,29 @@
 			<u-action-sheet :list="list" @click="onMenuClick" v-model="showRpt"></u-action-sheet>
 			<u-action-sheet :list="typeList" @click="onReportTypeClick" v-model="showRptType"></u-action-sheet>
 		</view>
-		<!-- <view class="tips">本应用仅用于环信产品功能开发测试，请勿用于非法用途。任何涉及转账、汇款、裸聊、网恋、网购退款、投资理财等统统都是诈骗，请勿相信！</view> -->
-		<view @longtap="onMsgTap(item)" class="message" v-for="item in chatMsg" :key="item.mid" :id="item.mid">
+		<!-- <view class="tips">本应用仅用于环信产品功能开发测试，请勿用于非法用途。任何涉及转账、汇款、裸聊、网恋、网购退款、投资理财等统统都是诈骗，请勿相信！</view> -->
+		<view class="chat-top ddflex">
+			<view class="li ddflex">
+				<image src="../../../static/chat_wx.png"></image>
+				<view>加微信</view>
+			</view>
+			<view class="li ddflex">
+				<image src="../../../static/chat_dh.png"></image>
+				<view>打电话</view>
+			</view>
+			<view class="li ddflex">
+				<image src="../../../static/chat_wy.png"></image>
+				<view>进微页</view>
+			</view>
+		</view>
+		<view @longtap="onMsgTap(item)" class="message" v-for="item in chatMsg" :key="item.mid" :id="item.mid">
+			<view class="main-time">{{handleTime(item)}}</view>
 			<view class="main" :class="item.style">
-				<view class="user">
-					<!-- yourname：就是消息的 from -->
+				<!-- yourname：就是消息的 from -->
+				<!-- <view class="user">
 					<text v-if="!item.style"
 						class="user-text">{{ showMessageListNickname(item) + ' ' + handleTime(item)}}</text>
-				</view>
+				</view> -->
 				<image class="avatar" :src="showMessageListAvatar(item)" />
 				<view class="msg">
 					<image class="err" :class="(item.style == 'self' && item.isFail) ?  'show' : 'hide'"
@@ -31,7 +46,7 @@
 					<image v-if="item.style == ''" src="../../../static/popleftarrow2x.png" class="msg_popleftarrow" />
 					<view v-if="item.msg.type == 'img' || item.msg.type == 'video'">
 						<image v-if="item.msg.type == 'img'" class="avatar" :src="item.msg.data"
-							style="width:90px; height:120px; margin:2px auto;" mode="aspectFit" @tap="previewImage"
+							style="width:90px; margin:2px auto;" mode="widthFix" @tap="previewImage"
 							:data-url="item.msg.data" />
 						<video v-if="item.msg.type == 'video'" :src="item.msg.data" controls style="width:300rpx;" />
 					</view>
@@ -49,7 +64,9 @@
 					</view>
 				</view>
 			</view>
-		</view>
+		</view>
+		<view class="lixian ddflex">会话已结束，用时 05:30</view>
+		<view class="lixian ddflex">当前顾问处于离线状态，<button open-type="contact">点此联系智能客服</button></view>
 	</view>
 	<!-- <view style="height: 1px;"></view> -->
 </template>

chat/components/chat/msglist/type/audio/audio.css

@@ -12,13 +12,14 @@
 }
 
 .audio-player .controls image {
-	height: 48rpx;
-	width: 30rpx;
-	margin: 0 8rpx 0 100rpx;
+	height: 32rpx;
+	width: 20rpx;
+	margin: 0 13rpx 0 50rpx;
 }
 
 .audio-player .time {
-	font-size: 34rpx;
+	font-size: 24rpx;
+	color: #666;
 	line-height: 40rpx;
 	flex: 1;
 	text-align: left;

chat/conversation/chat.css

@@ -97,12 +97,13 @@ page{
 	box-sizing: border-box; 
 	height: 100%;
 	position: fixed;
-	overflow: hidden;
+	overflow: hidden;
+	background-color: #fff;
 }
 
 .chat_list {
 	width: 100%;
-	height: 128rpx;
+	height: 168rpx;
 	overflow: hidden;
 }
 .tap_mask{
@@ -111,8 +112,8 @@ page{
 }
 .list_box{
 	margin: 0 32rpx;
-	height: 126rpx;
-	border-bottom: 0.5px #E5E5E5 solid;
+	height: 168rpx;
+	/* border-bottom: 0.5px #E5E5E5 solid; */
 	display: flex;
 }
 .list_left {
@@ -136,7 +137,8 @@ page{
 .list_pic image {
 	display: block;
 	width: 88rpx;
-	height: 88rpx;
+	height: 88rpx;
+	border-radius: 50%;
 }
 .list_user,.list_user2{
 	font-size: 34rpx;
@@ -147,24 +149,27 @@ page{
 	width: 350rpx;
 	display: inline-block;
 	text-overflow: ellipsis;
-}
+}
+.list_users{font-size: 32rpx;color: #333;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
 .list_user2{
 	top: 40rpx !important;
 }
 .em-msgNum {
 	position: absolute;
 	left: 84rpx;
-	top: 20rpx;
+	top: 32rpx;
 	min-width: 28rpx;
-	border-radius: 14rpx;
-	background: #f04134;
+	border-radius: 17rpx;
+	background: #FF5700;
+	border: 2rpx solid #fff;
 	color: #fff;
 	line-height: 28rpx;
 	font-size: 25rpx;
 	text-align: center;
 	padding: 3rpx;
 	z-index: 999;
-}
+}
+.list_texts{border-bottom: 1rpx solid #DEDEDE;flex-direction: column;padding: 37rpx 0;height: 93rpx;}
 .list_word {
 	height: 40rpx;
 	display: block;
@@ -177,23 +182,26 @@ page{
     font-size: 24rpx;
     color: #9B9B9B;
     top: 66rpx;
-}
+}
+.list_words{font-size: 24rpx;color: #A1A1A1;margin-top: 5rpx;}
 .list_right {
 	width: 240rpx;
 	height: 100%;
 	float: right;
 	font-size: 24rpx;
 	text-align: right;
-}
-.list_right text:first-child {
+}
+.list_rights{font-size: 24rpx;text-align: right;}
+
+.list_right text:first-child,.list_rights text:first-child {
 	display: block;
-	line-height: 60rpx;
+	line-height: 40rpx;
 	margin: 12rpx auto auto auto;
 }
-.list_right text:last-child {
+.list_right text:last-child,.list_rights text:last-child {
 	height: 40rpx; 
-	font-size: 26rpx;
-	color: #CFCFCF;
+	font-size: 24rpx;
+	color: #A1A1A1;
 	display: block;
 	margin-top: 4rpx;
 }

chat/conversation/conversation.vue

@@ -1,19 +1,19 @@
 <template>
 	<view>
-		<view>
+		<!-- <view>
 			<view class="search" v-if="search_btn">
 				<view @tap="openSearch">
 					<icon type="search" size="12"></icon>
 					<text>搜索</text>
 				</view>
 			</view>
-		</view>
+		</view> -->
 
 		<!-- <view class="chat_list_wraper" > -->
 		<scroll-view scroll-y="true" :class="
       'chat_list_wraper ' + (gotop ? (isIPX ? 'goTopX' : 'goTop') : 'goback')
     " :style="'padding-bottom: ' + (isIPX ? '270rpx' : '226rpx')">
-			<view class="search_input" v-if="search_chats">
+			<!-- <view class="search_input" v-if="search_chats">
 				<view>
 					<icon type="search" size="12"></icon>
 					<input placeholder="搜索" placeholder-style="color:#9B9B9B;line-height:21px;font-size:15px;"
@@ -22,7 +22,7 @@
 					<icon type="clear" size="12" @tap.stop="clearInput" v-if="show_clear"></icon>
 				</view>
 				<text @tap="cancel">取消</text>
-			</view>
+			</view> -->
 			<view v-for="(item, index) in conversationList" :key="index" class="chat_list" :data-item="item"
 				@tap.stop="del_chat" @longpress="longpress">
 				<swipe-delete>
@@ -50,8 +50,33 @@
 					</view> -->
 
 					<view class="tap_mask" @tap.stop="into_chatRoom" :data-item="JSON.stringify(item)">
-						<!-- 消息列表 -->
-						<view class="list_box">
+						<!-- 消息列表 -->
+						<view class="list_box ddflex">
+							<view class="list-left fflex ddflex">
+								<view class="list_pic">
+									<view class="em-msgNum" v-if="item.unReadCount > 0  && !pushConfigData.includes(item.chatType === 'chat' ? item.username : item.info.to)">{{ item.unReadCount > 99 ? '99+':item.unReadCount}}</view>
+									<image :src="showConversationAvatar(item)"></image>
+								</view>
+								<view class="list_texts fflex">
+									<view class="ddflex">
+										<text class="list_users fflex">{{ showConversationName(item) }}</text>
+										<view class="list_rights">
+											<text :data-username="item.username">{{ handleTime(item) }}</text>
+										</view>
+									</view>
+									<view>
+										<text class="list_words" v-if="item.msg.data[0].data">
+											{{item.msg.data[0].data}}
+										</text>
+										<text class="list_words" v-else-if="item.msg.type == 'img'">[图片]</text>
+										<text class="list_words" v-else-if="item.msg.type == 'audio'">[语音]</text>
+										<text class="list_words" v-else-if="item.msg.type == 'file'">[附件]</text>
+										<text class="list_words" v-else="item.msg.type == 'video'">[视频]</text>
+									</view>
+								</view>
+							</view>
+						</view>
+						<!-- <view class="list_box">
 							<view class="list_left" :data-username="item.username">
 								<view class="list_pic">
 									<view class="em-msgNum"
@@ -75,7 +100,7 @@
 							<view class="list_right">
 								<text :data-username="item.username">{{ handleTime(item) }}</text>
 							</view>
-						</view>
+						</view> -->
 					</view>
 				</swipe-delete>
 			</view>
@@ -113,7 +138,24 @@
 				unReadNoticeNum: 0,
 				messageNum: 0,
 				unReadTotalNotNum: 0,
-				conversationList: [],
+				conversationList: [
+					{
+						unReadCount: 5,
+						chatType: 'chat',
+						username: 'Lancy',
+						info: {
+							to: 'Bin'
+						},
+						msg: {
+							type: 'img',
+							data: [
+								{
+									data: '666'
+								}
+							]
+						}
+					}
+				],
 				show_clear: false,
 				member: "",
 				isIPX: false,