提现功能需要添加
This commit is contained in:
bobobobo
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="chat" :style="{marginBottom: keywordHight + 'px'}">
|
||||
<div class="chat" :style="{ marginBottom: keywordHight + 'px' }">
|
||||
<div :class="['tui-chat', !isPC && 'tui-chat-h5']">
|
||||
<div
|
||||
v-if="!currentConversationID"
|
||||
@@ -20,7 +20,10 @@
|
||||
<Forward @toggleMultipleSelectMode="toggleMultipleSelectMode" />
|
||||
<MessageList
|
||||
ref="messageListRef"
|
||||
:class="['tui-chat-message-list', !isPC && 'tui-chat-h5-message-list']"
|
||||
:class="[
|
||||
'tui-chat-message-list',
|
||||
!isPC && 'tui-chat-h5-message-list'
|
||||
]"
|
||||
:isGroup="isGroup"
|
||||
:groupID="groupID"
|
||||
:isNotInGroup="isNotInGroup"
|
||||
@@ -33,7 +36,7 @@
|
||||
v-if="isNotInGroup"
|
||||
:class="{
|
||||
'tui-chat-leave-group': true,
|
||||
'tui-chat-leave-group-mobile': isMobile,
|
||||
'tui-chat-leave-group-mobile': isMobile
|
||||
}"
|
||||
>
|
||||
{{ leaveGroupReasonText }}
|
||||
@@ -63,7 +66,7 @@
|
||||
'tui-chat-message-input',
|
||||
!isPC && 'tui-chat-h5-message-input',
|
||||
isUniFrameWork && 'tui-chat-uni-message-input',
|
||||
isWeChat && 'tui-chat-wx-message-input',
|
||||
isWeChat && 'tui-chat-wx-message-input'
|
||||
]"
|
||||
:enableAt="featureConfig.InputMention"
|
||||
:isMuted="false"
|
||||
@@ -78,232 +81,275 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from '../../adapter-vue';
|
||||
import TUIChatEngine, {
|
||||
TUITranslateService,
|
||||
TUIConversationService,
|
||||
TUIStore,
|
||||
StoreName,
|
||||
IMessageModel,
|
||||
IConversationModel,
|
||||
} from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import TUICore, { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core-lite';
|
||||
import ChatHeader from './chat-header/index.vue';
|
||||
import MessageList from './message-list/index.vue';
|
||||
import MessageInput from './message-input/index.vue';
|
||||
import MultipleSelectPanel from './mulitple-select-panel/index.vue';
|
||||
import Forward from './forward/index.vue';
|
||||
import MessageInputToolbar from './message-input-toolbar/index.vue';
|
||||
import { isPC, isWeChat, isUniFrameWork, isMobile, isApp } from '../../utils/env';
|
||||
import { ToolbarDisplayType } from '../../interface';
|
||||
import TUIChatConfig from './config';
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
computed
|
||||
} from '../../adapter-vue'
|
||||
import TUIChatEngine, {
|
||||
TUITranslateService,
|
||||
TUIConversationService,
|
||||
TUIStore,
|
||||
StoreName,
|
||||
IMessageModel,
|
||||
IConversationModel
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import TUICore, {
|
||||
TUIConstants,
|
||||
ExtensionInfo
|
||||
} from '@tencentcloud/tui-core-lite'
|
||||
import ChatHeader from './chat-header/index.vue'
|
||||
import MessageList from './message-list/index.vue'
|
||||
import MessageInput from './message-input/index.vue'
|
||||
import MultipleSelectPanel from './mulitple-select-panel/index.vue'
|
||||
import Forward from './forward/index.vue'
|
||||
import MessageInputToolbar from './message-input-toolbar/index.vue'
|
||||
import {
|
||||
isPC,
|
||||
isWeChat,
|
||||
isUniFrameWork,
|
||||
isMobile,
|
||||
isApp
|
||||
} from '../../utils/env'
|
||||
import { ToolbarDisplayType } from '../../interface'
|
||||
import TUIChatConfig from './config'
|
||||
|
||||
// @Start uniapp use Chat only
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app';
|
||||
import { initChat, logout } from './entry-chat-only.ts';
|
||||
// @Start uniapp use Chat only
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { initChat, logout } from './entry-chat-only.ts'
|
||||
|
||||
onLoad((options) => {
|
||||
initChat(options);
|
||||
});
|
||||
onLoad(options => {
|
||||
initChat(options)
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
// Whether logout is decided by yourself when the page is unloaded. The default is false.
|
||||
logout(false).then(() => {
|
||||
// Handle success result from promise.then when you set true.
|
||||
}).catch(() => {
|
||||
// handle error
|
||||
});
|
||||
});
|
||||
// @End uniapp use Chat only
|
||||
onUnload(() => {
|
||||
// Whether logout is decided by yourself when the page is unloaded. The default is false.
|
||||
logout(false)
|
||||
.then(() => {
|
||||
// Handle success result from promise.then when you set true.
|
||||
})
|
||||
.catch(() => {
|
||||
// handle error
|
||||
})
|
||||
})
|
||||
// @End uniapp use Chat only
|
||||
|
||||
const emits = defineEmits(['closeChat']);
|
||||
const emits = defineEmits(['closeChat'])
|
||||
|
||||
const groupID = ref(undefined);
|
||||
const isGroup = ref(false);
|
||||
const isNotInGroup = ref(false);
|
||||
const notInGroupReason = ref<number>();
|
||||
const currentConversationID = ref();
|
||||
const isMultipleSelectMode = ref(false);
|
||||
const inputToolbarDisplayType = ref<ToolbarDisplayType>('none');
|
||||
const messageInputRef = ref();
|
||||
const messageListRef = ref<InstanceType<typeof MessageList>>();
|
||||
const headerExtensionList = ref<ExtensionInfo[]>([]);
|
||||
const featureConfig = TUIChatConfig.getFeatureConfig();
|
||||
const keywordHight = ref(0);
|
||||
const groupID = ref(undefined)
|
||||
const isGroup = ref(false)
|
||||
const isNotInGroup = ref(false)
|
||||
const notInGroupReason = ref<number>()
|
||||
const currentConversationID = ref()
|
||||
const isMultipleSelectMode = ref(false)
|
||||
const inputToolbarDisplayType = ref<ToolbarDisplayType>('none')
|
||||
const messageInputRef = ref()
|
||||
const messageListRef = ref<InstanceType<typeof MessageList>>()
|
||||
const headerExtensionList = ref<ExtensionInfo[]>([])
|
||||
const featureConfig = TUIChatConfig.getFeatureConfig()
|
||||
const keywordHight = ref(0)
|
||||
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const screenHeight = systemInfo.screenHeight;
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
const screenHeight = systemInfo.screenHeight
|
||||
|
||||
const windowResizeCallback = (res) => {
|
||||
const value = screenHeight - res.size.windowHeight;
|
||||
if (value > 0 && inputToolbarDisplayType.value !== 'dialog') {
|
||||
inputToolbarDisplayType.value = 'none';
|
||||
const windowResizeCallback = res => {
|
||||
const value = screenHeight - res.size.windowHeight
|
||||
if (value > 0 && inputToolbarDisplayType.value !== 'dialog') {
|
||||
inputToolbarDisplayType.value = 'none'
|
||||
}
|
||||
uni.$emit('scroll-to-bottom')
|
||||
keywordHight.value = value
|
||||
}
|
||||
uni.$emit('scroll-to-bottom');
|
||||
keywordHight.value = value;
|
||||
};
|
||||
uni.onWindowResize(windowResizeCallback);
|
||||
uni.onWindowResize(windowResizeCallback)
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CONV, {
|
||||
currentConversation: onCurrentConversationUpdate,
|
||||
});
|
||||
});
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CONV, {
|
||||
currentConversation: onCurrentConversationUpdate
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CONV, {
|
||||
currentConversation: onCurrentConversationUpdate,
|
||||
});
|
||||
reset();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CONV, {
|
||||
currentConversation: onCurrentConversationUpdate
|
||||
})
|
||||
reset()
|
||||
})
|
||||
|
||||
const isInputToolbarShow = computed<boolean>(() => {
|
||||
return isUniFrameWork ? inputToolbarDisplayType.value !== 'none' : true;
|
||||
});
|
||||
const isInputToolbarShow = computed<boolean>(() => {
|
||||
return isUniFrameWork
|
||||
? inputToolbarDisplayType.value !== 'none'
|
||||
: true
|
||||
})
|
||||
|
||||
const leaveGroupReasonText = computed<string>(() => {
|
||||
let text = '';
|
||||
switch (notInGroupReason.value) {
|
||||
case 4:
|
||||
text = TUITranslateService.t('TUIChat.您已被管理员移出群聊');
|
||||
break;
|
||||
case 5:
|
||||
text = TUITranslateService.t('TUIChat.该群聊已被解散');
|
||||
break;
|
||||
case 8:
|
||||
text = TUITranslateService.t('TUIChat.您已退出该群聊');
|
||||
break;
|
||||
default:
|
||||
text = TUITranslateService.t('TUIChat.您已退出该群聊');
|
||||
break;
|
||||
const leaveGroupReasonText = computed<string>(() => {
|
||||
let text = ''
|
||||
switch (notInGroupReason.value) {
|
||||
case 4:
|
||||
text = TUITranslateService.t('TUIChat.您已被管理员移出群聊')
|
||||
break
|
||||
case 5:
|
||||
text = TUITranslateService.t('TUIChat.该群聊已被解散')
|
||||
break
|
||||
case 8:
|
||||
text = TUITranslateService.t('TUIChat.您已退出该群聊')
|
||||
break
|
||||
default:
|
||||
text = TUITranslateService.t('TUIChat.您已退出该群聊')
|
||||
break
|
||||
}
|
||||
return text
|
||||
})
|
||||
|
||||
const reset = () => {
|
||||
TUIConversationService.switchConversation('')
|
||||
}
|
||||
return text;
|
||||
});
|
||||
|
||||
const reset = () => {
|
||||
TUIConversationService.switchConversation('');
|
||||
};
|
||||
const closeChat = (conversationID: string) => {
|
||||
emits('closeChat', conversationID)
|
||||
reset()
|
||||
}
|
||||
|
||||
const closeChat = (conversationID: string) => {
|
||||
emits('closeChat', conversationID);
|
||||
reset();
|
||||
};
|
||||
const insertEmoji = (emojiObj: object) => {
|
||||
messageInputRef.value?.insertEmoji(emojiObj)
|
||||
}
|
||||
|
||||
const insertEmoji = (emojiObj: object) => {
|
||||
messageInputRef.value?.insertEmoji(emojiObj);
|
||||
};
|
||||
const handleEditor = (message: IMessageModel, type: string) => {
|
||||
if (!message || !type) return
|
||||
switch (type) {
|
||||
case 'reference':
|
||||
// todo
|
||||
break
|
||||
case 'reply':
|
||||
// todo
|
||||
break
|
||||
case 'reedit':
|
||||
if (message?.payload?.text) {
|
||||
messageInputRef?.value?.reEdit(message?.payload?.text)
|
||||
}
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditor = (message: IMessageModel, type: string) => {
|
||||
if (!message || !type) return;
|
||||
switch (type) {
|
||||
case 'reference':
|
||||
// todo
|
||||
break;
|
||||
case 'reply':
|
||||
// todo
|
||||
break;
|
||||
case 'reedit':
|
||||
if (message?.payload?.text) {
|
||||
messageInputRef?.value?.reEdit(message?.payload?.text);
|
||||
const handleGroup = () => {
|
||||
headerExtensionList.value[0].listener.onClicked({
|
||||
groupID: groupID.value
|
||||
})
|
||||
}
|
||||
|
||||
function changeToolbarDisplayType(type: ToolbarDisplayType) {
|
||||
setTimeout(() => {
|
||||
inputToolbarDisplayType.value =
|
||||
inputToolbarDisplayType.value === type ? 'none' : type
|
||||
if (inputToolbarDisplayType.value !== 'none' && isUniFrameWork) {
|
||||
uni.$emit('scroll-to-bottom')
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleGroup = () => {
|
||||
headerExtensionList.value[0].listener.onClicked({ groupID: groupID.value });
|
||||
};
|
||||
|
||||
function changeToolbarDisplayType(type: ToolbarDisplayType) {
|
||||
setTimeout(() => {
|
||||
inputToolbarDisplayType.value = inputToolbarDisplayType.value === type ? 'none' : type;
|
||||
if (inputToolbarDisplayType.value !== 'none' && isUniFrameWork) {
|
||||
uni.$emit('scroll-to-bottom');
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function scrollToLatestMessage() {
|
||||
messageListRef.value?.scrollToLatestMessage();
|
||||
}
|
||||
|
||||
function toggleMultipleSelectMode(visible?: boolean) {
|
||||
isMultipleSelectMode.value = visible === undefined ? !isMultipleSelectMode.value : visible;
|
||||
}
|
||||
|
||||
function mergeForwardMessage() {
|
||||
messageListRef.value?.mergeForwardMessage();
|
||||
}
|
||||
|
||||
function oneByOneForwardMessage() {
|
||||
messageListRef.value?.oneByOneForwardMessage();
|
||||
}
|
||||
|
||||
function updateUIUserNotInGroup(conversation: IConversationModel) {
|
||||
if (conversation?.operationType > 0) {
|
||||
headerExtensionList.value = [];
|
||||
isNotInGroup.value = true;
|
||||
/**
|
||||
* 4 - be removed from the group
|
||||
* 5 - group is dismissed
|
||||
* 8 - quit group
|
||||
*/
|
||||
notInGroupReason.value = conversation?.operationType;
|
||||
} else {
|
||||
isNotInGroup.value = false;
|
||||
notInGroupReason.value = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function onCurrentConversationUpdate(conversation: IConversationModel) {
|
||||
updateUIUserNotInGroup(conversation);
|
||||
// return when currentConversation is null
|
||||
if (!conversation) {
|
||||
return;
|
||||
}
|
||||
// return when currentConversationID.value is the same as conversation.conversationID.
|
||||
if (currentConversationID.value === conversation?.conversationID) {
|
||||
return;
|
||||
}, 100)
|
||||
}
|
||||
|
||||
isGroup.value = false;
|
||||
let conversationType = TUIChatEngine.TYPES.CONV_C2C;
|
||||
const conversationID = conversation.conversationID;
|
||||
if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
|
||||
conversationType = TUIChatEngine.TYPES.CONV_GROUP;
|
||||
isGroup.value = true;
|
||||
groupID.value = conversationID.replace(TUIChatEngine.TYPES.CONV_GROUP, '');
|
||||
function scrollToLatestMessage() {
|
||||
messageListRef.value?.scrollToLatestMessage()
|
||||
}
|
||||
|
||||
headerExtensionList.value = [];
|
||||
isMultipleSelectMode.value = false;
|
||||
// Initialize chatType
|
||||
TUIChatConfig.setChatType(conversationType);
|
||||
// While converstaion change success, notify callkit and roomkit、or other components.
|
||||
TUICore.notifyEvent(TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED, TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED, { groupID: groupID.value });
|
||||
// The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
|
||||
TUICore.callService({
|
||||
serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
|
||||
method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
|
||||
params: { conversationID: conversationID },
|
||||
});
|
||||
// When open chat in room, close main chat ui and reset theme.
|
||||
if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.ROOM) {
|
||||
if (TUIChatConfig.getFeatureConfig(TUIConstants.TUIChat.FEATURE.InputVoice) === true) {
|
||||
TUIChatConfig.setTheme('light');
|
||||
currentConversationID.value = '';
|
||||
return;
|
||||
function toggleMultipleSelectMode(visible?: boolean) {
|
||||
isMultipleSelectMode.value =
|
||||
visible === undefined ? !isMultipleSelectMode.value : visible
|
||||
}
|
||||
|
||||
function mergeForwardMessage() {
|
||||
messageListRef.value?.mergeForwardMessage()
|
||||
}
|
||||
|
||||
function oneByOneForwardMessage() {
|
||||
messageListRef.value?.oneByOneForwardMessage()
|
||||
}
|
||||
|
||||
function updateUIUserNotInGroup(conversation: IConversationModel) {
|
||||
if (conversation?.operationType > 0) {
|
||||
headerExtensionList.value = []
|
||||
isNotInGroup.value = true
|
||||
/**
|
||||
* 4 - be removed from the group
|
||||
* 5 - group is dismissed
|
||||
* 8 - quit group
|
||||
*/
|
||||
notInGroupReason.value = conversation?.operationType
|
||||
} else {
|
||||
isNotInGroup.value = false
|
||||
notInGroupReason.value = undefined
|
||||
}
|
||||
}
|
||||
// Get chat header extensions
|
||||
if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.GROUP) {
|
||||
headerExtensionList.value = TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID);
|
||||
|
||||
function onCurrentConversationUpdate(conversation: IConversationModel) {
|
||||
updateUIUserNotInGroup(conversation)
|
||||
// return when currentConversation is null
|
||||
if (!conversation) {
|
||||
return
|
||||
}
|
||||
// return when currentConversationID.value is the same as conversation.conversationID.
|
||||
if (currentConversationID.value === conversation?.conversationID) {
|
||||
return
|
||||
}
|
||||
|
||||
isGroup.value = false
|
||||
let conversationType = TUIChatEngine.TYPES.CONV_C2C
|
||||
const conversationID = conversation.conversationID
|
||||
if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
|
||||
conversationType = TUIChatEngine.TYPES.CONV_GROUP
|
||||
isGroup.value = true
|
||||
groupID.value = conversationID.replace(
|
||||
TUIChatEngine.TYPES.CONV_GROUP,
|
||||
''
|
||||
)
|
||||
}
|
||||
|
||||
headerExtensionList.value = []
|
||||
isMultipleSelectMode.value = false
|
||||
// Initialize chatType
|
||||
TUIChatConfig.setChatType(conversationType)
|
||||
// While converstaion change success, notify callkit and roomkit、or other components.
|
||||
TUICore.notifyEvent(
|
||||
TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED,
|
||||
TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED,
|
||||
{ groupID: groupID.value }
|
||||
)
|
||||
// The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
|
||||
TUICore.callService({
|
||||
serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
|
||||
method:
|
||||
TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD
|
||||
.ACTIVE_CONVERSATION,
|
||||
params: { conversationID: conversationID }
|
||||
})
|
||||
// When open chat in room, close main chat ui and reset theme.
|
||||
if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.ROOM) {
|
||||
if (
|
||||
TUIChatConfig.getFeatureConfig(
|
||||
TUIConstants.TUIChat.FEATURE.InputVoice
|
||||
) === true
|
||||
) {
|
||||
TUIChatConfig.setTheme('light')
|
||||
currentConversationID.value = ''
|
||||
return
|
||||
}
|
||||
}
|
||||
// Get chat header extensions
|
||||
if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.GROUP) {
|
||||
headerExtensionList.value = TUICore.getExtensionList(
|
||||
TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID
|
||||
)
|
||||
}
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'activeConversation',
|
||||
conversationID
|
||||
)
|
||||
currentConversationID.value = conversationID
|
||||
}
|
||||
TUIStore.update(StoreName.CUSTOM, 'activeConversation', conversationID);
|
||||
currentConversationID.value = conversationID;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" src="./style/index.scss"></style>
|
||||
<style scoped lang="scss" src="./style/index.scss">
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
uni-page-body,
|
||||
html,
|
||||
body,
|
||||
page {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@import '../../../assets/styles/common';
|
||||
@import './web';
|
||||
@import './h5';
|
||||
|
||||
@@ -26,64 +26,84 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { deepCopy } from '../../../TUIChat/utils/utils';
|
||||
import ContactListItem from '../contact-list-item/index.vue';
|
||||
import { sortByFirstChar } from '../../utils/sortByFirstChar';
|
||||
import { onMounted, onUnmounted, ref } from '../../../../adapter-vue';
|
||||
import { Friend, StoreName, TUIStore } from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import { FriendListData } from '../../../../interface';
|
||||
import { deepCopy } from '../../../TUIChat/utils/utils'
|
||||
import ContactListItem from '../contact-list-item/index.vue'
|
||||
import { sortByFirstChar } from '../../utils/sortByFirstChar'
|
||||
import { onMounted, onUnmounted, ref } from '../../../../adapter-vue'
|
||||
import {
|
||||
Friend,
|
||||
StoreName,
|
||||
TUIStore
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import { FriendListData } from '../../../../interface'
|
||||
|
||||
const emits = defineEmits(['enterConversation']);
|
||||
const emits = defineEmits(['enterConversation'])
|
||||
|
||||
const friendListData = ref<FriendListData>({
|
||||
key: 'friendList',
|
||||
title: '我的好友',
|
||||
map: {},
|
||||
});
|
||||
const friendListData = ref<FriendListData>({
|
||||
key: 'friendList',
|
||||
title: '我的好友',
|
||||
map: {}
|
||||
})
|
||||
|
||||
function onFriendListUpdated(friendList: Friend[]) {
|
||||
const { groupedList } = sortByFirstChar(
|
||||
friendList,
|
||||
(friend: Friend) => friend.remark || friend.profile?.nick || friend.userID || '');
|
||||
friendListData.value.map = groupedList;
|
||||
}
|
||||
function onFriendListUpdated(friendList: Friend[]) {
|
||||
const { groupedList } = sortByFirstChar(
|
||||
friendList,
|
||||
(friend: Friend) =>
|
||||
friend.remark || friend.profile?.nick || friend.userID || ''
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.FRIEND, {
|
||||
friendList: onFriendListUpdated,
|
||||
});
|
||||
});
|
||||
console.log(groupedList, '====222==')
|
||||
friendListData.value.map = {
|
||||
A: [
|
||||
{
|
||||
profile: {
|
||||
nick: '测试第三方',
|
||||
avatar:
|
||||
'https://jckj-1309258891.cos.ap-chengdu.myqcloud.com/common/19101767159307246_.png'
|
||||
}
|
||||
}
|
||||
],
|
||||
...groupedList
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.FRIEND, {
|
||||
friendList: onFriendListUpdated,
|
||||
});
|
||||
});
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.FRIEND, {
|
||||
friendList: onFriendListUpdated
|
||||
})
|
||||
})
|
||||
|
||||
const enterConversation = (item: any) => {
|
||||
emits('enterConversation', item);
|
||||
};
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.FRIEND, {
|
||||
friendList: onFriendListUpdated
|
||||
})
|
||||
})
|
||||
|
||||
const enterConversation = (item: any) => {
|
||||
emits('enterConversation', item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.friend-list {
|
||||
ul, li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
.friend-list {
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.friend-group-title {
|
||||
padding: 8px 16px;
|
||||
background-color: #f8f9fa;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 20px;
|
||||
}
|
||||
.friend-group-title {
|
||||
padding: 8px 16px;
|
||||
background-color: #f8f9fa;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.friend-item {
|
||||
margin: 0 15px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.friend-item {
|
||||
margin: 0 15px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -28,7 +28,13 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="tui-contact-list-item-header-right">
|
||||
<div>{{ TUITranslateService.t(`TUIContact.${contactListObj.title}`) }}</div>
|
||||
<div>
|
||||
{{
|
||||
TUITranslateService.t(
|
||||
`TUIContact.${contactListObj.title}`
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<Icon
|
||||
:file="currentContactListKey === key ? downSVG : rightSVG"
|
||||
size="20px"
|
||||
@@ -41,7 +47,8 @@
|
||||
</div>
|
||||
<template v-else>
|
||||
<li
|
||||
v-for="contactListItem in contactListMap[currentContactListKey].list"
|
||||
v-for="contactListItem in contactListMap[currentContactListKey]
|
||||
.list"
|
||||
:key="contactListItem.renderKey"
|
||||
class="tui-contact-list-item-main-item"
|
||||
:class="['selected']"
|
||||
@@ -55,19 +62,13 @@
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-else-if="contactSearchingStatus"
|
||||
class="tui-contact-list"
|
||||
>
|
||||
<ul v-else-if="contactSearchingStatus" class="tui-contact-list">
|
||||
<li
|
||||
v-for="(item, key) in contactSearchResult"
|
||||
:key="key"
|
||||
class="tui-contact-list-item"
|
||||
>
|
||||
<div
|
||||
v-if="item.list[0]"
|
||||
class="tui-contact-search-list"
|
||||
>
|
||||
<div v-if="item.list[0]" class="tui-contact-search-list">
|
||||
<div class="tui-contact-search-list-title">
|
||||
{{ TUITranslateService.t(`TUIContact.${item.label}`) }}
|
||||
</div>
|
||||
@@ -89,288 +90,369 @@
|
||||
v-if="isContactSearchNoResult"
|
||||
class="tui-contact-search-list-default"
|
||||
>
|
||||
{{ TUITranslateService.t("TUIContact.无搜索结果") }}
|
||||
{{ TUITranslateService.t('TUIContact.无搜索结果') }}
|
||||
</div>
|
||||
</ul>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
TUITranslateService,
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUIFriendService,
|
||||
TUIUserService,
|
||||
} from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import TUICore, { TUIConstants } from '@tencentcloud/tui-core-lite';
|
||||
import { ref, computed, onMounted, onUnmounted, provide } from '../../../adapter-vue';
|
||||
import { isPC } from '../../../utils/env';
|
||||
import { deepCopy } from '../../TUIChat/utils/utils';
|
||||
import {
|
||||
TUITranslateService,
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUIFriendService,
|
||||
TUIUserService
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import TUICore, { TUIConstants } from '@tencentcloud/tui-core-lite'
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
provide
|
||||
} from '../../../adapter-vue'
|
||||
import { isPC } from '../../../utils/env'
|
||||
import { deepCopy } from '../../TUIChat/utils/utils'
|
||||
|
||||
import Icon from '../../common/Icon.vue';
|
||||
import ContactListItem from './contact-list-item/index.vue';
|
||||
import FriendList from './components/FriendList.vue';
|
||||
import Icon from '../../common/Icon.vue'
|
||||
import ContactListItem from './contact-list-item/index.vue'
|
||||
import FriendList from './components/FriendList.vue'
|
||||
|
||||
import downSVG from '../../../assets/icon/down-icon.svg';
|
||||
import rightSVG from '../../../assets/icon/right-icon.svg';
|
||||
import newContactsSVG from '../../../assets/icon/new-contacts.svg';
|
||||
import groupSVG from '../../../assets/icon/groups.svg';
|
||||
import blackListSVG from '../../../assets/icon/black-list.svg';
|
||||
import downSVG from '../../../assets/icon/down-icon.svg'
|
||||
import rightSVG from '../../../assets/icon/right-icon.svg'
|
||||
import newContactsSVG from '../../../assets/icon/new-contacts.svg'
|
||||
import groupSVG from '../../../assets/icon/groups.svg'
|
||||
import blackListSVG from '../../../assets/icon/black-list.svg'
|
||||
|
||||
import type {
|
||||
IContactList,
|
||||
IContactSearchResult,
|
||||
IBlackListUserItem,
|
||||
IUserStatus,
|
||||
IUserStatusMap,
|
||||
IContactInfoType,
|
||||
} from '../../../interface';
|
||||
import type {
|
||||
IGroupModel,
|
||||
Friend,
|
||||
FriendApplication } from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import type {
|
||||
IContactList,
|
||||
IContactSearchResult,
|
||||
IBlackListUserItem,
|
||||
IUserStatus,
|
||||
IUserStatusMap,
|
||||
IContactInfoType
|
||||
} from '../../../interface'
|
||||
import type {
|
||||
IGroupModel,
|
||||
Friend,
|
||||
FriendApplication
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
|
||||
const currentContactListKey = ref<keyof IContactList>('');
|
||||
const currentContactInfo = ref<IContactInfoType>({} as IContactInfoType);
|
||||
const contactListMap = ref<IContactList>({
|
||||
friendApplicationList: {
|
||||
icon: newContactsSVG,
|
||||
key: 'friendApplicationList',
|
||||
title: '新的联系人',
|
||||
list: [] as FriendApplication[],
|
||||
unreadCount: 0,
|
||||
},
|
||||
groupList: {
|
||||
icon: groupSVG,
|
||||
key: 'groupList',
|
||||
title: '我的群聊',
|
||||
list: [] as IGroupModel[],
|
||||
},
|
||||
blackList: {
|
||||
icon: blackListSVG,
|
||||
key: 'blackList',
|
||||
title: '黑名单',
|
||||
list: [] as IBlackListUserItem[],
|
||||
},
|
||||
});
|
||||
const currentContactListKey = ref<keyof IContactList>('')
|
||||
const currentContactInfo = ref<IContactInfoType>({} as IContactInfoType)
|
||||
const contactListMap = ref<IContactList>({
|
||||
friendApplicationList: {
|
||||
icon: newContactsSVG,
|
||||
key: 'friendApplicationList',
|
||||
title: '新的联系人',
|
||||
list: [] as FriendApplication[],
|
||||
unreadCount: 0
|
||||
},
|
||||
groupList: {
|
||||
icon: groupSVG,
|
||||
key: 'groupList',
|
||||
title: '我的群聊',
|
||||
list: [] as IGroupModel[]
|
||||
},
|
||||
blackList: {
|
||||
icon: blackListSVG,
|
||||
key: 'blackList',
|
||||
title: '黑名单',
|
||||
list: [] as IBlackListUserItem[]
|
||||
}
|
||||
})
|
||||
|
||||
const contactSearchingStatus = ref<boolean>(false);
|
||||
const contactSearchResult = ref<IContactSearchResult>();
|
||||
const displayOnlineStatus = ref<boolean>(false);
|
||||
const userOnlineStatusMap = ref<IUserStatusMap>();
|
||||
const contactSearchingStatus = ref<boolean>(false)
|
||||
const contactSearchResult = ref<IContactSearchResult>()
|
||||
const displayOnlineStatus = ref<boolean>(false)
|
||||
const userOnlineStatusMap = ref<IUserStatusMap>()
|
||||
|
||||
const isContactSearchNoResult = computed((): boolean => (
|
||||
!contactSearchResult?.value?.user?.list[0]
|
||||
&& !contactSearchResult?.value?.group?.list[0]
|
||||
));
|
||||
const isContactSearchNoResult = computed(
|
||||
(): boolean =>
|
||||
!contactSearchResult?.value?.user?.list[0] &&
|
||||
!contactSearchResult?.value?.group?.list[0]
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.APP, {
|
||||
enabledCustomerServicePlugin: onCustomerServiceCommercialPluginUpdated,
|
||||
});
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.APP, {
|
||||
enabledCustomerServicePlugin:
|
||||
onCustomerServiceCommercialPluginUpdated
|
||||
})
|
||||
|
||||
TUIStore.watch(StoreName.GRP, {
|
||||
groupList: onGroupListUpdated,
|
||||
});
|
||||
TUIStore.watch(StoreName.GRP, {
|
||||
groupList: onGroupListUpdated
|
||||
})
|
||||
|
||||
TUIStore.watch(StoreName.USER, {
|
||||
userBlacklist: onUserBlacklistUpdated,
|
||||
displayOnlineStatus: onDisplayOnlineStatusUpdated,
|
||||
userStatusList: onUserStatusListUpdated,
|
||||
});
|
||||
TUIStore.watch(StoreName.USER, {
|
||||
userBlacklist: onUserBlacklistUpdated,
|
||||
displayOnlineStatus: onDisplayOnlineStatusUpdated,
|
||||
userStatusList: onUserStatusListUpdated
|
||||
})
|
||||
|
||||
TUIStore.watch(StoreName.FRIEND, {
|
||||
friendApplicationList: onFriendApplicationListUpdated,
|
||||
friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated,
|
||||
});
|
||||
TUIStore.watch(StoreName.FRIEND, {
|
||||
friendApplicationList: onFriendApplicationListUpdated,
|
||||
friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated
|
||||
})
|
||||
|
||||
TUIStore.watch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
|
||||
currentContactSearchResult: onCurrentContactSearchResultUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
});
|
||||
});
|
||||
TUIStore.watch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus:
|
||||
onCurrentContactSearchingStatusUpdated,
|
||||
currentContactSearchResult: onCurrentContactSearchResultUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.APP, {
|
||||
enabledCustomerServicePlugin: onCustomerServiceCommercialPluginUpdated,
|
||||
});
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.APP, {
|
||||
enabledCustomerServicePlugin:
|
||||
onCustomerServiceCommercialPluginUpdated
|
||||
})
|
||||
|
||||
TUIStore.unwatch(StoreName.GRP, {
|
||||
groupList: onGroupListUpdated,
|
||||
});
|
||||
TUIStore.unwatch(StoreName.GRP, {
|
||||
groupList: onGroupListUpdated
|
||||
})
|
||||
|
||||
TUIStore.unwatch(StoreName.USER, {
|
||||
userBlacklist: onUserBlacklistUpdated,
|
||||
displayOnlineStatus: onDisplayOnlineStatusUpdated,
|
||||
userStatusList: onUserStatusListUpdated,
|
||||
});
|
||||
TUIStore.unwatch(StoreName.USER, {
|
||||
userBlacklist: onUserBlacklistUpdated,
|
||||
displayOnlineStatus: onDisplayOnlineStatusUpdated,
|
||||
userStatusList: onUserStatusListUpdated
|
||||
})
|
||||
|
||||
TUIStore.unwatch(StoreName.FRIEND, {
|
||||
friendApplicationList: onFriendApplicationListUpdated,
|
||||
friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated,
|
||||
});
|
||||
TUIStore.unwatch(StoreName.FRIEND, {
|
||||
friendApplicationList: onFriendApplicationListUpdated,
|
||||
friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated
|
||||
})
|
||||
|
||||
TUIStore.unwatch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
|
||||
currentContactSearchResult: onCurrentContactSearchResultUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
});
|
||||
});
|
||||
TUIStore.unwatch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus:
|
||||
onCurrentContactSearchingStatusUpdated,
|
||||
currentContactSearchResult: onCurrentContactSearchResultUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated
|
||||
})
|
||||
})
|
||||
|
||||
function toggleCurrentContactList(key: keyof IContactList) {
|
||||
if (currentContactListKey.value === key) {
|
||||
currentContactListKey.value = '';
|
||||
currentContactInfo.value = {} as IContactInfoType;
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '');
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', {} as IContactInfoType);
|
||||
} else {
|
||||
currentContactListKey.value = key;
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', key);
|
||||
if (key === 'friendApplicationList') {
|
||||
TUIFriendService.setFriendApplicationRead();
|
||||
function toggleCurrentContactList(key: keyof IContactList) {
|
||||
if (currentContactListKey.value === key) {
|
||||
currentContactListKey.value = ''
|
||||
currentContactInfo.value = {} as IContactInfoType
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '')
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'currentContactInfo',
|
||||
{} as IContactInfoType
|
||||
)
|
||||
} else {
|
||||
currentContactListKey.value = key
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', key)
|
||||
|
||||
console.log(111)
|
||||
if (key === 'friendApplicationList') {
|
||||
TUIFriendService.setFriendApplicationRead()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function selectItem(item: any) {
|
||||
currentContactInfo.value = item;
|
||||
// For a result in the search list, before viewing the contactInfo details,
|
||||
// it is necessary to update the data for the "already in the group list/already in the friend list" situation to obtain more detailed information
|
||||
if (contactSearchingStatus.value) {
|
||||
let targetListItem;
|
||||
if ((currentContactInfo.value as Friend)?.userID) {
|
||||
targetListItem = contactListMap.value?.friendList?.list?.find(
|
||||
(item: IContactInfoType) => (item as Friend)?.userID === (currentContactInfo.value as Friend)?.userID,
|
||||
);
|
||||
} else if ((currentContactInfo.value as IGroupModel)?.groupID) {
|
||||
targetListItem = contactListMap.value?.groupList?.list?.find(
|
||||
(item: IContactInfoType) => (item as IGroupModel)?.groupID === (currentContactInfo.value as IGroupModel)?.groupID,
|
||||
);
|
||||
function selectItem(item: any) {
|
||||
currentContactInfo.value = item
|
||||
// For a result in the search list, before viewing the contactInfo details,
|
||||
// it is necessary to update the data for the "already in the group list/already in the friend list" situation to obtain more detailed information
|
||||
if (contactSearchingStatus.value) {
|
||||
let targetListItem
|
||||
if ((currentContactInfo.value as Friend)?.userID) {
|
||||
targetListItem = contactListMap.value?.friendList?.list?.find(
|
||||
(item: IContactInfoType) =>
|
||||
(item as Friend)?.userID ===
|
||||
(currentContactInfo.value as Friend)?.userID
|
||||
)
|
||||
} else if ((currentContactInfo.value as IGroupModel)?.groupID) {
|
||||
targetListItem = contactListMap.value?.groupList?.list?.find(
|
||||
(item: IContactInfoType) =>
|
||||
(item as IGroupModel)?.groupID ===
|
||||
(currentContactInfo.value as IGroupModel)?.groupID
|
||||
)
|
||||
}
|
||||
if (targetListItem) {
|
||||
currentContactInfo.value = targetListItem
|
||||
}
|
||||
}
|
||||
if (targetListItem) {
|
||||
currentContactInfo.value = targetListItem;
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'currentContactInfo',
|
||||
currentContactInfo.value
|
||||
)
|
||||
}
|
||||
|
||||
const selectFriend = (item: any) => {
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'currentContactListKey',
|
||||
'friendList'
|
||||
)
|
||||
selectItem(item)
|
||||
}
|
||||
|
||||
function onDisplayOnlineStatusUpdated(status: boolean) {
|
||||
displayOnlineStatus.value = status
|
||||
}
|
||||
|
||||
function onUserStatusListUpdated(list: Map<string, IUserStatus>) {
|
||||
if (list?.size > 0) {
|
||||
userOnlineStatusMap.value = Object.fromEntries(list?.entries())
|
||||
}
|
||||
}
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', currentContactInfo.value);
|
||||
}
|
||||
|
||||
const selectFriend = (item: any) => {
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', 'friendList');
|
||||
selectItem(item);
|
||||
};
|
||||
function onCustomerServiceCommercialPluginUpdated(isEnabled: boolean) {
|
||||
if (!isEnabled) {
|
||||
return
|
||||
}
|
||||
|
||||
function onDisplayOnlineStatusUpdated(status: boolean) {
|
||||
displayOnlineStatus.value = status;
|
||||
}
|
||||
// After the customer purchases the customer service plug-in,
|
||||
// the engine updates the enabledCustomerServicePlugin to true through the commercial capability bit.
|
||||
const contactListExtensionID =
|
||||
TUIConstants.TUIContact.EXTENSION.CONTACT_LIST.EXT_ID
|
||||
const tuiContactExtensionList = TUICore.getExtensionList(
|
||||
contactListExtensionID
|
||||
)
|
||||
|
||||
function onUserStatusListUpdated(list: Map<string, IUserStatus>) {
|
||||
if (list?.size > 0) {
|
||||
userOnlineStatusMap.value = Object.fromEntries(list?.entries());
|
||||
}
|
||||
}
|
||||
const customerData = tuiContactExtensionList.find(
|
||||
(extension: any) => {
|
||||
const { name, accountList = [] } = extension.data || {}
|
||||
return name === 'customer' && accountList.length > 0
|
||||
}
|
||||
)
|
||||
|
||||
function onCustomerServiceCommercialPluginUpdated(isEnabled: boolean) {
|
||||
if (!isEnabled) {
|
||||
return;
|
||||
if (customerData) {
|
||||
const { data, text } = customerData
|
||||
const { accountList } = (data || {}) as { accountList: string[] }
|
||||
|
||||
TUIUserService.getUserProfile({ userIDList: accountList })
|
||||
.then(res => {
|
||||
if (res.data.length > 0) {
|
||||
const customerList = {
|
||||
title: text,
|
||||
list: res.data.map((item: any, index: number) => ({
|
||||
...item,
|
||||
renderKey: generateRenderKey('customerList', item, index),
|
||||
infoKeyList: [],
|
||||
btnKeyList: ['enterC2CConversation']
|
||||
})),
|
||||
key: 'customerList'
|
||||
}
|
||||
contactListMap.value = {
|
||||
...contactListMap.value,
|
||||
customerList
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
// After the customer purchases the customer service plug-in,
|
||||
// the engine updates the enabledCustomerServicePlugin to true through the commercial capability bit.
|
||||
const contactListExtensionID = TUIConstants.TUIContact.EXTENSION.CONTACT_LIST.EXT_ID;
|
||||
const tuiContactExtensionList = TUICore.getExtensionList(contactListExtensionID);
|
||||
|
||||
const customerData = tuiContactExtensionList.find((extension: any) => {
|
||||
const { name, accountList = [] } = extension.data || {};
|
||||
return name === 'customer' && accountList.length > 0;
|
||||
});
|
||||
|
||||
if (customerData) {
|
||||
const { data, text } = customerData;
|
||||
const { accountList } = (data || {}) as { accountList: string[] };
|
||||
|
||||
TUIUserService.getUserProfile({ userIDList: accountList })
|
||||
.then((res) => {
|
||||
if (res.data.length > 0) {
|
||||
const customerList = {
|
||||
title: text,
|
||||
list: res.data.map((item: any, index: number) => ({
|
||||
...item,
|
||||
renderKey: generateRenderKey('customerList', item, index),
|
||||
infoKeyList: [],
|
||||
btnKeyList: ['enterC2CConversation'],
|
||||
})),
|
||||
key: 'customerList',
|
||||
};
|
||||
contactListMap.value = { ...contactListMap.value, customerList };
|
||||
}
|
||||
})
|
||||
.catch(() => { });
|
||||
function onGroupListUpdated(groupList: IGroupModel[]) {
|
||||
updateContactListMap('groupList', groupList)
|
||||
}
|
||||
}
|
||||
|
||||
function onGroupListUpdated(groupList: IGroupModel[]) {
|
||||
updateContactListMap('groupList', groupList);
|
||||
}
|
||||
function onUserBlacklistUpdated(userBlacklist: IBlackListUserItem[]) {
|
||||
updateContactListMap('blackList', userBlacklist)
|
||||
}
|
||||
|
||||
function onUserBlacklistUpdated(userBlacklist: IBlackListUserItem[]) {
|
||||
updateContactListMap('blackList', userBlacklist);
|
||||
}
|
||||
|
||||
function onFriendApplicationUnreadCountUpdated(friendApplicationUnreadCount: number) {
|
||||
contactListMap.value.friendApplicationList.unreadCount = friendApplicationUnreadCount;
|
||||
}
|
||||
|
||||
function onFriendApplicationListUpdated(friendApplicationList: FriendApplication[]) {
|
||||
updateContactListMap('friendApplicationList', friendApplicationList);
|
||||
}
|
||||
|
||||
function updateContactListMap(key: keyof IContactList, list: IContactInfoType[]) {
|
||||
contactListMap.value[key].list = list;
|
||||
contactListMap.value[key].list.map((item: IContactInfoType, index: number) => item.renderKey = generateRenderKey(key, item, index));
|
||||
updateCurrentContactInfoFromList(contactListMap.value[key].list, key);
|
||||
}
|
||||
|
||||
function updateCurrentContactInfoFromList(list: IContactInfoType[], type: keyof IContactList) {
|
||||
if (
|
||||
!(currentContactInfo.value as Friend)?.userID
|
||||
&& !(currentContactInfo.value as IGroupModel)?.groupID
|
||||
function onFriendApplicationUnreadCountUpdated(
|
||||
friendApplicationUnreadCount: number
|
||||
) {
|
||||
return;
|
||||
contactListMap.value.friendApplicationList.unreadCount =
|
||||
friendApplicationUnreadCount
|
||||
}
|
||||
if (type === currentContactListKey.value || contactSearchingStatus.value) {
|
||||
currentContactInfo.value = list?.find(
|
||||
(item: any) =>
|
||||
(item?.groupID && item?.groupID === (currentContactInfo.value as IGroupModel)?.groupID) || (item?.userID && item?.userID === (currentContactInfo.value as Friend)?.userID),
|
||||
) || {} as IContactInfoType;
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', currentContactInfo.value);
|
||||
|
||||
function onFriendApplicationListUpdated(
|
||||
friendApplicationList: FriendApplication[]
|
||||
) {
|
||||
updateContactListMap('friendApplicationList', friendApplicationList)
|
||||
}
|
||||
}
|
||||
|
||||
function generateRenderKey(contactListMapKey: keyof IContactList, contactInfo: IContactInfoType, index: number) {
|
||||
return `${contactListMapKey}-${(contactInfo as Friend).userID || (contactInfo as IGroupModel).groupID || (`index${index}`)}`;
|
||||
}
|
||||
function updateContactListMap(
|
||||
key: keyof IContactList,
|
||||
list: IContactInfoType[]
|
||||
) {
|
||||
contactListMap.value[key].list = list
|
||||
contactListMap.value[key].list.map(
|
||||
(item: IContactInfoType, index: number) =>
|
||||
(item.renderKey = generateRenderKey(key, item, index))
|
||||
)
|
||||
updateCurrentContactInfoFromList(contactListMap.value[key].list, key)
|
||||
}
|
||||
|
||||
function onCurrentContactSearchResultUpdated(searchResult: IContactSearchResult) {
|
||||
contactSearchResult.value = searchResult;
|
||||
}
|
||||
function updateCurrentContactInfoFromList(
|
||||
list: IContactInfoType[],
|
||||
type: keyof IContactList
|
||||
) {
|
||||
if (
|
||||
!(currentContactInfo.value as Friend)?.userID &&
|
||||
!(currentContactInfo.value as IGroupModel)?.groupID
|
||||
) {
|
||||
return
|
||||
}
|
||||
if (
|
||||
type === currentContactListKey.value ||
|
||||
contactSearchingStatus.value
|
||||
) {
|
||||
currentContactInfo.value =
|
||||
list?.find(
|
||||
(item: any) =>
|
||||
(item?.groupID &&
|
||||
item?.groupID ===
|
||||
(currentContactInfo.value as IGroupModel)?.groupID) ||
|
||||
(item?.userID &&
|
||||
item?.userID ===
|
||||
(currentContactInfo.value as Friend)?.userID)
|
||||
) || ({} as IContactInfoType)
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'currentContactInfo',
|
||||
currentContactInfo.value
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function onCurrentContactSearchingStatusUpdated(searchingStatus: boolean) {
|
||||
contactSearchingStatus.value = searchingStatus;
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', {} as IContactInfoType);
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '');
|
||||
}
|
||||
function generateRenderKey(
|
||||
contactListMapKey: keyof IContactList,
|
||||
contactInfo: IContactInfoType,
|
||||
index: number
|
||||
) {
|
||||
return `${contactListMapKey}-${
|
||||
(contactInfo as Friend).userID ||
|
||||
(contactInfo as IGroupModel).groupID ||
|
||||
`index${index}`
|
||||
}`
|
||||
}
|
||||
|
||||
function onCurrentContactInfoUpdated(contactInfo: IContactInfoType) {
|
||||
currentContactInfo.value = contactInfo;
|
||||
}
|
||||
function onCurrentContactSearchResultUpdated(
|
||||
searchResult: IContactSearchResult
|
||||
) {
|
||||
contactSearchResult.value = searchResult
|
||||
}
|
||||
|
||||
function onCurrentContactListKeyUpdated(contactListKey: string) {
|
||||
currentContactListKey.value = contactListKey;
|
||||
}
|
||||
function onCurrentContactSearchingStatusUpdated(
|
||||
searchingStatus: boolean
|
||||
) {
|
||||
contactSearchingStatus.value = searchingStatus
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'currentContactInfo',
|
||||
{} as IContactInfoType
|
||||
)
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '')
|
||||
}
|
||||
|
||||
provide('userOnlineStatusMap', userOnlineStatusMap);
|
||||
function onCurrentContactInfoUpdated(contactInfo: IContactInfoType) {
|
||||
currentContactInfo.value = contactInfo
|
||||
}
|
||||
|
||||
function onCurrentContactListKeyUpdated(contactListKey: string) {
|
||||
currentContactListKey.value = contactListKey
|
||||
}
|
||||
|
||||
provide('userOnlineStatusMap', userOnlineStatusMap)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped src="./style/index.scss"></style>
|
||||
|
||||
@@ -4,19 +4,24 @@
|
||||
v-else-if="isShowContactList"
|
||||
:class="['tui-contact', !isPC && 'tui-contact-h5']"
|
||||
>
|
||||
<Navigation :title="currentContactKey ? contactInfoTitle : TUITranslateService.t('TUIChat.腾讯云 IM')">
|
||||
<Navigation
|
||||
:title="
|
||||
currentContactKey
|
||||
? contactInfoTitle
|
||||
: TUITranslateService.t('TUIChat.腾讯云 IM')
|
||||
"
|
||||
>
|
||||
<template #left>
|
||||
<div v-show="currentContactKey" @click="resetContactType">
|
||||
<Icon
|
||||
:file="backSVG"
|
||||
/>
|
||||
<Icon :file="backSVG" />
|
||||
</div>
|
||||
</template>
|
||||
<template #right>
|
||||
<div v-show="!isShowContactSearch && !currentContactKey" @click="openContactSearch">
|
||||
<Icon
|
||||
:file="addCircle"
|
||||
/>
|
||||
<div
|
||||
v-show="!isShowContactSearch && !currentContactKey"
|
||||
@click="openContactSearch"
|
||||
>
|
||||
<Icon :file="addCircle" />
|
||||
</div>
|
||||
</template>
|
||||
</Navigation>
|
||||
@@ -28,173 +33,204 @@
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
:class="['tui-contact-left', !isPC && 'tui-contact-h5-left']">
|
||||
<ContactSearch
|
||||
v-if="isShowContactSearch"
|
||||
:class="['tui-contact-left', !isPC && 'tui-contact-h5-left']"
|
||||
>
|
||||
<ContactSearch v-if="isShowContactSearch" />
|
||||
<ContactList
|
||||
:class="[
|
||||
'tui-contact-left-list',
|
||||
!isPC && 'tui-contact-h5-left-list'
|
||||
]"
|
||||
/>
|
||||
<ContactList :class="['tui-contact-left-list', !isPC && 'tui-contact-h5-left-list']" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { TUIStore, StoreName, TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api';
|
||||
import { onMounted, onUnmounted, ref, watchEffect } from '../../adapter-vue';
|
||||
import { isPC, isUniFrameWork } from '../../utils/env';
|
||||
import Navigation from '../common/Navigation/index.vue';
|
||||
import Icon from '../common/Icon.vue';
|
||||
import {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUITranslateService
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api'
|
||||
import {
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
ref,
|
||||
watchEffect
|
||||
} from '../../adapter-vue'
|
||||
import { isPC, isUniFrameWork } from '../../utils/env'
|
||||
import Navigation from '../common/Navigation/index.vue'
|
||||
import Icon from '../common/Icon.vue'
|
||||
|
||||
import SelectFriend from './select-friend/index.vue';
|
||||
import ContactSearch from './contact-search/index.vue';
|
||||
import ContactList from './contact-list/index.vue';
|
||||
import ContactInfo from './contact-info/index.vue';
|
||||
import SelectFriend from './select-friend/index.vue'
|
||||
import ContactSearch from './contact-search/index.vue'
|
||||
import ContactList from './contact-list/index.vue'
|
||||
import ContactInfo from './contact-info/index.vue'
|
||||
|
||||
import addCircle from '../../assets/icon/add-circle.svg';
|
||||
import backSVG from '../../assets/icon/back.svg';
|
||||
import { CONTACT_INFO_TITLE } from '../../constant';
|
||||
import addCircle from '../../assets/icon/add-circle.svg'
|
||||
import backSVG from '../../assets/icon/back.svg'
|
||||
import { CONTACT_INFO_TITLE } from '../../constant'
|
||||
|
||||
const emits = defineEmits(['switchConversation']);
|
||||
const emits = defineEmits(['switchConversation'])
|
||||
|
||||
const props = defineProps({
|
||||
// web/h5 single page application display format, uniapp please ignore
|
||||
displayType: {
|
||||
type: String,
|
||||
default: 'contactList', // "contactList" / "selectFriend"
|
||||
require: false,
|
||||
},
|
||||
});
|
||||
|
||||
const displayTypeRef = ref<string>(props.displayType || 'contactList');
|
||||
const isShowSelectFriend = ref(false);
|
||||
const isShowContactList = ref(true);
|
||||
const isShowContactInfo = ref(true);
|
||||
const isShowContactSearch = ref(false);
|
||||
const currentContactKey = ref('');
|
||||
const contactInfoTitle = ref<string>('');
|
||||
|
||||
watchEffect(() => {
|
||||
isShowContactList.value = props?.displayType !== 'selectFriend';
|
||||
});
|
||||
|
||||
const switchConversation = (data: any) => {
|
||||
isUniFrameWork
|
||||
&& TUIGlobal?.navigateTo({
|
||||
url: '/TUIKit/components/TUIChat/index',
|
||||
});
|
||||
emits('switchConversation', data);
|
||||
};
|
||||
|
||||
const openContactSearch = () => {
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'currentContactSearchingStatus',
|
||||
true,
|
||||
);
|
||||
};
|
||||
|
||||
const resetContactType = () => {
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '');
|
||||
};
|
||||
|
||||
const onCurrentContactSearchingStatusUpdated = (data: boolean) => {
|
||||
isShowContactSearch.value = data;
|
||||
};
|
||||
|
||||
const onIsShowSelectFriendComponentUpdated = (data: any) => {
|
||||
if (!isUniFrameWork && props?.displayType === 'selectFriend') {
|
||||
isShowSelectFriend.value = data;
|
||||
isShowContactList.value = false;
|
||||
return;
|
||||
}
|
||||
if (data) {
|
||||
isShowSelectFriend.value = true;
|
||||
if (isUniFrameWork) {
|
||||
displayTypeRef.value = 'selectFriend';
|
||||
TUIGlobal?.hideTabBar();
|
||||
const props = defineProps({
|
||||
// web/h5 single page application display format, uniapp please ignore
|
||||
displayType: {
|
||||
type: String,
|
||||
default: 'contactList', // "contactList" / "selectFriend"
|
||||
require: false
|
||||
}
|
||||
} else {
|
||||
isShowSelectFriend.value = false;
|
||||
if (isUniFrameWork) {
|
||||
displayTypeRef.value = props.displayType;
|
||||
TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
|
||||
})
|
||||
|
||||
const displayTypeRef = ref<string>(props.displayType || 'contactList')
|
||||
const isShowSelectFriend = ref(false)
|
||||
const isShowContactList = ref(true)
|
||||
const isShowContactInfo = ref(true)
|
||||
const isShowContactSearch = ref(false)
|
||||
const currentContactKey = ref('')
|
||||
const contactInfoTitle = ref<string>('')
|
||||
|
||||
watchEffect(() => {
|
||||
isShowContactList.value = props?.displayType !== 'selectFriend'
|
||||
})
|
||||
|
||||
const switchConversation = (data: any) => {
|
||||
isUniFrameWork &&
|
||||
TUIGlobal?.navigateTo({
|
||||
url: '/TUIKit/components/TUIChat/index'
|
||||
})
|
||||
emits('switchConversation', data)
|
||||
}
|
||||
|
||||
const openContactSearch = () => {
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'currentContactSearchingStatus',
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
const resetContactType = () => {
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '')
|
||||
}
|
||||
|
||||
const onCurrentContactSearchingStatusUpdated = (data: boolean) => {
|
||||
isShowContactSearch.value = data
|
||||
}
|
||||
|
||||
const onIsShowSelectFriendComponentUpdated = (data: any) => {
|
||||
if (!isUniFrameWork && props?.displayType === 'selectFriend') {
|
||||
isShowSelectFriend.value = data
|
||||
isShowContactList.value = false
|
||||
return
|
||||
}
|
||||
if (data) {
|
||||
isShowSelectFriend.value = true
|
||||
if (isUniFrameWork) {
|
||||
displayTypeRef.value = 'selectFriend'
|
||||
TUIGlobal?.hideTabBar()
|
||||
}
|
||||
} else {
|
||||
isShowSelectFriend.value = false
|
||||
if (isUniFrameWork) {
|
||||
displayTypeRef.value = props.displayType
|
||||
TUIGlobal?.showTabBar()?.catch(() => {
|
||||
/* ignore */
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onCurrentContactInfoUpdated = (contactInfo: any) => {
|
||||
isShowContactInfo.value = isPC || (contactInfo && typeof contactInfo === 'object' && Object.keys(contactInfo)?.length > 0);
|
||||
};
|
||||
const onCurrentContactInfoUpdated = (contactInfo: any) => {
|
||||
isShowContactInfo.value =
|
||||
isPC ||
|
||||
(contactInfo &&
|
||||
typeof contactInfo === 'object' &&
|
||||
Object.keys(contactInfo)?.length > 0)
|
||||
}
|
||||
|
||||
const onCurrentContactListKeyUpdated = (key: string) => {
|
||||
currentContactKey.value = key;
|
||||
contactInfoTitle.value = TUITranslateService.t(`TUIContact.${CONTACT_INFO_TITLE[key]}`);
|
||||
};
|
||||
const onCurrentContactListKeyUpdated = (key: string) => {
|
||||
currentContactKey.value = key
|
||||
contactInfoTitle.value = TUITranslateService.t(
|
||||
`TUIContact.${CONTACT_INFO_TITLE[key]}`
|
||||
)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
|
||||
isShowSelectFriendComponent: onIsShowSelectFriendComponentUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated,
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
|
||||
isShowSelectFriendComponent: onIsShowSelectFriendComponentUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated,
|
||||
});
|
||||
});
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus:
|
||||
onCurrentContactSearchingStatusUpdated,
|
||||
isShowSelectFriendComponent: onIsShowSelectFriendComponentUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus:
|
||||
onCurrentContactSearchingStatusUpdated,
|
||||
isShowSelectFriendComponent: onIsShowSelectFriendComponentUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../assets/styles/common";
|
||||
@import '../../assets/styles/common';
|
||||
|
||||
.tui-contact {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
uni-page-body,
|
||||
html,
|
||||
body,
|
||||
page {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-left {
|
||||
min-width: 285px;
|
||||
flex: 0 0 24%;
|
||||
.tui-contact {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-right {
|
||||
border-left: 1px solid #f4f5f9;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
min-width: 285px;
|
||||
flex: 0 0 24%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tui-contact-h5 {
|
||||
position: relative;
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-right {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&-left {
|
||||
&-list {
|
||||
overflow-y: auto;
|
||||
&-right {
|
||||
border-left: 1px solid #f4f5f9;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-contact-h5 {
|
||||
position: relative;
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-right {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&-left {
|
||||
&-list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,174 +18,195 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api';
|
||||
import { ref } from '../../adapter-vue';
|
||||
import TUISearch from '../TUISearch/index.vue';
|
||||
import ConversationList from './conversation-list/index.vue';
|
||||
import ConversationHeader from './conversation-header/index.vue';
|
||||
import ConversationNetwork from './conversation-network/index.vue';
|
||||
import { onHide } from '@dcloudio/uni-app';
|
||||
// #ifdef MP-WEIXIN
|
||||
// uniapp packaged mini-programs are integrated by default, and the default initialization entry file is imported here
|
||||
// TUIChatKit init needs to be encapsulated because uni vue2 will report an error when compiling H5 directly through conditional compilation
|
||||
import './entry.ts';
|
||||
// #endif
|
||||
import {
|
||||
TUIStore,
|
||||
StoreName
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api'
|
||||
import { ref } from '../../adapter-vue'
|
||||
import TUISearch from '../TUISearch/index.vue'
|
||||
import ConversationList from './conversation-list/index.vue'
|
||||
import ConversationHeader from './conversation-header/index.vue'
|
||||
import ConversationNetwork from './conversation-network/index.vue'
|
||||
import { onHide } from '@dcloudio/uni-app'
|
||||
// #ifdef MP-WEIXIN
|
||||
// uniapp packaged mini-programs are integrated by default, and the default initialization entry file is imported here
|
||||
// TUIChatKit init needs to be encapsulated because uni vue2 will report an error when compiling H5 directly through conditional compilation
|
||||
import './entry.ts'
|
||||
// #endif
|
||||
|
||||
const emits = defineEmits(['handleSwitchConversation']);
|
||||
const emits = defineEmits(['handleSwitchConversation'])
|
||||
|
||||
const totalUnreadCount = ref(0);
|
||||
const headerRef = ref<typeof ConversationHeader>();
|
||||
const conversationListDomRef = ref<typeof ConversationList>();
|
||||
const touchX = ref<number>(0);
|
||||
const touchY = ref<number>(0);
|
||||
const isShowConversationHeader = ref<boolean>(true);
|
||||
const totalUnreadCount = ref(0)
|
||||
const headerRef = ref<typeof ConversationHeader>()
|
||||
const conversationListDomRef = ref<typeof ConversationList>()
|
||||
const touchX = ref<number>(0)
|
||||
const touchY = ref<number>(0)
|
||||
const isShowConversationHeader = ref<boolean>(true)
|
||||
|
||||
const getTabBarConfig = () => {
|
||||
try {
|
||||
// 方法1: 从 getApp() 全局数据中获取
|
||||
const app = getApp();
|
||||
if (app?.globalData?.tabBar) {
|
||||
return app.globalData.tabBar;
|
||||
}
|
||||
|
||||
// 方法2: 从 pages.json 配置中读取（如果可访问）
|
||||
// @ts-ignore
|
||||
if (typeof __uniConfig !== 'undefined' && __uniConfig.tabBar) {
|
||||
// @ts-ignore
|
||||
return __uniConfig.tabBar;
|
||||
}
|
||||
|
||||
// 方法3: 尝试调用 uni.getTabBar() 检测是否存在 tabbar
|
||||
const getTabBarConfig = () => {
|
||||
try {
|
||||
const tabBar = uni.getTabBar && uni.getTabBar();
|
||||
if (tabBar) {
|
||||
return { list: tabBar};
|
||||
// 方法1: 从 getApp() 全局数据中获取
|
||||
const app = getApp()
|
||||
if (app?.globalData?.tabBar) {
|
||||
return app.globalData.tabBar
|
||||
}
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getTabBarIndex = () => {
|
||||
try {
|
||||
|
||||
const pages = getCurrentPages();
|
||||
if (!pages || pages.length === 0) return;
|
||||
|
||||
const currentPage = pages[pages.length - 1];
|
||||
const currentRoute = currentPage.route;
|
||||
|
||||
const isTUIConversationPage = currentRoute && (
|
||||
currentRoute.includes('TUIKit/components/TUIConversation/index') ||
|
||||
currentRoute.includes('TUIConversation')
|
||||
);
|
||||
|
||||
if (!isTUIConversationPage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tabBarConfig = getTabBarConfig();
|
||||
|
||||
if (!tabBarConfig) {
|
||||
return;
|
||||
}
|
||||
|
||||
let tabBarIndex = -1;
|
||||
|
||||
if (tabBarConfig.list && Array.isArray(tabBarConfig.list)) {
|
||||
tabBarIndex = tabBarConfig.list.findIndex((item: any) => {
|
||||
const pagePath = item.pagePath || '';
|
||||
return pagePath.includes('TUIConversation') ||
|
||||
pagePath.includes('TUIKit/components/TUIConversation/index');
|
||||
});
|
||||
}
|
||||
return tabBarIndex;
|
||||
} catch (error) {
|
||||
return -1;
|
||||
}
|
||||
};
|
||||
// 方法2: 从 pages.json 配置中读取（如果可访问）
|
||||
// @ts-ignore
|
||||
if (typeof __uniConfig !== 'undefined' && __uniConfig.tabBar) {
|
||||
// @ts-ignore
|
||||
return __uniConfig.tabBar
|
||||
}
|
||||
|
||||
TUIStore.watch(StoreName.CONV, {
|
||||
totalUnreadCount: (count: number) => {
|
||||
totalUnreadCount.value = count;
|
||||
const tabBarIndex = getTabBarIndex() ?? -1;
|
||||
if (tabBarIndex >= 0) {
|
||||
if (count > 0) {
|
||||
uni.setTabBarBadge({
|
||||
index: tabBarIndex,
|
||||
text: count > 99 ? '99+' : count.toString(),
|
||||
});
|
||||
} else {
|
||||
uni.removeTabBarBadge({
|
||||
index: tabBarIndex,
|
||||
});
|
||||
// 方法3: 尝试调用 uni.getTabBar() 检测是否存在 tabbar
|
||||
try {
|
||||
const tabBar = uni.getTabBar && uni.getTabBar()
|
||||
if (tabBar) {
|
||||
return { list: tabBar }
|
||||
}
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
|
||||
return null
|
||||
} catch (error) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const getTabBarIndex = () => {
|
||||
try {
|
||||
const pages = getCurrentPages()
|
||||
if (!pages || pages.length === 0) return
|
||||
|
||||
const currentPage = pages[pages.length - 1]
|
||||
const currentRoute = currentPage.route
|
||||
|
||||
const isTUIConversationPage =
|
||||
currentRoute &&
|
||||
(currentRoute.includes(
|
||||
'TUIKit/components/TUIConversation/index'
|
||||
) ||
|
||||
currentRoute.includes('TUIConversation'))
|
||||
|
||||
if (!isTUIConversationPage) {
|
||||
return
|
||||
}
|
||||
|
||||
const tabBarConfig = getTabBarConfig()
|
||||
|
||||
if (!tabBarConfig) {
|
||||
return
|
||||
}
|
||||
|
||||
let tabBarIndex = -1
|
||||
|
||||
if (tabBarConfig.list && Array.isArray(tabBarConfig.list)) {
|
||||
tabBarIndex = tabBarConfig.list.findIndex((item: any) => {
|
||||
const pagePath = item.pagePath || ''
|
||||
return (
|
||||
pagePath.includes('TUIConversation') ||
|
||||
pagePath.includes('TUIKit/components/TUIConversation/index')
|
||||
)
|
||||
})
|
||||
}
|
||||
return tabBarIndex
|
||||
} catch (error) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
|
||||
TUIStore.watch(StoreName.CONV, {
|
||||
totalUnreadCount: (count: number) => {
|
||||
totalUnreadCount.value = count
|
||||
const tabBarIndex = getTabBarIndex() ?? -1
|
||||
if (tabBarIndex >= 0) {
|
||||
if (count > 0) {
|
||||
uni.setTabBarBadge({
|
||||
index: tabBarIndex,
|
||||
text: count > 99 ? '99+' : count.toString()
|
||||
})
|
||||
} else {
|
||||
uni.removeTabBarBadge({
|
||||
index: tabBarIndex
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
TUIStore.watch(StoreName.CUSTOM, {
|
||||
isShowConversationHeader: (showStatus: boolean) => {
|
||||
isShowConversationHeader.value = showStatus !== false;
|
||||
},
|
||||
});
|
||||
TUIStore.watch(StoreName.CUSTOM, {
|
||||
isShowConversationHeader: (showStatus: boolean) => {
|
||||
isShowConversationHeader.value = showStatus !== false
|
||||
}
|
||||
})
|
||||
|
||||
const handleSwitchConversation = (conversationID: string) => {
|
||||
TUIGlobal?.navigateTo({
|
||||
url: '/TUIKit/components/TUIChat/index',
|
||||
});
|
||||
emits('handleSwitchConversation', conversationID);
|
||||
};
|
||||
|
||||
const closeChildren = () => {
|
||||
headerRef?.value?.closeChildren();
|
||||
conversationListDomRef?.value?.closeChildren();
|
||||
};
|
||||
|
||||
const handleClickConv = () => {
|
||||
closeChildren();
|
||||
};
|
||||
|
||||
onHide(closeChildren);
|
||||
|
||||
const handleTouchStart = (e: any) => {
|
||||
touchX.value = e.changedTouches[0].clientX;
|
||||
touchY.value = e.changedTouches[0].clientY;
|
||||
};
|
||||
|
||||
const handleTouchEnd = (e: any) => {
|
||||
const x = e.changedTouches[0].clientX;
|
||||
const y = e.changedTouches[0].clientY;
|
||||
let turn = '';
|
||||
if (x - touchX.value > 50 && Math.abs(y - touchY.value) < 50) {
|
||||
// Swipe right
|
||||
turn = 'right';
|
||||
} else if (x - touchX.value < -50 && Math.abs(y - touchY.value) < 50) {
|
||||
// Swipe left
|
||||
turn = 'left';
|
||||
const handleSwitchConversation = (conversationID: string) => {
|
||||
TUIGlobal?.navigateTo({
|
||||
url: '/TUIKit/components/TUIChat/index'
|
||||
})
|
||||
emits('handleSwitchConversation', conversationID)
|
||||
}
|
||||
if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
|
||||
// Swipe down
|
||||
turn = 'down';
|
||||
} else if (y - touchY.value < -50 && Math.abs(x - touchX.value) < 50) {
|
||||
// Swipe up
|
||||
turn = 'up';
|
||||
}
|
||||
// Operate according to the direction
|
||||
if (turn === 'down' || turn === 'up') {
|
||||
closeChildren();
|
||||
}
|
||||
};
|
||||
|
||||
const getPassingRef = (ref) => {
|
||||
ref.value = conversationListDomRef.value;
|
||||
};
|
||||
const closeChildren = () => {
|
||||
headerRef?.value?.closeChildren()
|
||||
conversationListDomRef?.value?.closeChildren()
|
||||
}
|
||||
|
||||
const handleClickConv = () => {
|
||||
closeChildren()
|
||||
}
|
||||
|
||||
onHide(closeChildren)
|
||||
|
||||
const handleTouchStart = (e: any) => {
|
||||
touchX.value = e.changedTouches[0].clientX
|
||||
touchY.value = e.changedTouches[0].clientY
|
||||
}
|
||||
|
||||
const handleTouchEnd = (e: any) => {
|
||||
const x = e.changedTouches[0].clientX
|
||||
const y = e.changedTouches[0].clientY
|
||||
let turn = ''
|
||||
if (x - touchX.value > 50 && Math.abs(y - touchY.value) < 50) {
|
||||
// Swipe right
|
||||
turn = 'right'
|
||||
} else if (
|
||||
x - touchX.value < -50 &&
|
||||
Math.abs(y - touchY.value) < 50
|
||||
) {
|
||||
// Swipe left
|
||||
turn = 'left'
|
||||
}
|
||||
if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
|
||||
// Swipe down
|
||||
turn = 'down'
|
||||
} else if (
|
||||
y - touchY.value < -50 &&
|
||||
Math.abs(x - touchX.value) < 50
|
||||
) {
|
||||
// Swipe up
|
||||
turn = 'up'
|
||||
}
|
||||
// Operate according to the direction
|
||||
if (turn === 'down' || turn === 'up') {
|
||||
closeChildren()
|
||||
}
|
||||
}
|
||||
|
||||
const getPassingRef = ref => {
|
||||
ref.value = conversationListDomRef.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped src="./style/index.scss"></style>
|
||||
<style lang="scss" scoped src="./style/index.scss">
|
||||
uni-page-body,
|
||||
html,
|
||||
body,
|
||||
page {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user