成员名字

2b02de5c · panjiangyi · 803da04e · 2b02de5c · 2b02de5c · 2b02de5c
Commit 2b02de5c authored Jul 16, 2021 by panjiangyi
Showing with 53 additions and 35 deletions
components/message.vue
store/index.ts
utils/user-info.ts
--- a/components/message.vue
+++ b/components/message.vue
 <template>
    <div
-    class="message-con d-flex"
+        class="message-con d-flex align-items-center"
-    :class="
+        :class="isMyMessage ? 'my-message flex-row-reverse' : ''"
-      isMyMessage
-        ? 'my-message align-items-start flex-row-reverse'
-        : 'align-items-start'
-    "
    >
-    <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() {
+    public created() {
-    const avatar: any = chat.getUserMapping();
+        this.getUserName(this.data.eid);
-    if (this.data == null) return "";
+    }
-    if (avatar == null) return this.data.id;
-    const value = avatar[this.data.eid];
+    private async getUserName(eid: string) {
-    if (value == null) return "";
+        const data = await getUserInfo(eid);
-    if (value.name == null) return "";
+        this.senderName = data.name;
-    return value.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 {

--- a/store/index.ts
+++ b/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()
+                        const data = await getUserInfo(member.eid);
-                            .model("user")
-                            .detail(member.eid)
-                            .query();
                        result = {
                            ...member,
-                            name: info.row.first_name.value as string,
+                            ...data,
-                            phone: info.row.last_name.value as string,
                        };
                    } 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);
        },
    },

--- a/utils/user-info.ts
+++ b/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;
+}