搜索页面及子页面接入zPaging组件

src/api/search/index.js

@@ -10,6 +10,24 @@ export const ServeSeachQueryAll = (data) => {
   })
 }
 
+// ES搜索用户数据
+export const ServeQueryUser = (data) => {
+  return request({
+    url: '/api/v1/elasticsearch/query-user',
+    method: 'POST',
+    data,
+  })
+}
+
+// ES搜索群组数据
+export const ServeQueryGroup = (data) => {
+  return request({
+    url: '/api/v1/elasticsearch/query-group',
+    method: 'POST',
+    data,
+  })
+}
+
 // ES搜索聊天记录-指定用户、指定群、群与用户概览
 export const ServeTalkRecord = (data) => {
   return request({

src/pages/search/components/searchList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="search-list">
-    <div class="search-result-list" v-if="props.searchText">
+    <div class="search-result-list">
       <div
         class="search-result-each-part"
         v-for="(searchResultValue,
@@ -29,7 +29,7 @@
               :key="index"
             >
               <searchItem
-                v-if="index < 3"
+                v-if="(props.listLimit && index < 3) || !props.listLimit"
                 :searchResultKey="searchResultKey"
                 :searchItem="item"
                 :searchText="props.searchText"
@@ -48,10 +48,6 @@
         </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>
@@ -60,6 +56,7 @@ import { useI18n } from 'vue-i18n'
 const props = defineProps({
   searchResult: Object,
   searchText: String,
+  listLimit: Boolean,
 })
 const { t } = useI18n()
 
@@ -151,10 +148,10 @@ const toMoreResultPage = (searchResultKey) => {
   justify-content: center;
   .search-result-list {
     width: 100%;
-    padding: 10rpx 18rpx;
+    padding: 0 18rpx;
 
-    .search-result-each-part {
+    .search-result-part {
-      margin: 46rpx 0 0;
+      margin: 36rpx 0 0;
 
       .result-title {
         padding: 0 0 10rpx;
@@ -173,25 +170,5 @@ const toMoreResultPage = (searchResultKey) => {
       }
     }
   }
-
-  .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>

src/pages/search/index.vue

@@ -1,77 +1,96 @@
 <template>
   <div class="outer-layer search-page">
     <div class="root">
-      <div class="searchRoot">
+      <ZPaging
-        <tm-input
+        ref="zPaging"
-          class="searchRoot_input"
+        :show-scrollbar="false"
-          placeholder="请输入…"
+        v-model="state.searchResultList"
-          color="#F9F9FD"
+        @query="queryAllSearch"
-          :round="1"
+        :empty-view-img="'/src/static//image/search/search-no-data.png'"
-          prefix="tmicon-search"
+        :empty-view-text="$t('search.hint')"
-          prefixColor="#46299D"
+        :empty-view-img-style="{ width: '476rpx', height: '261rpx' }"
-          v-model.lazy="state.searchText"
+        :empty-view-title-style="{
-          @input="inputSearchText"
+          color: '#999999',
-        ></tm-input>
+          margin: '-20rpx 0 0',
-        <span
+          'line-height': '40rpx',
-          class="searchRoot_cancelBtn text-[32rpx] font-medium"
+          'font-size': '28rpx',
-          @click="cancelSearch"
+          'font-weight': 400,
-        >
+        }"
-          {{ $t('cancel') }}
-        </span>
-      </div>
-      <div
-        class="search-result"
-        :style="
-          !state.searchText ? 'align-items:center;justify-content:center;' : ''
-        "
       >
-        <searchList
+        <template #top>
-          :searchResult="state.searchResult"
+          <div class="searchRoot">
-          :searchText="state.searchText"
+            <tm-input
-        ></searchList>
+              class="searchRoot_input"
-      </div>
+              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)
+  // console.log(e)
-  let searchText = e
+  state.searchText = e
-  queryAllSearch(searchText)
+  zPaging.value?.reload()
 }
 
 // ES搜索聊天记录-主页搜索什么都有
-const queryAllSearch = (searchText) => {
+const queryAllSearch = () => {
   let params = {
-    key: searchText, //关键字
+    key: state.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
@@ -97,11 +116,27 @@ const queryAllSearch = (searchText) => {
       )
       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(() => {})
+  resp.catch(() => {
+    zPaging.value?.complete([])
+  })
 }
 
 //点击取消搜索
@@ -112,30 +147,9 @@ const cancelSearch = () => {
 }
 </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;
+    padding: 20rpx 48rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -155,9 +169,7 @@ page {
 
   .search-result {
     width: 100%;
-    flex: 1;
+    padding: 0 32rpx;
-
-    min-height: 0;
     display: flex;
     flex-direction: row;
     align-items: flex-start;

src/pages/search/moreResult/moreResult.vue

@@ -1,47 +1,82 @@
 <template>
   <div class="outer-layer search-page">
     <div class="root">
-      <div class="searchRoot">
+      <ZPaging
-        <tm-input
+        ref="zPaging"
-          class="searchRoot_input"
+        :show-scrollbar="false"
-          placeholder="请输入…"
+        v-model="state.searchResultList"
-          color="#F9F9FD"
+        @query="queryAllSearch"
-          :round="1"
+        :empty-view-img="'/src/static//image/search/search-no-data.png'"
-          prefix="tmicon-search"
+        :empty-view-text="$t('search.hint')"
-          prefixColor="#46299D"
+        :empty-view-img-style="{ width: '476rpx', height: '261rpx' }"
-          v-model.lazy="state.searchText"
+        :empty-view-title-style="{
-          @input="inputSearchText"
+          color: '#999999',
-        ></tm-input>
+          margin: '-20rpx 0 0',
-        <span
+          'line-height': '40rpx',
-          class="searchRoot_cancelBtn text-[32rpx] font-medium"
+          'font-size': '28rpx',
-          @click="cancelSearch"
+          'font-weight': 400,
-        >
+        }"
-          {{ $t('cancel') }}
+        :default-page-no="1"
-        </span>
+        :default-page-size="state.searchResultPageSize"
-      </div>
-      <div
-        class="search-result"
-        :style="
-          !state.searchText ? 'align-items:center;justify-content:center;' : ''
-        "
       >
-        <searchList
+        <template #top>
-          :searchResult="state.searchResult"
+          <div class="searchRoot">
-          :searchText="state.searchText"
+            <tm-input
-        ></searchList>
+              class="searchRoot_input"
-      </div>
+              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="false"
+          ></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 { onLoad } from '@dcloudio/uni-app'
-import { ServeSeachQueryAll } from '@/api/search/index'
+import {
+  ServeQueryUser,
+  ServeQueryGroup,
+  ServeTalkRecord,
+} 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: 10, //搜索结果每页数据量
   searchResultKey: '',
@@ -59,38 +94,90 @@ onLoad((options) => {
 
 //输入搜索文本
 const inputSearchText = (e) => {
-  console.log(e)
+  // console.log(e)
-  let searchText = e
+  state.searchText = e
-  queryAllSearch(searchText)
+  zPaging.value?.reload()
 }
 
 // ES搜索聊天记录-指定用户、指定群、群与用户概览
-const queryAllSearch = (searchText) => {
+const queryAllSearch = () => {
-  let talk_type = 0
+  let params = {}
+  let resp = null
   if (state.searchResultKey === 'user_infos') {
-    talk_type = 1
+    params = {
+      size: state.searchResultPageSize, //搜索结果每页数据量
+      key: state.searchText, //关键字
+      last_id: 0, //最后一条用户id
+    }
+    resp = ServeQueryUser(params)
   } else if (state.searchResultKey === 'combinedGroup') {
-    talk_type = 2
+    params = {
+      size: state.searchResultPageSize, //搜索结果每页数据量
+      key: state.searchText, //关键字
+      last_group_id: 0, //最后一条群id
+      last_member_id: 0, //最后一条用户id
+    }
+    resp = ServeQueryGroup(params)
   } else if (state.searchResultKey === 'general_infos') {
-    talk_type = 0
+    params = {
+      talk_type: 0, //1私聊2群聊
+      key: state.searchText, //关键字
+      size: state.searchResultPageSize, //搜索结果每页数据量
+      receiver_id: 0, //查详情的时候需传入
+      last_group_id: 0, //最后一条群id
+      last_member_id: 0, //最后一条用户id
+    }
+    resp = ServeTalkRecord(params)
   }
-  let params = {
-    talk_type: talk_type, //1私聊2群聊
-    receiver_id: 0, //需要查详情的时候，送recevier_id
-    key: searchText, //关键字
-    size: state.searchResultPageSize, //搜索结果每页数据量
-    last_group_id: 0,
-    last_member_id: 0, //,
-  }
-  const resp = ServeTalkRecord(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(() => {})
+  resp.catch(() => {
+    zPaging.value?.complete([])
+  })
 }
 
 //点击取消搜索
@@ -124,7 +211,7 @@ page {
 
 .search-page {
   .searchRoot {
-    padding: 0 16rpx;
+    padding: 20rpx 48rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -145,7 +232,7 @@ page {
   .search-result {
     width: 100%;
     flex: 1;
-
+    padding: 0 32rpx;
     min-height: 0;
     display: flex;
     flex-direction: row;