搜索页面及子页面接入zPaging组件
This commit is contained in:
parent
3109e74a41
commit
82d6d529ba
@ -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({
|
||||
|
||||
@ -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 {
|
||||
margin: 46rpx 0 0;
|
||||
.search-result-part {
|
||||
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>
|
||||
|
||||
@ -1,77 +1,96 @@
|
||||
<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;' : ''
|
||||
"
|
||||
<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,
|
||||
}"
|
||||
>
|
||||
<searchList
|
||||
:searchResult="state.searchResult"
|
||||
:searchText="state.searchText"
|
||||
></searchList>
|
||||
</div>
|
||||
<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)
|
||||
let searchText = e
|
||||
queryAllSearch(searchText)
|
||||
// console.log(e)
|
||||
state.searchText = e
|
||||
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;
|
||||
|
||||
min-height: 0;
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
@ -1,47 +1,82 @@
|
||||
<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;' : ''
|
||||
"
|
||||
<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,
|
||||
}"
|
||||
:default-page-no="1"
|
||||
:default-page-size="state.searchResultPageSize"
|
||||
>
|
||||
<searchList
|
||||
:searchResult="state.searchResult"
|
||||
:searchText="state.searchText"
|
||||
></searchList>
|
||||
</div>
|
||||
<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 { 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)
|
||||
let searchText = e
|
||||
queryAllSearch(searchText)
|
||||
// console.log(e)
|
||||
state.searchText = e
|
||||
zPaging.value?.reload()
|
||||
}
|
||||
|
||||
// ES搜索聊天记录-指定用户、指定群、群与用户概览
|
||||
const queryAllSearch = (searchText) => {
|
||||
let talk_type = 0
|
||||
const queryAllSearch = () => {
|
||||
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;
|
||||
|
||||
0
src/pages/search/moreResult/moreResultDetail.vue
Normal file
0
src/pages/search/moreResult/moreResultDetail.vue
Normal file
Loading…
Reference in New Issue
Block a user