新增名称

note.md

+地址 对应的 用户信息会变吗？ 是否会变将影响着前端是否存储相关数据以及存储有效期长度

src/components/ChatList/ChatListItem.vue

@@ -7,7 +7,7 @@
             <div class="flex justify-between mt-5">
                 <div
                     class="id whitespace-nowrap overflow-hidden overflow-ellipsis flex-grow flex-shrink"
-                >{{ id }}</div>
+                >{{ displayName }}</div>
                 <div
                     class="txt whitespace-nowrap overflow-hidden overflow-ellipsis flex-shrink-0"
                 >{{ latest_msg_timeStamp && timestampFormat(latest_msg_timeStamp) }}</div>
@@ -39,6 +39,7 @@ const props = defineProps({
         type: Number,
         default: 10
     },
+    displayName: String,
 })
 
 </script>

src/db/ContactPersonService.ts

+import { iContact } from '@/service/UserService/types'
+import { MyAppDatabase } from './index'
+
+export default class ContactPersonService {
+  static instance: ContactPersonService
+  private contactPerson: Dexie.Table<iContact, number>
+  static getInstance() {
+    if (!ContactPersonService.instance) {
+      ContactPersonService.instance = new ContactPersonService()
+    }
+    return ContactPersonService.instance
+  }
+
+  constructor() {
+    const db = new MyAppDatabase()
+    this.contactPerson = db.contactPerson
+  }
+
+  save(list: iContact[]) {
+    return this.contactPerson.bulkAdd(list)
+  }
+
+  async findByList(addressList: string[]) {
+    const list = await this.contactPerson
+      .filter((i) => {
+        return addressList.includes(i.addr)
+      })
+      .toArray()
+
+    const notFoundList = addressList.filter(
+      (i) => list.findIndex((item) => item?.addr === i) === -1,
+    )
+    return {
+      foundList: list,
+      notFoundList,
+    }
+  }
+}

src/db/index.ts

 import Dexie from 'dexie'
 import { DisplayMessage } from '@/store/messagesStore'
+import { iContact } from '@/service/UserService/types'
 
 export interface iChatMessage extends DisplayMessage {
   masterId: string
@@ -15,6 +16,7 @@ export interface iChatListCard {
 export class MyAppDatabase extends Dexie {
   chatMessage: Dexie.Table<iChatMessage, number>
   chatListCard: Dexie.Table<iChatListCard, number>
+  contactPerson: Dexie.Table<iContact, number>
 
   constructor() {
     super('MyAppDatabase')
@@ -23,9 +25,11 @@ export class MyAppDatabase extends Dexie {
       chatMessage:
         '++id, content, from, uuid, state, uploadProgress, type, datetime, hideDatetime, logid, masterId, readed',
       chatListCard: '++id, masterId, targetId, unreadMsgCount, content',
+      contactPerson: '++id, addr, bank, phone, user_name',
     })
 
     this.chatMessage = this.table('chatMessage')
     this.chatListCard = this.table('chatListCard')
+    this.contactPerson = this.table('contactPerson')
   }
 }

src/service/UserService/index.ts

@@ -18,10 +18,14 @@ class UserService {
   }
 
   staffInfo(data: { addrs: string[] }) {
-    return baseAxios({
+    return baseAxios<{ total: number; item: iContact[] }>({
       url: '/user/staff_info',
       method: 'get',
       params: data,
+      paramsSerializer: (data: { addrs: string[] }) => {
+        console.log(data);
+        return `addrs=${data.addrs.toString()}`
+      },
     })
   }
 }

src/utils/displayName.ts

+import ContactPersonService from '@/db/ContactPersonService'
+import UserService from '@/service/UserService'
+import { iContact } from '@/service/UserService/types'
+
+export const getDisplayNamesFromAddress = async (
+  addressList: string[],
+): Promise<string[]> => {
+  /* 数据库查 有结果拿 没结果网上查且存 */
+
+  const {
+    foundList,
+    notFoundList,
+  } = await ContactPersonService.getInstance().findByList(addressList)
+
+  const fullList = foundList
+
+  if (notFoundList.length !== 0) {
+    const ret = await UserService.getInstance().staffInfo({
+      addrs: notFoundList,
+    })
+    if (ret.code === 200) {
+      const theoseNotFoundList = ret.data.item
+      ContactPersonService.getInstance().save(theoseNotFoundList)
+      fullList.push(...theoseNotFoundList)
+    }
+  }
+
+  return addressList.map((item) => {
+    return fullList.find((i) => i?.addr === item)?.user_name || '未知用户'
+  })
+}

src/views/Chat/ChatContent.vue

@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, watch } from "vue";
-import {  target , getFromId} from "@/store/appCallerStore";
+import { target, getFromId } from "@/store/appCallerStore";
 import { DisplayMessage, messageStore } from "@/store/messagesStore";
 import useScrollTo from "@/composables/useScrollTo";
 import ChatContentMessageVue from "./ChatContentMessage.vue";

src/views/Chat/ChatContentMessage.vue

@@ -16,7 +16,7 @@
           :class="{ 'text-right': fromMyself }"
           style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #adadad;
           "
-        >15990184793</div>
+        >159903</div>
         <div
           :class="[{ 'flex-row-reverse': fromMyself }]"
           class="flex items-center max-w-chat-msg-bubble"

src/views/withMenu/ChatList/index.vue

@@ -17,6 +17,7 @@
                         <ChatListItem
                             :unReadMsgNum="item.unreadMsgCount"
                             :id="item.targetId"
+                            :displayName="item.displayName"
                             :latest_msg_content="item.content"
                         ></ChatListItem>
                     </template>
@@ -24,7 +25,10 @@
             </div>
         </div>
     </div>
-    <div v-if="isChatListEmpty" class="empty text-center fixed w-full top-1/2 transform -translate-y-1/2 -mt-6">
+    <div
+        v-if="isChatListEmpty"
+        class="empty text-center fixed w-full top-1/2 transform -translate-y-1/2 -mt-6"
+    >
         <img src="@/assets/img/empty.png" class="mb-5" alt />
         <div class="no-chat mb-2.5">暂无聊天</div>
         <div v-if="userType === eRole.user" class="tip">咨询客户经理后，可以在这里快捷查看消息哦！</div>
@@ -43,15 +47,25 @@ import { getUserMsg } from "@/utils/userMsg";
 import { eRole } from "@/types/roleType";
 import ChatMessageDB from "@/db/ChatMessageDB";
 import router from "@/router";
+import UserService from "@/service/UserService";
+import { getDisplayNamesFromAddress } from "@/utils/displayName";
 
 
-const cardList = ref<iChatListCard[]>([]);
+const cardList = ref<(iChatListCard & { displayName?: string })[]>([]);
 const showList = ref<boolean[]>([]);
 const selectedIndex = ref<number>()
 
 const renderList = async () => {
     const list = await ChatListCardDB.getInstance().getCardList(getFromId() as string)
+    const addressList = list.map(i => i.targetId);
     cardList.value = list;
+    const displayNames = await getDisplayNamesFromAddress(addressList)
+    cardList.value = list.map((item, index) => {
+        return {
+            ...item,
+            displayName: displayNames[index]
+        }
+    })
 }
 
 onMounted(async () => {