123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451 |
- <template>
- <Overlay
- :maskColor="'transparent'"
- @onOverlayClick="closeReadReceiptPanel"
- >
- <div
- :class="{
- 'read-receipt-panel': true,
- 'read-receipt-panel-mobile': isMobile,
- 'read-receipt-panel-close-mobile': isMobile && isPanelClose,
- }"
- >
- <div class="header">
- <div class="header-text">
- {{ TUITranslateService.t("TUIChat.消息详情") }}
- </div>
- <div class="header-close-icon">
- <Icon
- size="12px"
- hotAreaSize="8"
- :file="closeIcon"
- @onClick="closeReadReceiptPanel"
- />
- </div>
- </div>
- <div class="read-status-counter-container">
- <div
- v-for="tabName in tabNameList"
- :key="tabName"
- :class="{
- 'read-status-counter': true,
- 'active': tabName === currentTabName,
- }"
- @click="toggleTabName(tabName)"
- >
- <div class="status-text">
- {{ tabInfo[tabName].tabName }}
- </div>
- <div class="status-count">
- {{ tabInfo[tabName].count === undefined ? "" : tabInfo[tabName].count }}
- </div>
- </div>
- </div>
- <div class="read-status-member-list">
- <div
- v-if="tabInfo[currentTabName].count === 0 && isFirstLoadFinished"
- class="empty-list-tip"
- >
- - {{ TUITranslateService.t('TUIChat.空') }} -
- </div>
- <template v-else-if="isFirstLoadFinished">
- <template v-if="currentTabName === 'unread'">
- <div
- v-for="item in tabInfo[currentTabName].memberList"
- :key="item.userID"
- class="read-status-member-container"
- >
- <Avatar
- class="read-status-avatar"
- useSkeletonAnimation
- :url="item.avatar || ''"
- />
- <div class="username">
- {{ item.nick || item.userID }}
- </div>
- </div>
- </template>
- <template v-if="currentTabName === 'read'">
- <div
- v-for="item in tabInfo[currentTabName].memberList"
- :key="item.userID"
- class="read-status-member-container"
- >
- <Avatar
- class="read-status-avatar"
- useSkeletonAnimation
- :url="item.avatar"
- />
- <div class="username">
- {{ item.nick || item.userID }}
- </div>
- </div>
- </template>
- </template>
- <div
- v-if="isFirstLoadFinished"
- class="fetch-more-container"
- >
- <FetchMore
- :isFetching="isPullDownFetching"
- :isTerminateObserve="isStopFetchMore"
- @onExposed="pullDownFetchMoreData"
- />
- </div>
- </div>
- </div>
- </Overlay>
- </template>
- <script setup lang="ts">
- import { ref, onMounted, watch, nextTick } from '../../../../adapter-vue';
- import { IMessageModel, TUIStore, TUIChatService, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
- import closeIcon from '../../../../assets/icon/icon-close.svg';
- import Icon from '../../../common/Icon.vue';
- import Overlay from '../../../common/Overlay/index.vue';
- import Avatar from '../../../common/Avatar/index.vue';
- import FetchMore from '../../../common/FetchMore/index.vue';
- import type { IGroupMessageReadMemberData, IMemberData, ITabInfo, TabName } from './interface';
- import { isMobile } from '../../../../utils/env';
- type ReadType = 'unread' | 'read' | 'all';
- interface IProps {
- message: IMessageModel;
- }
- interface IEmits {
- (key: 'setReadReceiptPanelVisible', visible: boolean, message?: IMessageModel): void;
- }
- const emits = defineEmits<IEmits>();
- const props = withDefaults(defineProps<IProps>(), {
- message: () => ({}) as IMessageModel,
- });
- let lastUnreadCursor: string = '';
- let lastReadCursor: string = '';
- const tabNameList: TabName[] = ['unread', 'read'];
- const isListFetchCompleted: Record<TabName, boolean> = {
- unread: false,
- read: false,
- close: false,
- };
- const isPullDownFetching = ref<boolean>(false);
- const isPanelClose = ref<boolean>(false);
- const isFirstLoadFinished = ref<boolean>(false);
- const isStopFetchMore = ref<boolean>(false);
- const currentTabName = ref<TabName>('unread');
- const tabInfo = ref<ITabInfo>(generateInitalTabInfo());
- onMounted(async () => {
- await initAndRefetchReceiptInfomation();
- nextTick(() => {
- isFirstLoadFinished.value = true;
- });
- });
- watch(
- () => props.message.readReceiptInfo.readCount,
- () => {
- initAndRefetchReceiptInfomation();
- },
- );
- async function fetchGroupMessageRecriptMemberListByType(readType: ReadType = 'all') {
- const message = TUIStore.getMessageModel(props.message.ID);
- let unreadResult = {} as IGroupMessageReadMemberData;
- let readResult = {} as IGroupMessageReadMemberData;
- if (readType === 'all' || readType === 'unread') {
- unreadResult = await TUIChatService.getGroupMessageReadMemberList({
- message,
- filter: 1,
- cursor: lastUnreadCursor,
- count: 100,
- });
- if (unreadResult) {
- lastUnreadCursor = unreadResult.data.cursor;
- if (unreadResult.data.isCompleted) {
- isListFetchCompleted.unread = true;
- }
- }
- }
- if (readType === 'all' || readType === 'read') {
- readResult = await TUIChatService.getGroupMessageReadMemberList({
- message,
- filter: 0,
- cursor: lastReadCursor,
- count: 100,
- });
- if (readResult) {
- lastReadCursor = readResult.data.cursor;
- if (readResult.data.isCompleted) {
- isListFetchCompleted.read = true;
- }
- }
- }
- // Fetch the total number of read and unread users
- const { unreadCount: totalUnreadCount, readCount: totalReadCount } = message.readReceiptInfo;
- return {
- unreadResult: {
- count: totalUnreadCount,
- ...unreadResult.data,
- },
- readResult: {
- count: totalReadCount,
- ...readResult.data,
- },
- };
- }
- async function pullDownFetchMoreData() {
- /**
- * Use isPullDownFetching to control the state of the FetchMore component
- * Also, implement locking for intersectionObserver under uniapp
- * Because there is no isIntersecting in uniapp, it is impossible to determine whether the observed element has entered or exited the observation area
- */
- if (isListFetchCompleted[currentTabName.value] || isPullDownFetching.value) {
- return;
- }
- isPullDownFetching.value = true;
- if (currentTabName.value === 'unread' || currentTabName.value === 'read') {
- const { unreadResult, readResult } = await fetchGroupMessageRecriptMemberListByType(currentTabName.value);
- checkStopFetchMore();
- try {
- tabInfo.value.unread.memberList = tabInfo.value.unread.memberList.concat(unreadResult.unreadUserInfoList || []);
- tabInfo.value.read.memberList = tabInfo.value.read.memberList.concat(readResult.readUserInfoList || []);
- } finally {
- isPullDownFetching.value = false;
- }
- }
- }
- /**
- * Initializes and refetches receipt information.
- *
- * @return {Promise<void>} A promise that resolves when the function has completed.
- */
- async function initAndRefetchReceiptInfomation(): Promise<void> {
- lastUnreadCursor = '';
- lastReadCursor = '';
- isStopFetchMore.value = false;
- isListFetchCompleted.unread = false;
- isListFetchCompleted.read = false;
- const { unreadResult, readResult } = await fetchGroupMessageRecriptMemberListByType('all');
- checkStopFetchMore();
- resetTabInfo('read', readResult.count, readResult.readUserInfoList);
- resetTabInfo('unread', unreadResult.count, unreadResult.unreadUserInfoList);
- resetTabInfo('close');
- }
- /**
- * Checks if the fetch more operation should be stopped
- * by IntersetctionObserver.disconnect().
- *
- * @return {void}
- */
- function checkStopFetchMore(): void {
- if (isListFetchCompleted.read && isListFetchCompleted.unread) {
- isStopFetchMore.value = true;
- }
- }
- /**
- * Resets the information of a specific tab.
- *
- * @param {TabName} tabName - The name of the tab to reset.
- * @param {number} [count] - The count to assign to the tab. Optional.
- * @param {IMemberData[]} [memberList] - The list of members to assign to the tab. Optional.
- * @return {void} - This function does not return anything.
- */
- function resetTabInfo(tabName: TabName, count?: number, memberList?: IMemberData[]): void {
- tabInfo.value[tabName].count = count;
- tabInfo.value[tabName].memberList = memberList || [];
- }
- /**
- * Generates the initial tab information.
- *
- * @return {ITabInfo} The initial tab information.
- */
- function generateInitalTabInfo(): ITabInfo {
- return {
- read: {
- tabName: TUITranslateService.t('TUIChat.已读'),
- count: undefined,
- memberList: [],
- },
- unread: {
- tabName: TUITranslateService.t('TUIChat.未读'),
- count: undefined,
- memberList: [],
- },
- close: {
- tabName: TUITranslateService.t('TUIChat.关闭'),
- count: undefined,
- memberList: [],
- },
- };
- }
- /**
- * Toggles the tab name.
- *
- * @param {TabName} tabName - The name of the tab to toggle.
- * @return {void} This function does not return anything.
- */
- function toggleTabName(tabName: TabName): void {
- currentTabName.value = tabName;
- }
- function closeReadReceiptPanel(): void {
- isPanelClose.value = true;
- setTimeout(() => {
- emits('setReadReceiptPanelVisible', false);
- }, 200);
- }
- </script>
- <style scoped lang="scss">
- :not(not) {
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
- min-width: 0;
- }
- .read-receipt-panel {
- background-color: #fff;
- box-shadow: 0 7px 20px rgba(0, 0, 0, 0.1);
- width: 368px;
- height: 510px;
- padding: 30px 20px;
- display: flex;
- flex-direction: column;
- border-radius: 8px;
- overflow: hidden;
- .header {
- flex-direction: row;
- justify-content: center;
- align-items: center;
- position: relative;
- .header-text {
- font-weight: bold;
- font-size: 16px;
- line-height: 30px;
- color: #333;
- }
- .header-close-icon {
- position: absolute;
- right: 0;
- margin-right: 10px;
- }
- }
- .read-status-counter-container {
- flex-direction: row;
- justify-content: space-between;
- align-items: flex-start;
- min-height: 59px;
- margin: 20px 40px 17.5px;
- .read-status-counter {
- justify-content: flex-start;
- align-items: center;
- cursor: pointer;
- -webkit-tap-highlight-color: transparent;
- .status-text {
- font-size: 14px;
- line-height: 20px;
- }
- .status-count {
- margin-top: 2px;
- font-size: 30px;
- font-weight: bolder;
- line-height: 37px;
- }
- &.active {
- color: #679ce1;
- }
- }
- }
- .read-status-member-list {
- flex: 1 1 auto;
- overflow: hidden auto;
- padding: 20px 0 0;
- border-top: 0.5px solid #e8e8e9;
- font-size: 14px;
- .empty-list-tip {
- align-self: center;
- color: #b3b3b3;
- }
- .read-status-member-container {
- flex-direction: row;
- align-items: center;
- .read-status-avatar {
- flex: 0 0 auto;
- }
- .username {
- margin-left: 8px;
- line-height: 20px;
- flex: 0 1 auto;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- word-break: break-all;
- white-space: nowrap;
- }
- & + .read-status-member-container {
- margin-top: 20px;
- }
- }
- .fetch-more-container {
- justify-content: center;
- align-items: center;
- margin-top: auto;
- }
- }
- }
- .read-receipt-panel-mobile {
- @extend .read-receipt-panel;
- box-shadow: none;
- width: 100vw;
- height: 100vh;
- border-radius: 0;
- animation: slide-in-from-right 0.3s ease-out;
- transition: transform 0.2s ease-out;
- @keyframes slide-in-from-right {
- from {
- transform: translateX(100%);
- }
- }
- }
- .read-receipt-panel-close-mobile {
- transform: translateX(100%);
- }
- </style>
|