chat-app/src/pages/search/components/searchItem.vue

<template>
  <div class="search-item" v-if="resultName">
    <div class="avatar-img">
      <img :src="avatarImg" />
    </div>
    <div class="result-info">
      <div class="info-name">
        <HighlightText
          class="text-[32rpx] font-medium"
          :text="resultName"
          :searchText="props.searchText"
        />
        <div class="info-tag" v-if="resultType">
          <span class="text-[24rpx] font-medium">{{ resultType }}</span>
        </div>
      </div>
      <div class="info-detail" v-if="resultDetail">
        <HighlightText
          class="text-[28rpx] font-regular"
          :text="resultDetail"
          :searchText="props.searchText"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import zu4992 from '@/static/image/chatList/zu4992@2x.png'
import zu4991 from '@/static/image/chatList/zu4991@2x.png'
import zu4989 from '@/static/image/chatList/zu4989@2x.png'
import zu5296 from '@/static/image/chatList/zu5296@2x.png'
import { ref, watch, computed, onMounted, onUnmounted, reactive } from 'vue'
import HighlightText from './highLightText.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
  searchItem: Object | Number,
  searchResultKey: String,
  searchText: String,
})
// 映射表-查找对应结构下的属性名
const keyMapping = {
  user_infos: { avatar: 'avatar', name: 'nickname' },
  group_infos: { avatar: 'avatar', name: 'name' },
  group_member_infos: {
    avatar: 'group_avatar',
    name: 'group_name',
    detailKey: 'user_name',
  },
  general_infos: {
    avatar: 'receiver_avatar',
    name: 'receiver_name',
    detailKey: 'count',
  },
}
//获取key对应值
const getKeyValue = (keys) => {
  let keyValue = ''
  if (keys) {
    keyValue = props.searchItem[keys]
  }
  return keyValue
}
//头像
const avatarImg = computed(() => {
  let avatar = getKeyValue(keyMapping[props.searchResultKey]?.avatar)
  if (!avatar) {
    avatar = groupTypeMapping[props.searchItem?.group_type]?.defaultImg
  }
  return avatar
})
//名称
const resultName = computed(() => {
  return getKeyValue(keyMapping[props.searchResultKey]?.name)
})
// 映射表-根据groupType设置对应值
const groupTypeMapping = {
  0: {},
  1: {
    defaultImg: zu4992,
  },
  2: {
    result_type: t('index.mine.department'),
    defaultImg: zu4989,
  },
  3: {
    result_type: t('index.mine.project'),
    defaultImg: zu4991,
  },
  4: {
    defaultImg: zu5296,
  },
}
//群类型tag
const resultType = computed(() => {
  return groupTypeMapping[props.searchItem?.group_type]?.result_type
})
//详细内容
const resultDetail = computed(() => {
  let result_detail =
    props.searchItem[keyMapping[props.searchResultKey]?.detailKey]
  switch (keyMapping[props.searchResultKey]?.detailKey) {
    case 'count':
      result_detail = result_detail + t('search.chat.count')
      break
    case 'user_name':
      result_detail = t('search.result.include') + result_detail
      break
    default:
      result_detail = ''
  }
  return result_detail
})
</script>
<style lang="scss" scoped>
.search-item:nth-child(1) {
  border-top: 1px solid $theme-border-color;
}
.search-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 22rpx 0 24rpx;
  border-bottom: 1px solid $theme-border-color;

  .avatar-img {
    width: 96rpx;
    height: 96rpx;
    margin: 0 20rpx 0 0;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .result-info {
    .info-name {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      span {
        color: $theme-text;
        line-height: 44rpx;
      }
      .info-tag {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 2rpx 14rpx;
        border: 2rpx solid #000;
        border-radius: 6rpx;
        span {
          line-height: 34rpx;
        }
      }
    }
    .info-detail {
      span {
        color: $theme-hint-text;
        line-height: 40rpx;
      }
    }
  }
}
</style>