chat-app/src/pages/search/index.vue

<template>
  <div class="outer-layer search-page">
    <div class="root">
      <div class="searchRoot">
        <tm-input
          class="searchRoot_input"
          placeholder="请输入…"
          color="#F9F9FD"
          :round="1"
          prefix="tmicon-search"
          prefixColor="#46299D"
          v-model.lazy="state.searchText"
          @input="inputSearchText"
        ></tm-input>
        <span
          class="searchRoot_cancelBtn text-[32rpx] font-medium"
          @click="cancelSearch"
        >
          {{ $t('cancel') }}
        </span>
      </div>
      <div
        class="search-result"
        :style="
          !state.searchText ? 'align-items:center;justify-content:center;' : ''
        "
      >
        <div class="search-result-list" v-if="state.searchText">
          <div
            class="search-result-each-part"
            v-for="(searchResultValue,
            searchResultKey,
            searchResultIndex) in state.searchResult"
            :key="searchResultKey"
          >
            <div
              class="search-result-part"
              v-if="
                Array.isArray(state?.searchResult[searchResultKey]) &&
                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 state?.searchResult[searchResultKey]"
                  :key="index"
                >
                  <searchItem
                    v-if="index < 3"
                    :searchResultKey="searchResultKey"
                    :searchItem="item"
                    :searchText="state.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="!state.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>
    </div>
  </div>
</template>
<script setup>
import searchItem from './components/searchItem.vue'
import { ServeSeachQueryAll } from '@/api/search/index'
import { ref, watch, computed, onMounted, onUnmounted, reactive } from 'vue'
import { useAuth } from '@/store/auth'
import { useI18n } from 'vue-i18n'
import { nextTick } from 'process'
const { t } = useI18n()
const state = reactive({
  searchText: '', //搜索内容
  searchResult: null, //搜索结果
  searchResultPageSize: 3, //搜索结果每页数据量
})

//输入搜索文本
const inputSearchText = (e) => {
  console.log(e)
  let searchText = e
  queryAllSearch(searchText)
}

//获取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 (
        state.searchResult['user_count'] &&
        state.searchResult['user_count'] > 3
      ) {
        has_more_result = t('has_more') + t('index.mine.addressBook')
      }
      break
    case 'group_infos':
      if (
        state.searchResult['group_count'] &&
        state.searchResult['group_count'] > 3
      ) {
        has_more_result = t('has_more') + t('chat.type.group')
      }
      break
    case 'group_member_infos':
      if (
        state.searchResult['group_count'] &&
        state.searchResult['group_count'] > 3
      ) {
        has_more_result = t('has_more') + t('chat.type.group')
      }
      break
    case 'combinedGroup':
      if (
        state.searchResult['group_count'] &&
        state.searchResult['group_count'] > 3
      ) {
        has_more_result = t('has_more') + t('chat.type.group')
      }
      break
    case 'general_infos':
      break
    default:
  }
  return has_more_result
}

// ES搜索聊天记录-主页搜索什么都有
const queryAllSearch = (searchText) => {
  let params = {
    key: searchText, //关键字
    size: state.searchResultPageSize,
  }
  const resp = ServeSeachQueryAll(params)
  resp.then(({ code, data }) => {
    console.log(data)
    if (code == 200) {
      // data.group_infos = [
      //   {
      //     id: 888898,
      //     type: 4,
      //     name: '泰丰国际',
      //     avatar: '', //群头像
      //     created_at: '2024-10-31 14:31:11',
      //     group_num: 730,
      //   },
      // ]
      if ((data.user_infos || []).length > 0) {
        ;(data.user_infos || []).forEach((item) => {
          item.group_type = 0
        })
      }
      if ((data.group_infos || []).length > 0) {
        ;(data.group_infos || []).forEach((item) => {
          item.group_type = item.type
          item.groupTempType = 'group_infos'
        })
      }
      if ((data.group_member_infos || []).length > 0) {
        ;(data.group_member_infos || []).forEach((item) => {
          item.groupTempType = 'group_member_infos'
        })
      }
      let tempGeneral_infos = Array.isArray(data.general_infos)
        ? [...data.general_infos]
        : data.general_infos
      delete data.general_infos
      data.combinedGroup = (data.group_infos || []).concat(
        data.group_member_infos || [],
      )
      data.general_infos = tempGeneral_infos
      state.searchResult = data
    } else {
    }
  })

  resp.catch(() => {})
}

//点击取消搜索
const cancelSearch = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<style scoped lang="scss">
uni-page-body,
page {
  height: 100%;
}

.outer-layer {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.root {
  flex: 1;
  padding: 20rpx 32rpx;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-page {
  .searchRoot {
    padding: 0 16rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    .searchRoot_input {
      width: 100%;
    }

    .searchRoot_cancelBtn {
      line-height: 44rpx;
      color: $theme-primary;
      margin: 0 0 0 20rpx;
      flex-shrink: 0;
    }
  }

  .search-result {
    width: 100%;
    flex: 1;

    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;

    .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>