新增更多搜索结果页；将搜索结果列表封装组件；接入搜索聊天记录-群与用户概览接口

src/api/search/index.js

@@ -9,3 +9,12 @@ export const ServeSeachQueryAll = (data) => {
     data,
   })
 }
+
+// ES搜索聊天记录-指定用户、指定群、群与用户概览
+export const ServeTalkRecord = (data) => {
+  return request({
+    url: '/api/v1/elasticsearch/query-talk-record',
+    method: 'POST',
+    data,
+  })
+}

src/pages.json

@@ -66,6 +66,14 @@
         "navigationStyle": "custom",
         "enablePullDownRefresh":false
       }
+    },
+    {
+      "path": "pages/search/moreResult/moreResult",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh":false
+      }
     }
 
 

src/pages/search/components/searchList.vue

@@ -36,7 +36,11 @@
               ></searchItem>
             </div>
           </div>
-          <div class="result-has-more" v-if="getHasMoreResult(searchResultKey)">
+          <div
+            class="result-has-more"
+            v-if="getHasMoreResult(searchResultKey)"
+            @click="toMoreResultPage(searchResultKey)"
+          >
             <span class="text-[28rpx] font-regular">
               {{ getHasMoreResult(searchResultKey) }}
             </span>
@@ -126,9 +130,25 @@ const getHasMoreResult = (searchResultKey) => {
   }
   return has_more_result
 }
+
+//点击跳转到更多结果页面
+const toMoreResultPage = (searchResultKey) => {
+  uni.navigateTo({
+    url:
+      '/pages/search/moreResult/moreResult?searchResultKey=' +
+      searchResultKey +
+      '&searchText=' +
+      props.searchText,
+  })
+}
 </script>
 <style lang="scss" scoped>
 .search-list {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   .search-result-list {
     width: 100%;
     padding: 10rpx 18rpx;

src/pages/search/index.vue

@@ -25,71 +25,20 @@
           !state.searchText ? 'align-items:center;justify-content:center;' : ''
         "
       >
-        <div class="search-result-list" v-if="state.searchText">
+        <searchList
-          <div
+          :searchResult="state.searchResult"
-            class="search-result-each-part"
+          :searchText="state.searchText"
-            v-for="(searchResultValue,
+        ></searchList>
-            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 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 { useI18n } from 'vue-i18n'
 import { nextTick } from 'process'
-const { t } = useI18n()
 const state = reactive({
   searchText: '', //搜索内容
   searchResult: null, //搜索结果
@@ -103,74 +52,6 @@ const inputSearchText = (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 = {
@@ -281,51 +162,6 @@ page {
     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>

src/pages/search/moreResult/moreResult.vue

@@ -0,0 +1,156 @@
+<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;' : ''
+        "
+      >
+        <searchList
+          :searchResult="state.searchResult"
+          :searchText="state.searchText"
+        ></searchList>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import searchList from '../components/searchList.vue'
+import { onLoad } from '@dcloudio/uni-app'
+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 state = reactive({
+  searchText: '', //搜索内容
+  searchResult: null, //搜索结果
+  searchResultPageSize: 10, //搜索结果每页数据量
+  searchResultKey: '',
+})
+
+onLoad((options) => {
+  console.log(options)
+  if (options.searchResultKey) {
+    state.searchResultKey = options.searchResultKey
+  }
+  if (options.searchText) {
+    state.searchText = options.searchText
+  }
+})
+
+//输入搜索文本
+const inputSearchText = (e) => {
+  console.log(e)
+  let searchText = e
+  queryAllSearch(searchText)
+}
+
+// ES搜索聊天记录-指定用户、指定群、群与用户概览
+const queryAllSearch = (searchText) => {
+  let talk_type = 0
+  if (state.searchResultKey === 'user_infos') {
+    talk_type = 1
+  } else if (state.searchResultKey === 'combinedGroup') {
+    talk_type = 2
+  } else if (state.searchResultKey === 'general_infos') {
+    talk_type = 0
+  }
+  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) {
+    } 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;
+  }
+}
+</style>