搜索功能3：点击联系人头像弹出信息卡片

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>

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>

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()
   }

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>