聊天消息添加时间展示

src/utils/index.js

@@ -2,6 +2,10 @@
  * Created by jiachenpan on 16/11/18.
  */
 
+export function genID(length = 15) {
+  return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36)
+}
+
 export function parseTime(time, cFormat) {
   if (arguments.length === 0) {
     return null

src/views/customerService/chatDetail.vue

@@ -68,7 +68,7 @@
             <div class="hash" />
           </div>
           <div class="chat-message-input">
-            <el-input v-model="messageContent" :rows="4" type="textarea" placeholder="请输入聊天内容" style="border: none" />
+            <el-input v-model="messageContent" :rows="4" type="textarea" placeholder="请输入聊天内容" style="border: none" @keyup.enter.native="sendMessage"/>
             <div class="chat-message-input__send">
               <el-button :disabled="sendDisabled" type="primary" @click="sendMessage">发送</el-button>
             </div>
@@ -76,8 +76,8 @@
         </div>
       </el-main>
       <el-aside style="width: 25%;background-color: white;padding: 10px">
-        <div v-if="chatUserInfo && chatUserInfo.user" class="info-title">对话信息</div>
-        <ChatUserInfo v-if="chatUserInfo && chatUserInfo.user" :chat-user-info="chatUserInfo"/>
+        <div v-if="chatUserInfo && chatUserInfo.aiAssistant" class="info-title">对话信息</div>
+        <ChatUserInfo v-if="chatUserInfo && chatUserInfo.aiAssistant" :chat-user-info="chatUserInfo"/>
       </el-aside>
     </el-container>
   </div>
@@ -87,7 +87,7 @@
 
 import { getUserSig, getUserList, sendChatMsg, findChatUserInfo, setHumanIntervene, stopHumanIntervene } from '@/api/business/chat'
 import chat from '@/utils/chat'
-import { formatTime, parseTime } from '@/utils/index'
+import { formatTime, parseTime, genID } from '@/utils/index'
 import TencentCloudChat from '@tencentcloud/chat'
 import ChatMessageItem from './components/chatMessageItem'
 import store from '../../store'
@@ -333,10 +333,8 @@ export default {
      */
     handleImLoin(userId, userSign) {
       console.log('====用户信息===', userId, userSign) // 登录成功
-      this.closeLoading()
       const promise = chat.login({ userID: this.envText + userId, userSig: userSign })
       promise.then((imResponse) => {
-        this.closeLoading()
         console.log('====登录成功===', imResponse.data) // 登录成功
         chat.on(TencentCloudChat.EVENT.SDK_READY, this.onSdkReady)
         chat.on(TencentCloudChat.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED, this.onTotalUnreadMessageCountUpdated)
@@ -379,7 +377,9 @@ export default {
             fromUserId: message.from,
             toAccount: message.to,
             avatar: message.avatar,
-            msgType: message.from === this.envText + userID ? 1 : 2
+            msgType: message.from === this.envText + userID ? 1 : 2,
+            time: parseTime(message.time),
+            reqId: this.handleGetReqId(message.cloudCustomData)
           }
 
           this.messageList.push(object)
@@ -406,6 +406,18 @@ export default {
         }*/
       })
     },
+    handleGetReqId(jsonStr) {
+      if (jsonStr) {
+        const jsonObj = JSON.parse(jsonStr)
+        if (jsonObj && jsonObj.reqId) {
+          return jsonObj.reqId
+        } else {
+          return genID()
+        }
+      } else {
+        return genID()
+      }
+    },
 
     /**
      * 会话未读总数变更通知
@@ -423,7 +435,9 @@ export default {
         // 全量的会话列表，用该列表覆盖原有的会话列表
         const conversationList = imResponse.data.conversationList
         this.setConversationList(conversationList)
+        this.closeLoading()
       }).catch((imError) => {
+        this.closeLoading()
         // 获取会话列表失败的相关信息
         console.warn('getConversationList error:', imError)
       })
@@ -432,6 +446,7 @@ export default {
      * 会话列表更改监听
      * */
     onConversationListUpdated(event) {
+      this.closeLoading()
       console.log('====会话列表更新--', event.data) // 包含 Conversation 实例的数组
       this.setConversationList(event.data)
       if (this.currentConversationItem && this.currentConversationItem.conversationID) {
@@ -524,7 +539,8 @@ export default {
                 toAccount: item.to,
                 avatar: item.avatar,
                 msgType: item.from === this.envText + userID ? 1 : 2,
-                time: parseTime(item.time)
+                time: parseTime(item.time),
+                reqId: this.handleGetReqId(item.cloudCustomData)
               }
               topList.push(object)
             })
@@ -560,13 +576,19 @@ export default {
      * 发送消息
      * */
     sendMessage() {
+      let reqId = genID()
+      if (this.messageList && this.messageList.length > 0) {
+        reqId = this.messageList[this.messageList.length - 1].reqId || genID()
+      }
+
       const params = {
         fromAccount: this.customerList[this.currentCustomerIndex].code,
         toAccount: this.currentConversationItem.fromAccount,
         isRealPersonAnswer: 1,
         msgType: 1,
         realPersonId: this.userId,
-        msgContent: this.messageContent
+        msgContent: this.messageContent,
+        reqId: reqId
       }
       sendChatMsg(params).then(response => {
         const object = {

src/views/customerService/components/historyMessageList.vue

@@ -3,6 +3,7 @@
     <div class="filter-container">
       <el-date-picker
         v-model="value2"
+        :picker-options="pickerOptions"
         size="mini"
         class="filter-item"
         style="width: 400px; "
@@ -68,6 +69,11 @@ export default {
       },
       value2: '',
       messageList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now() // 禁用大于今天的日期
+        }
+      },
       isHasNextPage: false
     }
   },
@@ -110,7 +116,8 @@ export default {
               fromUserId: item.fromAccount,
               toAccount: item.toAccount,
               avatar: item.fromAccountIcon,
-              msgType: item.fromAccount === this.toAccount ? 1 : 2
+              msgType: item.fromAccount === this.toAccount ? 1 : 2,
+              time: item.msgTime
             }
             list.push(messageItem)
           })