pxl/tk-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化页面

Browse Source
This commit is contained in:
pengxiaolong
2025-05-28 22:12:30 +08:00
parent e682754922
commit c747f9625c
23 changed files with 1093 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
TUIKit/components/TUIChat/index.vue
View File

@@ -1,15 +1,18 @@
<template>
<div class="Navigation">
<div class="Navigation">
<image
src="../../../static/Navigationimg.png"
mode="scaleToFill"
class="Navigationimg"
/>
<image @click="Returnfunc" src="../../../static/Return.png" mode="scaleToFill" class="Return" />
</div>
<div class="dingweizhibox">
<image
@click="Returnfunc"
src="../../../static/Return.png"
mode="scaleToFill"
class="Return"
/>
</div>
<div class="dingweizhibox"></div>
<div class="chat">
<div :class="['tui-chat', !isPC && 'tui-chat-h5']">
<div
@@ -18,10 +21,7 @@
>
<slot />
</div>
<div
v-if="currentConversationID"
:class="['tui-chat', !isPC && 'tui-chat-h5']"
>
<div v-if="currentConversationID" :class="['tui-chat', !isPC && 'tui-chat-h5']">
<ChatHeader
:class="[
'tui-chat-header',
@@ -66,7 +66,7 @@
:class="[
'tui-chat-message-input-toolbar',
!isPC && 'tui-chat-h5-message-input-toolbar',
isUniFrameWork && 'tui-chat-uni-message-input-toolbar'
isUniFrameWork && 'tui-chat-uni-message-input-toolbar',
]"
:displayType="inputToolbarDisplayType"
@insertEmoji="insertEmoji"
@@ -92,7 +92,13 @@
</div>
<!-- Group Management -->
<div
v-if="!isNotInGroup && !isApp && isUniFrameWork && isGroup && headerExtensionList.length > 0"
v-if="
!isNotInGroup &&
!isApp &&
isUniFrameWork &&
isGroup &&
headerExtensionList.length > 0
"
class="group-profile"
@click="handleGroup"
>
@@ -102,7 +108,7 @@
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed } from '../../adapter-vue';
import { ref, onMounted, onUnmounted, computed } from "../../adapter-vue";
import TUIChatEngine, {
TUITranslateService,
TUIConversationService,
@@ -110,38 +116,54 @@ import TUIChatEngine, {
StoreName,
IMessageModel,
IConversationModel,
} from '@tencentcloud/chat-uikit-engine';
import TUICore, { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
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';
} from "@tencentcloud/chat-uikit-engine";
import TUICore, { TUIConstants, ExtensionInfo } from "@tencentcloud/tui-core";
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';
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { initChat, logout } from "./entry-chat-only.ts";
import { isEnabledMessageReadReceiptGlobal } from "./utils/utils";
import OfflinePushInfoManager from "./offlinePushInfoManager/index";
import { TUIChatService } from "@tencentcloud/chat-uikit-engine";
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
let myitem = ref();
let youritem = ref();
onLoad((options) => {
initChat(options);
if (options.myitem) {
myitem.value = JSON.parse(options.myitem);
counter.$patch({ myitem:myitem.value })
youritem.value = JSON.parse(options.youritem);
counter.$patch({ youritem:youritem.value })
setTimeout(() => {
sendCustomMessage(myitem, youritem);
}, 1000);
}
});
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
});
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);
@@ -149,7 +171,7 @@ const isNotInGroup = ref(false);
const notInGroupReason = ref<number>();
const currentConversationID = ref();
const isMultipleSelectMode = ref(false);
const inputToolbarDisplayType = ref<ToolbarDisplayType>('none');
const inputToolbarDisplayType = ref<ToolbarDisplayType>("none");
const messageInputRef = ref();
const messageListRef = ref<InstanceType<typeof MessageList>>();
const headerExtensionList = ref<ExtensionInfo[]>([]);
@@ -167,36 +189,82 @@ onUnmounted(() => {
});
reset();
});
//发送自定义消息
let currentConversation = ref();
TUIStore.watch(StoreName.CONV, {
currentConversation: (conversation) => {
currentConversation.value = conversation;
},
});
function sendCustomMessage(myitem, youritem) {
const payload = {
data: JSON.stringify({
businessID: "pk",
title: "PK邀请",
buttonText1: "接受邀请",
buttonText2: "拒绝邀请",
}),
description: "邀请参加PK",
extension: "邀请参加PK",
};
const options = {
to:
currentConversation?.value?.groupProfile?.groupID ||
currentConversation?.value?.userProfile?.userID,
conversationType: currentConversation?.value?.type,
payload,
needReadReceipt: isEnabledMessageReadReceiptGlobal(),
};
const offlinePushInfoCreateParams = {
conversation: currentConversation.value,
payload: options.payload,
messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
};
const sendMessageOptions = {
offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
};
TUIChatService.sendCustomMessage(options, sendMessageOptions);
TUIChatService.getMessageList().then((res) => {
console.log("消息列表···································",res);
});
myitem.value = null;
youritem.value = null;
currentConversation.value = null;
}
//`````````````````````````````````````````````````````````````````````
const isInputToolbarShow = computed<boolean>(() => {
return isUniFrameWork ? inputToolbarDisplayType.value !== 'none' : true;
return isUniFrameWork ? inputToolbarDisplayType.value !== "none" : true;
});
const leaveGroupReasonText = computed<string>(() => {
let text = '';
let text = "";
switch (notInGroupReason.value) {
case 4:
text = TUITranslateService.t('TUIChat.您已被管理员移出群聊');
text = TUITranslateService.t("TUIChat.您已被管理员移出群聊");
break;
case 5:
text = TUITranslateService.t('TUIChat.该群聊已被解散');
text = TUITranslateService.t("TUIChat.该群聊已被解散");
break;
case 8:
text = TUITranslateService.t('TUIChat.您已退出该群聊');
text = TUITranslateService.t("TUIChat.您已退出该群聊");
break;
default:
text = TUITranslateService.t('TUIChat.您已退出该群聊');
text = TUITranslateService.t("TUIChat.您已退出该群聊");
break;
}
return text;
});
const reset = () => {
TUIConversationService.switchConversation('');
TUIConversationService.switchConversation("");
};
const closeChat = (conversationID: string) => {
emits('closeChat', conversationID);
emits("closeChat", conversationID);
reset();
};
@@ -207,13 +275,13 @@ const insertEmoji = (emojiObj: object) => {
const handleEditor = (message: IMessageModel, type: string) => {
if (!message || !type) return;
switch (type) {
case 'reference':
case "reference":
// todo
break;
case 'reply':
case "reply":
// todo
break;
case 'reedit':
case "reedit":
if (message?.payload?.text) {
messageInputRef?.value?.reEdit(message?.payload?.text);
}
@@ -227,16 +295,16 @@ const handleGroup = () => {
headerExtensionList.value[0].listener.onClicked({ groupID: groupID.value });
};
function Returnfunc(){
function Returnfunc() {
uni.navigateBack({
delta: 1
delta: 1,
});
}
function changeToolbarDisplayType(type: ToolbarDisplayType) {
inputToolbarDisplayType.value = inputToolbarDisplayType.value === type ? 'none' : type;
if (inputToolbarDisplayType.value !== 'none' && isUniFrameWork) {
uni.$emit('scroll-to-bottom');
inputToolbarDisplayType.value = inputToolbarDisplayType.value === type ? "none" : type;
if (inputToolbarDisplayType.value !== "none" && isUniFrameWork) {
uni.$emit("scroll-to-bottom");
}
}
@@ -245,7 +313,8 @@ function scrollToLatestMessage() {
}
function toggleMultipleSelectMode(visible?: boolean) {
isMultipleSelectMode.value = visible === undefined ? !isMultipleSelectMode.value : visible;
isMultipleSelectMode.value =
visible === undefined ? !isMultipleSelectMode.value : visible;
}
function mergeForwardMessage() {
@@ -289,7 +358,7 @@ function onCurrentConversationUpdate(conversation: IConversationModel) {
if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
conversationType = TUIChatEngine.TYPES.CONV_GROUP;
isGroup.value = true;
groupID.value = conversationID.replace(TUIChatEngine.TYPES.CONV_GROUP, '');
groupID.value = conversationID.replace(TUIChatEngine.TYPES.CONV_GROUP, "");
}
headerExtensionList.value = [];
@@ -297,7 +366,11 @@ function onCurrentConversationUpdate(conversation: IConversationModel) {
// 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 });
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,
@@ -306,23 +379,27 @@ function onCurrentConversationUpdate(conversation: IConversationModel) {
});
// 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 = '';
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);
headerExtensionList.value = TUICore.getExtensionList(
TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID
);
}
TUIStore.update(StoreName.CUSTOM, 'activeConversation', conversationID);
TUIStore.update(StoreName.CUSTOM, "activeConversation", conversationID);
currentConversationID.value = conversationID;
}
</script>
<style scoped lang="scss" src="./style/index.scss"></style>
<style>
.dingweizhibox{
.dingweizhibox {
width: 100%;
height: 15%;
}
@@ -336,7 +413,6 @@ function onCurrentConversationUpdate(conversation: IConversationModel) {
display: flex;
justify-content: center;
align-items: center;
}
.Navigationimg {
width: 100%;
@@ -363,4 +439,3 @@ function onCurrentConversationUpdate(conversation: IConversationModel) {
z-index: 999;
}
</style>