聊天页面加时间显示

pages/chat/index.less

@@ -13,6 +13,30 @@
       margin-bottom: 42rpx;
       margin-top: 20rpx;
 
+      .contentBox {
+        .time {
+          width: 200rpx;
+          margin-bottom: 10rpx;
+          font-size: 22rpx;
+          color: #969696;
+        }
+
+        .message {
+          max-width: 80%;
+          padding: 20rpx;
+          box-sizing: border-box;
+          font-size: 28rpx;
+          line-height: 42rpx;
+          border-radius: 14rpx;
+          background-color: #F2F6FC;
+          word-break: break-all;
+        }
+
+        .msgImg {
+          max-width: 200rpx;
+        }
+      }
+
       .avatar {
         width: 80rpx;
         height: 80rpx;
@@ -20,21 +44,6 @@
         background-color: rgb(238, 238, 238);
       }
 
-      .message {
-        max-width: 80%;
-        padding: 20rpx;
-        box-sizing: border-box;
-        font-size: 28rpx;
-        line-height: 42rpx;
-        border-radius: 14rpx;
-        background-color: #F2F6FC;
-        word-break: break-all;
-      }
-
-      .msgImg {
-        margin-right: 24rpx;
-        max-width: 200rpx;
-      }
     }
 
     .someone {
@@ -48,13 +57,18 @@
     .self {
       justify-content: flex-end;
 
-      .message {
-        display: inline-block;
-        margin-right: 30rpx;
-        background-color: #3DD076;
-        color: white;
+      .contentBox {
+        text-align: right;
+        .message {
+          display: inline-block;
+          background-color: #3DD076;
+          color: white;
+        }
       }
-    }
+      .avatar{
+        margin-left: 30rpx;
+      }
+    } 
 
   }
 

pages/chat/index.wxml

@@ -1,17 +1,29 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
+
 <view class="chat">
   <scroll-view scroll-y="true" class="content" scroll-top="{{scrollTop}}" enhanced show-scrollbar='{{false}}'
     refresher-enabled bindrefresherrefresh='getMsgDet' refresher-triggered="{{triggered}}">
     <block wx:for="{{list}}" wx:key="id">
       <view class="base someone" wx:if="{{uid!=item.senderUid}}">
         <image src="{{item.user.avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{item.senderUid}}' />
-        <view class="message" wx:if="{{item.type==1}}">{{item.content}}</view>
-        <image src="{{item.content}}" wx:else class="msgImg" mode="widthFix" bindtap="previewImage"
-          data-src="{{item.content}}" />
+        <view class="contentBox">
+          <view class="time">
+            {{filters.formatDate(item.gmtCreated,1)}}
+          </view>
+          <view class="message" wx:if="{{item.type==1}}">{{item.content}}</view>
+          <image src="{{item.content}}" wx:else class="msgImg" mode="widthFix" bindtap="previewImage"
+            data-src="{{item.content}}" />
+        </view>
       </view>
       <view class="base self" wx:else>
-        <view class="message" wx:if="{{item.type==1}}">{{item.content}}</view>
-        <image src="{{item.content}}" wx:else class="msgImg" mode="widthFix" bindtap="previewImage"
-          data-src="{{item.content}}" />
+        <view class="contentBox">
+          <view class="time">
+            {{filters.formatDate(item.gmtCreated,1)}}
+          </view>
+          <view class="message" wx:if="{{item.type==1}}">{{item.content}}</view>
+          <image src="{{item.content}}" wx:else class="msgImg" mode="widthFix" bindtap="previewImage"
+            data-src="{{item.content}}" />
+        </view>
         <image src="{{userInfo.avatar}}" class="avatar" bindtap="jumpUserInfo" data-uid='{{item.senderUid}}' />
       </view>
     </block>

pages/chat/index.wxss

@@ -13,13 +13,13 @@
   margin-bottom: 42rpx;
   margin-top: 20rpx;
 }
-.chat .content .base .avatar {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-  background-color: #eeeeee;
+.chat .content .base .contentBox .time {
+  width: 200rpx;
+  margin-bottom: 10rpx;
+  font-size: 22rpx;
+  color: #969696;
 }
-.chat .content .base .message {
+.chat .content .base .contentBox .message {
   max-width: 80%;
   padding: 20rpx;
   box-sizing: border-box;
@@ -29,10 +29,15 @@
   background-color: #F2F6FC;
   word-break: break-all;
 }
-.chat .content .base .msgImg {
-  margin-right: 24rpx;
+.chat .content .base .contentBox .msgImg {
   max-width: 200rpx;
 }
+.chat .content .base .avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #eeeeee;
+}
 .chat .content .someone {
   justify-content: flex-start;
 }
@@ -42,12 +47,17 @@
 .chat .content .self {
   justify-content: flex-end;
 }
-.chat .content .self .message {
+.chat .content .self .contentBox {
+  text-align: right;
+}
+.chat .content .self .contentBox .message {
   display: inline-block;
-  margin-right: 30rpx;
   background-color: #3DD076;
   color: white;
 }
+.chat .content .self .avatar {
+  margin-left: 30rpx;
+}
 .chat .inputBox {
   position: fixed;
   left: 0px;

pages/notice/index.wxml

@@ -3,7 +3,7 @@
   <view class="notice" wx:for="{{list}}" wx:key="id">
     <view class="date">{{filters.formatDate(item.gmtCreated,4)}}</view>
     <view class="content">
-      <view class="title">{{item.titile}}</view>
+      <view class="title">{{item.title}}</view>
       <view class="row" wx:for="{{item.content}}" wx:for-item='child' wx:key="index">
         {{child}}
       </view>