Files
tk-mini-program/TUIKit/components/TUIChat/message-input-toolbar/evaluate/CustomMessage.vue
2025-05-16 21:53:47 +08:00

104 lines
3.0 KiB
Vue

<!-- 自定义邀请消息 -->
<template>
<ToolbarItemContainer
ref="container"
:iconFile="evaluateIcon"
title="邀请"
:needBottomPopup="true"
:iconWidth="isUniFrameWork ? '36px' : '30px'"
:iconHeight="isUniFrameWork ? '36px' : '30px'"
@onDialogShow="onDialogShow"
@onDialogClose="onDialogClose"
>
<div>
<div class="container"></div>
<button class="send-btn" @click="submitEvaluate">发送邀请</button>
</div>
</ToolbarItemContainer>
</template>
<script setup>
import TUIChatConfig from "../../config";
import ToolbarItemContainer from "../toolbar-item-container/index.vue";
import InvitationDark from "../../../../assets/icon/InvitationDark.png";
import InvitationLight from "../../../../assets/icon/InvitationLight.png";
import { CHAT_MSG_CUSTOM_TYPE } from "../../../../constant";
import { ref } from "vue";
import TUIChatEngine, {
TUITranslateService,
TUIStore,
StoreName,
IConversationModel,
TUIChatService,
SendMessageParams,
SendMessageOptions,
} from "@tencentcloud/chat-uikit-engine";
import { isEnabledMessageReadReceiptGlobal } from "../../utils/utils";
import OfflinePushInfoManager, {
IOfflinePushInfoCreateParams,
} from "../../offlinePushInfoManager/index";
const evaluateIcon =
TUIChatConfig.getTheme() === "dark" ? InvitationDark : InvitationLight;
const emits = defineEmits(["onDialogPopupShowOrHide"]);
const onDialogShow = () => {
emits("onDialogPopupShowOrHide", true);
};
const onDialogClose = () => {
emits("onDialogPopupShowOrHide", false);
};
///``````````````````````````````````````````````````````````````````````````````````````
const currentConversation = ref();
TUIStore.watch(StoreName.CONV, {
currentConversation: (conversation) => {
currentConversation.value = conversation;
},
});
const container = ref();
///``````````````````````````````````````标记``````````````````````````````````````````````
const submitEvaluate = () => {
const payload = {
data: JSON.stringify({
businessID: "pk",
title: "PK邀请",
buttonText1: "接受邀请",
buttonText2: "拒绝邀请",
}),
description: "",
extension: "",
};
//`````````````````````````````````````````````````````
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);
// close dialog after submit evaluate
container?.value?.toggleDialogDisplay(false);
};
</script>
<style scoped>
.container {
height: 300rpx;
}
.send-btn {
margin-bottom: 100rpx;
}
</style>