From 6c53f3276148b99bb3fa0da36536fbdc1915896d Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Tue, 15 Oct 2024 14:44:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD3=EF=BC=9A?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=81=94=E7=B3=BB=E4=BA=BA=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E5=BC=B9=E5=87=BA=E4=BF=A1=E6=81=AF=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../search/ResultItem/ContactItem.vue         | 20 +++++++++----------
 src/components/search/SearchBox.vue           | 10 ++++++++--
 src/components/user/UserCard.vue              |  3 ++-
 src/views/message/MessageLayout.vue           |  8 +++++++-
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/search/ResultItem/ContactItem.vue b/src/components/search/ResultItem/ContactItem.vue
index ce06b2a..1fcfab2 100644
--- a/src/components/search/ResultItem/ContactItem.vue
+++ b/src/components/search/ResultItem/ContactItem.vue
@@ -1,30 +1,30 @@
 <script setup>
 import AvatarIcon from '@/components/message/AvatarIcon.vue'
 
-const props = defineProps(['user'])
-const emit = defineEmits(['showUserCard'])
+const props = defineProps(['contactInfo'])
+const emit = defineEmits(['showContactCard'])
 
 const onShowCard = () => {
-  emit('showUserCard', { sessionId: props.sessionId, account: props.user.account })
+  emit('showContactCard', props.contactInfo)
 }
 </script>
 
 <template>
   <div class="contact-item">
     <AvatarIcon
-      class="avatar"
-      :showName="props.user.nickName"
-      :showId="props.user.account"
-      :showAvatarThumb="props.user.avatarThumb"
+      class="avatar-contact-item"
+      :showName="props.contactInfo.nickName"
+      :showId="props.contactInfo.account"
+      :showAvatarThumb="props.contactInfo.avatarThumb"
       @click="onShowCard"
     ></AvatarIcon>
     <div class="body">
       <div class="title">
-        <span class="name">{{ props.user.nickName }}</span>
-        <span class="account">{{ props.user.account }}</span>
+        <span class="name">{{ props.contactInfo.nickName }}</span>
+        <span class="account">{{ props.contactInfo.account }}</span>
       </div>
       <div class="info">
-        <span class="organization">部门: {{ props.user.organization || '-' }}</span>
+        <span class="organization">部门: {{ props.contactInfo.organization || '-' }}</span>
       </div>
     </div>
   </div>
diff --git a/src/components/search/SearchBox.vue b/src/components/search/SearchBox.vue
index 5ee246a..320fb46 100644
--- a/src/components/search/SearchBox.vue
+++ b/src/components/search/SearchBox.vue
@@ -5,6 +5,8 @@ import ContactItem from './ResultItem/ContactItem.vue'
 import { userQueryService, userQueryByNickService } from '@/api/user'
 import { searchStore } from '@/stores'
 
+const emit = defineEmits(['showContactCard'])
+
 const searchData = searchStore()
 const inputRef = ref()
 const keyWords = ref('')
@@ -37,6 +39,10 @@ const onOpen = () => {
   })
 }
 
+const onShowContactCard = (contactInfo) => {
+  emit('showContactCard', contactInfo)
+}
+
 // 1.失去焦点或按Enter时触发查询
 // 2.延时+防抖查询
 // TODO 如果缓存有值，且keywords没有改变就不重新查了
@@ -53,7 +59,6 @@ const onQuery = () => {
         console.log('all 待完成，搜索关键字：', keyWordsTrim.value)
         break
       case 'contact':
-        console.log('contact 待完成，搜索关键字：', keyWordsTrim.value)
         response = await userQueryByNickService({ nickNameKeyWords: keyWordsTrim.value })
         response.data.data?.forEach((element) => {
           result[element.account] = element
@@ -132,7 +137,8 @@ watch(searchTab, () => {
         <ContactItem
           v-for="account in Object.keys(searchData.getContactResult)"
           :key="account"
-          :user="searchData.getContactResult[account]"
+          :contactInfo="searchData.getContactResult[account]"
+          @showContactCard="onShowContactCard"
         ></ContactItem>
       </div>
     </el-dialog>
diff --git a/src/components/user/UserCard.vue b/src/components/user/UserCard.vue
index fa370cb..4a1cc82 100644
--- a/src/components/user/UserCard.vue
+++ b/src/components/user/UserCard.vue
@@ -23,7 +23,8 @@ const closeCardIfOutside = (event) => {
   if (
     !event.target.closest('.user-card') &&
     !event.target.closest('.avatar-session-box') &&
-    !event.target.closest('.avatar-message-item')
+    !event.target.closest('.avatar-message-item') &&
+    !event.target.closest('.avatar-contact-item')
   ) {
     onClose()
   }
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index 8ada365..54f7f24 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -417,6 +417,12 @@ const onShowUserCard = async ({ sessionId, account }) => {
   isShowUserCard.value = true
 }
 
+const onShowContactCard = (contactInfo) => {
+  userInfo.value = contactInfo
+  isShowGroupCard.value = false
+  isShowUserCard.value = true
+}
+
 // TODO
 const onShowGroupCard = () => {
   isShowUserCard.value = false
@@ -457,7 +463,7 @@ watch(() => msgRecords.value, (oldValue) => {
     <el-aside class="msg-aside bdr-r" :style="{ width: asideWidth + 'px' }">
       <div class="msg-aside-main">
         <div class="header">
-          <SearchBox></SearchBox>
+          <SearchBox @showContactCard="onShowContactCard"></SearchBox>
           <AddBotton></AddBotton>
         </div>