新增搜索聊天结果详情页面;处理页面与组件间的联动与传参

src/pages.json

@@ -1,7 +1,7 @@
 {
-  "easycom":{
+  "easycom": {
     "autoscan": true,
-    "custom":{
+    "custom": {
       "^tm-(.*)": "@/tmui/components/tm-$1/tm-$1.vue"
     }
   },
@@ -11,7 +11,7 @@
       "type": "page",
       "style": {
         "navigationStyle": "custom",
-        "enablePullDownRefresh":false
+        "enablePullDownRefresh": false
       }
     },
     {
@@ -19,7 +19,7 @@
       "type": "page",
       "style": {
         "navigationStyle": "custom",
-        "enablePullDownRefresh":false
+        "enablePullDownRefresh": false
       }
     },
     {
@@ -27,7 +27,7 @@
       "type": "page",
       "style": {
         "navigationStyle": "custom",
-        "enablePullDownRefresh":false
+        "enablePullDownRefresh": false
       }
     },
     {
@@ -35,7 +35,7 @@
       "type": "page",
       "style": {
         "navigationStyle": "custom",
-        "enablePullDownRefresh":false
+        "enablePullDownRefresh": false
       }
     },
     {
@@ -43,7 +43,7 @@
       "type": "page",
       "style": {
         "navigationStyle": "custom",
-        "enablePullDownRefresh":false
+        "enablePullDownRefresh": false
       }
     },
     {
@@ -51,7 +51,7 @@
       "type": "page",
       "style": {
         "navigationStyle": "custom",
-        "enablePullDownRefresh":false
+        "enablePullDownRefresh": false
       }
     },
     {
@@ -64,7 +64,7 @@
       "type": "page",
       "style": {
         "navigationStyle": "custom",
-        "enablePullDownRefresh":false
+        "enablePullDownRefresh": false
       }
     },
     {
@@ -72,18 +72,23 @@
       "type": "page",
       "style": {
         "navigationStyle": "custom",
-        "enablePullDownRefresh":false
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/search/moreResult/moreResultDetail",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
       }
     }
-
-
   ],
   "globalStyle": {
     "backgroundColor": "#FFFFFF",
     "navigationBarBackgroundColor": "#FFFFFF",
     "navigationBarTextstyle": "black",
-    "navigationBarTitleText":""
+    "navigationBarTitleText": ""
-
   },
   "subPackages": []
 }

src/pages/search/components/searchItem.vue

@@ -1,5 +1,13 @@
 <template>
-  <div class="search-item" v-if="resultName">
+  <div
+    class="search-item"
+    v-if="resultName"
+    :style="
+      props.searchResultKey === 'talk_record_infos_receiver'
+        ? 'margin: 24rpx 0 0'
+        : ''
+    "
+  >
     <div class="avatar-img">
       <img v-if="avatarImg !== 'textImg'" :src="avatarImg" />
       <span v-if="avatarImg === 'textImg'" class="text-[32rpx] font-bold">
@@ -7,9 +15,16 @@
       </span>
     </div>
     <div class="result-info">
-      <div class="info-name">
+      <div
+        class="info-name"
+        :class="searchRecordDetail ? 'info-name-searchRecordDetail' : ''"
+      >
         <HighlightText
-          class="text-[32rpx] font-medium"
+          :class="
+            searchRecordDetail
+              ? 'text-[24rpx] font-medium'
+              : 'text-[32rpx] font-medium'
+          "
           :text="resultName"
           :searchText="props.searchText"
         />
@@ -20,7 +35,7 @@
         </div>
         <div
           class="info-tag"
-          v-if="resultType"
+          v-if="resultType && !searchRecordDetail"
           :style="'border-color:' + resultTypeColor"
         >
           <span
@@ -30,8 +45,17 @@
             {{ resultType }}
           </span>
         </div>
+        <div v-if="searchRecordDetail && chatRecordCreatedAt">
+          <span class="text-[24rpx] font-medium">
+            {{ chatRecordCreatedAt }}
+          </span>
+        </div>
       </div>
-      <div class="info-detail" v-if="resultDetail">
+      <div
+        class="info-detail"
+        v-if="resultDetail"
+        :class="searchRecordDetail ? 'info-detail-searchRecordDetail' : ''"
+      >
         <HighlightText
           class="text-[28rpx] font-regular"
           :text="resultDetail"
@@ -39,6 +63,9 @@
         />
       </div>
     </div>
+    <div class="search-item-pointer" v-if="pointerIconSrc">
+      <img :src="pointerIconSrc" />
+    </div>
   </div>
 </template>
 <script setup>
@@ -46,14 +73,25 @@ import zu4992 from '@/static/image/chatList/zu4992@2x.png'
 import zu4991 from '@/static/image/chatList/zu4991@2x.png'
 import zu4989 from '@/static/image/chatList/zu4989@2x.png'
 import zu5296 from '@/static/image/chatList/zu5296@2x.png'
-import { ref, watch, computed, onMounted, onUnmounted, reactive } from 'vue'
+import {
+  ref,
+  watch,
+  computed,
+  onMounted,
+  onUnmounted,
+  reactive,
+  defineProps,
+} from 'vue'
 import HighlightText from './highLightText.vue'
 import { useI18n } from 'vue-i18n'
+import { beautifyTime } from '@/utils/datetime'
 const { t } = useI18n()
 const props = defineProps({
   searchItem: Object | Number,
   searchResultKey: String,
-  searchText: String,
+  searchText: String, //搜索内容
+  searchRecordDetail: Boolean, //是否是搜索聊天记录详情
+  pointerIconSrc: String, //箭头图标
 })
 // 映射表-查找对应结构下的属性名
 const keyMapping = {
@@ -99,12 +137,23 @@ const keyMapping = {
     detailKey: 'count',
     group_num: 'group_num',
   },
+  talk_record_infos: {
+    avatar: 'user_avatar',
+    name: 'user_name',
+    detailKey: 'extra',
+    created_at: 'created_at',
+  },
+  talk_record_infos_receiver: {
+    avatar: 'receiver_avatar',
+    name: 'receiver_name',
+    group_num: 'group_num',
+  },
 }
 //获取key对应值
 const getKeyValue = (keys) => {
   let keyValue = ''
   if (keys) {
-    keyValue = props.searchItem[keys]
+    keyValue = props?.searchItem ? props?.searchItem[keys] : ''
   }
   return keyValue
 }
@@ -162,6 +211,11 @@ const resultType = computed(() => {
 const resultTypeColor = computed(() => {
   return groupTypeMapping[props.searchItem?.group_type]?.result_type_color
 })
+//搜索聊天记录详情-时间
+const chatRecordCreatedAt = computed(() => {
+  let created_at = getKeyValue(keyMapping[props.searchResultKey]?.created_at)
+  return beautifyTime(created_at)
+})
 //详细内容
 const resultDetail = computed(() => {
   let result_detail =
@@ -173,6 +227,9 @@ const resultDetail = computed(() => {
     case 'user_name':
       result_detail = t('search.result.include') + result_detail
       break
+    case 'extra':
+      result_detail = JSON.parse(props.searchItem?.extra).content
+      break
     default:
       result_detail = ''
   }
@@ -202,6 +259,7 @@ const resultDetail = computed(() => {
     align-items: center;
     justify-content: center;
     background: linear-gradient(to right, #674bbc, #46299d);
+    flex-shrink: 0;
     img {
       width: 100%;
       height: 100%;
@@ -212,6 +270,7 @@ const resultDetail = computed(() => {
     }
   }
   .result-info {
+    width: 100%;
     .info-name {
       display: flex;
       flex-direction: row;
@@ -234,12 +293,39 @@ const resultDetail = computed(() => {
         }
       }
     }
+    .info-name-searchRecordDetail {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      span {
+        color: $theme-hint-text;
+        line-height: 34rpx;
+      }
+    }
     .info-detail {
       span {
         color: $theme-hint-text;
         line-height: 40rpx;
       }
     }
+    .info-detail-searchRecordDetail {
+      span {
+        color: $theme-text;
+      }
+    }
+  }
+  .search-item-pointer {
+    width: 11rpx;
+    height: 18rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 </style>

src/pages/search/components/searchList.vue

@@ -1,65 +1,282 @@
 <template>
   <div class="search-list">
-    <div class="search-result-list">
+    <ZPaging
-      <div
+      ref="zPaging"
-        class="search-result-each-part"
+      :show-scrollbar="false"
-        v-for="(searchResultValue,
+      v-model="state.searchResultList"
-        searchResultKey,
+      @query="queryAllSearch"
-        searchResultIndex) in props.searchResult"
+      :default-page-no="state.pageNum"
-        :key="searchResultKey"
+      :default-page-size="props.searchResultPageSize"
-      >
+      :loading-more-default-as-loading="true"
-        <div
+      :inside-more="true"
-          class="search-result-part"
+      :empty-view-img="'/src/static//image/search/search-no-data.png'"
-          v-if="
+      :empty-view-text="$t('search.hint')"
-            Array.isArray(props?.searchResult[searchResultKey]) &&
+      :empty-view-img-style="{ width: '476rpx', height: '261rpx' }"
-            props?.searchResult[searchResultKey].length > 0 &&
+      :empty-view-title-style="{
-            searchResultKey !== 'group_infos' &&
+        color: '#999999',
-            searchResultKey !== 'group_member_infos'
+        margin: '-20rpx 0 0',
-          "
+        'line-height': '40rpx',
-        >
+        'font-size': '28rpx',
-          <div class="result-title">
+        'font-weight': 400,
-            <span class="text-[28rpx] font-regular">
+      }"
-              {{ getResultKeysValue(searchResultKey) }}
+    >
-            </span>
+      <template #top>
-          </div>
+        <div class="searchRoot">
-          <div class="result-list">
+          <tm-input
-            <div
+            class="searchRoot_input"
-              class="result-list-each"
+            placeholder="请输入…"
-              v-for="(item, index) in props?.searchResult[searchResultKey]"
+            color="#F9F9FD"
-              :key="index"
+            :round="1"
-            >
+            prefix="tmicon-search"
-              <searchItem
+            prefixColor="#46299D"
-                v-if="(props.listLimit && index < 3) || !props.listLimit"
+            v-model.lazy="state.searchText"
-                :searchResultKey="searchResultKey"
+            @input="inputSearchText"
-                :searchItem="item"
+          ></tm-input>
-                :searchText="props.searchText"
+          <span
-              ></searchItem>
+            class="searchRoot_cancelBtn text-[32rpx] font-medium"
-            </div>
+            @click="cancelSearch"
-          </div>
-          <div
-            class="result-has-more"
-            v-if="getHasMoreResult(searchResultKey)"
-            @click="toMoreResultPage(searchResultKey)"
           >
-            <span class="text-[28rpx] font-regular">
+            {{ $t('cancel') }}
-              {{ getHasMoreResult(searchResultKey) }}
+          </span>
-            </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>
-    </div>
+    </ZPaging>
   </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 searchItem from './searchItem.vue'
 import { useI18n } from 'vue-i18n'
-const props = defineProps({
+import { ref, reactive, defineEmits, defineProps, onMounted } from 'vue'
-  searchResult: Object,
+import pointerIconSrc from '@/static/image/search/search-item-pointer.png'
-  searchText: String,
+
-  listLimit: Boolean,
+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,
+          )
+          zPaging.value?.completeByTotal([data], data.count)
+        } 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 = ''
@@ -79,6 +296,9 @@ const getResultKeysValue = (keys) => {
     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 = ''
   }
@@ -91,32 +311,32 @@ const getHasMoreResult = (searchResultKey) => {
   switch (searchResultKey) {
     case 'user_infos':
       if (
-        props.searchResult['user_count'] &&
+        state.searchResult['user_count'] &&
-        props.searchResult['user_count'] > 3
+        state.searchResult['user_count'] > 3
       ) {
         has_more_result = t('has_more') + t('index.mine.addressBook')
       }
       break
     case 'group_infos':
       if (
-        props.searchResult['group_count'] &&
+        state.searchResult['group_count'] &&
-        props.searchResult['group_count'] > 3
+        state.searchResult['group_count'] > 3
       ) {
         has_more_result = t('has_more') + t('chat.type.group')
       }
       break
     case 'group_member_infos':
       if (
-        props.searchResult['group_count'] &&
+        state.searchResult['group_count'] &&
-        props.searchResult['group_count'] > 3
+        state.searchResult['group_count'] > 3
       ) {
         has_more_result = t('has_more') + t('chat.type.group')
       }
       break
     case 'combinedGroup':
       if (
-        props.searchResult['group_count'] &&
+        state.searchResult['group_count'] &&
-        props.searchResult['group_count'] > 3
+        state.searchResult['group_count'] > 3
       ) {
         has_more_result = t('has_more') + t('chat.type.group')
       }
@@ -130,42 +350,71 @@ const getHasMoreResult = (searchResultKey) => {
 
 //点击跳转到更多结果页面
 const toMoreResultPage = (searchResultKey) => {
-  uni.navigateTo({
+  emits('toMoreResultPage', searchResultKey, state.searchText)
-    url:
+}
-      '/pages/search/moreResult/moreResult?searchResultKey=' +
+
-      searchResultKey +
+//点击了搜索结果项
-      '&searchText=' +
+const clickSearchItem = (searchResultKey, searchItem) => {
-      props.searchText,
+  emits(
-  })
+    'clickSearchItem',
+    state.searchText,
+    searchResultKey,
+    searchItem.talk_type,
+    searchItem.receiver_id,
+  )
 }
 </script>
 <style lang="scss" scoped>
 .search-list {
-  width: 100%;
+  .searchRoot {
-  display: flex;
+    padding: 20rpx 48rpx;
-  flex-direction: row;
+    display: flex;
-  align-items: center;
+    flex-direction: row;
-  justify-content: center;
+    align-items: center;
-  .search-result-list {
+    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-record-detail {
+    padding: 0 50rpx;
+  }
+  .search-result {
     width: 100%;
-    padding: 0 18rpx;
+    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 {
+      .search-result-part {
-      margin: 36rpx 0 0;
+        margin: 36rpx 0 0;
 
-      .result-title {
+        .result-title {
-        padding: 0 0 10rpx;
+          padding: 0 0 10rpx;
-        span {
+          span {
-          line-height: 40rpx;
+            line-height: 40rpx;
-          color: $theme-hint-text;
+            color: $theme-hint-text;
+          }
         }
-      }
+        .result-has-more {
-      .result-has-more {
+          padding: 10px 0;
-        padding: 10px 0;
+          border-bottom: 1px solid $theme-border-color;
-        border-bottom: 1px solid $theme-border-color;
+          span {
-        span {
+            color: #191919;
-          color: #191919;
+            line-height: 40rpx;
-          line-height: 40rpx;
+          }
         }
       }
     }

src/pages/search/index.vue

@@ -1,179 +1,50 @@
 <template>
   <div class="outer-layer search-page">
     <div class="root">
-      <ZPaging
+      <searchList
-        ref="zPaging"
+        :searchResultPageSize="3"
-        :show-scrollbar="false"
+        :listLimit="true"
-        v-model="state.searchResultList"
+        :apiRequest="ServeSeachQueryAll"
-        @query="queryAllSearch"
+        @toMoreResultPage="toMoreResultPage"
-        :empty-view-img="'/src/static//image/search/search-no-data.png'"
+        @clickSearchItem="clickSearchItem"
-        :empty-view-text="$t('search.hint')"
+      ></searchList>
-        :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 toMoreResultPage = (searchResultKey, searchText) => {
-
+  uni.navigateTo({
-const state = reactive({
+    url:
-  searchText: '', //搜索内容
+      '/pages/search/moreResult/moreResult?searchResultKey=' +
-  searchResultList: [], //搜素结果列表
+      searchResultKey +
-  searchResult: null, //搜索结果
+      '&searchText=' +
-  searchResultPageSize: 3, //搜索结果每页数据量
+      searchText,
-})
+  })
-
-//输入搜索文本
-const inputSearchText = (e) => {
-  // console.log(e)
-  state.searchText = e
-  zPaging.value?.reload()
 }
 
-// ES搜索聊天记录-主页搜索什么都有
+//点击了搜索结果项
-const queryAllSearch = () => {
+const clickSearchItem = (
-  let params = {
+  searchText,
-    key: state.searchText, //关键字
+  searchResultKey,
-    size: state.searchResultPageSize,
+  talk_type,
+  receiver_id,
+) => {
+  console.log(searchResultKey)
+  if (searchResultKey === 'general_infos') {
+    uni.navigateTo({
+      url:
+        '/pages/search/moreResult/moreResultDetail?searchText=' +
+        searchText +
+        '&talk_type=' +
+        talk_type +
+        '&receiver_id=' +
+        receiver_id,
+    })
   }
-  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">
+<style scoped lang="scss"></style>
-.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>

src/pages/search/moreResult/moreResult.vue

@@ -1,65 +1,20 @@
 <template>
   <div class="outer-layer search-page">
     <div class="root">
-      <ZPaging
+      <searchList
-        ref="zPaging"
+        :searchResultPageSize="10"
-        :show-scrollbar="false"
+        :listLimit="false"
-        v-model="state.searchResultList"
+        :apiRequest="state.apiRequest"
-        @query="queryAllSearch"
+        :apiParams="state.apiParams"
-        :empty-view-img="'/src/static//image/search/search-no-data.png'"
+        :searchText="state.searchText"
-        :empty-view-text="$t('search.hint')"
+        :isPagination="true"
-        :empty-view-img-style="{ width: '476rpx', height: '261rpx' }"
+        @lastIdChange="lastIdChange"
-        :empty-view-title-style="{
+        @clickSearchItem="clickSearchItem"
-          color: '#999999',
+      ></searchList>
-          margin: '-20rpx 0 0',
-          'line-height': '40rpx',
-          'font-size': '28rpx',
-          'font-weight': 400,
-        }"
-        :default-page-no="1"
-        :default-page-size="state.searchResultPageSize"
-      >
-        <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="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 {
@@ -67,177 +22,72 @@ import {
   ServeQueryGroup,
   ServeTalkRecord,
 } from '@/api/search/index'
-import { ref, watch, computed, onMounted, onUnmounted, reactive } from 'vue'
+import { reactive } from 'vue'
-import { useAuth } from '@/store/auth'
-import { nextTick } from 'process'
-
-const zPaging = ref()
-useZPaging(zPaging)
 
 const state = reactive({
-  searchText: '', //搜索内容
+  apiRequest: Function,
-  searchResultList: [], //搜索结果列表
+  apiParams: String,
-  searchResult: null, //搜索结果
+  searchText: String,
-  searchResultPageSize: 10, //搜索结果每页数据量
-  searchResultKey: '',
 })
 
 onLoad((options) => {
   console.log(options)
   if (options.searchResultKey) {
-    state.searchResultKey = options.searchResultKey
+    if (options.searchResultKey === 'user_infos') {
+      state.apiParams = encodeURIComponent(
+        JSON.stringify({
+          last_id: 0, //最后一条用户id
+        }),
+      )
+      state.apiRequest = ServeQueryUser
+    } else if (options.searchResultKey === 'combinedGroup') {
+      state.apiParams = encodeURIComponent(
+        JSON.stringify({
+          last_group_id: 0, //最后一条群id
+          last_member_id: 0, //最后一条用户id
+        }),
+      )
+      state.apiRequest = ServeQueryGroup
+    } else if (options.searchResultKey === 'general_infos') {
+      state.apiParams = encodeURIComponent(
+        JSON.stringify({
+          talk_type: 0, //1私聊2群聊
+          receiver_id: 0, //查详情的时候需传入
+          last_group_id: 0, //最后一条群id
+          last_member_id: 0, //最后一条用户id
+        }),
+      )
+      state.apiRequest = ServeTalkRecord
+    }
   }
   if (options.searchText) {
     state.searchText = options.searchText
   }
 })
 
-//输入搜索文本
+//分页查询时，最后一条id变化
-const inputSearchText = (e) => {
+const lastIdChange = (last_id, last_group_id, last_member_id) => {
-  // console.log(e)
+  let idChanges = {
-  state.searchText = e
+    last_id,
-  zPaging.value?.reload()
+    last_group_id,
-}
+    last_member_id,
-
-// ES搜索聊天记录-指定用户、指定群、群与用户概览
-const queryAllSearch = () => {
-  let params = {}
-  let resp = null
-  if (state.searchResultKey === 'user_infos') {
-    params = {
-      size: state.searchResultPageSize, //搜索结果每页数据量
-      key: state.searchText, //关键字
-      last_id: 0, //最后一条用户id
-    }
-    resp = ServeQueryUser(params)
-  } else if (state.searchResultKey === 'combinedGroup') {
-    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') {
-    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)
   }
-  resp.then(({ code, data }) => {
+  state.apiParams = encodeURIComponent(
-    console.log(data)
+    JSON.stringify(
-    if (code == 200) {
+      Object.assign(
-      if ((data.user_infos || []).length > 0) {
+        {},
-        ;(data.user_infos || []).forEach((item) => {
+        JSON.parse(decodeURIComponent(state.apiParams)),
-          item.group_type = 0
+        idChanges,
-        })
+      ),
-      }
+    ),
-      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 = () => {
+const clickSearchItem = (searchText) => {
-  uni.navigateBack({
+  uni.navigateTo({
-    delta: 1,
+    url: '/pages/search/moreResult/moreResultDetail?searchText=' + searchText,
   })
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-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: 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%;
-    flex: 1;
-    padding: 0 32rpx;
-    min-height: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-  }
-}
-</style>

src/pages/search/moreResult/moreResultDetail.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="outer-layer search-page">
+    <div class="root">
+      <searchList
+        :searchResultPageSize="10"
+        :listLimit="false"
+        :apiRequest="ServeTalkRecord"
+        :apiParams="state.apiParams"
+        :searchText="state.searchText"
+        :isPagination="true"
+        :searchRecordDetail="true"
+      ></searchList>
+    </div>
+  </div>
+</template>
+<script setup>
+import searchList from '../components/searchList.vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { ServeTalkRecord } from '@/api/search/index'
+import { reactive } from 'vue'
+
+const state = reactive({
+  apiParams: String,
+  searchText: String,
+})
+
+onLoad((options) => {
+  console.log(options)
+  let talk_type = 0
+  if (options.talk_type) {
+    talk_type = Number(options.talk_type)
+  }
+  let receiver_id = 0
+  if (options.receiver_id) {
+    receiver_id = Number(options.receiver_id)
+  }
+  state.apiParams = encodeURIComponent(
+    JSON.stringify({
+      talk_type: talk_type, //1私聊2群聊
+      receiver_id: receiver_id, //查详情的时候需传入
+      last_group_id: 0, //最后一条群id
+      last_member_id: 0, //最后一条用户id
+    }),
+  )
+  if (options.searchText) {
+    state.searchText = options.searchText
+  }
+
+  console.log(JSON.parse(decodeURIComponent(state.apiParams)))
+})
+</script>
+<style scoped lang="scss"></style>

src/uni_modules/tmui/locale/zh-Hans.json

@@ -81,5 +81,6 @@
   "chat.type.record": "聊天记录",
   "search.result.include": "包含：",
   "has_more": "更多",
-  "index.type.company": "公司"
+  "index.type.company": "公司",
+  "search.result.relevant": "相关"
 }