优化聊天，修改样式

app.json

 {
   "pages": [
-    "pages/index/index",
     "pages/msg/index/index",
+    "pages/index/index",
+    
     "pages/welcome/welcome",
     "pages/validateForm/validate/validate",
     "pages/validateForm/validateEnd/validateEnd",

components/emoji/emoji.wxss

 .emoji-wrapper {
  width: 100%;
  height: 100%;
-  background-color: #fff;
+  background-color: #f1f1f1;
 }
 /*内容  */
 .emoji-content {
@@ -31,30 +31,34 @@
 .emoji-album {
   width: 100%;
   height: 88rpx;
-  border: 2rpx solid #999;
+  /* border: 2rpx solid #999; */
   box-sizing: border-box;
-  background-color: #fff;
+  background-color: #f1f1f1;
 }
 .emoji-album-left {
   display: inline-block;
   height: 100%;
 }
 .emoji-album-left-img {
-  width:88rpx;
-  height:100%;
-  padding:8rpx 10rpx;
+  width:60rpx;
+  height:60rpx;
+  margin: 14rpx;
   box-sizing:border-box;
-  border-right:2rpx soild #999
+  /* border-right:2rpx soild #999 */
 }
 .emoji-send {
-  width: 88rpx;
-  height: 100%;
-  line-height:88rpx;
-  background-color: #0091e4;
+  height: 60rpx;
+  line-height: 60rpx;
+  background-color: #EA005E;
   text-align: center;
   float: right;
   color: #fff;
+  padding: 0 30rpx;
+  margin-right: 20rpx;
+  margin-top: 8px;
+  border-radius: 10rpx;
+
 }
 .album-active {
-  background-color: #aaa;
+  background-color: #eee;
 }

pages/msg/index/index.js

@@ -265,6 +265,7 @@ let pageConfig = {
     let sessions = Object.keys(rawMessageList)
     let index = 0
     let unQueryUsers=[]
+    let unReadCount=0
     sessions.map(session => {
       let account = session.indexOf('team-') === 0 ? session.slice(5, session.length) : session.slice(4, session.length)
       let isP2p = session.indexOf('p2p-') === 0
@@ -272,7 +273,7 @@ let pageConfig = {
       let sessionCard = (isP2p ? friendCard[account] : groupList[account]) || {}
       let ucard = (isP2p ? userCard[account] : {}) || {}
       let unixtimeList = Object.keys(rawMessageList[session])
-      if (!unixtimeList || account =='684cb79fe92f46877777') {
+      if (!unixtimeList || account == '684cb79fe92f46877777' || account == '684cb79fe92f46888888') {
         return
       }
       let maxTime = Math.max(...unixtimeList)
@@ -305,12 +306,17 @@ let pageConfig = {
           unread: unreadInfo[session] || 0,
           displayTime: msg.time ? formatDate(msg.time) : ''
         })
+        unReadCount += unreadInfo[session] || 0;
       }
     })
     // 排序
     chatList.sort((a, b) => {
       return b.timestamp - a.timestamp
     })
+    let msgTitle = unReadCount > 0 ? '消息(' + unReadCount+')':'消息'
+    wx.setNavigationBarTitle({
+      title: msgTitle
+    })
     return chatList
   },
   getUserNick(obj) {		//obj为我们的对象

pages/msg/index/index.json

 {
   "usingComponents": {},
-  "navigationStyle": "custom"
+  "navigationStyle": "default",
+  "navigationBarBackgroundColor": "#F1F1F1",
+  "navigationBarTitleText": "",
+  "navigationBarTextStyle": "black"
 }
\ No newline at end of file

pages/msg/index/index.wxml

-<view class='title'>
+<!-- <view class='title'>
   <text>消息(20)</text>
-</view>
+</view> -->
+<wxs module="m1">
+  function fn(str, arg) {
+    return str.indexOf(arg);
+  }
+  module.exports.fn = fn;
+</wxs>
 <view class="search">
   <view class="{{showSearchBox==0?'':'hide'}}" bindtap="changeSearchBox" data-type="1">
     <image src="/images/im/search.png"></image>
     <text>搜索</text>
   </view>
-  <input type='text' bindinput='searchInput' class="search-input {{showSearchBox==1?'':'hide'}}" bindblur="changeSearchBox" data-type="0" focus='{{isFocus}}'/>
+  <input type='text' bindinput='searchInput' class="search-input {{showSearchBox==1?'':'hide'}}" bindblur="changeSearchBox" data-type="0" focus='{{isFocus}}' />
 </view>
 <view class="msg-box">
- 
-  <view class="msg-item" wx:if="{{chatList.length != 0}}" wx:for="{{chatList}}" wx:for-item="message" wx:key="message.time" data-session='{{message.session}}' data-account='{{message.account}}' data-session='{{message.session}}' bindtap='switchToChating'>
-    <image class="avater" src="{{message.avatar}}"></image>
-    <view class="msg-content">
-      <view class="item-name">
-        {{message.nick}}
-      </view>
-      <view class="lst-msg">
-        {{message.lastestMsg}}
-      </view>
-    </view>
-    <view class="times">
-      <view class="timer">{{message.displayTime}}</view>
-      <view wx:if="{{message.unread}}">
-        <text class="pops">{{message.unread || ''}}</text>
-      </view>
+
+  <view wx:if="{{chatList.length != 0}}" wx:for="{{chatList}}" wx:for-item="message" wx:key="message.time">
+    <view class="msg-item" data-session='{{message.session}}' data-account='{{message.account}}'  wx:if="{{searchConten=='' || m1.fn(message.nick,searchConten)!=-1}}" data-session='{{message.session}}' bindtap='switchToChating'>
+        <image class="avater" src="{{message.avatar}}"></image>
+        <view class="msg-content">
+          <view class="item-name">
+            {{message.nick}}
+          </view>
+          <view class="lst-msg">
+            {{message.lastestMsg}}
+          </view>
+        </view>
+        <view class="times">
+          <view class="timer">{{message.displayTime}}</view>
+          <view wx:if="{{message.unread}}">
+            <text class="pops">{{message.unread || ''}}</text>
+          </view>
+        </view>
     </view>
   </view>
 </view>
\ No newline at end of file

pages/msg/index/index.wxss

@@ -10,8 +10,8 @@ page{
 }
 .title{
   background: #f1f1f1;
-  padding: 70rpx 30rpx 2rpx 30rpx;
-  font-size: 16pt;
+  padding: 1rpx 30rpx 0rpx 30rpx;
+  font-size: 14pt;
   border-bottom: 2rpx solid #EEE;
 }
 .search{

partials/chating/chating.js

@@ -105,6 +105,17 @@ let pageConfig = {
       })
     }
   },
+  imgYu: function (event) {
+    var that = this;
+    console.log(event.currentTarget.dataset.path)
+    var src = event.currentTarget.dataset.path;//获取data-src
+    var imgList = [src];//获取data-list
+    //图片预览
+    wx.previewImage({
+      current: src, // 当前显示图片的http链接
+      urls: imgList // 需要预览的图片http链接列表
+    })
+  },
   /**
    * 获取群组成员列表
    */
@@ -1035,7 +1046,7 @@ let pageConfig = {
     let self = this
     if (message.sendOrReceive === 'send') { // 自己消息
       wx.showActionSheet({
-        itemList: ['删除', '转发', '撤回'],
+        itemList: ['删除', '撤回'],//'转发',
         success: function (res) {
           switch (res.tapIndex) {
             case 0:
@@ -1062,7 +1073,7 @@ let pageConfig = {
       })
     } else {// 对方消息
       wx.showActionSheet({
-        itemList: ['删除', '转发'],
+        itemList: ['删除'],//'转发'
         success: function (res) {
           switch (res.tapIndex) {
             case 0:
@@ -1266,7 +1277,8 @@ let pageConfig = {
         text: rawMsg.text || '',
         time,
         sendOrReceive,
-        displayTimeHeader
+        displayTimeHeader,
+        url: rawMsg.file ? rawMsg.file.url:''
       }, specifiedObject))
     }
     return messageArr

partials/chating/chating.wxml

@@ -39,11 +39,11 @@
           <view class='video-triangle'></view>
           <view style='color: #000;'>{{message.video.dur / 1000 << 1 >> 1}}''</view>
         </view>
-        <view wx:if="{{message.type === 'audio'}}" class='audio-wrapper' data-audio="{{message.audio}}" catchtap='playAudio' style='background-color:#3387FF;color: #000;'>
+        <view wx:if="{{message.type === 'audio'}}" class='audio-wrapper' data-audio="{{message.audio}}" catchtap='playAudio' style='background-color:#EA005E;color: #000;'>
           <image src='{{iconBase64Map.iconVoiceWhite}}' class='image'></image>
           <text class='text'>{{message.audio.dur / 1000 << 1 >> 1}}''</text>
         </view>
-        <rich-text wx:if="{{message.type === 'image'}}" class='record-chatting-item-text nobg' nodes="{{message.nodes}}" ></rich-text>
+        <rich-text wx:if="{{message.type === 'image'}}" class='record-chatting-item-text nobg' nodes="{{message.nodes}}" bindtap="imgYu" data-path="{{message.url}}"></rich-text>
         <rich-text wx:if="{{message.type === '猜拳' || message.type === '贴图表情'}}" class='record-chatting-item-text nobg' nodes="{{message.nodes}}" ></rich-text>
         <rich-text wx:if="{{message.type === 'text' || message.type === 'file' || message.type === '白板消息' || message.type === '阅后即焚' || message.type === 'robot'}}" class='record-chatting-item-text' nodes="{{message.nodes}}"></rich-text>        
         <rich-text wx:if="{{message.type === 'tip' || message.type === 'notification'}}" class='tip-rich-text' nodes="{{message.nodes}}"></rich-text>
@@ -51,7 +51,7 @@
         <image wx:if="{{message.type !== 'tip' && message.type !== 'notification'}}" src='{{loginAccountLogo}}' catchtap='switchToMyTab' class='record-chatting-item-img'></image>
       </view>
       <view wx:if="{{message.sendOrReceive == 'receive'}}" class='{{message.sendOrReceive == "receive" ? "record-chatting-item other" : ""}}' style='justify-content: {{message.type === "tip" || message.type === "notification" ? "center" : "flex-start"}}' data-message="{{message}}"  bindlongpress='showEditorMenu'>
-        <image wx:if="{{message.type !== 'tip' && message.type !== 'notification'}}" catchtap='switchPersonCard' data-account='{{message.from}}' src='{{personList[message.from] && personList[message.from].avatar || defaultUserLogo}}' class='record-chatting-item-img'></image>
+        <image wx:if="{{message.type !== 'tip' && message.type !== 'notification'}}" catchtap='switchPersonCard' data-account='{{message.from}}' src='{{(personList[message.from] && personList[message.from].avatar) || (userCard[message.from] && userCard[message.from].avatar) || defaultUserLogo}}' class='record-chatting-item-img'></image>
         <text wx:if="{{message.type !== 'tip' && message.type !== 'notification' && message.type !== 'image' && message.type !== 'video' && message.type !== 'geo' && message.type !== '猜拳' && message.type !== '贴图表情' }}" class='left-triangle'></text>
         <view wx:if="{{message.type === 'geo'}}" data-geo='{{message.geo}}' class='small-map-wrapper' catchtap='fullScreenMap'>
           <image src="../../images/map.png" class='small-geo-img'></image>
@@ -73,16 +73,17 @@
     </view>
    </view>
   <!--底部输入框  -->
-  <view wx:if="{{chatType === 'p2p' || !currentGroup.isCurrentNotIn}}" class='chatinput-wrapper' style='margin-bottom: {{focusFlag ? 20 : 0}}rpx;' catchtap='stopEventPropagation'>
+  <view wx:if="{{chatType === 'p2p' || !currentGroup.isCurrentNotIn}}" class='chatinput-wrapper' style='margin-bottom:0rpx;' catchtap='stopEventPropagation'>
     <view class='chatinput-content'>
       <image src='{{sendType == 0 ? "../../images/voice.png" : "../../images/keyboard.png"}}' class='chatinput-img' catchtap='switchSendType'></image>
-      <input style='margin-bottom: 20rpx;' wx:if="{{sendType == 0}}" value='{{inputValue}}' focus='{{focusFlag}}' bindinput='inputChange' bindfocus='inputFocus' bindblur='inputBlur' bindconfirm='inputSend' class='chatinput-input'  placeholder="输入文字" confirm-type='send'></input>
+      <input style='margin-bottom: 20rpx;' wx:if="{{sendType == 0}}" value='{{inputValue}}' focus='{{focusFlag}}' bindinput='inputChange' bindfocus='inputFocus' bindblur='inputBlur' bindconfirm='inputSend' class='chatinput-input'  placeholder="" confirm-type='send'></input>
       <!-- <button wx:if="{{sendType == 1}}" class="{{ isLongPress ? 'chatinput-voice-mask chatinput-voice-mask-hover' : 'chatinput-voice-mask' }}" hover-class="none" catchtouchstart='longPressStart' catchlongpress='voiceBtnLongTap' catchtouchend='longPressEnd'>按住说话</button> -->
       <button wx:if="{{sendType == 1}}" class="{{ isLongPress ? 'chatinput-voice-mask chatinput-voice-mask-hover' : 'chatinput-voice-mask' }}" hover-class="none" catchtouchstart='longPressStart' catchtouchend='longPressEnd'>
         {{isLongPress ? '松开结束' : '按住说话'}}
       </button>
-      <image src='../../images/more.png' catchtap='toggleMore' class='chatinput-img fr'></image>
-      <image src='../../images/emoji.png' catchtap='toggleEmoji' class='chatinput-img fr emoji'></image>
+      <image src='../../images/emoji.png' catchtap='toggleEmoji' class='chatinput-img'></image>
+      <image src='../../images/more.png' catchtap='toggleMore' class='chatinput-img emoji'></image>
+     
     </view>
     <view wx:if="{{emojiFlag}}" class='chatinput-subcontent'>
       <component-emoji bind:EmojiClick="emojiCLick" bind:EmojiSend="emojiSend"></component-emoji>
@@ -90,32 +91,41 @@
     <view wx:if="{{moreFlag}}" class='more-subcontent'>
       <view style='display:flex;justify-content: space-between;'>
         <view class='more-subcontent-item' catchtap='chooseImageToSend'>
-          <image src="../../images/photo.png" class='image'></image>
+          <view class="more-item-imgbox">
+            <image src="../../images/photo.png" class='image'></image>
+          </view>
           <text class='text'>相册</text>
         </view>
         <view class='more-subcontent-item' catchtap='chooseImageOrVideo'>
-          <image src="../../images/shoot.png" class='image'></image>
+          <view class="more-item-imgbox">
+            <image src="../../images/shoot.png" class='image'></image>
+          </view>
           <text class='text'>拍摄</text>
         </view>
+        <view class='more-subcontent-item' catchtap='choosePosition'>
+          <view class="more-item-imgbox">
+            <image src="../../images/location.png" class='image'></image>
+          </view>
+          <text class='text'>位置</text>
+        </view>
+        <view class='more-subcontent-item' catchtap='videoCall'>
+          <view class="more-item-imgbox">
+            <image src="../../images/shipin.png" class='image'></image>
+          </view>
+          <text class='text'>视频通话</text>
+        </view>
         <!-- <view class='more-subcontent-item'><view class='image'></view><text class='text'>文件</text></view> -->
-        <view class='more-subcontent-item' catchtap='showTipMessagePanel'>
+        <!-- <view class='more-subcontent-item' catchtap='showTipMessagePanel'>
           <image src="../../images/tip.png" class='image'></image>
           <text class='text'>Tip</text>
         </view>
         <view class='more-subcontent-item' catchtap='sendFingerGuess'>
           <image src="../../images/morra.png" class='image'></image>
           <text class='text'>猜拳</text>
-        </view>
+        </view> -->
       </view>
       <view style='display:flex;justify-content: space-between;'>
-        <view class='more-subcontent-item' catchtap='choosePosition'>
-          <image src="../../images/location.png" class='image'></image>
-          <text class='text'>位置</text>
-        </view>
-        <view class='more-subcontent-item' catchtap='videoCall'>
-          <image src="../../images/location.png" class='image'></image>
-          <text class='text'>视频通话</text>
-        </view>
+        
         <view class='more-subcontent-item'><view class='image' style='background-color: transparent;'></view><text class='text'></text></view>
         <view class='more-subcontent-item'><view class='image' style='background-color: transparent;'></view><text class='text'></text></view>
       </view>

partials/chating/chating.wxss

@@ -42,7 +42,7 @@ page{
 /*聊天输入框  */
 .chatinput-wrapper {
   width: 100%;
-  background-color: #fff;
+  background-color: rgb(247,247,247);
   border: 2rpx solid #ccc;
   position: fixed;
   bottom: 0;
@@ -51,39 +51,42 @@ page{
 .chatinput-content {
   width: 100%;
   height: 100rpx;
+  display: flex;
 }
 .chatinput-img{
-  width: 60rpx;
-  height: 60rpx;
+  width: 48rpx;
+  height: 48rpx;
   border-radius: 100%;
-  margin: 20rpx 20rpx;
-  display: inline-block;
+  margin: 26rpx 20rpx;
 }
 .chatinput-img.emoji{
-  margin-right: 0;
+  /* margin-right: 0; */
+  margin-left: 0;
 }
 .chatinput-img:active {
   opacity: .6;
 }
  .chatinput-input {
-  width: 466rpx;
+  /* width: 466rpx; */
+  flex: 1;
   min-height: 72rpx;
-  border-radius: 12rpx;
-  border: 1px solid #ccc;
+  border-radius: 4rpx;
+  /* border: 1px solid #ccc; */
   margin-top: 15rpx;
   display: inline-block;
   vertical-align:top;
   box-sizing:border-box;
   padding-left: 20rpx;
   font-size: 30rpx;
+  background: #FFF;
 }
 .chatinput-voice-mask {
-  width: 466rpx;
+ flex: 1;
   height: 76rpx;
   line-height: 76rpx;
   display: inline-block;
-  border-radius: 12rpx;
-  border: 1px solid #ccc;
+  border-radius: 4rpx;
+  /* border: 1px solid #ccc; */
   margin-top: 12rpx;
   vertical-align:top;
   box-sizing:border-box;
@@ -93,6 +96,7 @@ page{
   color: #333336;
   background-color: #fff;
   letter-spacing: 4rpx;
+  padding: 0;
 }
 .chatinput-voice-mask-hover {
   background-color: #cecece;
@@ -104,24 +108,30 @@ page{
  height: 470rpx;
  background-color: #999;
 }
-.fr {
-  float: right;
-}
+
 /* more-subcontent */
 .more-subcontent {
   padding: 40rpx 30rpx;
-  border:2rpx solid #ccc;
+  border:2rpx solid #eee;
 }
 .more-subcontent .more-subcontent-item {
   display:flex;
   flex-direction:column;
   margin-bottom: 30rpx;
 }
-.more-subcontent .more-subcontent-item .image {
+.more-subcontent .more-subcontent-item .more-item-imgbox image {
+  width: 54rpx;
+  height: 54rpx;
+}
+.more-subcontent .more-subcontent-item .more-item-imgbox{
+  display: flex;
   width:112rpx;
   height:112rpx;
-  border-radius:50%;
+  align-items: center;
   margin-bottom: 12rpx;
+  border-radius: 16rpx;
+  background: #FFF;
+  justify-content: center;
 }
 .more-subcontent .more-subcontent-item .text {
   font-size: 24rpx;
@@ -161,18 +171,22 @@ page{
 .record-chatting-item-text {
   max-width: 70%;
   border-radius: 8rpx;
-  background-color: #3387FF;
+  background-color: #EA005E;
   padding: 16rpx;
   box-sizing:border-box;
   word-wrap:break-word;
   overflow: hidden;
-  font-size: 32rpx;
-  line-height: 48rpx;
+  font-size: 26rpx;
+  line-height: 44rpx;
 }
 .record-chatting-item-text.nobg {
-  background: transparent;
+  ackground: transparent;
   margin-left: 20rpx;
   margin-right: 20rpx;
+  border-radius: 10rpx;
+  border: 1px solid #eee;
+  padding: 0;
+
 }
 /* tip消息富文本 */
 .tip-rich-text {
@@ -202,7 +216,7 @@ page{
 .left-triangle{
   height:0px;
   width:0px;
-  border-width:20rpx;
+  border-width:14rpx;
   border-style:solid;
   border-color:transparent #fff transparent transparent;
   margin-top: 20rpx;
@@ -210,15 +224,15 @@ page{
 .right-triangle{
   height:0px;
   width:0px;
-  border-width:20rpx;
+  border-width:14rpx;
   border-style:solid;
-  border-color:transparent transparent transparent #3387FF;
+  border-color:transparent transparent transparent #EA005E;
   margin-top: 20rpx;
 }
 .video-triangle {
   height:0px;
   width:0px;
-  border-width:30rpx;
+  border-width:14rpx;
   border-style:solid;
   border-color:transparent transparent transparent #777;
   margin-top: 20rpx;
@@ -286,7 +300,7 @@ page{
 
 .audio-wrapper {
   background-color:#fff;
-  border-radius:28rpx;
+  border-radius:10rpx;
   display:flex;
   justify-content:space-between;
   padding:0 20rpx;
@@ -295,8 +309,8 @@ page{
   margin-left:-2px;
 }
 .audio-wrapper .image {
-  width:70rpx;
-  height:70rpx;
+  width:48rpx;
+  height:48rpx;
   align-self:center;
 }
 .audio-wrapper .text {

utils/util.js

@@ -410,9 +410,12 @@ function generateBigEmojiImageFile(content) {
 function generateImageNode(file) {
   // console.log(file)
   let width = 0, height = 0
-  if (file.w > 250) {
-    width = 200
-    height = file.h / (file.w / 200)
+  if (file.w > 75) {
+    width = 75
+    height = file.h / (file.w / 75)
+  } else if(file.w > 150) {
+    height = 150
+    width = file.w / (file.h / 150)
   } else {
     width = file.w
     height = file.h
@@ -423,7 +426,8 @@ function generateImageNode(file) {
     attrs: {
       width: `${width}rpx`,
       height: `${height}rpx`,
-      src: file.url
+      src: file.url,
+      style:'border-radius:10rpx'
     }
   })
   return richTextNode