chat-pc/src/components/search/searchList.vue

744 lines
22 KiB
Vue
Raw Normal View History

<template>
<div class="search-list">
<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'
"
>
<div class="result-title">
<span class="text-[14px] 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-[14px] font-regular">
{{ getHasMoreResult(searchResultKey) }}
</span>
</div>
</div>
</div>
</div>
</div>
<!-- <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 searchItem from './searchItem.vue'
import { ref, reactive, defineEmits, defineProps, onMounted } from 'vue'
const emits = defineEmits(['toMoreResultPage', 'lastIdChange', 'clickSearchItem'])
const state = reactive({
searchText: '', //搜索内容
searchResultList: [], //搜素结果列表
searchResult: null, //搜索结果
pageNum: 1, //当前请求数据页数
uid: 1496 //当前用户id
})
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
} //是否隐藏前缀及搜索群/用户主体信息
})
onMounted(() => {
if (props.searchText) {
state.searchText = props.searchText
queryAllSearch(1, 10)
}
})
//输入搜索文本
const inputSearchText = (e) => {
if (e.trim() != state.searchText.trim()) {
state.pageNum = 1
state.searchResult = null // 清空搜索结果
emits('lastIdChange', 0, 0, 0)
}
state.searchText = e.trim()
if (!e.trim()) {
state.searchResult = null // 清空搜索结果
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 data = {
user_infos: [
{
id: 127,
mobile: '17706200252',
nickname: '测试-王溢韬',
avatar:
'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg',
created_at: '2025-03-28 11:33:13',
erp_user_id: 18282
},
{
id: 103,
mobile: '13814969538',
nickname: '王静测试',
avatar: '',
created_at: '2025-03-27 14:44:23',
erp_user_id: 2639
},
{
id: 57,
mobile: '13862027511',
nickname: '王西',
avatar:
'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg',
created_at: '2025-03-27 14:44:23',
erp_user_id: 18229
}
],
user_count: 9,
group_infos: null,
group_member_infos: [
{
id: 79,
group_id: 1,
group_name: '泰丰国际',
group_type: 4,
group_avatar: '',
group_num: 103,
user_id: 103,
user_name: '王静',
user_card: '',
created_at: '2025-03-27 14:44:24'
},
{
id: 55,
group_id: 1,
group_name: '泰丰国际',
group_type: 4,
group_avatar: '',
group_num: 103,
user_id: 57,
user_name: '王西',
user_card: '',
created_at: '2025-03-27 14:44:24'
},
{
id: 35,
group_id: 1,
group_name: '泰丰国际',
group_type: 4,
group_avatar: '',
group_num: 103,
user_id: 37,
user_name: '王雯婷',
user_card: '',
created_at: '2025-03-27 14:44:24'
}
],
group_count: 9,
general_infos: [
{
receiver_id: 40,
receiver_name: '孙志远',
receiver_avatar:
'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg',
group_num: 0,
talk_type: 1,
count: 3,
group_type: 0
},
{
receiver_id: 2,
receiver_name: '吹牛个人群',
receiver_avatar: '',
group_num: 4,
talk_type: 2,
count: 2,
group_type: 3
},
{
receiver_id: 3,
receiver_name: '丰链30自己人',
receiver_avatar:
'https://e-cdn.fontree.cn/fonchain-main/prod/image/default/fonchain-chat/3d273326-d2a5-4ad4-a974-32d020c6b3f9.jpg?width=1080&height=2412',
group_num: 8,
talk_type: 2,
count: 2,
group_type: 3
}
],
record_count: 3
}
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 (pageNum === 1) {
// 第一页请求且为空,清空结果
state.searchResult = null
// zPaging.value?.complete([])
} else {
// 加载更多且为空,保持原列表不变
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
}
} else {
if (props.isPagination) {
if (pageNum === 1) {
// 第一页请求,直接设置新数据
state.searchResult = data
} else {
// 加载更多,合并数据
if (
paginationKey &&
Array.isArray((state?.searchResult && state?.searchResult[paginationKey]) || [])
) {
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
}
}
// zPaging.value?.completeByTotal([data], total)
} else {
state.searchResult = data
// zPaging.value?.complete([data])
}
}
// 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 (pageNum === 1) {
// // 第一页请求且为空,清空结果
// state.searchResult = null
// zPaging.value?.complete([])
// } else {
// // 加载更多且为空,保持原列表不变
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
// }
// } else {
// if (props.isPagination) {
// if (pageNum === 1) {
// // 第一页请求,直接设置新数据
// state.searchResult = data
// } else {
// // 加载更多,合并数据
// if (
// paginationKey &&
// Array.isArray(
// (state?.searchResult && state?.searchResult[paginationKey]) || [],
// )
// ) {
// 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
// }
// }
// zPaging.value?.completeByTotal([data], total)
// } else {
// state.searchResult = data
// zPaging.value?.complete([data])
// }
// }
// } else {
// if (pageNum === 1) {
// // 第一页请求失败,清空结果
// state.searchResult = null
// zPaging.value?.complete([])
// } else {
// // 加载更多失败,保持原列表不变
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
// }
// }
// })
// resp.catch(() => {
// if (pageNum === 1) {
// // 第一页请求异常,清空结果
// state.searchResult = null
// zPaging.value?.complete([])
// } else {
// // 加载更多异常,保持原列表不变
// zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
// }
// })
}
//点击取消搜索
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)
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))
)
}
</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 9px;
.search-result-part {
margin: 18px 0 0;
.result-title {
padding: 0 0 5px;
border-bottom: 1px solid #f8f8f8;
span {
line-height: 20px;
color: #999999;
}
}
.result-has-more {
padding: 10px 0;
border-bottom: 1px solid #f8f8f8;
span {
color: #191919;
line-height: 20px;
}
}
}
}
}
}
</style>