1130 lines
36 KiB
Vue
1130 lines
36 KiB
Vue
<template>
|
||
<div class="outer-layer search-by-condition-page">
|
||
<n-infinite-scroll style="height: 455px;" :distance="40" @load="loadMore">
|
||
<div class="root">
|
||
<!-- <div v-if="state.condition === 'date'" class="search-by-date"> -->
|
||
<!-- <n-date-picker
|
||
:panel="true"
|
||
type="datetime"
|
||
:clearable="true"
|
||
:first-day-of-week="6"
|
||
:is-date-disabled="dateDisabled"
|
||
:actions="['clear', 'confirm']"
|
||
@confirm="onDatePickConfirm"
|
||
/> -->
|
||
<!-- <tm-time-picker
|
||
:show="state.showMonthPicker"
|
||
:showDetail="{
|
||
year: true,
|
||
month: true,
|
||
day: false,
|
||
hour: false,
|
||
minute: false,
|
||
second: false,
|
||
am_pm: false
|
||
}"
|
||
:showSuffix="{
|
||
year: '',
|
||
month: ''
|
||
}"
|
||
:defaultValue="state.nowDate"
|
||
format="YYYY年MM月"
|
||
start=""
|
||
:end="state.maxDate"
|
||
@confirm="confirmSelectedMonth"
|
||
:round="0"
|
||
:title="'请选择聊天日期'"
|
||
>
|
||
<div class="search-date-picker">
|
||
<span class="text-[14px] font-regular">
|
||
{{ state.selectedMonth }}
|
||
</span>
|
||
<img src="@/static/image/search/down-pointer.png" />
|
||
</div>
|
||
</tm-time-picker> -->
|
||
<!-- <tm-calendar-view
|
||
:show="true"
|
||
:hideTool="true"
|
||
:hideButton="true"
|
||
:dateStyle="state.dateStyle"
|
||
:defaultValue="state.selectedDateArray"
|
||
v-model="state.selectedDateArray"
|
||
:disabledDate="state.disabledDateArray"
|
||
@click="selectDate"
|
||
model="day"
|
||
:end="state.maxDate"
|
||
@getDArray="getDArray"
|
||
:showDefault="false"
|
||
></tm-calendar-view> -->
|
||
<!-- </div> -->
|
||
<div
|
||
class="search-by-condition-input-list"
|
||
v-if="
|
||
state.condition === 'imgAndVideo' ||
|
||
state.condition === 'file' ||
|
||
state.condition === 'link' ||
|
||
state.condition === 'member' ||
|
||
state.condition === 'all' ||
|
||
state.condition === 'date'
|
||
"
|
||
:style="{
|
||
padding:
|
||
state.searchResultList.length > 0
|
||
? state.condition === 'imgAndVideo'
|
||
? '20px 38px'
|
||
: ''
|
||
: '0'
|
||
}"
|
||
>
|
||
<!-- <div
|
||
class="search-by-condition-input"
|
||
v-if="state.condition === 'file' || state.condition === 'link'"
|
||
>
|
||
<customInput
|
||
:searchText="state.searchText"
|
||
:first_talk_record_infos="state.first_talk_record_infos"
|
||
@inputSearchText="inputSearchText"
|
||
></customInput>
|
||
<span
|
||
@click="cancelSearch"
|
||
class="search-by-condition-input-text text-[16px] font-medium"
|
||
>
|
||
取消
|
||
</span>
|
||
</div> -->
|
||
<div class="search-by-condition-list">
|
||
<div class="condition-dimensionality">
|
||
<div
|
||
class="condition-dimensionality-each"
|
||
v-for="(conditionItem, conditionIndex) in state.searchResultList"
|
||
:key="conditionIndex"
|
||
>
|
||
<div
|
||
class="condition-dimensionality-each-month"
|
||
v-if="state.condition === 'imgAndVideo'"
|
||
>
|
||
<span class="text-[14px] font-regular">
|
||
{{ conditionItem.dateMonth }}
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="condition-each-resultList"
|
||
:class="[
|
||
state.condition === 'imgAndVideo' ? 'condition-type-imgAndVideo-result' : ''
|
||
]"
|
||
>
|
||
<div
|
||
class="condition-each-resultList-each"
|
||
v-for="(item, index) in conditionItem.monthResultList"
|
||
:key="index"
|
||
:style="{
|
||
border:
|
||
state.condition === 'imgAndVideo' || state.condition === 'member'
|
||
? '0'
|
||
: '',
|
||
padding: state.condition === 'imgAndVideo' ? '' : ''
|
||
}"
|
||
>
|
||
<div
|
||
class="condition-result-member"
|
||
v-if="
|
||
state.condition === 'member' ||
|
||
state.condition === 'all' ||
|
||
state.condition === 'date'
|
||
"
|
||
>
|
||
<searchItem
|
||
@click="toDialogueByMember(item)"
|
||
:searchResultKey="'search_by_member_condition'"
|
||
:searchItem="item"
|
||
:searchText="state.searchText"
|
||
:searchRecordDetail="true"
|
||
></searchItem>
|
||
</div>
|
||
<div
|
||
class="condition-result-imgAndVideo"
|
||
v-if="state.condition === 'imgAndVideo'"
|
||
>
|
||
<div
|
||
class="condition-result-imgAndVideo-area condition-result-imgAndVideo-area-imgText"
|
||
v-if="item?.extra?.items?.length > 0"
|
||
>
|
||
<n-scrollbar style="height: 131px;">
|
||
<div
|
||
class="condition-result-imgAndVideo-each"
|
||
v-for="(imgItem, imgIndex) in item?.extra?.items"
|
||
:key="imgIndex"
|
||
>
|
||
<n-image
|
||
:src="imgItem?.content"
|
||
v-if="imgItem?.type == 3"
|
||
:lazy="true"
|
||
:preview-src="imgItem?.content"
|
||
:width="131"
|
||
:height="131"
|
||
object-fit="cover"
|
||
></n-image>
|
||
</div>
|
||
</n-scrollbar>
|
||
</div>
|
||
<div class="condition-result-imgAndVideo-area" v-if="item?.extra?.url">
|
||
<template v-if="item?.msg_type === 3">
|
||
<n-image
|
||
:src="item?.extra?.url"
|
||
:lazy="true"
|
||
:preview-src="item?.extra?.url"
|
||
:width="131"
|
||
:height="131"
|
||
object-fit="cover"
|
||
></n-image>
|
||
</template>
|
||
<template v-else-if="item?.msg_type === 5">
|
||
<div class="video-preview" @click="onPlay(item?.extra?.url)">
|
||
<video :src="item?.extra?.url" :controls="false"></video>
|
||
<!-- <n-image
|
||
:src="
|
||
item?.extra?.url
|
||
? item?.extra?.url + '#t=0.001'
|
||
: item?.extra?.cover
|
||
"
|
||
:width="131"
|
||
:height="131"
|
||
object-fit="cover"
|
||
></n-image> -->
|
||
<div class="btn-video">
|
||
<!-- <img :src="playCircle" /> -->
|
||
<n-icon :component="Play" size="40" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<!-- <div
|
||
class="condition-each-result-main"
|
||
v-if="state.condition === 'file' || state.condition === 'link'"
|
||
>
|
||
<searchItem :searchItem="item" :conditionType="state.msg_type"></searchItem>
|
||
<span class="text-[12px] font-medium condition-each-result-main-date">
|
||
{{ item.dateTime }}
|
||
</span>
|
||
</div> -->
|
||
<div
|
||
class="condition-each-result-attachments"
|
||
@click="previewPDF(item)"
|
||
v-if="state.condition === 'file' || state.condition === 'link'"
|
||
>
|
||
<div class="attachment-avatar">
|
||
<img :src="item?.extra?.file_avatar" v-if="state.condition === 'file'" />
|
||
<!-- <img
|
||
src="@/static/image/search/result-link-icon.png"
|
||
v-if="state.condition === 'link'"
|
||
/> -->
|
||
</div>
|
||
<div class="attachment-info">
|
||
<div class="attachment-info-title">
|
||
<span class="text-[14px] font-regular" v-if="state.condition === 'file'">
|
||
{{ item?.extra?.name }}
|
||
</span>
|
||
<span class="text-[14px] font-regular" v-if="state.condition === 'link'">
|
||
分享链接
|
||
</span>
|
||
<span
|
||
class="text-[14px] font-regular"
|
||
v-if="state.condition === 'file'"
|
||
style="color: #999999; flex-shrink: 0; margin: 0 0 0 20px;"
|
||
>
|
||
{{ item.dateTime }}
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="attachment-sub-info"
|
||
:style="{
|
||
margin: state.condition === 'file' ? '10px 0 0' : ''
|
||
}"
|
||
>
|
||
<!-- <span class="text-[12px] font-regular" v-if="state.condition === 'file'">
|
||
{{ item?.extra?.typeText }}
|
||
</span>
|
||
<span class="text-[12px] font-regular" v-if="state.condition === 'link'">
|
||
{{ item?.extra?.content }}
|
||
</span> -->
|
||
<span class="text-[12px] font-regular" v-if="state.condition === 'file'">
|
||
{{ item?.nickname }}
|
||
</span>
|
||
<span
|
||
class="text-[12px] font-regular"
|
||
v-if="state.condition === 'file'"
|
||
style="flex-shrink: 0; margin: 0 0 0 20px;"
|
||
>
|
||
{{ item?.extra?.fileSize }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <ZPaging
|
||
ref="zPaging"
|
||
:show-scrollbar="false"
|
||
@query="queryAllSearch"
|
||
:refresher-enabled="false"
|
||
:auto="false"
|
||
:loading-more-default-as-loading="true"
|
||
:inside-more="true"
|
||
v-model="state.flatList"
|
||
>
|
||
<template #top v-if="state.showPageTitle">
|
||
<customNavbar :title="state.pageTitle"></customNavbar>
|
||
</template>
|
||
|
||
</ZPaging> -->
|
||
<teleport to="body">
|
||
<div v-show="open" class="video-container">
|
||
<video
|
||
:src="currentVideoUrl"
|
||
controls
|
||
@fullscreenchange="fullscreenchange"
|
||
:id="currentVideoUrl"
|
||
playsinline
|
||
webkit-playsinline
|
||
x5-playsinline
|
||
class="fullscreen-video"
|
||
></video>
|
||
</div>
|
||
</teleport>
|
||
</div>
|
||
<div class="search-record-empty" v-if="state.searchResultList.length === 0">
|
||
<img src="@/assets/image/chatList/search-empty.png" alt="" />
|
||
<span>无内容</span>
|
||
</div>
|
||
</n-infinite-scroll>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
// import playCircle from '@/assets/image/icon/play-circle.png'
|
||
// import customInput from '@/components/custom-input/custom-input.vue'
|
||
// 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 { Play } from '@icon-park/vue-next'
|
||
import fileType_PPT from '@/assets/image/ppt-text.png'
|
||
import fileType_EXCEL from '@/assets/image/excel-text.png'
|
||
import fileType_WORD from '@/assets/image/word-text.png'
|
||
import fileType_PDF from '@/assets/image/pdf-text.png'
|
||
import fileType_Files from '@/assets/image/file-text.png'
|
||
import { useDialogueStore } from '@/store'
|
||
import { onMounted, reactive, computed, ref, nextTick, watch } from 'vue'
|
||
import searchItem from './searchItem.vue'
|
||
import { ServeFindTalkRecords } from '@/api/chat.js'
|
||
import { ServeTalkDate, ServeGetSessionId } from '@/api/search.js'
|
||
import { parseTime } from '@/utils/datetime'
|
||
import { fileFormatSize, fileSuffix } from '@/utils/strings'
|
||
import { NImage, NInfiniteScroll, NScrollbar, NIcon, NDatePicker } from 'naive-ui'
|
||
|
||
const emits = defineEmits(['clearSearchMemberByAlphabet', 'getDisabledDateArray', 'hideSearchResultModal'])
|
||
|
||
const dialogueStore = useDialogueStore()
|
||
// 当前对话参数
|
||
const dialogueParams = reactive({
|
||
talk_type: computed(() => dialogueStore.talk.talk_type),
|
||
receiver_id: computed(() => dialogueStore.talk.receiver_id)
|
||
})
|
||
|
||
let nowDay = new Date().setHours(0, 0, 0, 0)
|
||
|
||
const props = defineProps({
|
||
conditionType: {
|
||
//搜索条件
|
||
type: String,
|
||
default: ''
|
||
},
|
||
searchMemberItem: {
|
||
//搜索的群成员
|
||
type: String,
|
||
default: ''
|
||
},
|
||
searchRecordByConditionText: {
|
||
//搜索关键字文本
|
||
type: String,
|
||
default: ''
|
||
},
|
||
selectedDateTime: {
|
||
//选中的日期时间戳格式
|
||
type: [Number, null],
|
||
default: null
|
||
},
|
||
nowDateTime: {
|
||
//当前日期时间
|
||
type: Date,
|
||
default: new Date()
|
||
}
|
||
})
|
||
|
||
const state = reactive({
|
||
pageTitle: '', //页面标题
|
||
dateStyle: [], //日期样式
|
||
nowDate: new Date(nowDay), //当前时间
|
||
maxDate: new Date(nowDay), //可选择最大时间
|
||
selectedDateArray: Array(new Date(nowDay)), //选择的月份数组
|
||
showMonthPicker: false, //是否显示月份选择
|
||
selectedMonth: new Date(nowDay), //当前选择的月份
|
||
disabledDateArray: [], //被禁用的日期数组
|
||
dArray: [], //日历日期数组
|
||
showPageTitle: false, //是否显示页面标题
|
||
searchText: '', //搜索内容
|
||
first_talk_record_infos: Object,
|
||
searchResultList: [], //搜索结果列表
|
||
cursor: 0, //上次查询的游标
|
||
msg_type: 0, //查询的消息类型
|
||
group_member_id: 0, //群成员id
|
||
flatList: [], // 用于存储扁平化的数据
|
||
selectedDateTime: null, //选中的日期时间戳格式
|
||
isLoadingChatRecord: false, // 添加加载状态标志
|
||
hasNoMoreResults: false // 是否没有更多结果
|
||
})
|
||
|
||
const videoContext = ref()
|
||
const open = ref(false)
|
||
const currentVideoUrl = ref('')
|
||
|
||
const fullscreenchange = (e) => {
|
||
if (!e.detail.fullScreen) {
|
||
videoContext.value.stop()
|
||
videoContext.value.seek(0)
|
||
open.value = false
|
||
}
|
||
}
|
||
|
||
async function onPlay(url) {
|
||
currentVideoUrl.value = url
|
||
open.value = true
|
||
|
||
// 等待 DOM 更新
|
||
await nextTick()
|
||
|
||
// 创建新的视频上下文
|
||
videoContext.value = uni.createVideoContext(url, getCurrentInstance())
|
||
|
||
setTimeout(() => {
|
||
// 先请求全屏
|
||
videoContext.value.requestFullScreen({ direction: 2 })
|
||
|
||
// 延迟一下再播放，确保全屏已经完成
|
||
setTimeout(() => {
|
||
videoContext.value.play()
|
||
}, 100)
|
||
}, 200)
|
||
}
|
||
|
||
onMounted(() => {
|
||
state.selectedMonth = parseTime(state.selectedMonth, '{y}年{m}月')
|
||
state.dateStyle = [
|
||
{
|
||
date: state.nowDate, //日期
|
||
text: false, //浅色背景。
|
||
color: '#46299D', //主题色.
|
||
extra: '今天' //额外的内容，在日期下方显示的文本。
|
||
}
|
||
]
|
||
})
|
||
|
||
//查看存在聊天记录的天数
|
||
const ServeQueryTalkDate = (month) => {
|
||
let params = {
|
||
month: month,
|
||
talk_type: dialogueParams.talk_type, //1私聊2群聊
|
||
receiver_id: dialogueParams.receiver_id //目标人id
|
||
}
|
||
const resp = ServeTalkDate(params)
|
||
console.log(resp)
|
||
resp.then(({ code, data }) => {
|
||
console.log(data)
|
||
if (code == 200) {
|
||
if (data && data.length > 0) {
|
||
const formattedData = data.map(
|
||
(item) => item.substring(0, 4) + '/' + item.substring(4, 6) + '/' + item.substring(6, 8)
|
||
)
|
||
let disabledDateArray = state.dArray.filter((dIt) => !formattedData.includes(dIt))
|
||
disabledDateArray = disabledDateArray.map((item) => item.replace(/\//g, '/'))
|
||
console.log(disabledDateArray)
|
||
state.disabledDateArray = disabledDateArray
|
||
} else {
|
||
state.disabledDateArray = state.dArray
|
||
}
|
||
emits('getDisabledDateArray', state.disabledDateArray)
|
||
} else {
|
||
}
|
||
})
|
||
|
||
resp.catch(() => {})
|
||
}
|
||
|
||
//点击选择日期
|
||
const selectDate = async (e) => {
|
||
if (e == parseTime(state.nowDate, '{y}/{m}/{d}')) {
|
||
console.log('==今日')
|
||
state.dateStyle = [
|
||
{
|
||
date: state.nowDate, //日期
|
||
text: false, //浅色背景。
|
||
color: '#46299D', //主题色.
|
||
extra: '今天' //额外的内容，在日期下方显示的文本。
|
||
}
|
||
]
|
||
} else {
|
||
state.dateStyle = [
|
||
{
|
||
date: state.nowDate, //日期
|
||
text: false, //浅色背景。
|
||
color: '', //主题色.
|
||
extra: '今天' //额外的内容，在日期下方显示的文本。
|
||
},
|
||
{
|
||
date: new Date(e), //日期
|
||
text: false, //浅色背景。
|
||
color: '#46299D' //主题色.
|
||
}
|
||
]
|
||
}
|
||
const sessionId = await getSessionId(dialogueParams.talk_type, dialogueParams.receiver_id)
|
||
uni.navigateTo({
|
||
url:
|
||
'/pages/dialog/index?sessionId=' +
|
||
sessionId +
|
||
'&keepDialogInfo=1' +
|
||
'&recordDate=' +
|
||
parseTime(e, '{y}-{m}-{d}')
|
||
})
|
||
}
|
||
|
||
//获取会话Id
|
||
const getSessionId = (talk_type, receiver_id) => {
|
||
return new Promise((resolve, reject) => {
|
||
let params = {
|
||
talkType: talk_type,
|
||
receiverId: receiver_id
|
||
}
|
||
const resp = ServeGetSessionId(params)
|
||
console.log(resp)
|
||
resp.then(({ code, data }) => {
|
||
console.log(data)
|
||
if (code == 200) {
|
||
resolve(data?.sessionId)
|
||
} else {
|
||
}
|
||
})
|
||
resp.catch(() => {})
|
||
})
|
||
}
|
||
|
||
//点击确认选择月份
|
||
const confirmSelectedMonth = (e) => {
|
||
console.log(e)
|
||
state.selectedMonth = parseTime(e, '{y}年{m}月')
|
||
// console.log()
|
||
let newDate = new Date(e)
|
||
newDate.setHours(0, 0, 0, 0)
|
||
newDate.setDate(1)
|
||
state.selectedDateArray = Array(new Date(newDate))
|
||
state.dateStyle = [
|
||
{
|
||
date: state.nowDate, //日期
|
||
text: false, //浅色背景。
|
||
color: '', //主题色.
|
||
extra: '今天' //额外的内容，在日期下方显示的文本。
|
||
}
|
||
]
|
||
ServeQueryTalkDate(parseTime(e, '{y}{m}'))
|
||
}
|
||
|
||
//获取日历日期数组
|
||
const getDArray = (selectedMonth) => {
|
||
const [year, month] = selectedMonth.split('-').map(Number)
|
||
const daysInMonth = new Date(year, month, 0).getDate()
|
||
const dArray = Array.from({ length: daysInMonth }, (_, i) => {
|
||
const day = i + 1
|
||
return `${year}/${String(month).padStart(2, '0')}/${String(day).padStart(2, '0')}`
|
||
})
|
||
state.dArray = dArray
|
||
}
|
||
|
||
//输入搜索内容
|
||
const inputSearchText = (e) => {
|
||
state.searchText = e
|
||
}
|
||
|
||
//点击取消搜索
|
||
const cancelSearch = () => {
|
||
const pages = getCurrentPages()
|
||
if (pages.length > 1) {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
} else {
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
}
|
||
|
||
//查询数据
|
||
const queryAllSearch = () => {
|
||
let params = {
|
||
talk_type: dialogueParams.talk_type, //1私聊；2群聊
|
||
receiver_id: dialogueParams.receiver_id, //目标用户id或群聊id
|
||
msg_type: state.msg_type, //消息类型：0:全部;2:代码;3:图片;4:音频;5:视频;6:文件;7:位置;9:会话;11群投票;12图文混合
|
||
cursor: state.cursor, //上次查询的游标
|
||
limit: 10, //数据行数
|
||
no_limit: '', //1不限制
|
||
direction: 'up', //down向下查最新，up向上查老数据
|
||
start_time: state.selectedDateTime
|
||
? parseTime(new Date(state.selectedDateTime), '{y}-{m}-{d}')
|
||
: '',
|
||
end_time: state.selectedDateTime
|
||
? parseTime(new Date(state.selectedDateTime), '{y}-{m}-{d}')
|
||
: '',
|
||
group_member_user_id: state.group_member_id, //群成员id，当查询群历史消息的时候，需要指定群成员的时候送
|
||
file_name: props?.searchRecordByConditionText
|
||
}
|
||
console.log(params)
|
||
const resp = ServeFindTalkRecords(params)
|
||
console.log(resp)
|
||
resp
|
||
.then(({ code, data }) => {
|
||
console.log(data)
|
||
if (code == 200) {
|
||
// 当cursor为0时，清空searchResultList
|
||
let dateList = state.cursor === 0 ? [] : state.searchResultList
|
||
if (data?.items?.length > 0) {
|
||
data.items.forEach((item) => {
|
||
item.dateTime = parseTime(item?.created_at, '{m}/{d}')
|
||
if (item?.extra && typeof item.extra === 'object') {
|
||
item.extra.fileSize = fileFormatSize(item?.extra?.size)
|
||
item.extra.typeText = item?.extra?.name ? fileSuffix(item?.extra?.name) : ''
|
||
item.extra.file_avatar = fileTypeAvatar(item?.extra?.typeText)
|
||
// console.log(item.extra.type)
|
||
}
|
||
let year = new Date(item.created_at).getFullYear()
|
||
let month = new Date(item.created_at).getMonth() + 1
|
||
let dateMonth =
|
||
year == state.nowDate.getFullYear() && month == state.nowDate.getMonth() + 1
|
||
? '这个月'
|
||
: year + '年' + month + '月'
|
||
if (dateList.length > 0) {
|
||
let hasAdd = false
|
||
dateList.forEach((dateItem) => {
|
||
if (dateItem.dateMonth === dateMonth) {
|
||
dateItem.monthResultList.push(item)
|
||
hasAdd = true
|
||
}
|
||
})
|
||
if (!hasAdd) {
|
||
console.log(dateList)
|
||
dateList.push({
|
||
dateMonth: dateMonth,
|
||
monthResultList: [item]
|
||
})
|
||
}
|
||
} else {
|
||
dateList.push({
|
||
dateMonth: dateMonth,
|
||
monthResultList: [item]
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 保存分组数据用于显示
|
||
state.searchResultList = dateList
|
||
|
||
// 将分组数据扁平化，用于z-paging分页
|
||
state.flatList = dateList.reduce((acc, group) => {
|
||
return acc.concat(group.monthResultList)
|
||
}, [])
|
||
|
||
if (state.cursor === 0) {
|
||
// zPaging.value?.complete(state.flatList)
|
||
} else {
|
||
// zPaging.value?.completeByNoMore(state.flatList, noMore)
|
||
}
|
||
state.cursor = data?.cursor
|
||
if (data?.cursor === 0) {
|
||
state.hasNoMoreResults = true
|
||
} else {
|
||
state.hasNoMoreResults = false
|
||
}
|
||
} else {
|
||
if (state.cursor === 0) {
|
||
state.searchResultList = []
|
||
state.flatList = []
|
||
}
|
||
// zPaging.value?.complete([])
|
||
}
|
||
})
|
||
.finally(() => {
|
||
state.isLoadingChatRecord = false // 无论成功失败，都重置加载状态
|
||
})
|
||
|
||
resp.catch(() => {
|
||
if (state.cursor === 0) {
|
||
state.searchResultList = []
|
||
state.flatList = []
|
||
}
|
||
// zPaging.value?.complete([])
|
||
state.isLoadingChatRecord = false // 发生错误时也要重置加载状态
|
||
})
|
||
}
|
||
|
||
//文件类型图标
|
||
const fileTypeAvatar = (fileType) => {
|
||
let file_type_avatar = fileType_Files
|
||
if (fileType) {
|
||
if (fileType === 'ppt' || fileType === 'pptx') {
|
||
file_type_avatar = fileType_PPT
|
||
} else if (fileType === 'pdf') {
|
||
file_type_avatar = fileType_PDF
|
||
} else if (fileType === 'doc' || fileType === 'docx') {
|
||
file_type_avatar = fileType_WORD
|
||
} else if (fileType === 'xls' || fileType === 'xlsx') {
|
||
file_type_avatar = fileType_EXCEL
|
||
} else {
|
||
file_type_avatar = fileType_Files
|
||
}
|
||
}
|
||
return file_type_avatar
|
||
}
|
||
|
||
const previewPDF = (item) => {
|
||
console.log(item)
|
||
if (typeof plus !== 'undefined') {
|
||
downloadAndOpenFile(item)
|
||
} else {
|
||
document.addEventListener('plusready', () => {
|
||
downloadAndOpenFile(item)
|
||
})
|
||
}
|
||
}
|
||
|
||
const downloadAndOpenFile = (item) => {
|
||
uni.showLoading({ title: '加载中...', mask: true })
|
||
const downloadUrl = item?.extra?.path
|
||
const options = {
|
||
filename: '_doc/downloads/' // 保存路径
|
||
}
|
||
const dtask = plus.downloader.createDownload(downloadUrl, options, function (d, status) {
|
||
if (status === 200) {
|
||
uni.hideLoading()
|
||
const filePath = d.filename
|
||
plus.runtime.openFile(
|
||
filePath,
|
||
{},
|
||
function () {},
|
||
function (error) {}
|
||
)
|
||
} else {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
dtask.start()
|
||
}
|
||
|
||
//跳转到对应的记录位置
|
||
const toDialogueByMember = async (msgInfo) => {
|
||
console.error('====跳转到对应的记录位置====', msgInfo)
|
||
// 根据搜索结果, 指定用于查询指定消息上下文的sequence
|
||
dialogueStore.specifiedMsg = encodeURIComponent(
|
||
JSON.stringify({
|
||
talk_type: msgInfo.talk_type,
|
||
receiver_id: msgInfo.receiver_id,
|
||
msg_id: msgInfo.msg_id,
|
||
cursor: msgInfo.sequence - 15 > 0 ? msgInfo.sequence - 15 : 0,
|
||
direction: 'down',
|
||
sort_sequence: 'asc',
|
||
create_time: msgInfo.created_at
|
||
})
|
||
)
|
||
emits('hideSearchResultModal')
|
||
// const sessionId = await getSessionId(dialogueParams.talk_type, dialogueParams.receiver_id)
|
||
// uni.navigateTo({
|
||
// url:
|
||
// '/pages/dialog/index?sessionId=' +
|
||
// sessionId +
|
||
// '&keepDialogInfo=1' +
|
||
// '&msgInfo=' +
|
||
// encodeURIComponent(JSON.stringify(msgInfo))
|
||
// })
|
||
}
|
||
|
||
//重置部分搜索条件
|
||
const resetSearchConditions = (newVal) => {
|
||
state.cursor = 0
|
||
state.searchResultList = []
|
||
state.flatList = []
|
||
if (newVal !== 'member') {
|
||
state.group_member_id = 0
|
||
emits('clearSearchMemberByAlphabet')
|
||
}
|
||
}
|
||
|
||
//触底加载更多数据
|
||
const loadMore = () => {
|
||
if (state.isLoadingChatRecord || state.hasNoMoreResults) return // 如果正在加载中，或者没有更多结果，直接返回
|
||
state.isLoadingChatRecord = true
|
||
queryAllSearch()
|
||
}
|
||
|
||
watch(
|
||
() => props?.conditionType,
|
||
(newVal, oldVal) => {
|
||
console.log(newVal, oldVal)
|
||
state.condition = newVal
|
||
if (newVal) {
|
||
resetSearchConditions(newVal)
|
||
if (newVal === 'member') {
|
||
//没选日期前，也等同于倒序查询全部
|
||
state.showPageTitle = true
|
||
state.pageTitle = '按群成员查找'
|
||
state.msg_type = 0
|
||
queryAllSearch()
|
||
} else if (newVal === 'date') {
|
||
//没选日期前，也等同于倒序查询全部
|
||
state.showPageTitle = true
|
||
state.pageTitle = '按日期查找'
|
||
state.msg_type = 0
|
||
ServeQueryTalkDate(parseTime(state.nowDate, '{y}{m}'))
|
||
getDArray(parseTime(state.nowDate, '{y}-{m}'))
|
||
queryAllSearch()
|
||
} else if (newVal === 'imgAndVideo') {
|
||
state.showPageTitle = true
|
||
state.pageTitle = '图片与视频'
|
||
state.msg_type = '3,5'
|
||
queryAllSearch()
|
||
} else if (newVal === 'file') {
|
||
console.log(dialogueParams)
|
||
let first_talk_record_infos = {
|
||
receiver_name: '文件'
|
||
}
|
||
state.first_talk_record_infos = Object.assign(
|
||
{},
|
||
state.first_talk_record_infos,
|
||
first_talk_record_infos
|
||
)
|
||
state.msg_type = 6
|
||
queryAllSearch()
|
||
} else if (newVal === 'link') {
|
||
console.log(dialogueParams)
|
||
let first_talk_record_infos = {
|
||
receiver_name: '链接'
|
||
}
|
||
state.first_talk_record_infos = Object.assign(
|
||
{},
|
||
state.first_talk_record_infos,
|
||
first_talk_record_infos
|
||
)
|
||
state.msg_type = 14
|
||
queryAllSearch()
|
||
} else if (newVal === 'all') {
|
||
//查询全部，即重置所有条件
|
||
state.msg_type = 0
|
||
queryAllSearch()
|
||
}
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
)
|
||
|
||
watch(
|
||
() => props?.searchMemberItem,
|
||
(newVal, oldVal) => {
|
||
const memberItem = newVal ? JSON.parse(decodeURIComponent(newVal)) : ''
|
||
state.group_member_id = memberItem?.user_id
|
||
resetSearchConditions('member')
|
||
queryAllSearch()
|
||
},
|
||
{
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
)
|
||
|
||
watch(
|
||
() => props?.searchRecordByConditionText,
|
||
(newVal, oldVal) => {
|
||
resetSearchConditions(state.condition)
|
||
queryAllSearch()
|
||
}
|
||
)
|
||
|
||
watch(
|
||
() => props?.selectedDateTime,
|
||
(newVal, oldVal) => {
|
||
state.selectedDateTime = newVal
|
||
resetSearchConditions('date')
|
||
queryAllSearch()
|
||
}
|
||
)
|
||
|
||
watch(
|
||
() => props?.nowDateTime,
|
||
(newVal, oldVal) => {
|
||
ServeQueryTalkDate(parseTime(newVal, '{y}{m}'))
|
||
getDArray(parseTime(newVal, '{y}-{m}'))
|
||
}
|
||
)
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.search-date-picker {
|
||
padding: 10px 16px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
span {
|
||
line-height: 20px;
|
||
color: #999999;
|
||
}
|
||
img {
|
||
width: 9px;
|
||
height: 6px;
|
||
margin: 0 0 0 13px;
|
||
}
|
||
}
|
||
body:deep(.text-overflow-1) {
|
||
color: #666666 !important;
|
||
line-height: 22px !important;
|
||
font-size: 16px !important;
|
||
font-weight: bold !important;
|
||
}
|
||
body:deep(.tmicon-times-circle-fill) {
|
||
width: 19px;
|
||
height: 19px;
|
||
}
|
||
body:deep(.round-3) {
|
||
background: linear-gradient(to right, #674bbc, #46299d);
|
||
}
|
||
|
||
.search-by-condition-input-list {
|
||
// padding: 10px 24px 0 21px;
|
||
padding: 20px 40px;
|
||
.search-by-condition-input {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.search-by-condition-input-text {
|
||
flex-shrink: 0;
|
||
margin: 0 0 0 10px;
|
||
color: #46299d;
|
||
}
|
||
}
|
||
|
||
.search-by-condition-list {
|
||
.condition-dimensionality {
|
||
.condition-dimensionality-each {
|
||
.condition-dimensionality-each-month {
|
||
padding: 0 0 18px;
|
||
span {
|
||
line-height: 20px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.condition-each-resultList {
|
||
.condition-each-resultList-each {
|
||
border-bottom: 1px solid #f8f8f8;
|
||
.condition-each-result-main {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.condition-each-result-main-date {
|
||
line-height: 17px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.condition-each-result-attachments {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 14px 0;
|
||
// background-color: #f3f3f3;
|
||
border-radius: 4px;
|
||
.attachment-avatar {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
img {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
}
|
||
.attachment-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
margin: 0 0 0 11px;
|
||
width: 100%;
|
||
.attachment-info-title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
span {
|
||
line-height: 20px;
|
||
color: #191919;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
.attachment-sub-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
span {
|
||
line-height: 17px;
|
||
color: #999999;
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.condition-type-imgAndVideo-result {
|
||
border-bottom: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
.condition-each-resultList-each {
|
||
.condition-result-imgAndVideo {
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
:deep(.overflow) {
|
||
width: 131px !important;
|
||
height: 131px !important;
|
||
}
|
||
.condition-result-imgAndVideo-area {
|
||
:deep(.overflow) {
|
||
width: 131px !important;
|
||
height: 131px !important;
|
||
}
|
||
:deep(.round-0) {
|
||
width: 131px !important;
|
||
height: 131px !important;
|
||
}
|
||
.video-preview {
|
||
// position: relative;
|
||
// .play-icon {
|
||
// position: absolute;
|
||
// top: 50%;
|
||
// left: 50%;
|
||
// transform: translate(-50%, -50%);
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
|
||
// img {
|
||
// width: 40px !important;
|
||
// height: 40px !important;
|
||
// }
|
||
// }
|
||
display: inline-flex;
|
||
position: relative;
|
||
cursor: pointer;
|
||
width: 131px;
|
||
height: 131px;
|
||
|
||
video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
background-color: #333; /* 添加背景色，避免默认显示为灰色 */
|
||
}
|
||
|
||
.btn-video {
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
position: absolute;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
}
|
||
|
||
&:hover {
|
||
.btn-video {
|
||
color: #46299d;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.video-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #000;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.fullscreen-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.search-record-empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 455px;
|
||
box-sizing: border-box;
|
||
img {
|
||
width: 160px;
|
||
height: 104px;
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: #999;
|
||
font-weight: 400;
|
||
margin: 13px 0 0;
|
||
}
|
||
}
|
||
</style>
|