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-16 21:53:47 +08:00
parent 595c5329a0
commit e05d72fccf
43 changed files with 458 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
TUIKit/assets/icon/InvitationDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
TUIKit/assets/icon/InvitationLight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

1
TUIKit/components/TUIChat/config.ts
View File

@@ -24,6 +24,7 @@ class TUIChatConfig {
InputFile: true,
InputEvaluation: true,
InputQuickReplies: true,
InputCustomMessage:true,
InputMention: true,
MessageSearch: true,
ReadStatus: true,

103
TUIKit/components/TUIChat/message-input-toolbar/evaluate/CustomMessage.vue Normal file
View File

@@ -0,0 +1,103 @@
<!-- 自定义邀请消息 -->
<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>

15
TUIKit/components/TUIChat/message-input-toolbar/index.vue
View File

@@ -9,6 +9,7 @@
<div v-if="props.displayType === 'emojiPicker'">
<EmojiPickerDialog />
</div>
<div v-else>
<swiper
:class="['message-input-toolbar-swiper']"
@@ -64,6 +65,10 @@
v-else-if="featureConfig.InputQuickReplies"
@onDialogPopupShowOrHide="handleSwiperDotShow"
/>
<CustomMessage
v-if="featureConfig.InputCustomMessage"
@onDialogPopupShowOrHide="handleSwiperDotShow"
/>
</template>
<template v-if="neededCountFirstPage > 1">
<Evaluate
@@ -74,6 +79,10 @@
v-if="featureConfig.InputQuickReplies"
@onDialogPopupShowOrHide="handleSwiperDotShow"
/>
<CustomMessage
v-if="featureConfig.InputCustomMessage"
@onDialogPopupShowOrHide="handleSwiperDotShow"
/>
</template>
</swiper-item>
<swiper-item
@@ -113,10 +122,15 @@
v-if="featureConfig.InputQuickReplies"
@onDialogPopupShowOrHide="handleSwiperDotShow"
/>
<CustomMessage
v-if="featureConfig.InputCustomMessage"
@onDialogPopupShowOrHide="handleSwiperDotShow"
/>
</template>
</swiper-item>
</swiper>
</div>
<UserSelector
ref="userSelectorRef"
:type="selectorShowType"
@@ -147,6 +161,7 @@ import TUIChatConfig from '../config';
import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
import { ToolbarDisplayType } from '../../../interface';
import OfflinePushInfoManager, { PUSH_SCENE } from '../offlinePushInfoManager/index';
import CustomMessage from "./evaluate/CustomMessage.vue"
interface IProps {
displayType: ToolbarDisplayType;

72
TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="custom">
<!-- `````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
<template v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
<div>
<h1>
@@ -28,6 +29,7 @@
<article>{{ extension.description }}</article>
</div>
</template>
<!-- ``````````````````````````````````````````````````````````````````````````````````````````````````` -->
<template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
<div class="evaluate">
<h1>{{ TUITranslateService.t("message.custom.对本次服务评价") }}</h1>
@@ -46,6 +48,7 @@
<article>{{ customData.comment }}</article>
</div>
</template>
<!-- `````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
<template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
<div
class="order"
@@ -61,6 +64,7 @@
</main>
</div>
</template>
<!-- ````````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
<template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
<div class="textLink">
<p>{{ customData.text }}</p>
@@ -72,9 +76,21 @@
}}</a>
</div>
</template>
<!-- `························································标记······················································ -->
<template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.PK">
<div class="pk">
<h1>{{ customData.title }}</h1>
<div class="button-group">
<button class="buttonAccept">{{ customData.buttonText1 }}</button>
<button class="buttonRefuse">{{ customData.buttonText2 }}</button>
</div>
</div>
</template>
<!-- ``````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
<template v-else>
<span v-html="content.custom" />
</template>
<!-- ``````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
</div>
</template>
@@ -118,6 +134,9 @@ const openLink = (url: any) => {
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped>
@import "../../../../assets/styles/common";
a {
@@ -125,7 +144,7 @@ a {
}
.custom {
font-size: 14px;
font-size: 18px;
h1 {
font-size: 14px;
@@ -183,5 +202,56 @@ a {
height: 67px;
}
}
// `````````````````````````````````````````````````````````````````````
.pk{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-color: #f5f5f5;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
h1{
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
.button-group{
display: flex;
justify-content: center;
.buttonAccept{
width: 40%;
height: 60rpx;
background-color: #84ff0055;
border-radius: 10px;
border: 2px solid #26ff00;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 60rpx;
margin-bottom: 10px;
border: none;
cursor: pointer;
}
.buttonRefuse{
width: 40%;
height: 60rpx;
background-color: #ff000078;
border: 2px solid #ff0000;
border-radius: 10px;
color: #fff;
font-size: 16px;
line-height: 60rpx;
text-align: center;
margin-bottom: 10px;
border: none;
cursor: pointer;
}
}
}
//``````````````````````````````````````````````````````````````````````````````````
}
</style>

6
TUIKit/components/TUIConversation/index.vue
View File

@@ -1,4 +1,5 @@
<template>
<div class="Navigation-left"> </div>
<div class="Navigation">
<image
src="../../../static/Navigationimg.png"
@@ -137,6 +138,11 @@ const getPassingRef = (ref) => {
justify-content: center;
align-items: center;
}
.Navigation-left{
width: 100%;
height: 200rpx;
z-index: 998;
}
/* .Return {
width: 50rpx;
height: 50rpx;

2
TUIKit/constant.ts
View File

@@ -1,3 +1,4 @@
//标记
export const CONV_OPERATION = {
DELETE: "delete",
ISPINNED: "ispinned",
@@ -16,6 +17,7 @@ export const CHAT_MSG_CUSTOM_TYPE = {
SERVICE: "consultion",
EVALUATE: "evaluation",
LINK: "text_link",
PK: "pk",
CALL: 1,
ORDER: "order",
};