784 lines
24 KiB
Vue
784 lines
24 KiB
Vue
<template>
|
|
<div class="search-list">
|
|
<n-infinite-scroll
|
|
:style="{ maxHeight: props.searchResultMaxHeight }"
|
|
:distance="47"
|
|
@load="doLoadMore"
|
|
>
|
|
<div class="search-result">
|
|
<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'
|
|
"
|
|
:style="{ margin: props.useCustomTitle ? '0' : '' }"
|
|
>
|
|
<!-- <div class="result-title" v-if="!props.useCustomTitle">
|
|
<span class="text-[14px] font-regular">
|
|
{{ getResultKeysValue(searchResultKey) }}
|
|
</span>
|
|
</div> -->
|
|
<slot
|
|
name="result-title"
|
|
:getResultKeysValue="getResultKeysValue"
|
|
:searchResultKey="searchResultKey"
|
|
:searchResultIndex="searchResultIndex"
|
|
></slot>
|
|
<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="(
|
|
searchResultKey === 'user_infos'
|
|
? (state.userInfosShowAll || (props.listLimit && index < 3))
|
|
: searchResultKey === 'combinedGroup'
|
|
? (state.groupInfosShowAll || (props.listLimit && index < 3))
|
|
: (props.listLimit && index < 3)
|
|
) || !props.listLimit"
|
|
:searchResultKey="searchResultKey"
|
|
:searchItem="item"
|
|
:searchText="state.searchText"
|
|
:searchRecordDetail="props.searchRecordDetail"
|
|
:isClickStay="
|
|
props.useClickStay &&
|
|
typeof state.clickStayItem === 'string' &&
|
|
state.clickStayItem === `${item.talk_type}_${item.receiver_id}`
|
|
"
|
|
></searchItem>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="result-has-more"
|
|
v-if="
|
|
getHasMoreResult(searchResultKey) &&
|
|
!(
|
|
(searchResultKey === 'user_infos' && state.userInfosExpand) ||
|
|
(searchResultKey === 'combinedGroup' && state.groupInfosExpand)
|
|
)
|
|
"
|
|
@click="onMoreResultClick(searchResultKey)"
|
|
>
|
|
<span class="text-[14px] font-regular">
|
|
{{ getHasMoreResult(searchResultKey) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-infinite-scroll>
|
|
<!-- <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="searchNoData"
|
|
:empty-view-text="'检索您要查找的内容吧～'"
|
|
:empty-view-img-style="{ width: '238px', height: '131px' }"
|
|
:empty-view-title-style="{
|
|
color: '#999999',
|
|
margin: '-10px 0 0',
|
|
'line-height': '20px',
|
|
'font-size': '14px',
|
|
'font-weight': 400,
|
|
}"
|
|
:refresher-enabled="false"
|
|
>
|
|
<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-[16px] font-medium"
|
|
@click="cancelSearch"
|
|
>
|
|
取消
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<div
|
|
class="search-record-detail"
|
|
v-if="props.searchRecordDetail && !props?.hideFirstRecord"
|
|
>
|
|
<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>
|
|
</ZPaging> -->
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
// import searchNoData from '@/static/image/search/search-no-data.png'
|
|
// import customInput from '@/components/custom-input/custom-input.vue'
|
|
// import pointerIconSrc from '@/static/image/search/search-item-pointer.png'
|
|
// import lodash from 'lodash'
|
|
// import { useUserStore } from '@/store'
|
|
// const userStore = useUserStore()
|
|
|
|
// 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'
|
|
// const zPaging = ref()
|
|
// useZPaging(zPaging)
|
|
|
|
import { NInfiniteScroll } from 'naive-ui'
|
|
import searchItem from './searchItem.vue'
|
|
import { ref, reactive, defineEmits, defineProps, onMounted, watch } from 'vue'
|
|
import { ServeQueryUser, ServeQueryGroup } from '@/api/search'
|
|
|
|
const emits = defineEmits([
|
|
'toMoreResultPage',
|
|
'lastIdChange',
|
|
'clickSearchItem',
|
|
'clickStayItemChange',
|
|
'resultTotalCount'
|
|
])
|
|
|
|
const state = reactive({
|
|
searchText: '', //搜索内容
|
|
searchResultList: [], //搜素结果列表
|
|
searchResult: null, //搜索结果
|
|
pageNum: 1, //当前请求数据页数
|
|
uid: 12303, //当前用户id
|
|
clickStayItem: '', //点击停留的item
|
|
hasMore: true, //是否还有更多数据
|
|
loading: false, //加载锁
|
|
userInfosExpand: false, // 控制通讯录全部加载完
|
|
userInfosLoading: false, // 控制通讯录加载更多状态
|
|
userInfosLastId: undefined, // 记录通讯录分页的 last_id
|
|
userInfosShowAll: false, // 只要点过"更多通讯录"就为 true
|
|
groupInfosExpand: false, // 控制群聊全部加载完
|
|
groupInfosLoading: false, // 控制群聊加载更多状态
|
|
groupInfosLastGroupId: 0, // 记录群聊分页的 last_group_id
|
|
groupInfosLastMemberId: 0, // 记录群聊分页的 last_member_id
|
|
groupInfosShowAll: false // 只要点过"更多群聊"就为 true
|
|
})
|
|
|
|
const props = defineProps({
|
|
searchResultPageSize: {
|
|
type: Number,
|
|
default: 0
|
|
}, //搜索结果每页数据量
|
|
listLimit: {
|
|
type: Boolean,
|
|
default: false
|
|
}, //是否限制列表内数据数量
|
|
apiParams: {
|
|
type: String,
|
|
default: ''
|
|
}, //请求参数
|
|
apiRequest: Function, //请求
|
|
searchText: {
|
|
type: String,
|
|
default: ''
|
|
}, //搜索内容
|
|
isPagination: {
|
|
type: Boolean,
|
|
default: false
|
|
}, //是否分页
|
|
searchRecordDetail: {
|
|
type: Boolean,
|
|
default: false
|
|
}, //是否是搜索聊天记录的详情
|
|
first_talk_record_infos: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
}, //接受者信息
|
|
hideFirstRecord: {
|
|
type: Boolean,
|
|
default: false
|
|
}, //是否隐藏前缀及搜索群/用户主体信息
|
|
useClickStay: {
|
|
type: Boolean,
|
|
default: false
|
|
}, //是否使用点击停留样式
|
|
searchResultMaxHeight: {
|
|
type: String,
|
|
default: '677px'
|
|
}, //搜索结果最大高度
|
|
useCustomTitle: {
|
|
type: Boolean,
|
|
default: false
|
|
}, //是否使用自定义标题
|
|
selectItemInList: {
|
|
type: String,
|
|
default: ''
|
|
} //在列表选中的聊天记录搜索项
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (props.searchText) {
|
|
state.searchText = props.searchText
|
|
queryAllSearch()
|
|
}
|
|
})
|
|
|
|
// 监听每页数量变化
|
|
watch(
|
|
() => props.searchResultPageSize,
|
|
(newVal, oldVal) => {
|
|
queryAllSearch()
|
|
}
|
|
)
|
|
|
|
// 监听搜索文本变化
|
|
watch(
|
|
() => props.searchText,
|
|
(newVal, oldVal) => {
|
|
// 同步更新 state.searchText
|
|
state.searchText = newVal
|
|
// 清空搜索结果
|
|
state.searchResult = null
|
|
// 重置页码
|
|
state.pageNum = 1
|
|
//重置点击停留列表项
|
|
state.clickStayItem = ''
|
|
emits('clickStayItemChange', state.clickStayItem)
|
|
//重置搜索条件
|
|
emits('lastIdChange', 0, 0, 0, '', '')
|
|
state.userInfosExpand = false
|
|
state.userInfosShowAll = false
|
|
state.userInfosLastId = undefined
|
|
state.groupInfosExpand = false
|
|
state.groupInfosShowAll = false
|
|
state.groupInfosLastGroupId = 0
|
|
state.groupInfosLastMemberId = 0
|
|
queryAllSearch()
|
|
}
|
|
)
|
|
|
|
// ES搜索聊天记录-主页搜索什么都有、指定用户、指定群、群与用户概览
|
|
const queryAllSearch = (doClearSearchResult) => {
|
|
if (doClearSearchResult) {
|
|
state.searchResult = null
|
|
}
|
|
let params = {
|
|
key: state.searchText, //关键字
|
|
size: props.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) {
|
|
let receiverInfo = JSON.parse(JSON.stringify(data.talk_record_infos[0]))
|
|
if (receiverInfo.talk_type === 1) {
|
|
//单聊才需此判断
|
|
if (receiverInfo.user_id === state.uid) {
|
|
//发送人是自己，接收人不需要变
|
|
}
|
|
if (receiverInfo.receiver_id === state.uid) {
|
|
//接收人是自己，这里需要变成对方
|
|
let temp_id = receiverInfo.receiver_id
|
|
let temp_name = receiverInfo.receiver_name
|
|
let temp_avatar = receiverInfo.receiver_avatar
|
|
receiverInfo.receiver_id = receiverInfo.user_id
|
|
receiverInfo.receiver_name = receiverInfo.user_name
|
|
receiverInfo.receiver_avatar = receiverInfo.user_avatar
|
|
receiverInfo.user_id = temp_id
|
|
receiverInfo.user_name = temp_name
|
|
receiverInfo.user_avatar = temp_avatar
|
|
}
|
|
}
|
|
state.first_talk_record_infos = Object.assign(
|
|
{},
|
|
state.first_talk_record_infos,
|
|
receiverInfo
|
|
)
|
|
;(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 (state.pageNum === 1) {
|
|
// 第一页请求且为空，清空结果
|
|
state.searchResult = null
|
|
// zPaging.value?.complete([])
|
|
} else {
|
|
// 加载更多且为空，保持原列表不变
|
|
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
|
|
}
|
|
} else {
|
|
if (props.isPagination) {
|
|
if (state.pageNum === 1) {
|
|
// 第一页请求，直接设置新数据
|
|
state.searchResult = data
|
|
} else {
|
|
// 加载更多，合并数据
|
|
data[paginationKey] = (state.searchResult?.[paginationKey] || []).concat(
|
|
data[paginationKey]
|
|
)
|
|
state.searchResult = data
|
|
}
|
|
|
|
emits(
|
|
'lastIdChange',
|
|
data.last_id,
|
|
data.last_group_id,
|
|
data.last_member_id,
|
|
data.last_receiver_user_name,
|
|
data.last_receiver_group_name
|
|
)
|
|
let total = data.count
|
|
if (props.searchRecordDetail) {
|
|
if (state?.first_talk_record_infos?.talk_type === 1) {
|
|
total = data.user_record_count
|
|
} else if (state?.first_talk_record_infos?.talk_type === 2) {
|
|
total = data.group_record_count
|
|
}
|
|
}
|
|
if (total < props.searchResultPageSize) {
|
|
state.hasMore = false
|
|
} else {
|
|
state.hasMore = true
|
|
}
|
|
emits('resultTotalCount', total)
|
|
// zPaging.value?.completeByTotal([data], total)
|
|
} else {
|
|
state.searchResult = data
|
|
// zPaging.value?.complete([data])
|
|
}
|
|
}
|
|
state.pageNum = state.pageNum + 1
|
|
// 同步 userInfosLastId
|
|
if (typeof data.last_id !== 'undefined') {
|
|
state.userInfosLastId = data.last_id
|
|
} else {
|
|
state.userInfosLastId = undefined
|
|
}
|
|
} else {
|
|
if (state.pageNum === 1) {
|
|
// 第一页请求失败，清空结果
|
|
state.searchResult = null
|
|
// zPaging.value?.complete([])
|
|
} else {
|
|
// 加载更多失败，保持原列表不变
|
|
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
|
|
}
|
|
}
|
|
})
|
|
|
|
resp.catch(() => {
|
|
if (state.pageNum === 1) {
|
|
// 第一页请求异常，清空结果
|
|
state.searchResult = null
|
|
// zPaging.value?.complete([])
|
|
} else {
|
|
// 加载更多异常，保持原列表不变
|
|
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
|
|
}
|
|
})
|
|
return resp
|
|
}
|
|
|
|
//点击取消搜索
|
|
const cancelSearch = () => {
|
|
const pages = getCurrentPages()
|
|
if (pages.length > 1) {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else {
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
}
|
|
|
|
//获取key对应值
|
|
const getResultKeysValue = (keys) => {
|
|
let resultKey = ''
|
|
switch (keys) {
|
|
case 'user_infos':
|
|
resultKey = '通讯录'
|
|
break
|
|
case 'group_infos':
|
|
resultKey = '群聊'
|
|
break
|
|
case 'group_member_infos':
|
|
resultKey = '群聊'
|
|
break
|
|
case 'combinedGroup':
|
|
resultKey = '群聊'
|
|
break
|
|
case 'general_infos':
|
|
resultKey = '聊天记录'
|
|
break
|
|
case 'talk_record_infos':
|
|
resultKey = '相关聊天记录'
|
|
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 = '更多通讯录'
|
|
}
|
|
break
|
|
case 'group_infos':
|
|
if (state.searchResult['group_count'] && state.searchResult['group_count'] > 3) {
|
|
has_more_result = '更多群聊'
|
|
}
|
|
break
|
|
case 'group_member_infos':
|
|
if (state.searchResult['group_count'] && state.searchResult['group_count'] > 3) {
|
|
has_more_result = '更多群聊'
|
|
}
|
|
break
|
|
case 'combinedGroup':
|
|
if (state.searchResult['group_count'] && state.searchResult['group_count'] > 3) {
|
|
has_more_result = '更多群聊'
|
|
}
|
|
break
|
|
case 'general_infos':
|
|
if (state.searchResult['record_count'] && state.searchResult['record_count'] >= 3) {
|
|
has_more_result = '更多聊天记录'
|
|
}
|
|
break
|
|
default:
|
|
}
|
|
return has_more_result
|
|
}
|
|
|
|
//点击跳转到更多结果页面
|
|
const toMoreResultPage = (searchResultKey) => {
|
|
emits('toMoreResultPage', searchResultKey, state.searchText)
|
|
}
|
|
|
|
//点击了搜索结果项
|
|
const clickSearchItem = (searchResultKey, searchItem) => {
|
|
console.log(searchResultKey, searchItem)
|
|
if (props.useClickStay) {
|
|
state.clickStayItem = searchItem.talk_type + '_' + searchItem.receiver_id
|
|
} else {
|
|
state.clickStayItem = ''
|
|
}
|
|
emits('clickStayItemChange', state.clickStayItem)
|
|
let talk_type = searchItem.talk_type
|
|
let receiver_id = searchItem.receiver_id
|
|
if (searchResultKey === 'user_infos') {
|
|
talk_type = 1
|
|
receiver_id = searchItem.id
|
|
} else if (searchResultKey === 'combinedGroup') {
|
|
talk_type = searchItem.type || 2
|
|
receiver_id = searchItem.group_id || searchItem.id
|
|
} else if (searchResultKey === 'general_infos') {
|
|
if (searchItem.talk_type === 1) {
|
|
if (searchItem.user_id === state.uid) {
|
|
//发送人是自己，接收人不需要变
|
|
}
|
|
if (searchItem.receiver_id === state.uid) {
|
|
//接收人是自己，这里需要变成对方
|
|
let temp_id = searchItem.receiver_id
|
|
let temp_name = searchItem.receiver_name
|
|
let temp_avatar = searchItem.receiver_avatar
|
|
searchItem.receiver_id = searchItem.user_id
|
|
searchItem.receiver_name = searchItem.user_name
|
|
searchItem.receiver_avatar = searchItem.user_avatar
|
|
searchItem.user_id = temp_id
|
|
searchItem.user_name = temp_name
|
|
searchItem.user_avatar = temp_avatar
|
|
}
|
|
}
|
|
}
|
|
emits(
|
|
'clickSearchItem',
|
|
state.searchText,
|
|
searchResultKey,
|
|
talk_type,
|
|
receiver_id,
|
|
encodeURIComponent(JSON.stringify(searchItem))
|
|
)
|
|
}
|
|
|
|
//加载更多数据
|
|
const doLoadMore = (doClearSearchResult) => {
|
|
if (
|
|
state.userInfosLoading ||
|
|
state.userInfosShowAll ||
|
|
state.groupInfosShowAll // 新增判断，群聊展开后不再触发 queryAllSearch
|
|
) {
|
|
return
|
|
}
|
|
if (!state.hasMore || state.loading) {
|
|
return
|
|
}
|
|
state.loading = true
|
|
queryAllSearch(doClearSearchResult).finally(() => {
|
|
state.loading = false
|
|
})
|
|
}
|
|
|
|
watch(
|
|
() => props.selectItemInList,
|
|
(newVal, oldVal) => {
|
|
if (newVal) {
|
|
const selectedItem = JSON.parse(decodeURIComponent(newVal))
|
|
clickSearchItem('general_infos', selectedItem)
|
|
}
|
|
},
|
|
{
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
)
|
|
|
|
// 单独维护通讯录加载更多逻辑，基于 last_id 分页
|
|
async function loadMoreUserInfos() {
|
|
if (state.userInfosLoading) return
|
|
state.userInfosLoading = true
|
|
try {
|
|
let params = {
|
|
key: state.searchText,
|
|
last_id: state.userInfosLastId,
|
|
size: 10
|
|
}
|
|
const resp = await ServeQueryUser(params)
|
|
if (resp.code === 200 && Array.isArray(resp.data.user_infos)) {
|
|
if (!state.userInfosLastId) {
|
|
// 第一次加载，直接替换
|
|
state.searchResult = {
|
|
...state.searchResult,
|
|
user_infos: resp.data.user_infos
|
|
}
|
|
} else {
|
|
// 后续加载，追加
|
|
state.searchResult = {
|
|
...state.searchResult,
|
|
user_infos: (state.searchResult.user_infos || []).concat(resp.data.user_infos)
|
|
}
|
|
}
|
|
state.userInfosLastId = resp.data.last_id
|
|
// 判断是否全部加载完
|
|
if (
|
|
!resp.data.last_id ||
|
|
(Array.isArray(resp.data.user_infos) && resp.data.user_infos.length < 10)
|
|
) {
|
|
state.userInfosExpand = true
|
|
}
|
|
}
|
|
} finally {
|
|
state.userInfosLoading = false
|
|
}
|
|
}
|
|
|
|
// 处理"更多通讯录"、 "更多群聊"点击，调用新方法
|
|
function onMoreResultClick(searchResultKey) {
|
|
if (searchResultKey === 'user_infos') {
|
|
state.userInfosShowAll = true
|
|
loadMoreUserInfos()
|
|
} else if (searchResultKey === 'combinedGroup') {
|
|
state.groupInfosShowAll = true
|
|
loadMoreGroupInfos()
|
|
} else {
|
|
emits('toMoreResultPage', searchResultKey, state.searchText)
|
|
}
|
|
}
|
|
|
|
// 单独维护群聊加载更多逻辑，基于 last_id 分页
|
|
async function loadMoreGroupInfos() {
|
|
if (state.groupInfosLoading) return
|
|
state.groupInfosLoading = true
|
|
try {
|
|
let params = {
|
|
key: state.searchText,
|
|
last_group_id: state.groupInfosLastGroupId,
|
|
last_member_id: state.groupInfosLastMemberId,
|
|
size: 10
|
|
}
|
|
const resp = await ServeQueryGroup(params)
|
|
if (resp.code === 200) {
|
|
const groupInfos = Array.isArray(resp.data.group_infos) ? resp.data.group_infos : []
|
|
const groupMemberInfos = Array.isArray(resp.data.group_member_infos) ? resp.data.group_member_infos : []
|
|
|
|
// 给新数据加上 groupTempType
|
|
groupInfos.forEach(item => {
|
|
item.groupTempType = 'group_infos'
|
|
item.group_type = item.type // 保持一致性
|
|
})
|
|
groupMemberInfos.forEach(item => {
|
|
item.groupTempType = 'group_member_infos'
|
|
})
|
|
|
|
const isFirstLoad = (!state.groupInfosLastGroupId && !state.groupInfosLastMemberId) ||
|
|
(state.groupInfosLastGroupId === 0 && state.groupInfosLastMemberId === 0)
|
|
if (isFirstLoad) {
|
|
// 第一次加载，直接替换
|
|
state.searchResult = {
|
|
...state.searchResult,
|
|
group_infos: groupInfos,
|
|
group_member_infos: groupMemberInfos,
|
|
combinedGroup: groupInfos.concat(groupMemberInfos)
|
|
}
|
|
} else {
|
|
// 后续加载，追加
|
|
const allGroupInfos = (state.searchResult.group_infos || []).concat(groupInfos)
|
|
const allGroupMemberInfos = (state.searchResult.group_member_infos || []).concat(groupMemberInfos)
|
|
state.searchResult = {
|
|
...state.searchResult,
|
|
group_infos: allGroupInfos,
|
|
group_member_infos: allGroupMemberInfos,
|
|
combinedGroup: allGroupInfos.concat(allGroupMemberInfos)
|
|
}
|
|
}
|
|
state.groupInfosLastGroupId = resp.data.last_group_id
|
|
state.groupInfosLastMemberId = resp.data.last_member_id
|
|
// 判断是否全部加载完
|
|
const noMoreData = (
|
|
(!groupInfos.length && !groupMemberInfos.length) ||
|
|
(resp.data.last_group_id === 0 && resp.data.last_member_id === 0)
|
|
)
|
|
if (noMoreData) {
|
|
state.groupInfosExpand = true
|
|
}
|
|
}
|
|
} finally {
|
|
state.groupInfosLoading = false
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.search-list {
|
|
.searchRoot {
|
|
padding: 10px 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.searchRoot_cancelBtn {
|
|
line-height: 22px;
|
|
color: #46299d;
|
|
margin: 0 0 0 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.search-record-detail {
|
|
padding: 0 25px;
|
|
}
|
|
.search-result {
|
|
width: 100%;
|
|
// padding: 0 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
|
|
.search-result-list {
|
|
width: 100%;
|
|
// padding: 0 10px;
|
|
|
|
.search-result-part {
|
|
// margin: 18px 0 0;
|
|
|
|
.result-title {
|
|
padding: 0 10px 5px;
|
|
border-bottom: 1px solid #f8f8f8;
|
|
span {
|
|
line-height: 20px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.result-has-more {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #f8f8f8;
|
|
cursor: pointer;
|
|
span {
|
|
color: #191919;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.result-has-more:hover {
|
|
background-color: #f8f8f8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|