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

<template>
  <div class="search-list">
    <ZPaging
      ref="zPaging"
      :show-scrollbar="false"
      v-model="state.searchResultList"
      @query="queryAllSearch"
      :default-page-no="state.pageNum"
      :default-page-size="props.searchResultPageSize"
      :loading-more-default-as-loading="true"
      :inside-more="true"
      :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">
          <customInput
            :searchText="state.searchText"
            :first_talk_record_infos="state.first_talk_record_infos"
            @inputSearchText="inputSearchText"
          ></customInput>
          <span
            class="searchRoot_cancelBtn text-[32rpx] font-medium"
            @click="cancelSearch"
          >
            {{ $t('cancel') }}
          </span>
        </div>
      </template>
      <div class="search-record-detail" v-if="props.searchRecordDetail">
        <searchItem
          @click="
            clickSearchItem(
              'talk_record_infos_receiver',
              state?.first_talk_record_infos,
            )
          "
          searchResultKey="talk_record_infos_receiver"
          :searchItem="state?.first_talk_record_infos"
          :pointerIconSrc="pointerIconSrc"
        ></searchItem>
      </div>
      <div
        class="search-result"
        :style="
          !state.searchText ? 'align-items:center;justify-content:center;' : ''
        "
      >
        <div class="search-result-list">
          <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]) &&
                state?.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 state?.searchResult[searchResultKey]"
                  :key="index"
                >
                  <searchItem
                    @click="clickSearchItem(searchResultKey, item)"
                    v-if="(props.listLimit && index < 3) || !props.listLimit"
                    :searchResultKey="searchResultKey"
                    :searchItem="item"
                    :searchText="state.searchText"
                    :searchRecordDetail="props.searchRecordDetail"
                  ></searchItem>
                </div>
              </div>
              <div
                class="result-has-more"
                v-if="getHasMoreResult(searchResultKey)"
                @click="toMoreResultPage(searchResultKey)"
              >
                <span class="text-[28rpx] font-regular">
                  {{ getHasMoreResult(searchResultKey) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ZPaging>
  </div>
</template>
<script setup>
import customInput from '@/components/custom-input/custom-input.vue'
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 searchItem from './searchItem.vue'
import { useI18n } from 'vue-i18n'
import { ref, reactive, defineEmits, defineProps, onMounted } from 'vue'
import pointerIconSrc from '@/static/image/search/search-item-pointer.png'

const zPaging = ref()
useZPaging(zPaging)

const emits = defineEmits([
  'toMoreResultPage',
  'lastIdChange',
  'clickSearchItem',
])

const state = reactive({
  searchText: '', //搜索内容
  searchResultList: [], //搜素结果列表
  searchResult: null, //搜索结果
  pageNum: 1, //当前请求数据页数
})

const props = defineProps({
  searchResultPageSize: Number, //搜索结果每页数据量
  listLimit: Boolean, //是否限制列表内数据数量
  apiParams: String, //请求参数
  apiRequest: Function, //请求
  searchText: String, //搜索内容
  isPagination: Boolean, //是否分页
  searchRecordDetail: Boolean, //是否是搜索聊天记录的详情
  first_talk_record_infos: Object, //接受者信息
})

const { t } = useI18n()

onMounted(() => {
  if (props.searchText) {
    state.searchText = props.searchText
  }
})

//输入搜索文本
const inputSearchText = (e) => {
  // console.log(e)
  if (e.trim() != state.searchText.trim()) {
    state.pageNum = 1
    emits('lastIdChange', 0, 0, 0)
  }
  state.searchText = e.trim()
  if (!e.trim()) {
    emits('lastIdChange', 0, 0, 0)
  }
  zPaging.value?.reload()
}

// ES搜索聊天记录-主页搜索什么都有、指定用户、指定群、群与用户概览
const queryAllSearch = (pageNum, searchResultPageSize) => {
  let params = {
    key: state.searchText, //关键字
    size: searchResultPageSize,
  }
  if (props.apiParams) {
    let apiParams = JSON.parse(decodeURIComponent(props.apiParams))
    params = Object.assign({}, params, apiParams)
  }
  const resp = props.apiRequest(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'
        })
      }
      if ((data.talk_record_infos || []).length > 0) {
        state.first_talk_record_infos = Object.assign(
          {},
          state.first_talk_record_infos,
          data.talk_record_infos[0],
        )
        ;(data.talk_record_infos || []).forEach((item) => {
          item.group_type = 0
        })
      }
      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
      let isEmpty = true
      let dataKeys = Object.keys(data)
      let paginationKey = ''
      dataKeys.forEach((item) => {
        if (Array.isArray(data[item]) && data[item].length > 0) {
          paginationKey = item
          isEmpty = false
        }
      })
      if (isEmpty) {
        if (pageNum == 1) {
          zPaging.value?.complete([])
        } else {
          data = state.searchResult
          zPaging.value?.complete([data])
        }
      } else {
        if (props.isPagination) {
          if (
            paginationKey &&
            Array.isArray(
              (state?.searchResult && state?.searchResult[paginationKey]) || [],
            ) &&
            ((state?.searchResult && state?.searchResult[paginationKey]) || [])
              .length > 0
          ) {
            data[paginationKey] = state.searchResult[paginationKey].concat(
              data[paginationKey],
            )
          }
          emits(
            'lastIdChange',
            data.last_id,
            data.last_group_id,
            data.last_member_id,
          )
          let total = data.count
          if (props.searchRecordDetail) {
            total = data.group_record_count
          }
          zPaging.value?.completeByTotal([data], total)
        } else {
          zPaging.value?.complete([data])
        }
      }
      state.searchResult = data
    } else {
      zPaging.value?.complete([])
    }
  })

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

//点击取消搜索
const cancelSearch = () => {
  uni.navigateBack({
    delta: 1,
  })
}

//获取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
    case 'talk_record_infos':
      resultKey = t('search.result.relevant') + 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
}

//点击跳转到更多结果页面
const toMoreResultPage = (searchResultKey) => {
  emits('toMoreResultPage', searchResultKey, state.searchText)
}

//点击了搜索结果项
const clickSearchItem = (searchResultKey, searchItem) => {
  emits(
    'clickSearchItem',
    state.searchText,
    searchResultKey,
    searchItem.talk_type,
    searchItem.receiver_id,
  )
}
</script>
<style lang="scss" scoped>
.search-list {
  .searchRoot {
    padding: 20rpx 48rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    .searchRoot_cancelBtn {
      line-height: 44rpx;
      color: $theme-primary;
      margin: 0 0 0 20rpx;
      flex-shrink: 0;
    }
  }
  .search-record-detail {
    padding: 0 50rpx;
  }
  .search-result {
    width: 100%;
    padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    .search-result-list {
      width: 100%;
      padding: 0 18rpx;

      .search-result-part {
        margin: 36rpx 0 0;

        .result-title {
          padding: 0 0 10rpx;
          border-bottom: 1px solid $theme-border-color;
          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;
          }
        }
      }
    }
  }
}
</style>