feat: 修改时间

src/utils/index.js

@@ -34,6 +34,47 @@ export function parseTime(time, cFormat) {
   })
   return time_str
 }
+export function formatMessageTime(time) {
+  time = +time * 1000
+  const d = new Date(time)
+  const now = Date.now()
+  const hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
+  const minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
+  const date = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
+  const month = d.getMonth() + 1 < 10 ? '0' + d.getMonth() + 1 : d.getMonth()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 3600 * 24) {
+    return (
+      hours +
+      ':' +
+      minutes
+    )
+  } else if (isYear(time)) {
+    return (
+      month +
+      '-' +
+      date +
+        ' ' +
+      hours +
+      ':' +
+      minutes
+    )
+  } else {
+    return (
+      d.getFullYear() +
+      '-' +
+      month +
+      '-' +
+      date +
+      ' ' +
+      hours +
+      ':' +
+      minutes
+    )
+  }
+}
 
 export function formatTime(time, option) {
   time = +time * 1000

src/views/customerService/chatDetail.vue

@@ -87,7 +87,7 @@
 
 import { getUserSig, getUserList, sendChatMsg, findChatUserInfo, setHumanIntervene, stopHumanIntervene } from '@/api/business/chat'
 import chat from '@/utils/chat'
-import { formatTime } from '@/utils/index'
+import { formatTime, parseTime } from '@/utils/index'
 import TencentCloudChat from '@tencentcloud/chat'
 import ChatMessageItem from './components/chatMessageItem'
 import store from '../../store'
@@ -128,6 +128,7 @@ export default {
         return this.customerList[this.currentCustomerIndex]
       }
     }
+
   },
 
   mounted() {
@@ -510,7 +511,8 @@ export default {
                 fromUserId: item.from,
                 toAccount: item.to,
                 avatar: item.avatar,
-                msgType: item.from === this.envText + userID ? 1 : 2
+                msgType: item.from === this.envText + userID ? 1 : 2,
+                time: parseTime(item.time)
               }
               topList.push(object)
             })

src/views/customerService/chatList.vue

 <template>
   <div class="page_invite">
     <div class="filter-container">
-      <el-input v-model="listQuery.nickName" clearable size="mini" class="filter-item" style="width: 200px;" placeholder="请输入用户昵称"/>
+      <el-input v-model="listQuery.fromAccountName" clearable size="mini" class="filter-item" style="width: 200px;" placeholder="请输入用户昵称"/>
       <el-select v-model="listQuery.toAccount" class="filter-item" size="mini" placeholder="请选择">
         <el-option
           v-for="item in customerList"

src/views/customerService/components/chatMessageItem.vue

@@ -2,14 +2,20 @@
   <div class="message_components">
     <!--自己发送的消息-->
     <div v-if="chatMessageItem.msgType === 1" class="message-self">
-      <div class="message-self_content">{{ chatMessageItem.messageContent }}</div>
+      <div class="message-self-info">
+        <div class="message-self-info_content">{{ chatMessageItem.messageContent }}</div>
+        <div class="message-self-info_time">{{ chatMessageItem.time }}</div>
+      </div>
       <img :src="chatMessageItem.avatar" class="message-self__avatar">
     </div>
     <!--其他人发送的消息-->
     <div v-if="chatMessageItem.msgType === 2" class="message-other">
       <img :src="chatMessageItem.avatar" class="message-other__avatar">
-      <div class="message-other_content">
-        {{ chatMessageItem.messageContent }}
+      <div class="message-other-info">
+        <div class="message-other-info_content">
+          {{ chatMessageItem.messageContent }}
+        </div>
+        <div class="message-other-info_time">{{ chatMessageItem.time }}</div>
       </div>
     </div>
     <!--人工接管聊天-->
@@ -37,19 +43,35 @@ export default {
   display: flex;
   flex-direction: column;
   .message-self {
+    width: 100%;
     display: flex;
     flex-direction: row;
-    .message-self_content {
-      width: fit-content;
-      max-width: 60%;
-      background: #95EC69;
-      border-radius: 11px 11px 0px 11px;
-      padding: 10px 12px;
-      font-size: 12px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #000000;
-      line-height: 20px;
-      margin-left:auto;
+    justify-content: end;
+    .message-self-info {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+      .message-self-info_content {
+        width: fit-content;
+        max-width: 60%;
+        background: #95EC69;
+        border-radius: 11px 11px 0px 11px;
+        padding: 10px 12px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #000000;
+        line-height: 20px;
+        margin-left:auto;
+      }
+      .message-self-info_time {
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #6A6E7A;
+        line-height: 17px;
+        margin-top: 4px;
+      }
     }
     .message-self__avatar {
       width: 30px;
@@ -59,19 +81,33 @@ export default {
     }
   }
   .message-other {
+    width: 100%;
     display: flex;
     flex-direction: row;
 
-    .message-other_content {
-      width: fit-content;
-      max-width: 60%;
-      background: #FFFFFF;
-      border-radius: 11px 11px 11px 0;
-      padding: 10px 12px;
-      font-size: 12px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #000000;
-      line-height: 20px;
+    .message-other-info {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      .message-other-info_content {
+        width: fit-content;
+        max-width: 60%;
+        background: #FFFFFF;
+        border-radius: 11px 11px 11px 0;
+        padding: 10px 12px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #000000;
+        line-height: 20px;
+      }
+      .message-other-info_time {
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #6A6E7A;
+        line-height: 17px;
+        margin-top: 4px;
+      }
     }
     .message-other__avatar {
       width: 30px;