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

<template>
  <div class="search-list">
    <div class="search-result-list" v-if="props.searchText">
      <div
        class="search-result-each-part"
        v-for="(searchResultValue,
        searchResultKey,
        searchResultIndex) in props.searchResult"
        :key="searchResultKey"
      >
        <div
          class="search-result-part"
          v-if="
            Array.isArray(props?.searchResult[searchResultKey]) &&
            props?.searchResult[searchResultKey].length > 0 &&
            searchResultKey !== 'group_infos' &&
            searchResultKey !== 'group_member_infos'
          "
        >
          <div class="result-title">
            <span class="text-[28rpx] font-regular">
              {{ getResultKeysValue(searchResultKey) }}
            </span>
          </div>
          <div class="result-list">
            <div
              class="result-list-each"
              v-for="(item, index) in props?.searchResult[searchResultKey]"
              :key="index"
            >
              <searchItem
                v-if="index < 3"
                :searchResultKey="searchResultKey"
                :searchItem="item"
                :searchText="props.searchText"
              ></searchItem>
            </div>
          </div>
          <div class="result-has-more" v-if="getHasMoreResult(searchResultKey)">
            <span class="text-[28rpx] font-regular">
              {{ getHasMoreResult(searchResultKey) }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="search-no-result" v-if="!props.searchText">
      <img src="/src/static//image/search/search-no-data.png" mode="widthFix" />
      <span class="text-[28rpx] font-regular">{{ $t('search.hint') }}</span>
    </div>
  </div>
</template>
<script setup>
import searchItem from './searchItem.vue'
import { useI18n } from 'vue-i18n'
const props = defineProps({
  searchResult: Object,
  searchText: String,
})
const { t } = useI18n()

//获取key对应值
const getResultKeysValue = (keys) => {
  let resultKey = ''
  switch (keys) {
    case 'user_infos':
      resultKey = t('index.mine.addressBook')
      break
    case 'group_infos':
      resultKey = t('chat.type.group')
      break
    case 'group_member_infos':
      resultKey = t('chat.type.group')
      break
    case 'combinedGroup':
      resultKey = t('chat.type.group')
      break
    case 'general_infos':
      resultKey = t('chat.type.record')
      break
    default:
      resultKey = ''
  }
  return resultKey
}

//是否还有更多数据
const getHasMoreResult = (searchResultKey) => {
  let has_more_result = ''
  switch (searchResultKey) {
    case 'user_infos':
      if (
        props.searchResult['user_count'] &&
        props.searchResult['user_count'] > 3
      ) {
        has_more_result = t('has_more') + t('index.mine.addressBook')
      }
      break
    case 'group_infos':
      if (
        props.searchResult['group_count'] &&
        props.searchResult['group_count'] > 3
      ) {
        has_more_result = t('has_more') + t('chat.type.group')
      }
      break
    case 'group_member_infos':
      if (
        props.searchResult['group_count'] &&
        props.searchResult['group_count'] > 3
      ) {
        has_more_result = t('has_more') + t('chat.type.group')
      }
      break
    case 'combinedGroup':
      if (
        props.searchResult['group_count'] &&
        props.searchResult['group_count'] > 3
      ) {
        has_more_result = t('has_more') + t('chat.type.group')
      }
      break
    case 'general_infos':
      break
    default:
  }
  return has_more_result
}
</script>
<style lang="scss" scoped>
.search-list {
  .search-result-list {
    width: 100%;
    padding: 10rpx 18rpx;

    .search-result-each-part {
      margin: 46rpx 0 0;

      .result-title {
        padding: 0 0 10rpx;
        span {
          line-height: 40rpx;
          color: $theme-hint-text;
        }
      }
      .result-has-more {
        padding: 10px 0;
        border-bottom: 1px solid $theme-border-color;
        span {
          color: #191919;
          line-height: 40rpx;
        }
      }
    }
  }

  .search-no-result {
    width: 476rpx;
    height: 261rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    img {
      width: 100%;
      height: 100%;
    }

    span {
      color: $theme-hint-text;
      margin: -20rpx 0 0;
      line-height: 40rpx;
    }
  }
}
</style>