root/uniapp-im-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

发送红包接口有问题，添加群恢复

Browse Source
This commit is contained in:
bobobobo
2026-01-08 01:44:39 +08:00
parent 1634425c17
commit c0619ea4ec
20 changed files with 2070 additions and 1531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
TUIKit/assets/icon/unopened-envelope.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1767794579271" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17300" width="80" height="80" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M792.7 960.2H232.6c-22.1 0-40-17.9-40-40v-816c0-22.1 17.9-40 40-40h560.1c22.1 0 40 17.9 40 40v816c0 22.1-17.9 40-40 40z" fill="#CE302F" p-id="17301"></path><path d="M792.7 965.2H232.6c-24.8 0-45-20.2-45-45v-816c0-24.8 20.2-45 45-45h560.1c24.8 0 45 20.2 45 45v816c0 24.8-20.2 45-45 45z m-560.1-896c-19.3 0-35 15.7-35 35v816c0 19.3 15.7 35 35 35h560.1c19.3 0 35-15.7 35-35v-816c0-19.3-15.7-35-35-35H232.6z" fill="#333333" p-id="17302"></path><path d="M827.1 336.5S640 403.9 511.9 404.1c-125.7 0.2-313.3-67.6-313.3-67.6V87c0-12.6 9.4-22.7 21-22.7h586.5c11.6 0 21 10.2 21 22.7v249.5z" fill="#C12727" p-id="17303"></path><path d="M832.7 320.2s-190.6 63.4-321.1 63.6c-128 0.2-319.1-63.6-319.1-63.6V85.6c0-11.8 9.6-21.4 21.4-21.4h597.4c11.8 0 21.4 9.6 21.4 21.4v234.6z" fill="#CE302F" p-id="17304"></path><path d="M511 388.8c-127.3 0-318.1-63.2-320-63.8l-3.4-1.1V85.6c0-14.5 11.8-26.4 26.4-26.4h597.4c14.5 0 26.4 11.8 26.4 26.4v238.2l-3.4 1.1c-1.9 0.6-192.8 63.6-322.6 63.8-0.3 0.1-0.6 0.1-0.8 0.1z m-313.4-72.2c26.2 8.5 197.1 62.2 313.4 62.2h0.6c118.7-0.2 289.8-53.7 316.1-62.2v-231c0-9-7.3-16.4-16.4-16.4H214c-9 0-16.4 7.3-16.4 16.4v231z" fill="#333333" p-id="17305"></path><path d="M512.7 394.8m-97.1 0a97.1 97.1 0 1 0 194.2 0 97.1 97.1 0 1 0-194.2 0Z" fill="#C12727" p-id="17306"></path><path d="M512.7 383.8m-90.7 0a90.7 90.7 0 1 0 181.4 0 90.7 90.7 0 1 0-181.4 0Z" fill="#F8B739" p-id="17307"></path><path d="M512.7 479.5c-52.8 0-95.7-42.9-95.7-95.7s42.9-95.7 95.7-95.7c52.8 0 95.7 42.9 95.7 95.7s-43 95.7-95.7 95.7z m0-181.4c-47.2 0-85.7 38.4-85.7 85.7s38.4 85.7 85.7 85.7c47.2 0 85.7-38.4 85.7-85.7s-38.5-85.7-85.7-85.7z" fill="#333333" p-id="17308"></path><path d="M512.7 372.8m-74.3 0a74.3 74.3 0 1 0 148.6 0 74.3 74.3 0 1 0-148.6 0Z" fill="#F7B034" p-id="17309"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@@ -288,14 +288,15 @@
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
@@ -304,7 +305,6 @@
''
)
}
headerExtensionList.value = []
isMultipleSelectMode.value = false
// Initialize chatType
@@ -350,6 +350,4 @@
}
</script>
<style scoped lang="scss" src="./style/index.scss">
</style>
<style scoped lang="scss" src="./style/index.scss"></style>

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

@@ -213,7 +213,6 @@
)
}
TUIChatService.sendCustomMessage(
options as SendMessageParams,
sendMessageOptions

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

@@ -59,10 +59,10 @@
v-if="featureConfig.InputQuickReplies"
@onDialogPopupShowOrHide="handleSwiperDotShow"
/>
<Evaluate
<!-- <Evaluate
v-if="featureConfig.InputEvaluation"
@onDialogPopupShowOrHide="handleSwiperDotShow"
/>
/> -->
<!-- 红包 -->
<RedEnvelope />
</template>

243
TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
View File

@@ -3,17 +3,50 @@
import ToolbarItemContainer from '../toolbar-item-container/index.vue'
import custom from '../../../../assets/icon/red-packet.svg'
import { isUniFrameWork } from '../../../../utils/env'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
import TUIChatEngine, {
type IConversationModel,
type SendMessageParams,
SendMessageOptions,
StoreName,
TUIChatService,
TUIStore
} from '@tencentcloud/chat-uikit-engine-lite'
import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils'
import OfflinePushInfoManager, {
type IOfflinePushInfoCreateParams
} from '../../offlinePushInfoManager'
import { getUserPayPwd } from '@/api/my-index'
import { useUI } from '@/utils/use-ui'
import { navigateTo } from '@/utils/router'
import { sendRedEnvelope } from '../../../../../api/tui-kit'
const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 32rpx; font-style: normal; text-transform: none;`
const { showDialog } = useUI()
const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #a9a9a9; font-size: 32rpx; font-style: normal; text-transform: none;`
const evaluateIcon = custom
/** 提示框 */
const message = ref()
const currentConversation = ref<IConversationModel>()
TUIStore.watch(StoreName.CONV, {
currentConversation: (conversation: IConversationModel) => {
currentConversation.value = conversation
}
})
const tixian = ref()
/** 错误提示 */
const errorData = reactive({
integralShow: false,
numShow: false,
color: '#f56c6c'
})
const container = ref()
const formData = reactive({
// 积分
integral: '',
// 红包数量
num: '',
// 红包标题
title: ''
})
@@ -27,16 +60,49 @@
if (!formData.integral) {
data.valid = true
data.message = '请输入积分'
message.value.open()
return data
}
if (Number(formData.integral) > 2000) {
data.valid = true
data.message = '积分不能大于2000'
message.value.open()
return data
}
return data
})
/** 监听是否是群组 */
const isGroup = computed(
() => currentConversation?.value?.type === 'GROUP'
)
/** 监听群人数 */
const memberCount = computed(
() => currentConversation?.value?.groupProfile?.memberCount
)
/** 监听红包个数 */
const monitorNum = computed(() => {
const data = {
valid: false,
message: ''
}
if (!formData.num) {
data.valid = true
data.message = '请输入红包个数'
return data
}
if (Number(formData.num) === 0) {
data.valid = true
data.message = '红包个数不能为 0'
return data
}
if (Number(formData.num) > memberCount.value) {
data.valid = true
data.message = '红包个数不能大于群人数'
return data
}
return data
})
@@ -44,6 +110,9 @@
console.log('弹出窗口')
formData.integral = ''
formData.title = ''
formData.num = ''
errorData.integralShow = false
errorData.numShow = false
}
const onDialogClose = () => {
@@ -54,9 +123,106 @@
container?.value?.toggleDialogDisplay(false)
}
const onSubmit = () => {
if (!formData.integral) return
console.log('确认')
/** 监听输入 */
const monitorInput = () => {
if (monitorPoints.value.valid) {
errorData.integralShow = true
return
}
errorData.integralShow = false
}
/** 监听红包个数输入值 */
const numInput = () => {
if (monitorNum.value.valid) {
errorData.numShow = true
return
}
errorData.numShow = false
}
const onSubmit = async () => {
if (isGroup.value) {
if (monitorNum.value.valid) {
errorData.numShow = true
return
}
}
if (monitorPoints.value.valid) {
errorData.integralShow = true
return
}
const res = await getUserPayPwd()
if (res?.data) {
tixian.value.open()
} else {
const show = await showDialog('提示', '请先设置支付密码')
if (show) {
navigateTo('/pages/my-index/wallet/edit-password', { type: 0 })
}
}
}
const pwdModalSubmit = async (e: number[]) => {
// 默认文本
const text = `${formData.title || '恭喜发财，大吉大利'}`
const payload = {
data: JSON.stringify({
businessID: CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE,
version: 1,
// 积分
integral: Number(formData.integral),
// 红包个数
num: Number(formData.num || '1'),
// 发送类型
type: currentConversation?.value?.type,
title: text
}),
description: text,
extension: text
}
const options = {
to:
currentConversation?.value?.groupProfile?.groupID ||
currentConversation?.value?.userProfile?.userID,
conversationType: currentConversation?.value?.type,
payload,
needReadReceipt: isEnabledMessageReadReceiptGlobal()
}
const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
conversation: currentConversation.value as IConversationModel,
payload: options.payload,
messageType: TUIChatEngine.TYPES.MSG_CUSTOM
}
const sendMessageOptions: SendMessageOptions = {
offlinePushInfo: OfflinePushInfoManager.create(
offlinePushInfoCreateParams
)
}
const isGroup = currentConversation?.value?.type === 'GROUP'
const data = {
password: e.join(''),
title: text,
packetType: isGroup ? 2 : 1,
receiverType: isGroup ? 2 : 1,
totalAmount: Number(formData.integral),
totalCount: Number(formData.num || '1')
}
try {
tixian.value.close()
await sendRedEnvelope(data)
TUIChatService.sendCustomMessage(
options as SendMessageParams,
sendMessageOptions
)
container?.value?.toggleDialogDisplay(false)
} catch (error) {
tixian.value.close()
}
}
</script>
@@ -71,6 +237,11 @@
@onDialogShow="onDialogShow"
@onDialogClose="onDialogClose"
>
<uu-pwdModal
ref="tixian"
class="pwd-modal"
@success="pwdModalSubmit"
></uu-pwdModal>
<view class="red-envelope">
<view class="top-title">
<text class="title">发红包</text>
@@ -81,22 +252,59 @@
@click.stop="closeDialog"
></uni-icons>
</view>
<!-- 输入框 -->
<!-- 红包个数 -->
<view v-if="isGroup" class="group-box">
<view
:class="{ 'on-reminder': monitorPoints.valid }"
:class="{ 'on-reminder': errorData.numShow }"
class="input-box"
>
<view class="form-box">
<text>红包个数</text>
<view class="num-box">
<input
v-model="formData.num"
:placeholder-style="`font-family: PingFang SC, PingFang SC; font-weight: 500; color: ${
errorData.numShow ? '#f56c6c' : '#a9a9a9'
}; font-size: 32rpx; font-style: normal; text-transform: none;`"
confirm-type="done"
type="number"
placeholder="填写红包个数"
@input="numInput"
@confirm="onSubmit"
/>
<text>个</text>
</view>
</view>
<text v-if="errorData.numShow" class="error-text">
{{ monitorNum.message }}
</text>
</view>
<text class="num">本群共{{ memberCount }}人</text>
</view>
<!-- 输入框 -->
<view
:class="{ 'on-reminder': errorData.integralShow }"
class="input-box"
>
<view class="form-box">
<text>积分</text>
<input
v-model="formData.integral"
:placeholder-style="placeholderStyle"
:placeholder-style="`font-family: PingFang SC, PingFang SC; font-weight: 500; color: ${
errorData.integralShow ? '#f56c6c' : '#a9a9a9'
}; font-size: 32rpx; font-style: normal; text-transform: none;`"
confirm-type="done"
type="number"
type="digit"
placeholder="0.00"
@input="monitorInput"
@confirm="onSubmit"
/>
</view>
<text v-if="errorData.integralShow" class="error-text">
{{ monitorPoints.message }}
</text>
</view>
<view class="input-box title-box">
<input
v-model="formData.title"
@@ -115,15 +323,6 @@
<button class="btn" @click.stop="onSubmit">塞进红包</button>
</view>
</view>
<!-- 提示框 -->
<uni-popup ref="message" type="message">
<uni-popup-message
type="error"
:message="monitorPoints.message"
:duration="2000"
></uni-popup-message>
</uni-popup>
</ToolbarItemContainer>
</template>

51
TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
View File

@@ -5,7 +5,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 26rpx;
margin-bottom: 30rpx;
.title {
font-size: 32rpx;
color: #1c1c1c;
@@ -13,13 +13,19 @@
}
.input-box {
margin-bottom: 26rpx;
margin-bottom: 60rpx;
background: #ffffff;
border-radius: 16rpx;
padding: 24rpx 34rpx;
display: flex;
justify-content: space-between;
align-items: center;
.form-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
text {
font-size: 32rpx;
color: #1c1c1c;
@@ -30,6 +36,16 @@
color: #1c1c1c;
text-align: right;
}
.num-box {
display: flex;
align-items: center;
justify-content: right;
text {
margin-left: 10rpx;
margin-bottom: 1rpx;
color: #1c1c1c;
}
}
}
.title-box {
@@ -73,11 +89,40 @@
// 警告提现
.on-reminder {
display: flex;
flex-direction: column;
align-items: flex-start;
text {
color: #f56c6c;
color: #f56c6c !important;
}
input {
color: #f56c6c;
}
.error-text {
margin-top: 10rpx;
font-size: 24rpx;
}
}
// 群红包个数
.group-box {
display: flex;
flex-direction: column;
.input-box {
margin-bottom: 10rpx;
}
.num {
margin-bottom: 30rpx;
margin-left: 34rpx;
font-size: 28rpx;
color: #5e5e5e;
}
}
}
.pwd-modal {
:deep(.modal) {
position: relative;
right: 20rpx;
}
}

99
TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue
View File

@@ -4,13 +4,13 @@
:class="[
'toolbar-item-container',
!isPC && 'toolbar-item-container-h5',
isUniFrameWork && 'toolbar-item-container-uni',
isUniFrameWork && 'toolbar-item-container-uni'
]"
>
<div
:class="[
'toolbar-item-container-icon',
isUniFrameWork && 'toolbar-item-container-uni-icon',
isUniFrameWork && 'toolbar-item-container-uni-icon'
]"
@click="toggleToolbarItem"
>
@@ -34,7 +34,7 @@
'toolbar-item-container-dialog',
isDark && 'toolbar-item-container-dialog-dark',
!isPC && 'toolbar-item-container-h5-dialog',
isUniFrameWork && 'toolbar-item-container-uni-dialog',
isUniFrameWork && 'toolbar-item-container-uni-dialog'
]"
>
<BottomPopup
@@ -51,88 +51,95 @@
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from '../../../../adapter-vue';
import { outsideClick } from '@tencentcloud/universal-api';
import Icon from '../../../common/Icon.vue';
import BottomPopup from '../../../common/BottomPopup/index.vue';
import { isPC, isUniFrameWork } from '../../../../utils/env';
import TUIChatConfig from '../../config';
import { ref, watch } from '../../../../adapter-vue'
import { outsideClick } from '@tencentcloud/universal-api'
import Icon from '../../../common/Icon.vue'
import BottomPopup from '../../../common/BottomPopup/index.vue'
import { isPC, isUniFrameWork } from '../../../../utils/env'
import TUIChatConfig from '../../config'
const props = defineProps({
iconFile: {
type: String,
required: true,
required: true
},
title: {
type: String,
default: '',
default: ''
},
needDialog: {
type: Boolean,
default: true,
default: true
},
iconWidth: {
type: String,
default: '20px',
default: '20px'
},
iconHeight: {
type: String,
default: '20px',
default: '20px'
},
// Whether to display the bottom popup dialog on mobile devices
// Invalid on PC
needBottomPopup: {
type: Boolean,
default: false,
},
});
const emits = defineEmits(['onIconClick', 'onDialogClose', 'onDialogShow']);
const isDark = ref(TUIChatConfig.getTheme() === 'dark');
const showDialog = ref(false);
const toolbarItemRef = ref();
const dialogRef = ref();
watch(() => showDialog.value, (newVal) => {
if (!newVal) {
emits('onDialogClose', dialogRef);
} else {
emits('onDialogShow', dialogRef);
default: false
}
});
})
const emits = defineEmits([
'onIconClick',
'onDialogClose',
'onDialogShow'
])
const isDark = ref(TUIChatConfig.getTheme() === 'dark')
const showDialog = ref(false)
const toolbarItemRef = ref()
const dialogRef = ref()
watch(
() => showDialog.value,
newVal => {
if (!newVal) {
emits('onDialogClose', dialogRef)
} else {
emits('onDialogShow', dialogRef)
}
}
)
const toggleToolbarItem = () => {
emits('onIconClick', dialogRef);
emits('onIconClick', dialogRef)
if (isPC) {
outsideClick.listen({
domRefs: toolbarItemRef.value,
handler: closeToolbarItem,
});
handler: closeToolbarItem
})
}
if (!props.needDialog) {
return;
return
}
toggleDialogDisplay(!showDialog.value)
}
toggleDialogDisplay(!showDialog.value);
};
const closeToolbarItem = () => {
showDialog.value = false;
};
showDialog.value = false
}
const toggleDialogDisplay = (showStatus: boolean) => {
if (showDialog.value === showStatus) {
return;
return
}
showDialog.value = showStatus
}
showDialog.value = showStatus;
};
const onPopupClose = () => {
showDialog.value = false;
};
showDialog.value = false
}
defineExpose({
toggleDialogDisplay,
});
toggleDialogDisplay
})
</script>
<style lang="scss" scoped src="./style/index.scss"></style>

138
TUIKit/components/TUIChat/message-input/message-input-quote/index.vue
View File

@@ -4,13 +4,20 @@
:class="{
'input-quote-container': true,
'input-quote-container-uni': isUniFrameWork,
'input-quote-container-h5': isH5,
'input-quote-container-h5': isH5
}"
>
<div class="input-quote-content">
<div class="max-one-line">
{{ quoteMessage.nick || quoteMessage.from }}: {{ quoteContentText }}
{{ quoteMessage.nick || quoteMessage.from }}:
{{ quoteContentText }}
</div>
<Icon
v-if="isRedEnvelope"
:file="unopenedEnvelope"
width="44rpx"
height="55rpx"
/>
<Icon
class="input-quote-close-icon"
:file="closeIcon"
@@ -23,85 +30,124 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
import {
ref,
computed,
onMounted,
onUnmounted
} from '../../../../adapter-vue'
import TUIChatEngine, {
TUIStore,
StoreName,
TUITranslateService,
IMessageModel,
} from '@tencentcloud/chat-uikit-engine-lite';
import Icon from '../../../common/Icon.vue';
import closeIcon from '../../../../assets/icon/icon-close.svg';
import { isH5, isUniFrameWork } from '../../../../utils/env';
import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
import { InputDisplayType } from '../../../../interface';
IMessageModel
} from '@tencentcloud/chat-uikit-engine-lite'
import Icon from '../../../common/Icon.vue'
import closeIcon from '../../../../assets/icon/icon-close.svg'
import { isH5, isUniFrameWork } from '../../../../utils/env'
import { transformTextWithKeysToEmojiNames } from '../../emoji-config'
import { InputDisplayType } from '../../../../interface'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
interface IProps {
displayType?: InputDisplayType;
displayType?: InputDisplayType
}
const props = withDefaults(defineProps<IProps>(), {
displayType: 'editor',
});
displayType: 'editor'
})
const TYPES = TUIChatEngine.TYPES;
const quoteMessage = ref<IMessageModel>();
const TYPES = TUIChatEngine.TYPES
const quoteMessage = ref<IMessageModel>()
onMounted(() => {
TUIStore.watch(StoreName.CHAT, {
quoteMessage: onQuoteMessageUpdated,
});
});
quoteMessage: onQuoteMessageUpdated
})
})
onUnmounted(() => {
TUIStore.unwatch(StoreName.CHAT, {
quoteMessage: onQuoteMessageUpdated,
});
});
quoteMessage: onQuoteMessageUpdated
})
})
/** 是否是红包 */
const isRedEnvelope = computed(() => {
if (quoteMessage.value?.payload?.data) {
const businessID = JSON?.parse(
quoteMessage.value?.payload?.data
)?.businessID
return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
}
return false
})
/** 红包内容 */
const quoteRedEnvelopeContentText = computed(() => {
if (isRedEnvelope.value) {
const data = JSON.parse(quoteMessage.value?.payload?.data)
return `${data.title}`
}
return ''
})
const quoteContentText = computed(() => {
let _quoteContentText;
let _quoteContentText
if (isRedEnvelope.value) {
_quoteContentText = `${quoteRedEnvelopeContentText.value}`
} else {
switch (quoteMessage.value?.type) {
case TYPES.MSG_TEXT:
_quoteContentText = transformTextWithKeysToEmojiNames(quoteMessage.value.payload?.text);
break;
_quoteContentText = transformTextWithKeysToEmojiNames(
quoteMessage.value.payload?.text
)
break
case TYPES.MSG_IMAGE:
_quoteContentText = TUITranslateService.t('TUIChat.图片');
break;
_quoteContentText = TUITranslateService.t('TUIChat.图片')
break
case TYPES.MSG_AUDIO:
_quoteContentText = TUITranslateService.t('TUIChat.语音');
break;
_quoteContentText = TUITranslateService.t('TUIChat.语音')
break
case TYPES.MSG_VIDEO:
_quoteContentText = TUITranslateService.t('TUIChat.视频');
break;
_quoteContentText = TUITranslateService.t('TUIChat.视频')
break
case TYPES.MSG_FILE:
_quoteContentText = TUITranslateService.t('TUIChat.文件');
break;
_quoteContentText = TUITranslateService.t('TUIChat.文件')
break
case TYPES.MSG_CUSTOM:
_quoteContentText = TUITranslateService.t('TUIChat.自定义');
break;
_quoteContentText = TUITranslateService.t('TUIChat.自定义')
break
case TYPES.MSG_FACE:
_quoteContentText = TUITranslateService.t('TUIChat.表情');
break;
_quoteContentText = TUITranslateService.t('TUIChat.表情')
break
case TYPES.MSG_MERGER:
_quoteContentText = TUITranslateService.t('TUIChat.聊天记录');
break;
_quoteContentText = TUITranslateService.t('TUIChat.聊天记录')
break
default:
_quoteContentText = TUITranslateService.t('TUIChat.消息');
break;
_quoteContentText = TUITranslateService.t('TUIChat.消息')
break
}
return _quoteContentText;
});
}
return _quoteContentText
})
function cancelQuote() {
TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: undefined, type: 'quote' });
TUIStore.update(StoreName.CHAT, 'quoteMessage', {
message: undefined,
type: 'quote'
})
}
function onQuoteMessageUpdated(options?: { message: IMessageModel; type: string }) {
function onQuoteMessageUpdated(options?: {
message: IMessageModel
type: string
}) {
if (options?.message && options?.type === 'quote') {
quoteMessage.value = options.message;
quoteMessage.value = options.message
} else {
quoteMessage.value = undefined;
quoteMessage.value = undefined
}
}
</script>

616
TUIKit/components/TUIChat/message-list/index.vue
View File

@@ -2,26 +2,23 @@
<div
:class="{
'tui-chat': true,
'tui-chat-h5': isMobile,
'tui-chat-h5': isMobile
}"
@click="onMessageListBackgroundClick"
>
<!-- <JoinGroupCard /> -->
<div class="tui-chat-main">
<div
v-if="isOfficial"
class="tui-chat-safe-tips"
>
<div v-if="isOfficial" class="tui-chat-safe-tips">
<span>
{{
TUITranslateService.t(
"TUIChat.【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。"
'TUIChat.【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。'
)
}}
</span>
<a @click="openComplaintLink(Link.complaint)">{{
TUITranslateService.t("TUIChat.点此投诉")
}}</a>
<a @click="openComplaintLink(Link.complaint)">
{{ TUITranslateService.t('TUIChat.点此投诉') }}
</a>
</div>
<MessageGroupApplication
v-if="isGroup"
@@ -41,7 +38,7 @@
class="message-more"
@click="getHistoryMessageList"
>
{{ TUITranslateService.t("TUIChat.查看更多") }}
{{ TUITranslateService.t('TUIChat.查看更多') }}
</p>
<li
v-for="(item, index) in messageList"
@@ -53,12 +50,10 @@
:currTime="item.time"
:prevTime="index > 0 ? messageList[index - 1].time : 0"
/>
<div
class="message-item"
@click="toggleID = ''"
>
<div class="message-item" @click="toggleID = ''">
<MessageTip
v-if="item.type === TYPES.MSG_GRP_TIP ||
v-if="
item.type === TYPES.MSG_GRP_TIP ||
isCreateGroupCustomMessage(item)
"
:content="item.getMessageContent()"
@@ -67,10 +62,18 @@
v-else-if="!item.isRevoked && !isPluginMessage(item)"
:id="`msg-bubble-${item.ID}`"
class="message-bubble-container"
@longpress="handleToggleMessageItem($event, item, index, true)"
@touchstart="handleH5LongPress($event, item, index, 'touchstart')"
@touchend="handleH5LongPress($event, item, index, 'touchend')"
@mouseover="handleH5LongPress($event, item, index, 'touchend')"
@longpress="
handleToggleMessageItem($event, item, index, true)
"
@touchstart="
handleH5LongPress($event, item, index, 'touchstart')
"
@touchend="
handleH5LongPress($event, item, index, 'touchend')
"
@mouseover="
handleH5LongPress($event, item, index, 'touchend')
"
>
<MessageBubble
:messageItem="deepCopy(item)"
@@ -78,7 +81,9 @@
:isAudioPlayed="audioPlayedMapping[item.ID]"
:blinkMessageIDList="blinkMessageIDList"
:isMultipleSelectMode="isMultipleSelectMode"
:multipleSelectedMessageIDList="multipleSelectedMessageIDList"
:multipleSelectedMessageIDList="
multipleSelectedMessageIDList
"
@resendMessage="resendMessage(item)"
@blinkMessage="blinkMessage"
@scrollTo="scrollTo"
@@ -163,11 +168,13 @@
:class="{
'message-tool': true,
'message-tool-out': item.flow === 'out',
'message-tool-in': item.flow === 'in',
'message-tool-in': item.flow === 'in'
}"
:messageItem="item"
:isMultipleSelectMode="isMultipleSelectMode"
@toggleMultipleSelectMode="() => emits('toggleMultipleSelectMode')"
@toggleMultipleSelectMode="
() => emits('toggleMultipleSelectMode')
"
/>
</div>
</li>
@@ -184,10 +191,10 @@
:center="true"
:isHeaderShow="isPC"
@submit="resendMessageConfirm()"
@update:show="(e) => (reSendDialogShow = e)"
@update:show="e => (reSendDialogShow = e)"
>
<p class="delDialog-title">
{{ TUITranslateService.t("TUIChat.确认重发该消息？") }}
{{ TUITranslateService.t('TUIChat.确认重发该消息？') }}
</p>
</Dialog>
<!-- read receipt panel -->
@@ -220,209 +227,229 @@ import {
nextTick,
onMounted,
onUnmounted,
getCurrentInstance,
} from '../../../adapter-vue';
getCurrentInstance
} from '../../../adapter-vue'
import TUIChatEngine, {
IMessageModel,
TUIStore,
StoreName,
TUITranslateService,
TUIChatService,
} from '@tencentcloud/chat-uikit-engine-lite';
TUIChatService
} from '@tencentcloud/chat-uikit-engine-lite'
import {
setInstanceMapping,
getBoundingClientRect,
getScrollInfo,
} from '@tencentcloud/universal-api';
getScrollInfo
} from '@tencentcloud/universal-api'
// import { JoinGroupCard } from '@trtc/calls-uikit-wx';
import Link from './link';
import SimpleMessageList from './message-elements/simple-message-list/index.vue';
import MessageGroupApplication from './message-group-application/index.vue';
import MessageText from './message-elements/message-text.vue';
import MessageImage from './message-elements/message-image.vue';
import MessageAudio from './message-elements/message-audio.vue';
import MessageRecord from './message-elements/message-record/index.vue';
import MessageFile from './message-elements/message-file.vue';
import MessageFace from './message-elements/message-face.vue';
import MessageCustom from './message-elements/message-custom.vue';
import MessageTip from './message-elements/message-tip.vue';
import MessageBubble from './message-elements/message-bubble.vue';
import MessageLocation from './message-elements/message-location.vue';
import MessageTimestamp from './message-elements/message-timestamp.vue';
import MessageVideo from './message-elements/message-video.vue';
import MessageTool from './message-tool/index.vue';
import MessageRevoked from './message-tool/message-revoked.vue';
import MessagePlugin from '../../../plugins/plugin-components/message-plugin.vue';
import ReadReceiptPanel from './read-receipt-panel/index.vue';
import ScrollButton from './scroll-button/index.vue';
import { isPluginMessage } from '../../../plugins/plugin-components/index';
import Dialog from '../../common/Dialog/index.vue';
import Drawer from '../../common/Drawer/index.vue';
import { Toast, TOAST_TYPE } from '../../common/Toast/index';
import ProgressMessage from '../../common/ProgressMessage/index.vue';
import { isCreateGroupCustomMessage } from '../utils/utils';
import { isEnabledMessageReadReceiptGlobal, deepCopy } from '../utils/utils';
import { throttle } from '../../../utils/lodash';
import { isPC, isH5, isMobile } from '../../../utils/env';
import chatStorage from '../utils/chatStorage';
import { IAudioContext } from '../../../interface';
import Link from './link'
import SimpleMessageList from './message-elements/simple-message-list/index.vue'
import MessageGroupApplication from './message-group-application/index.vue'
import MessageText from './message-elements/message-text.vue'
import MessageImage from './message-elements/message-image.vue'
import MessageAudio from './message-elements/message-audio.vue'
import MessageRecord from './message-elements/message-record/index.vue'
import MessageFile from './message-elements/message-file.vue'
import MessageFace from './message-elements/message-face.vue'
import MessageCustom from './message-elements/message-custom.vue'
import MessageTip from './message-elements/message-tip.vue'
import MessageBubble from './message-elements/message-bubble.vue'
import MessageLocation from './message-elements/message-location.vue'
import MessageTimestamp from './message-elements/message-timestamp.vue'
import MessageVideo from './message-elements/message-video.vue'
import MessageTool from './message-tool/index.vue'
import MessageRevoked from './message-tool/message-revoked.vue'
import MessagePlugin from '../../../plugins/plugin-components/message-plugin.vue'
import ReadReceiptPanel from './read-receipt-panel/index.vue'
import ScrollButton from './scroll-button/index.vue'
import { isPluginMessage } from '../../../plugins/plugin-components/index'
import Dialog from '../../common/Dialog/index.vue'
import Drawer from '../../common/Drawer/index.vue'
import { Toast, TOAST_TYPE } from '../../common/Toast/index'
import ProgressMessage from '../../common/ProgressMessage/index.vue'
import { isCreateGroupCustomMessage } from '../utils/utils'
import {
isEnabledMessageReadReceiptGlobal,
deepCopy
} from '../utils/utils'
import { throttle } from '../../../utils/lodash'
import { isPC, isH5, isMobile } from '../../../utils/env'
import chatStorage from '../utils/chatStorage'
import { IAudioContext } from '../../../interface'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../constant'
interface IEmits {
(e: 'closeInputToolBar'): void;
(e: 'handleEditor', message: IMessageModel, type: string): void;
(key: 'toggleMultipleSelectMode'): void;
(e: 'closeInputToolBar'): void
(e: 'handleEditor', message: IMessageModel, type: string): void
(key: 'toggleMultipleSelectMode'): void
}
interface IProps {
isGroup: boolean;
groupID: string;
isNotInGroup: boolean;
isMultipleSelectMode: boolean;
isGroup: boolean
groupID: string
isNotInGroup: boolean
isMultipleSelectMode: boolean
}
const emits = defineEmits<IEmits>();
const emits = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), {
isGroup: false,
groupID: '',
isNotInGroup: false,
isMultipleSelectMode: false,
});
isMultipleSelectMode: false
})
let selfAddValue = 0;
let observer: any = null;
let groupType: string | undefined;
const sentReceiptMessageID = new Set<string>();
const isOfficial = TUIStore.getData(StoreName.APP, 'isOfficial');
const thisInstance = getCurrentInstance()?.proxy || getCurrentInstance();
let selfAddValue = 0
let observer: any = null
let groupType: string | undefined
const sentReceiptMessageID = new Set<string>()
const isOfficial = TUIStore.getData(StoreName.APP, 'isOfficial')
const thisInstance = getCurrentInstance()?.proxy || getCurrentInstance()
const messageList = ref<IMessageModel[]>();
const multipleSelectedMessageIDList = ref<string[]>([]);
const isCompleted = ref(false);
const currentConversationID = ref('');
const toggleID = ref('');
const scrollTop = ref(5000); // The initial number of messages is 15, and the maximum message height is 300.
const TYPES = ref(TUIChatEngine.TYPES);
const isLoadingMessage = ref(false);
const isLongpressing = ref(false);
const blinkMessageIDList = ref<string[]>([]);
const messageTarget = ref<IMessageModel>();
const scrollButtonInstanceRef = ref<InstanceType<typeof ScrollButton>>();
const historyFirstMessageID = ref<string>('');
const isShowSimpleMessageList = ref<boolean>(false);
const simpleMessageListRenderMessageID = ref<string>();
const audioPlayedMapping = ref<Record<string, boolean>>({});
const messageList = ref<IMessageModel[]>()
const multipleSelectedMessageIDList = ref<string[]>([])
const isCompleted = ref(false)
const currentConversationID = ref('')
const toggleID = ref('')
const scrollTop = ref(5000) // The initial number of messages is 15, and the maximum message height is 300.
const TYPES = ref(TUIChatEngine.TYPES)
const isLoadingMessage = ref(false)
const isLongpressing = ref(false)
const blinkMessageIDList = ref<string[]>([])
const messageTarget = ref<IMessageModel>()
const scrollButtonInstanceRef = ref<InstanceType<typeof ScrollButton>>()
const historyFirstMessageID = ref<string>('')
const isShowSimpleMessageList = ref<boolean>(false)
const simpleMessageListRenderMessageID = ref<string>()
const audioPlayedMapping = ref<Record<string, boolean>>({})
// audio control
const broadcastNewAudioSrc = ref<string>('');
const broadcastNewAudioSrc = ref<string>('')
const readStatusMessage = ref<IMessageModel>();
const isShowReadUserStatusPanel = ref<boolean>(false);
const readStatusMessage = ref<IMessageModel>()
const isShowReadUserStatusPanel = ref<boolean>(false)
// Resend Message Dialog
const reSendDialogShow = ref(false);
const resendMessageData = ref();
const reSendDialogShow = ref(false)
const resendMessageData = ref()
const scrollToBottom = () => {
scrollTop.value += 300;
scrollTop.value += 300
// Solve the issue where swiping to the bottom for the first time after packaging Uniapp into an app has a delay,
// which can be set to 300 ms.
const timer = setTimeout(() => {
scrollTop.value += 1;
clearTimeout(timer);
}, 300);
};
scrollTop.value += 1
clearTimeout(timer)
}, 300)
}
const onCurrentConversationIDUpdated = (conversationID: string) => {
currentConversationID.value = conversationID;
currentConversationID.value = conversationID
if (isEnabledMessageReadReceiptGlobal()) {
const { groupProfile }
= TUIStore.getConversationModel(conversationID) || {};
groupType = groupProfile?.type;
const { groupProfile } =
TUIStore.getConversationModel(conversationID) || {}
groupType = groupProfile?.type
}
if (Object.keys(audioPlayedMapping.value).length > 0) {
// Synchronize storage about whether the audio has been played when converstaion switched
chatStorage.setChatStorage('audioPlayedMapping', audioPlayedMapping.value);
chatStorage.setChatStorage(
'audioPlayedMapping',
audioPlayedMapping.value
)
}
}
};
onMounted(() => {
// Retrieve the information about whether the audio has been played from localStorage
audioPlayedMapping.value = chatStorage.getChatStorage('audioPlayedMapping') || {};
audioPlayedMapping.value =
chatStorage.getChatStorage('audioPlayedMapping') || {}
TUIStore.watch(StoreName.CHAT, {
messageList: onMessageListUpdated,
messageSource: onMessageSourceUpdated,
isCompleted: onChatCompletedUpdated,
});
isCompleted: onChatCompletedUpdated
})
TUIStore.watch(StoreName.CONV, {
currentConversationID: onCurrentConversationIDUpdated,
});
currentConversationID: onCurrentConversationIDUpdated
})
setInstanceMapping('messageList', thisInstance);
setInstanceMapping('messageList', thisInstance)
uni.$on('scroll-to-bottom', scrollToLatestMessage);
});
uni.$on('scroll-to-bottom', scrollToLatestMessage)
})
onUnmounted(() => {
TUIStore.unwatch(StoreName.CHAT, {
messageList: onMessageListUpdated,
isCompleted: onChatCompletedUpdated,
});
isCompleted: onChatCompletedUpdated
})
TUIStore.unwatch(StoreName.CONV, {
currentConversationID: onCurrentConversationIDUpdated,
});
currentConversationID: onCurrentConversationIDUpdated
})
observer?.disconnect();
observer = null;
observer?.disconnect()
observer = null
uni.$off('scroll-to-bottom');
uni.$off('scroll-to-bottom')
if (Object.keys(audioPlayedMapping.value).length > 0) {
// Synchronize storage about whether the audio has been played when the component is unmounted
chatStorage.setChatStorage('audioPlayedMapping', audioPlayedMapping.value);
chatStorage.setChatStorage(
'audioPlayedMapping',
audioPlayedMapping.value
)
}
});
})
const handelScrollListScroll = throttle(
function (e: Event) {
scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e);
scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e)
},
500,
{ leading: true },
);
{ leading: true }
)
function getGlobalAudioContext(
audioMap: Map<string, IAudioContext>,
options?: { newAudioSrc: string },
options?: { newAudioSrc: string }
) {
if (options?.newAudioSrc) {
broadcastNewAudioSrc.value = options.newAudioSrc;
broadcastNewAudioSrc.value = options.newAudioSrc
}
}
async function onMessageListUpdated(list: IMessageModel[]) {
observer?.disconnect();
observer?.disconnect()
messageList.value = list
.filter(message => !message.isDeleted)
.map((message) => {
message.vueForRenderKey = `${message.ID}`;
return message;
});
const newLastMessage = messageList.value?.[messageList.value?.length - 1];
.map(message => {
message.vueForRenderKey = `${message.ID}`
return message
})
// messageList
const newLastMessage =
messageList.value?.[messageList.value?.length - 1]
if (messageTarget.value) {
// scroll to target message
scrollAndBlinkMessage(messageTarget.value);
} else if (!isLoadingMessage.value && !(scrollButtonInstanceRef.value?.isScrollButtonVisible && newLastMessage?.flow === 'in')) {
scrollAndBlinkMessage(messageTarget.value)
} else if (
!isLoadingMessage.value &&
!(
scrollButtonInstanceRef.value?.isScrollButtonVisible &&
newLastMessage?.flow === 'in'
)
) {
// scroll to bottom
nextTick(() => {
scrollToBottom();
});
scrollToBottom()
})
}
if (isEnabledMessageReadReceiptGlobal()) {
nextTick(() => bindIntersectionObserver());
nextTick(() => bindIntersectionObserver())
}
}
@@ -430,316 +457,341 @@ async function scrollToLatestMessage() {
try {
const { scrollHeight } = await getScrollInfo(
'#messageScrollList',
'messageList',
);
'messageList'
)
if (scrollHeight) {
scrollTop.value === scrollHeight
? (scrollTop.value = scrollHeight + 1)
: (scrollTop.value = scrollHeight);
: (scrollTop.value = scrollHeight)
} else {
scrollToBottom();
scrollToBottom()
}
} catch (error) {
scrollToBottom();
scrollToBottom()
}
}
async function onMessageSourceUpdated(message: IMessageModel) {
messageTarget.value = message;
scrollAndBlinkMessage(messageTarget.value);
messageTarget.value = message
scrollAndBlinkMessage(messageTarget.value)
}
function scrollAndBlinkMessage(message: IMessageModel) {
if (
messageList.value?.some(
messageListItem => messageListItem?.ID === message?.ID,
messageListItem => messageListItem?.ID === message?.ID
)
) {
nextTick(async () => {
await scrollToTargetMessage(message);
await blinkMessage(message?.ID);
messageTarget.value = undefined;
});
await scrollToTargetMessage(message)
await blinkMessage(message?.ID)
messageTarget.value = undefined
})
}
}
function onChatCompletedUpdated(flag: boolean) {
isCompleted.value = flag;
isCompleted.value = flag
}
const getHistoryMessageList = () => {
isLoadingMessage.value = true;
const currentFirstMessageID = messageList.value?.[0]?.ID || '';
isLoadingMessage.value = true
const currentFirstMessageID = messageList.value?.[0]?.ID || ''
TUIChatService.getMessageList().then(() => {
nextTick(() => {
historyFirstMessageID.value = currentFirstMessageID;
historyFirstMessageID.value = currentFirstMessageID
const timer = setTimeout(() => {
historyFirstMessageID.value = '';
isLoadingMessage.value = false;
clearTimeout(timer);
}, 500);
});
});
};
historyFirstMessageID.value = ''
isLoadingMessage.value = false
clearTimeout(timer)
}, 500)
})
})
}
const openComplaintLink = () => { };
const openComplaintLink = () => {}
// toggle message
const handleToggleMessageItem = (
e: any,
message: IMessageModel,
index: number,
isLongpress = false,
isLongpress = false
) => {
if (props.isMultipleSelectMode || props.isNotInGroup) {
return;
return
}
if (isLongpress) {
isLongpressing.value = true;
isLongpressing.value = true
}
toggleID.value = message.ID
}
toggleID.value = message.ID;
};
// h5 long press
let timer: number;
let timer: number
const handleH5LongPress = (
e: any,
message: IMessageModel,
index: number,
type: string,
type: string
) => {
if (props.isMultipleSelectMode || props.isNotInGroup) {
return;
return
}
if (!isH5) return;
if (!isH5) return
function longPressHandler() {
clearTimeout(timer);
handleToggleMessageItem(e, message, index, true);
clearTimeout(timer)
handleToggleMessageItem(e, message, index, true)
}
function touchStartHandler() {
timer = setTimeout(longPressHandler, 500);
timer = setTimeout(longPressHandler, 500)
}
function touchEndHandler() {
clearTimeout(timer);
clearTimeout(timer)
}
switch (type) {
case 'touchstart':
touchStartHandler();
break;
touchStartHandler()
break
case 'touchend':
touchEndHandler();
touchEndHandler()
setTimeout(() => {
isLongpressing.value = false;
}, 200);
break;
isLongpressing.value = false
}, 200)
break
}
}
};
// reedit message
const handleEdit = (message: IMessageModel) => {
emits('handleEditor', message, 'reedit');
};
emits('handleEditor', message, 'reedit')
}
const resendMessage = (message: IMessageModel) => {
reSendDialogShow.value = true;
resendMessageData.value = message;
};
reSendDialogShow.value = true
resendMessageData.value = message
}
const handleImagePreview = (index: number) => {
if (!messageList.value) {
return;
return
}
const imageMessageIndex: number[] = [];
const imageMessageList: IMessageModel[] = messageList.value.filter((item, index) => {
const imageMessageIndex: number[] = []
const imageMessageList: IMessageModel[] = messageList.value.filter(
(item, index) => {
if (
!item.isRevoked
&& !item.hasRiskContent
&& item.type === TYPES.value.MSG_IMAGE
!item.isRevoked &&
!item.hasRiskContent &&
item.type === TYPES.value.MSG_IMAGE
) {
imageMessageIndex.push(index);
return true;
imageMessageIndex.push(index)
return true
}
return false;
});
return false
}
)
uni.previewImage({
current: imageMessageIndex.indexOf(index),
urls: imageMessageList.map(message => message.payload.imageInfoArray?.[2].url),
urls: imageMessageList.map(
message => message.payload.imageInfoArray?.[2].url
),
// #ifdef APP-PLUS
indicator: 'number',
indicator: 'number'
// #endif
});
};
})
}
const resendMessageConfirm = () => {
reSendDialogShow.value = !reSendDialogShow.value;
const messageModel = resendMessageData.value;
messageModel.resendMessage();
};
reSendDialogShow.value = !reSendDialogShow.value
const messageModel = resendMessageData.value
messageModel.resendMessage()
}
function blinkMessage(messageID: string): Promise<void> {
return new Promise((resolve) => {
const index = blinkMessageIDList.value.indexOf(messageID);
return new Promise(resolve => {
const index = blinkMessageIDList.value.indexOf(messageID)
if (index < 0) {
blinkMessageIDList.value.push(messageID);
blinkMessageIDList.value.push(messageID)
const timer = setTimeout(() => {
blinkMessageIDList.value.splice(
blinkMessageIDList.value.indexOf(messageID),
1,
);
clearTimeout(timer);
resolve();
}, 3000);
1
)
clearTimeout(timer)
resolve()
}, 3000)
}
});
})
}
function scrollTo(scrollHeight: number) {
scrollTop.value = scrollHeight;
scrollTop.value = scrollHeight
}
async function bindIntersectionObserver() {
if (!messageList.value || messageList.value.length === 0) {
return;
return
}
if (
groupType === TYPES.value.GRP_AVCHATROOM
|| groupType === TYPES.value.GRP_COMMUNITY
groupType === TYPES.value.GRP_AVCHATROOM ||
groupType === TYPES.value.GRP_COMMUNITY
) {
// AVCHATROOM and COMMUNITY chats do not monitor read receipts for messages.
return;
return
}
observer?.disconnect();
observer?.disconnect()
observer = uni
.createIntersectionObserver(thisInstance, {
threshold: [0.7],
observeAll: true,
observeAll: true
// In Uni-app, the `safetip` is also included, so a negative margin is needed to exclude it.
})
.relativeTo('#messageScrollList', { top: -70 });
.relativeTo('#messageScrollList', { top: -70 })
observer?.observe('.message-li.in .message-bubble-container', (res: any) => {
observer?.observe(
'.message-li.in .message-bubble-container',
(res: any) => {
if (sentReceiptMessageID.has(res.id)) {
return;
return
}
const matchingMessage = messageList.value.find((message: IMessageModel) => {
return res.id.indexOf(message.ID) > -1;
});
const matchingMessage = messageList.value.find(
(message: IMessageModel) => {
return res.id.indexOf(message.ID) > -1
}
)
if (
matchingMessage
&& matchingMessage.needReadReceipt
&& matchingMessage.flow === 'in'
&& !matchingMessage.readReceiptInfo?.isPeerRead
matchingMessage &&
matchingMessage.needReadReceipt &&
matchingMessage.flow === 'in' &&
!matchingMessage.readReceiptInfo?.isPeerRead
) {
TUIChatService.sendMessageReadReceipt([matchingMessage]);
sentReceiptMessageID.add(res.id);
TUIChatService.sendMessageReadReceipt([matchingMessage])
sentReceiptMessageID.add(res.id)
}
});
}
)
}
function setReadReceiptPanelVisible(visible: boolean, message?: IMessageModel) {
function setReadReceiptPanelVisible(
visible: boolean,
message?: IMessageModel
) {
if (visible && props.isNotInGroup) {
return;
return
}
if (!visible) {
readStatusMessage.value = undefined;
readStatusMessage.value = undefined
} else {
readStatusMessage.value = message;
readStatusMessage.value = message
}
isShowReadUserStatusPanel.value = visible;
isShowReadUserStatusPanel.value = visible
}
async function scrollToTargetMessage(message: IMessageModel) {
const targetMessageID = message.ID;
const isTargetMessageInScreen
= messageList.value
&& messageList.value.some(msg => msg.ID === targetMessageID);
const targetMessageID = message.ID
const isTargetMessageInScreen =
messageList.value &&
messageList.value.some(msg => msg.ID === targetMessageID)
if (targetMessageID && isTargetMessageInScreen) {
const timer = setTimeout(async () => {
try {
const scrollViewRect = await getBoundingClientRect(
'#messageScrollList',
'messageList',
);
'messageList'
)
const originalMessageRect = await getBoundingClientRect(
'#tui-' + targetMessageID,
'messageList',
);
'messageList'
)
const { scrollTop } = await getScrollInfo(
'#messageScrollList',
'messageList',
);
const finalScrollTop
= originalMessageRect.top
+ scrollTop
- scrollViewRect.top
- (selfAddValue++ % 2);
scrollTo(finalScrollTop);
clearTimeout(timer);
'messageList'
)
const finalScrollTop =
originalMessageRect.top +
scrollTop -
scrollViewRect.top -
(selfAddValue++ % 2)
scrollTo(finalScrollTop)
clearTimeout(timer)
} catch (error) {
// todo
}
}, 500);
}, 500)
} else {
Toast({
message: TUITranslateService.t('TUIChat.无法定位到原消息'),
type: TOAST_TYPE.WARNING,
});
type: TOAST_TYPE.WARNING
})
}
}
function onMessageListBackgroundClick() {
emits('closeInputToolBar');
emits('closeInputToolBar')
}
watch(() => props.isMultipleSelectMode, (newValue) => {
watch(
() => props.isMultipleSelectMode,
newValue => {
if (!newValue) {
changeSelectMessageIDList({
type: 'clearAll',
messageID: '',
});
messageID: ''
})
}
});
}
)
function changeSelectMessageIDList({ type, messageID }: { type: 'add' | 'remove' | 'clearAll'; messageID: string }) {
function changeSelectMessageIDList({
type,
messageID
}: {
type: 'add' | 'remove' | 'clearAll'
messageID: string
}) {
// TODO need to delete this
if (type === 'clearAll') {
multipleSelectedMessageIDList.value = [];
} else if (type === 'add' && !multipleSelectedMessageIDList.value.includes(messageID)) {
multipleSelectedMessageIDList.value.push(messageID);
multipleSelectedMessageIDList.value = []
} else if (
type === 'add' &&
!multipleSelectedMessageIDList.value.includes(messageID)
) {
multipleSelectedMessageIDList.value.push(messageID)
} else if (type === 'remove') {
multipleSelectedMessageIDList.value = multipleSelectedMessageIDList.value.filter(id => id !== messageID);
multipleSelectedMessageIDList.value =
multipleSelectedMessageIDList.value.filter(id => id !== messageID)
}
}
function mergeForwardMessage() {
TUIStore.update(StoreName.CUSTOM, 'multipleForwardMessageID', {
isMergeForward: true,
messageIDList: multipleSelectedMessageIDList.value,
});
messageIDList: multipleSelectedMessageIDList.value
})
}
function oneByOneForwardMessage() {
TUIStore.update(StoreName.CUSTOM, 'multipleForwardMessageID', {
isMergeForward: false,
messageIDList: multipleSelectedMessageIDList.value,
});
messageIDList: multipleSelectedMessageIDList.value
})
}
function assignMessageIDInUniapp(messageID: string) {
simpleMessageListRenderMessageID.value = messageID;
isShowSimpleMessageList.value = true;
simpleMessageListRenderMessageID.value = messageID
isShowSimpleMessageList.value = true
}
function setAudioPlayed(messageID: string) {
audioPlayedMapping.value[messageID] = true;
audioPlayedMapping.value[messageID] = true
}
defineExpose({
oneByOneForwardMessage,
mergeForwardMessage,
scrollToLatestMessage,
});
scrollToLatestMessage
})
</script>
<style lang="scss" scoped src="./style/index.scss"></style>

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

@@ -72,6 +72,22 @@
</a>
</div>
</template>
<template
v-else-if="
customData.businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
"
>
<!-- 红包 -->
<view class="red-envelope">
<view class="top-title">
<Icon :file="unopenedEnvelope" width="78rpx" height="80rpx" />
<text class="title">
{{ customData.title }}
</text>
</view>
<text class="bottom-text">积分红包</text>
</view>
</template>
<template v-else>
<span v-html="content.custom" />
</template>
@@ -89,6 +105,8 @@
import { ICustomMessagePayload } from '../../../../interface'
import Icon from '../../../common/Icon.vue'
import star from '../../../../assets/icon/star-light.png'
import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
interface Props {
messageItem: IMessageModel
content: any
@@ -187,4 +205,32 @@
}
}
}
.red-envelope {
display: flex;
flex-direction: column;
background: #f3901f;
border-radius: 16rpx;
padding: 20rpx;
.top-title {
display: flex;
align-items: center;
padding-bottom: 10rpx;
margin-bottom: 10rpx;
border-bottom: 2rpx solid #ffffff;
.title {
width: 40vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 32rpx;
font-weight: 500;
color: #ffffff;
}
}
.bottom-text {
font-size: 24rpx;
color: #ffffff;
}
}
</style>

71
TUIKit/components/TUIChat/message-list/message-elements/message-image.vue
View File

@@ -1,8 +1,5 @@
<template>
<div
class="image-container"
@click="handleImagePreview"
>
<div class="image-container" @click="handleImagePreview">
<image
class="message-image"
mode="aspectFit"
@@ -14,62 +11,62 @@
</template>
<script lang="ts" setup>
import { watchEffect, ref } from '../../../../adapter-vue';
import type { IMessageModel } from '@tencentcloud/chat-uikit-engine-lite';
import type { IImageMessageContent } from '../../../../interface';
import { watchEffect, ref } from '../../../../adapter-vue'
import type { IMessageModel } from '@tencentcloud/chat-uikit-engine-lite'
import type { IImageMessageContent } from '../../../../interface'
interface IProps {
content: IImageMessageContent;
messageItem: IMessageModel;
content: IImageMessageContent
messageItem: IMessageModel
}
interface IEmit {
(key: 'previewImage'): void;
(key: 'previewImage'): void
}
const emits = defineEmits<IEmit>();
const props = withDefaults(
defineProps<IProps>(),
{
const emits = defineEmits<IEmit>()
const props = withDefaults(defineProps<IProps>(), {
content: () => ({}),
messageItem: () => ({} as IMessageModel),
},
);
messageItem: () => ({} as IMessageModel)
})
const DEFAULT_MAX_SIZE = 155;
const imageStyles = ref({ width: 'auto', height: 'auto' });
const DEFAULT_MAX_SIZE = 155
const imageStyles = ref({ width: 'auto', height: 'auto' })
const genImageStyles = (value: { width?: any; height?: any }) => {
const { width, height } = value;
const { width, height } = value
if (width === 0 || height === 0) {
return;
return
}
let imageWidth = 0;
let imageHeight = 0;
let imageWidth = 0
let imageHeight = 0
if (width >= height) {
imageWidth = DEFAULT_MAX_SIZE;
imageHeight = (DEFAULT_MAX_SIZE * height) / width;
imageWidth = DEFAULT_MAX_SIZE
imageHeight = (DEFAULT_MAX_SIZE * height) / width
} else {
imageWidth = (DEFAULT_MAX_SIZE * width) / height;
imageHeight = DEFAULT_MAX_SIZE;
imageWidth = (DEFAULT_MAX_SIZE * width) / height
imageHeight = DEFAULT_MAX_SIZE
}
imageStyles.value.width = imageWidth + 'px'
imageStyles.value.height = imageHeight + 'px'
}
imageStyles.value.width = imageWidth + 'px';
imageStyles.value.height = imageHeight + 'px';
};
watchEffect(() => {
genImageStyles(props.content);
});
genImageStyles(props.content)
})
const imageLoad = (event: Event) => {
genImageStyles(event.detail);
};
genImageStyles(event.detail)
}
const handleImagePreview = () => {
if (props.messageItem?.status === 'success' || props.messageItem.progress === 1) {
emits('previewImage');
if (
props.messageItem?.status === 'success' ||
props.messageItem.progress === 1
) {
emits('previewImage')
}
}
};
</script>
<style lang="scss" scoped>

73
TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue
View File

@@ -1,21 +1,20 @@
<template>
<div>
<div
class="message-record-container"
@click="openMergeDetail"
>
<div
class="record-title"
>
<div class="message-record-container" @click="openMergeDetail">
<div class="record-title">
{{ props.renderData.title }}
</div>
<div class="record-abstract-container">
<div
v-for="(item, index) in props.renderData.abstractList.slice(0, 7)"
v-for="(item, index) in props.renderData.abstractList.slice(
0,
7
)"
:key="index"
class="record-abstract-item"
>
{{ transformTextWithKeysToEmojiNames(item) }}
<!-- {{ transformTextWithKeysToEmojiNames(item) }} -->
{{ topName(item) }}
</div>
</div>
<div class="record-footer">
@@ -52,22 +51,26 @@
</template>
<script lang="ts" setup>
import { ref, withDefaults } from '../../../../../adapter-vue';
import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine-lite';
import Overlay from '../../../../common/Overlay/index.vue';
import Drawer from '../../../../common/Drawer/index.vue';
import SimpleMessageList from '../simple-message-list/index.vue';
import { isH5, isPC, isUniFrameWork } from '../../../../../utils/env';
import { transformTextWithKeysToEmojiNames } from '../../../emoji-config/index';
import { IMergeMessageContent } from '../../../../../interface';
import { ref, computed, withDefaults } from '../../../../../adapter-vue'
import {
TUITranslateService,
IMessageModel
} from '@tencentcloud/chat-uikit-engine-lite'
import Overlay from '../../../../common/Overlay/index.vue'
import Drawer from '../../../../common/Drawer/index.vue'
import SimpleMessageList from '../simple-message-list/index.vue'
import { isH5, isPC, isUniFrameWork } from '../../../../../utils/env'
import { transformTextWithKeysToEmojiNames } from '../../../emoji-config/index'
import { IMergeMessageContent } from '../../../../../interface'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant'
interface IEmits {
(e: 'assignMessageIDInUniapp', messageID: string): void;
(e: 'assignMessageIDInUniapp', messageID: string): void
}
interface IProps {
// Core data for rendering message record card and message list
renderData: IMergeMessageContent;
renderData: IMergeMessageContent
/**
* The MessageRecord component has two main functions:
* 1. display message record cards primarily.
@@ -76,31 +79,39 @@ interface IProps {
* it is only need renderData to render message record cards.
* Therefore, 'messageItem' and 'disabled' is not a required prop.
*/
disabled?: boolean;
messageItem?: IMessageModel;
disabled?: boolean
messageItem?: IMessageModel
}
const emits = defineEmits<IEmits>();
const emits = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), {
messageItem: () => ({}) as IMessageModel,
disabled: false,
});
messageItem: () => ({} as IMessageModel),
disabled: false
})
const isMessageListVisible = ref(false);
const isMessageListVisible = ref(false)
// 把替[自定义消息]替换为积分红包
const topName = (str: string) => {
if (str.includes('[自定义消息]')) {
return str.replace('[自定义消息]', '[积分红包]')
} else {
return transformTextWithKeysToEmojiNames(str)
}
}
function openMergeDetail() {
if (props.disabled) {
return;
return
}
if (!isUniFrameWork) {
isMessageListVisible.value = true;
isMessageListVisible.value = true
} else {
emits('assignMessageIDInUniapp', props.messageItem.ID);
emits('assignMessageIDInUniapp', props.messageItem.ID)
}
}
function closeMergeDetail() {
isMessageListVisible.value = false;
isMessageListVisible.value = false
}
</script>
<style lang="scss" scoped>

228
TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue
View File

@@ -2,20 +2,15 @@
<div
:class="{
'simple-message-list-container': true,
'simple-message-list-container-mobile': isMobile,
'simple-message-list-container-mobile': isMobile
}"
>
<div class="header-container">
<span
class="back"
@click="backPreviousLevel"
>
<Icon
class="close-icon"
:file="addIcon"
:size="'18px'"
/>
<span v-if="isReturn">{{ TUITranslateService.t('TUIChat.返回') }}</span>
<span class="back" @click="backPreviousLevel">
<Icon class="close-icon" :file="addIcon" :size="'18px'" />
<span v-if="isReturn">
{{ TUITranslateService.t('TUIChat.返回') }}
</span>
<span v-else>{{ TUITranslateService.t('TUIChat.关闭') }}</span>
</span>
@@ -23,9 +18,7 @@
{{ currentMergeMessageInfo.title }}
</span>
</div>
<div v-if="isDownloadOccurError">
Load Merge Message Error
</div>
<div v-if="isDownloadOccurError">Load Merge Message Error</div>
<div
v-else-if="isMergeMessageInfoLoaded"
ref="simpleMessageListRef"
@@ -35,7 +28,7 @@
v-for="item in currentMergeMessageInfo.messageList"
:key="item.ID"
:class="{
'message-item': true,
'message-item': true
}"
>
<MessageContainer
@@ -50,20 +43,21 @@
class="message-text"
>
<span
v-for="(textInfo, index) in parseTextToRenderArray(item.messageBody[0].payload['text'])"
v-for="(textInfo, index) in parseTextToRenderArray(
item.messageBody[0].payload['text']
)"
:key="index"
class="message-text-container"
>
<span
v-if="textInfo.type === 'text'"
class="text"
>{{ textInfo.content }}</span>
<span v-if="textInfo.type === 'text'" class="text">
{{ textInfo.content }}
</span>
<img
v-else
class="simple-emoji"
:src="textInfo.content"
alt="small-face"
>
/>
</span>
</div>
<!-- image -->
@@ -73,10 +67,12 @@
>
<img
class="image"
:src="(item.messageBody[0].payload)['imageInfoArray'][2]['url']"
:src="
item.messageBody[0].payload['imageInfoArray'][2]['url']
"
mode="widthFix"
alt="image"
>
/>
</div>
<!-- video -->
<div
@@ -85,29 +81,30 @@
>
<div
v-if="isUniFrameWork"
@click="previewVideoInUniapp((item.messageBody[0].payload)['remoteVideoUrl'])"
@click="
previewVideoInUniapp(
item.messageBody[0].payload['remoteVideoUrl']
)
"
>
<image
class="image"
:src="(item.messageBody[0].payload)['thumbUrl']"
:src="item.messageBody[0].payload['thumbUrl']"
mode="widthFix"
alt="image"
/>
<Icon
class="video-play-icon"
:file="playIcon"
/>
<Icon class="video-play-icon" :file="playIcon" />
</div>
<video
v-else
class="video"
controls
:poster="(item.messageBody[0].payload)['thumbUrl']"
:poster="item.messageBody[0].payload['thumbUrl']"
>
<source
:src="(item.messageBody[0].payload)['remoteVideoUrl']"
:src="item.messageBody[0].payload['remoteVideoUrl']"
type="video/mp4"
>
/>
</video>
</div>
<!-- audio -->
@@ -115,7 +112,7 @@
v-else-if="item.messageBody[0].type === TYPES.MSG_AUDIO"
class="message-audio"
>
<span>{{ TUITranslateService.t("TUIChat.语音") }}&nbsp;</span>
<span>{{ TUITranslateService.t('TUIChat.语音') }}&nbsp;</span>
<span>{{ item.messageBody[0].payload.second }}s</span>
</div>
<!-- big face -->
@@ -127,7 +124,7 @@
class="image"
:src="resolveBigFaceUrl(item.messageBody[0].payload.data)"
alt="face"
>
/>
</div>
<!-- file -->
<div
@@ -153,6 +150,10 @@
:renderData="item.messageBody[0].payload"
/>
</div>
<!-- 红包 -->
<div v-else-if="isRedEnvelope(item)">
{{ redEnvelopeText(item) }}
</div>
<!-- custom -->
<div v-else-if="item.messageBody[0].type === TYPES.MSG_CUSTOM">
{{ TUITranslateService.t('TUIChat.[自定义消息]') }}
@@ -164,20 +165,25 @@
</template>
<script setup lang="ts">
import { computed, ref, watch } from '../../../../../adapter-vue';
import { computed, ref, watch } from '../../../../../adapter-vue'
import TUIChatEngine, {
TUIStore,
TUIChatService,
TUITranslateService,
} from '@tencentcloud/chat-uikit-engine-lite';
import addIcon from '../../../../../assets/icon/back.svg';
import playIcon from '../../../../../assets/icon/video-play.png';
import Icon from '../../../../common/Icon.vue';
import MessageContainer from './message-container.vue';
import MessageRecord from '../message-record/index.vue';
import { parseTextToRenderArray, DEFAULT_BIG_EMOJI_URL, CUSTOM_BIG_EMOJI_URL } from '../../../emoji-config/index';
import { isMobile, isUniFrameWork } from '../../../../../utils/env';
import { IMergeMessageContent } from '../../../../../interface';
TUITranslateService
} from '@tencentcloud/chat-uikit-engine-lite'
import addIcon from '../../../../../assets/icon/back.svg'
import playIcon from '../../../../../assets/icon/video-play.png'
import Icon from '../../../../common/Icon.vue'
import MessageContainer from './message-container.vue'
import MessageRecord from '../message-record/index.vue'
import {
parseTextToRenderArray,
DEFAULT_BIG_EMOJI_URL,
CUSTOM_BIG_EMOJI_URL
} from '../../../emoji-config/index'
import { isMobile, isUniFrameWork } from '../../../../../utils/env'
import { IMergeMessageContent } from '../../../../../interface'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant'
interface IProps {
/**
@@ -186,107 +192,142 @@ interface IProps {
* need to download message from sdk by constructed message
* and use downloaded message object to render nested simple-message-list
*/
messageID?: string;
isMounted?: boolean;
messageID?: string
isMounted?: boolean
}
interface IEmits {
(e: 'closeOverlay'): void;
(e: 'closeOverlay'): void
}
const emits = defineEmits<IEmits>();
const emits = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), {
messageID: '',
isMounted: false,
});
isMounted: false
})
const TYPES = TUIChatEngine.TYPES;
const isDownloadOccurError = ref(false);
const messageListStack = ref<IMergeMessageContent[]>([]);
const TYPES = TUIChatEngine.TYPES
const isDownloadOccurError = ref(false)
const messageListStack = ref<IMergeMessageContent[]>([])
const currentMergeMessageInfo = ref<Partial<IMergeMessageContent>>({
title: '',
messageList: [],
});
const simpleMessageListRef = ref<HTMLElement>();
messageList: []
})
const simpleMessageListRef = ref<HTMLElement>()
watch(() => messageListStack.value.length, async (newValue) => {
isDownloadOccurError.value = false;
watch(
() => messageListStack.value.length,
async newValue => {
isDownloadOccurError.value = false
if (newValue < 1) {
return;
return
}
const stackTopMessageInfo = messageListStack.value[messageListStack.value.length - 1];
if (stackTopMessageInfo.downloadKey && stackTopMessageInfo.messageList.length === 0) {
const stackTopMessageInfo =
messageListStack.value[messageListStack.value.length - 1]
if (
stackTopMessageInfo.downloadKey &&
stackTopMessageInfo.messageList.length === 0
) {
try {
const res = await TUIChatService.downloadMergedMessages({
payload: stackTopMessageInfo,
type: TUIChatEngine.TYPES.MSG_MERGER,
} as any);
type: TUIChatEngine.TYPES.MSG_MERGER
} as any)
// if download complete message, cover the original message in stack top
messageListStack.value[messageListStack.value.length - 1] = res.payload;
messageListStack.value[messageListStack.value.length - 1] =
res.payload
} catch (error) {
isDownloadOccurError.value = true;
isDownloadOccurError.value = true
}
}
currentMergeMessageInfo.value = messageListStack.value[messageListStack.value.length - 1];
});
currentMergeMessageInfo.value =
messageListStack.value[messageListStack.value.length - 1]
}
)
watch(() => props.isMounted, (newValue) => {
watch(
() => props.isMounted,
newValue => {
// For compatibility with uniapp, use watch to implement onMounted
if (newValue) {
if (!props.messageID) {
throw new Error('messageID is required when first render of simple-message-list.');
throw new Error(
'messageID is required when first render of simple-message-list.'
)
}
const sdkMessagePayload = TUIStore.getMessageModel(props.messageID).getMessage().payload;
messageListStack.value = [sdkMessagePayload];
const sdkMessagePayload = TUIStore.getMessageModel(
props.messageID
).getMessage().payload
messageListStack.value = [sdkMessagePayload]
} else {
messageListStack.value = [];
messageListStack.value = []
}
}, {
immediate: true,
});
},
{
immediate: true
}
)
const isReturn = computed(() => {
return messageListStack.value.length > 1;
});
return messageListStack.value.length > 1
})
const isMergeMessageInfoLoaded = computed(() => {
return currentMergeMessageInfo.value?.messageList ? currentMergeMessageInfo.value.messageList.length > 0 : false;
});
return currentMergeMessageInfo.value?.messageList
? currentMergeMessageInfo.value.messageList.length > 0
: false
})
function entryNextLevel(e, sdkMessage: any) {
messageListStack.value.push(sdkMessage.messageBody[0].payload);
e.stopPropagation();
messageListStack.value.push(sdkMessage.messageBody[0].payload)
e.stopPropagation()
}
function backPreviousLevel() {
messageListStack.value.pop();
messageListStack.value.pop()
if (messageListStack.value.length < 1) {
emits('closeOverlay');
emits('closeOverlay')
}
}
function previewVideoInUniapp(url: string) {
if (isUniFrameWork) {
const encodedUrl = encodeURIComponent(url);
const encodedUrl = encodeURIComponent(url)
uni.navigateTo({
url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`,
});
url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`
})
}
}
function resolveBigFaceUrl(bigFaceKey: string): string {
let url = '';
let url = ''
if (bigFaceKey.indexOf('@custom') > -1) {
url = CUSTOM_BIG_EMOJI_URL + bigFaceKey;
url = CUSTOM_BIG_EMOJI_URL + bigFaceKey
} else {
url = DEFAULT_BIG_EMOJI_URL + bigFaceKey;
url = DEFAULT_BIG_EMOJI_URL + bigFaceKey
if (url.indexOf('@2x') === -1) {
url += '@2x.png';
url += '@2x.png'
} else {
url += '.png';
url += '.png'
}
}
return url;
return url
}
/** 是否红包 */
const isRedEnvelope = (item: any) => {
if (item.messageBody[0]?.payload?.data) {
const businessID = JSON?.parse(
item.messageBody[0]?.payload?.data
)?.businessID
return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
}
return false
}
/** 红包文案 */
const redEnvelopeText = (item: any) => {
const payload = JSON.parse(item.messageBody[0]?.payload?.data)
return `[积分红包] ${payload.title}`
}
</script>
@@ -344,7 +385,6 @@ function resolveBigFaceUrl(bigFaceKey: string): string {
text-overflow: ellipsis;
white-space: nowrap;
}
}
.message-list {

70
TUIKit/components/TUIContact/utils/index.ts
View File

@@ -250,7 +250,23 @@ export const refuseFriendApplication = (userID: string) => {
// Dismiss group
export const dismissGroup = (groupID: string) => {
deleteImGroup(groupID)
// deleteImGroup(groupID)
// .then(() => {
// Toast({
// message: TUITranslateService.t('TUIContact.解散群聊成功'),
// type: TOAST_TYPE.SUCCESS
// })
// TUIGlobal?.updateContactSearch && TUIGlobal?.updateContactSearch()
// switchTab('/TUIKit/components/TUIConversation/index')
// })
// .catch((error: any) => {
// console.warn('dismiss group failed:', error)
// Toast({
// message: TUITranslateService.t('TUIContact.解散群聊失败'),
// type: TOAST_TYPE.ERROR
// })
// })
TUIGroupService.dismissGroup(groupID)
.then(() => {
Toast({
message: TUITranslateService.t('TUIContact.解散群聊成功'),
@@ -266,33 +282,34 @@ export const dismissGroup = (groupID: string) => {
type: TOAST_TYPE.ERROR
})
})
// TUIGroupService.dismissGroup(groupID)
// .then(() => {
// Toast({
// message: TUITranslateService.t('TUIContact.解散群聊成功'),
// type: TOAST_TYPE.SUCCESS,
// });
// TUIGlobal?.updateContactSearch && TUIGlobal?.updateContactSearch();
// })
// .catch((error: any) => {
// console.warn('dismiss group failed:', error);
// Toast({
// message: TUITranslateService.t('TUIContact.解散群聊失败'),
// type: TOAST_TYPE.ERROR,
// });
// });
}
// Quit group
export const quitGroup = (groupID: string) => {
console.log('222')
quitImGroup(groupID)
// console.log('222')
// quitImGroup(groupID)
// .then(() => {
// Toast({
// message: TUITranslateService.t('TUIContact.退出群组成功'),
// type: TOAST_TYPE.SUCCESS
// })
// switchTab('/TUIKit/components/TUIConversation/index')
// })
// .catch((error: any) => {
// console.warn('quit group failed:', error)
// Toast({
// message: TUITranslateService.t('TUIContact.退出群组失败'),
// type: TOAST_TYPE.ERROR
// })
// })
TUIGroupService.quitGroup(groupID)
.then(() => {
Toast({
message: TUITranslateService.t('TUIContact.退出群组成功'),
type: TOAST_TYPE.SUCCESS
})
switchTab('/TUIKit/components/TUIConversation/index')
})
.catch((error: any) => {
@@ -302,21 +319,6 @@ export const quitGroup = (groupID: string) => {
type: TOAST_TYPE.ERROR
})
})
// TUIGroupService.quitGroup(groupID)
// .then(() => {
// Toast({
// message: TUITranslateService.t('TUIContact.退出群组成功'),
// type: TOAST_TYPE.SUCCESS,
// });
// })
// .catch((error: any) => {
// console.warn('quit group failed:', error);
// Toast({
// message: TUITranslateService.t('TUIContact.退出群组失败'),
// type: TOAST_TYPE.ERROR,
// });
// });
}
// Join group

281
TUIKit/components/TUIConversation/conversation-list/index.vue
View File

@@ -1,8 +1,5 @@
<template>
<div
ref="conversationListInnerDomRef"
class="tui-conversation-list"
>
<div ref="conversationListInnerDomRef" class="tui-conversation-list">
<ActionsMenu
v-if="isShowOverlay"
:selectedConversation="currentConversation"
@@ -16,7 +13,7 @@
:key="index"
:class="[
'tui-conversation-content',
isMobile && 'tui-conversation-content-h5 disable-select',
isMobile && 'tui-conversation-content-h5 disable-select'
]"
>
<div
@@ -25,11 +22,15 @@
'tui-conversation-item',
currentConversationID === conversation.conversationID &&
'tui-conversation-item-selected',
conversation.isPinned && 'tui-conversation-item-pinned',
conversation.isPinned && 'tui-conversation-item-pinned'
]"
@click="enterConversationChat(conversation.conversationID)"
@longpress="showConversationActionMenu($event, conversation, index)"
@contextmenu="showConversationActionMenu($event, conversation, index, true)"
@longpress="
showConversationActionMenu($event, conversation, index)
"
@contextmenu="
showConversationActionMenu($event, conversation, index, true)
"
>
<aside class="left">
<Avatar
@@ -38,7 +39,9 @@
size="40px"
/>
<div
v-if="userOnlineStatusMap && isShowUserOnlineStatus(conversation)"
v-if="
userOnlineStatusMap && isShowUserOnlineStatus(conversation)
"
:class="[
'online-status',
Object.keys(userOnlineStatusMap).length > 0 &&
@@ -48,7 +51,7 @@
userOnlineStatusMap[conversation.userProfile.userID]
.statusType === 1
? 'online-status-online'
: 'online-status-offline',
: 'online-status-offline'
]"
/>
<span
@@ -56,7 +59,9 @@
class="num"
>
{{
conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
conversation.unreadCount > 99
? '99+'
: conversation.unreadCount
}}
</span>
<span
@@ -69,11 +74,21 @@
<label class="content-header-label">
<p class="name">{{ conversation.getShowName() }}</p>
</label>
<div class="middle-box">
<div v-if="isRedEnvelope(conversation)" class="middle-box">
<div class="middle-box-content">
{{ redEnvelopeText(conversation) }}
</div>
</div>
<div v-else class="middle-box">
<span
v-if="conversation.draftText && conversation.conversationID !== currentConversationID"
v-if="
conversation.draftText &&
conversation.conversationID !== currentConversationID
"
class="middle-box-draft"
>{{ TUITranslateService.t('TUIChat.[草稿]') }}</span>
>
{{ TUITranslateService.t('TUIChat.[草稿]') }}
</span>
<span
v-else-if="
conversation.type === 'GROUP' &&
@@ -81,14 +96,18 @@
conversation.groupAtInfoList.length > 0
"
class="middle-box-at"
>{{ conversation.getGroupAtInfo() }}</span>
>
{{ conversation.getGroupAtInfo() }}
</span>
<div class="middle-box-content">
{{ conversation.getLastMessage("text") }}
{{ conversation.getLastMessage('text') }}
</div>
</div>
</div>
<div class="content-footer">
<span class="time">{{ conversation.getLastMessage("time") }}</span>
<span class="time">
{{ conversation.getLastMessage('time') }}
</span>
<Icon
v-if="conversation.isMuted"
:file="muteIcon"
@@ -103,199 +122,251 @@
<script lang="ts" setup>
interface IUserStatus {
statusType: number;
customStatus: string;
statusType: number
customStatus: string
}
interface IUserStatusMap {
[userID: string]: IUserStatus;
[userID: string]: IUserStatus
}
import { ref, onMounted, onUnmounted } from '../../../adapter-vue';
import { ref, onMounted, onUnmounted } from '../../../adapter-vue'
import TUIChatEngine, {
TUIStore,
StoreName,
TUIConversationService,
TUITranslateService,
IConversationModel,
} from '@tencentcloud/chat-uikit-engine-lite';
import { TUIGlobal, isIOS, addLongPressListener } from '@tencentcloud/universal-api';
import Icon from '../../common/Icon.vue';
import Avatar from '../../common/Avatar/index.vue';
import ActionsMenu from '../actions-menu/index.vue';
import muteIcon from '../../../assets/icon/mute.svg';
import { isPC, isH5, isUniFrameWork, isMobile } from '../../../utils/env';
IConversationModel
} from '@tencentcloud/chat-uikit-engine-lite'
import {
TUIGlobal,
isIOS,
addLongPressListener
} from '@tencentcloud/universal-api'
import Icon from '../../common/Icon.vue'
import Avatar from '../../common/Avatar/index.vue'
import ActionsMenu from '../actions-menu/index.vue'
import muteIcon from '../../../assets/icon/mute.svg'
import {
isPC,
isH5,
isUniFrameWork,
isMobile
} from '../../../utils/env'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../constant'
const emits = defineEmits(['handleSwitchConversation', 'getPassingRef']);
const currentConversation = ref<IConversationModel>();
const currentConversationID = ref<string>();
const currentConversationDomRect = ref<DOMRect>();
const isShowOverlay = ref<boolean>(false);
const conversationList = ref<IConversationModel[]>([]);
const conversationListDomRef = ref<HTMLElement | undefined>();
const conversationListInnerDomRef = ref<HTMLElement | undefined>();
const emits = defineEmits(['handleSwitchConversation', 'getPassingRef'])
const currentConversation = ref<IConversationModel>()
const currentConversationID = ref<string>()
const currentConversationDomRect = ref<DOMRect>()
const isShowOverlay = ref<boolean>(false)
const conversationList = ref<IConversationModel[]>([])
const conversationListDomRef = ref<HTMLElement | undefined>()
const conversationListInnerDomRef = ref<HTMLElement | undefined>()
const actionsMenuPosition = ref<{
top: number;
left: number | undefined;
conversationHeight: number | undefined;
top: number
left: number | undefined
conversationHeight: number | undefined
}>({
top: 0,
left: undefined,
conversationHeight: undefined,
});
const displayOnlineStatus = ref(false);
const userOnlineStatusMap = ref<IUserStatusMap>();
conversationHeight: undefined
})
const displayOnlineStatus = ref(false)
const userOnlineStatusMap = ref<IUserStatusMap>()
let lastestOpenActionsMenuTime: number | null = null;
let lastestOpenActionsMenuTime: number | null = null
onMounted(() => {
TUIStore.watch(StoreName.CONV, {
currentConversationID: onCurrentConversationIDUpdated,
conversationList: onConversationListUpdated,
currentConversation: onCurrentConversationUpdated,
});
currentConversation: onCurrentConversationUpdated
})
TUIStore.watch(StoreName.USER, {
displayOnlineStatus: onDisplayOnlineStatusUpdated,
userStatusList: onUserStatusListUpdated,
});
userStatusList: onUserStatusListUpdated
})
if (!isUniFrameWork && isIOS && !isPC) {
addLongPressHandler();
addLongPressHandler()
}
});
})
onUnmounted(() => {
TUIStore.unwatch(StoreName.CONV, {
currentConversationID: onCurrentConversationIDUpdated,
conversationList: onConversationListUpdated,
currentConversation: onCurrentConversationUpdated,
});
currentConversation: onCurrentConversationUpdated
})
TUIStore.unwatch(StoreName.USER, {
displayOnlineStatus: onDisplayOnlineStatusUpdated,
userStatusList: onUserStatusListUpdated,
});
});
userStatusList: onUserStatusListUpdated
})
})
const isShowUserOnlineStatus = (conversation: IConversationModel): boolean => {
const isShowUserOnlineStatus = (
conversation: IConversationModel
): boolean => {
return (
displayOnlineStatus.value
&& conversation.type === TUIChatEngine.TYPES.CONV_C2C
);
};
displayOnlineStatus.value &&
conversation.type === TUIChatEngine.TYPES.CONV_C2C
)
}
const showConversationActionMenu = (
event: Event,
conversation: IConversationModel,
index: number,
isContextMenuEvent?: boolean,
isContextMenuEvent?: boolean
) => {
if (isContextMenuEvent) {
event.preventDefault();
event.preventDefault()
if (isUniFrameWork) {
return;
return
}
}
currentConversation.value = conversation;
lastestOpenActionsMenuTime = Date.now();
getActionsMenuPosition(event, index);
};
currentConversation.value = conversation
lastestOpenActionsMenuTime = Date.now()
getActionsMenuPosition(event, index)
}
const closeConversationActionMenu = () => {
// Prevent continuous triggering of overlay tap events
if (
lastestOpenActionsMenuTime
&& Date.now() - lastestOpenActionsMenuTime > 300
lastestOpenActionsMenuTime &&
Date.now() - lastestOpenActionsMenuTime > 300
) {
currentConversation.value = undefined;
isShowOverlay.value = false;
currentConversation.value = undefined
isShowOverlay.value = false
}
}
};
const getActionsMenuPosition = (event: Event, index: number) => {
if (isUniFrameWork) {
if (typeof conversationListDomRef.value === 'undefined') {
emits('getPassingRef', conversationListDomRef);
emits('getPassingRef', conversationListDomRef)
}
const query = TUIGlobal?.createSelectorQuery().in(conversationListDomRef.value);
query.select(`#convlistitem-${index}`).boundingClientRect((data) => {
const query = TUIGlobal?.createSelectorQuery().in(
conversationListDomRef.value
)
query
.select(`#convlistitem-${index}`)
.boundingClientRect(data => {
if (data) {
actionsMenuPosition.value = {
// The uni-page-head of uni-h5 is not considered a member of the viewport, so the height of the head is manually increased.
top: data.bottom - 44,
// @ts-expect-error in uniapp event has touches property
left: event.touches[0].pageX,
conversationHeight: data.height,
};
isShowOverlay.value = true;
conversationHeight: data.height
}
}).exec();
isShowOverlay.value = true
}
})
.exec()
} else {
const rect = ((event.currentTarget || event.target) as HTMLElement)?.getBoundingClientRect() || {};
const rect =
(
(event.currentTarget || event.target) as HTMLElement
)?.getBoundingClientRect() || {}
if (rect) {
actionsMenuPosition.value = {
top: rect.bottom,
left: isPC ? (event as MouseEvent).clientX : undefined,
conversationHeight: rect.height,
};
conversationHeight: rect.height
}
}
isShowOverlay.value = true
}
isShowOverlay.value = true;
}
};
const enterConversationChat = (conversationID: string) => {
emits('handleSwitchConversation', conversationID);
TUIConversationService.switchConversation(conversationID);
};
emits('handleSwitchConversation', conversationID)
TUIConversationService.switchConversation(conversationID)
}
function addLongPressHandler() {
if (!conversationListInnerDomRef.value) {
return;
return
}
addLongPressListener({
element: conversationListInnerDomRef.value,
onLongPress: (event, target) => {
const index = (Array.from(conversationListInnerDomRef.value!.children) as HTMLElement[]).indexOf(target!);
showConversationActionMenu(event, conversationList.value[index], index);
const index = (
Array.from(
conversationListInnerDomRef.value!.children
) as HTMLElement[]
).indexOf(target!)
showConversationActionMenu(
event,
conversationList.value[index],
index
)
},
options: {
eventDelegation: {
subSelector: '.tui-conversation-content',
},
},
});
subSelector: '.tui-conversation-content'
}
}
})
}
function onCurrentConversationUpdated(conversation: IConversationModel) {
currentConversation.value = conversation;
function onCurrentConversationUpdated(
conversation: IConversationModel
) {
currentConversation.value = conversation
}
/** 是否红包 */
const isRedEnvelope = (item: IConversationModel) => {
if (item?.lastMessage?.payload?.data) {
const businessID = JSON?.parse(
item?.lastMessage?.payload?.data
)?.businessID
return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
}
return false
}
/** 红包文案 */
const redEnvelopeText = (item: IConversationModel) => {
const payload = JSON.parse(item.lastMessage?.payload?.data)
const text = item.getLastMessage('text')?.split(':')
console.log(text)
if (text && text.length > 1) {
return `${text[0]}:[积分红包] ${payload.title}`
} else {
return `[积分红包] ${payload.title}`
}
}
function onConversationListUpdated(list: IConversationModel[]) {
conversationList.value = list;
conversationList.value = list
}
function onCurrentConversationIDUpdated(id: string) {
currentConversationID.value = id;
currentConversationID.value = id
}
function onDisplayOnlineStatusUpdated(status: boolean) {
displayOnlineStatus.value = status;
displayOnlineStatus.value = status
}
function onUserStatusListUpdated(list: Map<string, IUserStatus>) {
if (list.size !== 0) {
userOnlineStatusMap.value = [...list.entries()].reduce(
(obj, [key, value]) => {
obj[key] = value;
return obj;
obj[key] = value
return obj
},
{} as IUserStatusMap,
);
{} as IUserStatusMap
)
}
}
// Expose to the parent component and close actionsMenu when a sliding event is detected
defineExpose({ closeChildren: closeConversationActionMenu });
defineExpose({ closeChildren: closeConversationActionMenu })
</script>
<style lang="scss" scoped src="./style/index.scss"></style>

88
TUIKit/components/TUIGroup/create-group/index.vue
View File

@@ -30,13 +30,13 @@
<Icon :file="rightIcon" />
</span>
</li>
<li class="group-list-item" @click="cbPopupShow.open('bottom')">
<!-- <li class="group-list-item" @click="cbPopupShow.open('bottom')">
<label class="group-list-item-label">申请加群方式</label>
<span class="group-h5-list-item-content">
<p class="content">{{ applyJoinOptionName }}</p>
<Icon :file="rightIcon" />
</span>
</li>
</li> -->
<li class="group-list-introduction">
<div class="group-list-item">
<label class="group-list-item-label">
@@ -261,59 +261,55 @@
const createGroup = async (options: any) => {
try {
const data = {
applyJoinOption: applyJoinOption.value,
faceUrl: groupAvatar.value,
groupName: options.name,
groupType: options.type,
memberList: options.memberList.map((item: IUserProfile) => {
return { memberAccount: item.userID }
})
}
const res = await createImGroup(data)
const e = res.data
// const type = e.groupType
// if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
// await TUIGroupService.joinGroup({
// groupID: e.groupID,
// applyMessage: ''
// const data = {
// applyJoinOption: applyJoinOption.value,
// faceUrl: groupAvatar.value,
// groupName: options.name,
// groupType: options.type,
// memberList: options.memberList.map((item: IUserProfile) => {
// return { memberAccount: item.userID }
// })
// }
const newRes = await TUIGroupService.getGroupProfile({
groupID: e.groupId
})
// const res = await createImGroup(data)
// const e = res.data
handleCompleteCreate(newRes.data.group)
Toast({
message: TUITranslateService.t('TUIGroup.群组创建成功'),
type: TOAST_TYPE.SUCCESS
})
// ========= 原本逻辑
// options.memberList = options.memberList.map(
// (item: IUserProfile) => {
// return { userID: item.userID }
// }
// )
// if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
// delete options.groupID
// }
// const res = await TUIGroupService.createGroup(options)
// console.log(res)
// const { type } = res.data.group
// if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
// await TUIGroupService.joinGroup({
// groupID: res.data.group.groupID,
// applyMessage: ''
// const newRes = await TUIGroupService.getGroupProfile({
// groupID: e.groupId
// })
// }
// handleCompleteCreate(res.data.group)
// handleCompleteCreate(newRes.data.group)
// Toast({
// message: TUITranslateService.t('TUIGroup.群组创建成功'),
// type: TOAST_TYPE.SUCCESS
// })
// ========= 原本逻辑
options.memberList = options.memberList.map(
(item: IUserProfile) => {
return { userID: item.userID }
}
)
if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
delete options.groupID
}
const res = await TUIGroupService.createGroup({
...options,
avatar: groupAvatar.value
})
console.log(res)
const { type } = res.data.group
if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
await TUIGroupService.joinGroup({
groupID: res.data.group.groupID,
applyMessage: ''
})
}
handleCompleteCreate(res.data.group)
Toast({
message: TUITranslateService.t('TUIGroup.群组创建成功'),
type: TOAST_TYPE.SUCCESS
})
} catch (err: any) {
Toast({
message: err.message,

80
TUIKit/components/TUIGroup/manage-group/index.vue
View File

@@ -238,7 +238,11 @@
import Server from '../server'
import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus'
import { IFriendProfile, IGroupMember } from '../../../interface'
import { createImGroup, deleteImGroup, quitImGroup } from '../../../../api/tui-kit'
import {
createImGroup,
deleteImGroup,
quitImGroup
} from '../../../../api/tui-kit'
const TUIGroupServer = Server.getInstance()
const TUIConstants = TUIGroupServer.constants
@@ -400,7 +404,6 @@
const updateProfile = async (newGroupProfile: any) => {
const { key, value } = newGroupProfile
if (key === 'muteAllMembers') {
const options: any = {
groupID: currentGroup.value.groupID,
[key]: value
@@ -417,30 +420,47 @@
type: TOAST_TYPE.ERROR
})
})
} else {
const newKey = {
notification: 'notification',
name: 'groupName'
}[key]
const options: any = {
groupId: currentGroup.value.groupID,
[newKey]: value
}
await createImGroup(options, 'put')
TUIGroupService.getGroupProfile({
groupID: currentGroup.value.groupID
})
.then((res: any) => {
currentGroup.value = res.data.group
editLableName.value = ''
})
.catch((error: any) => {
Toast({
message: error?.message,
type: TOAST_TYPE.ERROR
})
})
}
// if (key === 'muteAllMembers') {
// const options: any = {
// groupID: currentGroup.value.groupID,
// [key]: value
// }
// TUIGroupService.updateGroupProfile(options)
// .then((res: any) => {
// console.log(res.data)
// currentGroup.value = res.data.group
// editLableName.value = ''
// })
// .catch((error: any) => {
// Toast({
// message: error?.message,
// type: TOAST_TYPE.ERROR
// })
// })
// } else {
// const newKey = {
// notification: 'notification',
// name: 'groupName'
// }[key]
// const options: any = {
// groupId: currentGroup.value.groupID,
// [newKey]: value
// }
// await createImGroup(options, 'put')
// TUIGroupService.getGroupProfile({
// groupID: currentGroup.value.groupID
// })
// .then((res: any) => {
// currentGroup.value = res.data.group
// editLableName.value = ''
// })
// .catch((error: any) => {
// Toast({
// message: error?.message,
// type: TOAST_TYPE.ERROR
// })
// })
// }
}
const setCurrentTab = (tabName: string) => {
@@ -656,8 +676,8 @@
}
const dismissGroup = async (group: any) => {
await deleteImGroup(group.groupID)
// await TUIGroupService.dismissGroup(group.groupID);
// await deleteImGroup(group.groupID)
await TUIGroupService.dismissGroup(group.groupID)
enableSampleTaskStatus('dismissGroup')
Toast({
message: TUITranslateService.t('TUIGroup.群组解散成功'),
@@ -874,8 +894,8 @@
}
const quitGroup = async (group: any) => {
await quitImGroup(group.groupID)
// await TUIGroupService.quitGroup(group.groupID)
// await quitImGroup(group.groupID)
await TUIGroupService.quitGroup(group.groupID)
clearGroupInfo()
}

2
TUIKit/constant.ts
View File

@@ -18,6 +18,8 @@ export const CHAT_MSG_CUSTOM_TYPE = {
LINK: "text_link",
CALL: 1,
ORDER: "order",
/** 红包 */
RED_ENVELOPE: "redEnvelope"
};
export const DIALOG_CONTENT = {

9
api/tui-kit.js
View File

@@ -40,3 +40,12 @@ export const deleteImGroupMember = (groupId, memberId) => {
data: { groupId, memberId }
})
}
/** 发红包 */
export const sendRedEnvelope = data => {
return http({
url: '/api/system/pointsRedPacket/send',
method: 'post',
data
})
}

8
uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue
View File

@@ -1,5 +1,4 @@
<template>
<view>
<uni-popup ref="popup" type="bottom">
<view class="modal">
<view class="title">
@@ -42,7 +41,6 @@
</view>
<view></view>
</uni-popup>
</view>
</template>
<script>
export default {
@@ -55,9 +53,9 @@
},
methods: {
forgetPwd() {
uni.navigateTo({
url: '/pages/myInfo/changePayPwd'
})
// uni.navigateTo({
// url: '/pages/myInfo/changePayPwd'
// })
},
open() {
this.$refs.popup.open()