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

<template>
  <div class="outer-layer search-page">
    <div class="root">
      <ZPaging
        ref="zPaging"
        :show-scrollbar="false"
        v-model="state.searchResultList"
        @query="queryAllSearch"
        :empty-view-img="'/src/static//image/search/search-no-data.png'"
        :empty-view-text="$t('search.hint')"
        :empty-view-img-style="{ width: '476rpx', height: '261rpx' }"
        :empty-view-title-style="{
          color: '#999999',
          margin: '-20rpx 0 0',
          'line-height': '40rpx',
          'font-size': '28rpx',
          'font-weight': 400,
        }"
      >
        <template #top>
          <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>
        </template>
        <div
          class="search-result"
          :style="
            !state.searchText
              ? 'align-items:center;justify-content:center;'
              : ''
          "
        >
          <searchList
            :searchResult="state.searchResult"
            :searchText="state.searchText"
            :listLimit="true"
          ></searchList>
        </div>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import searchList from './components/searchList.vue'
import { ServeSeachQueryAll } from '@/api/search/index'
import { ref, watch, computed, onMounted, onUnmounted, reactive } from 'vue'
import { useAuth } from '@/store/auth'
import { nextTick } from 'process'

const zPaging = ref()
useZPaging(zPaging)

const state = reactive({
  searchText: '', //搜索内容
  searchResultList: [], //搜素结果列表
  searchResult: null, //搜索结果
  searchResultPageSize: 3, //搜索结果每页数据量
})

//输入搜索文本
const inputSearchText = (e) => {
  // console.log(e)
  state.searchText = e
  zPaging.value?.reload()
}

// ES搜索聊天记录-主页搜索什么都有
const queryAllSearch = () => {
  let params = {
    key: state.searchText, //关键字
    size: state.searchResultPageSize,
  }
  const resp = ServeSeachQueryAll(params)
  resp.then(({ code, data }) => {
    console.log(data)
    if (code == 200) {
      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
      let isEmpty = true
      let dataKeys = Object.keys(data)
      dataKeys.forEach((item) => {
        if (Array.isArray(data[item]) && data[item].length > 0) {
          console.log(data[item])
          isEmpty = false
        }
      })
      if (isEmpty) {
        zPaging.value?.complete([])
      } else {
        zPaging.value?.complete([data])
      }
    } else {
      zPaging.value?.complete([])
    }
  })

  resp.catch(() => {
    zPaging.value?.complete([])
  })
}

//点击取消搜索
const cancelSearch = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<style scoped lang="scss">
.search-page {
  .searchRoot {
    padding: 20rpx 48rpx;
    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%;
    padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
</style>