<template>
|
<InfiniteLoading
|
scrollViewClassName="common-infinite-scroll-list-no-padding"
|
v-bind="infiniteLoadingProps"
|
:custom-no-data="!myBaseChatList?.length && !flattenListData?.length"
|
:refetch="handleRefetch"
|
>
|
<template #extra>
|
<MessageCard
|
v-for="item in myBaseChatList"
|
:key="item.chatId"
|
@click="handleClick(item)"
|
:avatarUrl="MessageChatTypeAvatarMap[item.chatType]"
|
:latestMessageCreationTime="item.latestMessage?.creationTime"
|
:latestMessageContent="item.latestMessage?.messageContent"
|
:contact="item.contact"
|
:chatType="item.chatType"
|
:badge="item.unReadCount"
|
></MessageCard>
|
</template>
|
<template #renderItem="{ item }">
|
<MessageCard
|
:key="item.chatId"
|
@click="handleClick(item)"
|
:avatarUrl="item.avatarUrl ? setOSSLink(item.avatarUrl) : ''"
|
:latestMessageCreationTime="item.latestMessage?.creationTime"
|
:latestMessageContent="item.latestMessage?.messageContent"
|
:contact="item.contact"
|
:chatType="item.chatType"
|
:badge="item.unReadCount"
|
></MessageCard>
|
</template>
|
</InfiniteLoading>
|
</template>
|
|
<script setup lang="ts">
|
import { useInfiniteLoading, useRefeshDidShow } from '@12333/hooks';
|
import * as messageServices from '@12333/services/api/Message';
|
import Taro from '@tarojs/taro';
|
import { RouterPath, MessageChatTypeAvatarMap } from '@/constants';
|
import { MessageChatTypeEnum } from '@12333/constants';
|
import { useQuery } from '@tanstack/vue-query';
|
import { setOSSLink } from '@12333/utils';
|
|
defineOptions({
|
name: 'InnerPage',
|
});
|
|
useRefeshDidShow({ queryKey: ['messageCount'] });
|
|
const { data: myBaseChatList, refetch } = useQuery({
|
queryKey: ['messageServices/getMyBaseChatList'],
|
queryFn: async () => {
|
return await messageServices.getMyBaseChatList({ showLoading: false });
|
},
|
placeholderData: () => [] as API.MassgeChatOutput[],
|
});
|
|
useRefeshDidShow({ queryKey: ['messageServices/getMyBaseChatList'] });
|
|
const { infiniteLoadingProps, flattenListData } = useInfiniteLoading(
|
({ pageParam }) => {
|
let params: API.QueryMyMessageInput = {
|
pageModel: {
|
rows: 20,
|
page: pageParam,
|
},
|
};
|
|
return messageServices.getMyFriendChatPage(params, { showLoading: false });
|
},
|
{
|
queryKey: ['messageServices/getMyFriendChatPage'],
|
}
|
);
|
|
function handleRefetch(options?: any) {
|
refetch(options);
|
return infiniteLoadingProps.value.refetch(options);
|
}
|
|
function handleClick(item: API.MassgeChatOutput) {
|
if (item.chatType === MessageChatTypeEnum.System) {
|
goPage(RouterPath.systemMessage);
|
} else if (item.chatType === MessageChatTypeEnum.UnfamiliarUser) {
|
goPage(RouterPath.unfamiliarUserList);
|
} else {
|
goPage(`${RouterPath.chatRoom}?chatId=${item.chatId}`);
|
}
|
}
|
|
function goPage(routeName: string) {
|
Taro.navigateTo({
|
url: routeName,
|
});
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.message-page-top-view {
|
padding: 32px 0;
|
display: flex;
|
justify-content: space-evenly;
|
background-color: #fff;
|
margin-bottom: 8px;
|
|
.message-page-top-view-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.message-page-top-view-item-icon-wrapper {
|
width: 80px;
|
height: 80px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-bottom: 8px;
|
border-radius: 50%;
|
|
&.like {
|
background: #ffebeb;
|
|
.message-page-top-view-item-icon {
|
width: 56px;
|
height: 54px;
|
}
|
}
|
|
&.attention {
|
background: #e3f8ff;
|
|
.message-page-top-view-item-icon {
|
width: 52px;
|
height: 58px;
|
}
|
}
|
}
|
|
.message-page-top-view-item-text {
|
font-weight: 400;
|
font-size: 24px;
|
color: #7c7c7c;
|
line-height: 34px;
|
}
|
}
|
}
|
</style>
|
