修改聊天页面样式

light-application-wx/comps/chat/inputbar/inputbar.wxss

@@ -1,13 +1,13 @@
 /* comps/inputbar/inputbar.wxss */
 .room_bar {
     width: 100%;
-    height: auto;
-    border-top: 1px solid #CFCFCF;
+    height: 180rpx;
+    /* border-top: 1px solid #CFCFCF; */
     position: fixed;
     bottom: 0;
     right: 0;
     z-index: 1;
-    background-color: #FFFFFF;
+    background-color: #F0F4F7;
     transform: translateZ(1000px);
 }
 
@@ -15,6 +15,7 @@
     width: 100%;
     height: 60rpx;
     display: flex;
+    margin-top: 10rpx;
 }
 
 .other_func_X {

light-application-wx/comps/chat/inputbar/suit/main/main.wxml

@@ -1,5 +1,5 @@
 <!--comps/chat/inputbar/suit/main/main.wxml-->
-<import src="../../../toast/toast.wxml" />
+<!-- <import src="../../../toast/toast.wxml" /> -->
 <form class="text-input">
     <!-- <view class="f-row"> -->
     <input class="f news" type="text" value="{{inputMessage}}" cursor-spacing="65" confirm-type="send" bindconfirm="sendMessage" bindinput="bindMessage" bindtap="focus" bindfocus="focus" bindblur="blur" placeholder="输入新消息" placeholder-style="color:#CFCFCF; padding-left:5px;" />

light-application-wx/comps/chat/inputbar/suit/main/main.wxss

@@ -7,21 +7,25 @@
 }
 
 .news {
+    box-sizing: border-box;
     width: 100%;
-    height: 62rpx;
+    height: 80rpx;
     font-size: 14px;
     padding: 0 32rpx;
     display: inline-block;
     margin-top: 10rpx;
-    line-height: 48rpx;
+    line-height: 80rpx;
     position: relative;
     top: 0;
+    background-color: #FFFCF5;
+    border: solid 1rpx #FFFCF5;
+    border-radius: 40rpx;
 }
 
 .send_btn {
-    width: 80rpx;
-    height: 60rpx;
-    line-height: 60rpx;
+    width: 10%;
+    height: 80rpx;
+    line-height: 80rpx;
     font-size: 17px;
     color: #000;
     padding: 0;

light-application-wx/comps/chat/msglist/msglist.wxml

@@ -6,7 +6,7 @@
     <image class="avatar" src="{{ '../../../images/faces/' + item.data }}" style="width:25px; height:25px; margin:0 0 2px 0; float:left;" />
 </template>
 <template name="img">
-    <image class="avatar" src="{{item.msg.data}}" style="width:90px; height:90px; margin:2px auto;" mode="aspectFit" bind:tap="previewImage" data-url="{{item.msg.data}}" />
+    <image class="avatar msg-img" src="{{item.msg.data}}" mode="aspectFit" bind:tap="previewImage" data-url="{{item.msg.data}}" />
 </template>
 <template name="video">
     <video class="msg-video" bindfullscreenchange="onFullscreenchange" src="{{ item.msg.data }}" controls autoplay />
@@ -16,7 +16,7 @@
 </template>
 
 <!-- view 换成 scroll-view效果更好 用view是为了要stopPullDownRefresh -->
-<view scroll-y="true" class="{{view}} wrap {{isIPX?'scroll_view_X': ''}}" bind:tap="onTap" bindscroll="scrollmore" bindscrolltoupper="refresh" upper-threshold='-50' scroll-into-view="{{toView}}">
+<scroll-view scroll-y="true" class="{{view}} wrap {{isIPX?'scroll_view_X': ''}}" bind:tap="onTap" bindscroll="scrollmore" bindscrolltoupper="refresh" upper-threshold='-50' scroll-into-view="{{toView}}">
     <view class="message" wx:for="{{chatMsg}}" wx:key="mid" id="{{item.mid}}">
         <view class="{{item.style == 'self' ? 'row-right' : 'row-left'}}">
             <image class="photo" src="{{item.info.fromInfo.avatarurl || imgPath +'/chat-user.png'}}" wx:if="{{item.style != 'self'}}"></image>
@@ -36,5 +36,5 @@
             <image class="photo" src="{{item.info.fromInfo.avatarurl || imgPath +'/chat-user.png'}}" wx:if="{{item.style == 'self'}}"></image>
         </view>
     </view>
-</view>
+</scroll-view>
 <view style="height: 1px;"></view>

light-application-wx/comps/chat/msglist/msglist.wxss

@@ -1,17 +1,5 @@
 /* comps/msglist/msglist.wxss */
-/*.chat-bg{
-	position:fixed;
-	width: 100%;
-	height: 100%;
-	z-index: 0;
-	top: 50px;
-}*/
-/* .wrap{
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	overflow-y: scroll;
-} */
+
 .scroll_view,
 .scroll_view_change {
     /*width: 100%;
@@ -19,9 +7,12 @@
 	left: 0;
 	top: 0;
 	right: 0;
-	bottom: 150rpx;*/
+    bottom: 150rpx;*/
+    box-sizing: border-box;
+    /* height: 100%; */
     margin-bottom: 174rpx;
-    background-color: #FAFAFA;
+    /* padding-bottom: 174rpx; */
+    background-color: #F0F4F7;
 }
 
 .scroll_view_X,
@@ -35,12 +26,13 @@
 }
 
 .message {
-    width: 92%;
-    min-height: 130rpx;
+    width: 100%;
+    /* min-height: 130rpx; */
     height: auto;
     padding: 0 30rpx;
     /* position: relative; */
-    display: block;
+    /* display: block; */
+    box-sizing: border-box;
 }
 
 .time {
@@ -193,7 +185,7 @@
 }
 
 .row-left .msgbox {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
@@ -201,7 +193,7 @@
 }
 
 .row-right .msgbox {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-end;
@@ -227,7 +219,7 @@
 .user-text {
     box-sizing: border-box;
     font-size: 22rpx;
-    color: #dcdcdc;
+    color: #AAAAAA;
     padding: 10rpx;
 }
 
@@ -243,4 +235,15 @@
     width: 100%;
     overflow-wrap: normal;
     word-break: break-all;
+    font-size: .8em;
+    background-color: #FFFFFF;
+    box-sizing: border-box;
+    padding: 10rpx 25rpx;
+    border-radius: 20rpx;
+}
+
+.msg-img {
+    width: 200rpx;
+    height: 200rpx;
+    /* margin: 2px auto; */
 }

light-application-wx/pages/chat-detail/chat-detail.wxss

@@ -1,6 +1,6 @@
 /* pages/chat-detail/chat-detail.wxss */
 page {
-    background-color: #f0f4f7;
+    background-color: #F0F4F7;
 }
 
 .row-left {

light-application-wx/pages/chat-group-detail/chat-group-detail.wxss

@@ -1,4 +1,6 @@
 /* pages/chat-group-detail/chat-group-detail.wxss */
 page {
-    background-color: #FAFAFA;
+    width: 100%;
+    height: 100%;
+    background-color: #F0F4F7;
 }

light-application-wx/utils/msgstorage.js

@@ -30,7 +30,9 @@ msgStorage.saveReceiveMsg = function (receiveMsg, type) {
                 body: {
                     id: receiveMsg.id,
                     from: receiveMsg.from,
+                    fromInfo: fromInfo,
                     to: receiveMsg.to,
+                    toInfo: toInfo,
                     type: receiveMsg.type,
                     ext: receiveMsg.ext,
                     chatType: receiveMsg.type,