成员名字

components/message.vue

 <template>
     <div
-    class="message-con d-flex"
-    :class="
-      isMyMessage
-        ? 'my-message align-items-start flex-row-reverse'
-        : 'align-items-start'
-    "
+        class="message-con d-flex align-items-center"
+        :class="isMyMessage ? 'my-message flex-row-reverse' : ''"
     >
-    <span class="no-selection">
-      <avatar :size="40" class="msg-avatar" :shape="shape" :src="avatar" />
-    </span>
-
         <div class="msg-content">
-      <div class="msg-name no-selection">{{ username }}</div>
+            <div class="msg-name no-selection">{{ senderName }}</div>
             <!-- Image -->
             <div
                 class="msg-detail image-message"
@@ -26,7 +18,10 @@
                     :title="messageBody.msg.name"
                     :alt="messageBody.msg.name"
                 />
-        <file-icon v-else-if="fileFailed2Load" :value="image404"></file-icon>
+                <file-icon
+                    v-else-if="fileFailed2Load"
+                    :value="image404"
+                ></file-icon>
             </div>
             <!-- File -->
             <div
@@ -107,7 +102,11 @@
             <img src="~@/customer-service/imgs/download.png" alt="Download" />
         </a>
 
-    <i class="el-icon-warning text-danger" v-if="failed" title="发送失败"></i>
+        <i
+            class="el-icon-warning text-danger"
+            v-if="failed"
+            title="发送失败"
+        ></i>
         <i class="el-icon-loading" v-else-if="isSendingMessage"></i>
 
         <template v-if="showReadSummary">
@@ -132,10 +131,11 @@
 <script lang="ts">
 import { Component, Inject, Mixins, Prop, Ref } from "vue-property-decorator";
 
-import { Filters } from '../mixin/filter';
+import { Filters } from "../mixin/filter";
 import * as dto from "../model";
 import { isAccessibleUrl } from "../service/tools";
 import { replaceText2Link } from "../utils";
+import { getUserInfo } from "../utils/user-info";
 
 import chat from "./../xim";
 import {
@@ -178,6 +178,7 @@ export default class Message extends Mixins(Filters) {
     private fileFailed2Load = false;
     private image404 = FileType.Image_404;
     private loadingRealUrl = false;
+    private senderName = "";
 
     @Prop({ type: Object, default: () => Object.create(null) })
     private data!: dto.Message;
@@ -243,7 +244,8 @@ export default class Message extends Mixins(Filters) {
                 const source = msg.msg.source;
                 if (source) {
                     return (
-            source === this.chatSource && senderEid === this.chatMyId
+                        source === this.chatSource &&
+                        senderEid === this.chatMyId
                     );
                 }
 
@@ -263,14 +265,13 @@ export default class Message extends Mixins(Filters) {
         return false;
     }
 
-  private get username() {
-    const avatar: any = chat.getUserMapping();
-    if (this.data == null) return "";
-    if (avatar == null) return this.data.id;
-    const value = avatar[this.data.eid];
-    if (value == null) return "";
-    if (value.name == null) return "";
-    return value.name;
+    public created() {
+        this.getUserName(this.data.eid);
+    }
+
+    private async getUserName(eid: string) {
+        const data = await getUserInfo(eid);
+        this.senderName = data.name;
     }
 
     private get avatar() {
@@ -444,10 +445,6 @@ export default class Message extends Mixins(Filters) {
             margin-left: 10px;
         }
 
-    .msg-name {
-      display: none;
-    }
-
         .msg-detail {
             margin-top: 0;
             background-color: #dbf2ff;
@@ -519,8 +516,10 @@ i.msg-avatar {
 }
 
 .msg-name {
-  font-size: 12px;
+    font-size: 14px;
     color: #888;
+    text-align: right;
+    margin-bottom: 3px;
 }
 
 .msg-detail {

store/index.ts

@@ -5,6 +5,7 @@ import { ChatMember } from "../model";
 import { isAccessibleUrl } from "../service/tools";
 import { unique } from "../utils";
 import { decode } from "../utils/jwt";
+import { getUserInfo } from "../utils/user-info";
 import Chat from "../xim";
 import chatType from "../xim/chat-type";
 import xim, { ChatNotifyListener } from "../xim/xim";
@@ -548,14 +549,10 @@ export default {
                 chatMembers.map(async (member) => {
                     let result: NonNullable<ChatStore.STATE_CURRENT_CHAT_MEMBERS>[number];
                     try {
-                        const info = await sdk()
-                            .model("user")
-                            .detail(member.eid)
-                            .query();
+                        const data = await getUserInfo(member.eid);
                         result = {
                             ...member,
-                            name: info.row.first_name.value as string,
-                            phone: info.row.last_name.value as string,
+                            ...data,
                         };
                     } catch (error) {
                         // eslint-disable-next-line no-console
@@ -621,7 +618,7 @@ export default {
             });
             detailManager.done();
             await action.execute();
-            await new Promise(resolve => setTimeout(resolve, 500));
+            await new Promise((resolve) => setTimeout(resolve, 500));
             await dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS);
         },
     },

utils/user-info.ts

+import Chat from "../xim";
+
+export type UserMapping = {
+    [eid: string]: {
+        name: string;
+        phone: string;
+    };
+};
+const userMapping: UserMapping = {};
+
+export const getUserMapping = () => userMapping;
+
+export async function getUserInfo(eid: string) {
+    if (userMapping[eid] != null) return userMapping[eid];
+    const info = await Chat.getSdk().model("user").detail(eid).query();
+    const data = {
+        name: info.row.first_name.value as string,
+        phone: info.row.last_name.value as string,
+    };
+    userMapping[eid] = data;
+    return data;
+}