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>

261
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
:class="{ 'on-reminder': monitorPoints.valid }"
class="input-box"
>
<text>积分</text>
<input
v-model="formData.integral"
:placeholder-style="placeholderStyle"
confirm-type="done"
type="number"
placeholder="0.00"
@confirm="onSubmit"
/>
<!-- 红包个数 -->
<view v-if="isGroup" class="group-box">
<view
: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="`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="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;
}
}

157
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,
},
title: {
type: String,
default: '',
},
needDialog: {
type: Boolean,
default: true,
},
iconWidth: {
type: String,
default: '20px',
},
iconHeight: {
type: String,
default: '20px',
},
// Whether to display the bottom popup dialog on mobile devices
// Invalid on PC
needBottomPopup: {
type: Boolean,
default: false,
},
});
const props = defineProps({
iconFile: {
type: String,
required: true
},
title: {
type: String,
default: ''
},
needDialog: {
type: Boolean,
default: true
},
iconWidth: {
type: String,
default: '20px'
},
iconHeight: {
type: String,
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 emits = defineEmits([
'onIconClick',
'onDialogClose',
'onDialogShow'
])
const isDark = ref(TUIChatConfig.getTheme() === 'dark');
const showDialog = ref(false);
const toolbarItemRef = ref();
const dialogRef = ref();
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);
watch(
() => showDialog.value,
newVal => {
if (!newVal) {
emits('onDialogClose', dialogRef)
} else {
emits('onDialogShow', dialogRef)
}
}
)
const toggleToolbarItem = () => {
emits('onIconClick', dialogRef)
if (isPC) {
outsideClick.listen({
domRefs: toolbarItemRef.value,
handler: closeToolbarItem
})
}
if (!props.needDialog) {
return
}
toggleDialogDisplay(!showDialog.value)
}
});
const toggleToolbarItem = () => {
emits('onIconClick', dialogRef);
if (isPC) {
outsideClick.listen({
domRefs: toolbarItemRef.value,
handler: closeToolbarItem,
});
const closeToolbarItem = () => {
showDialog.value = false
}
if (!props.needDialog) {
return;
const toggleDialogDisplay = (showStatus: boolean) => {
if (showDialog.value === showStatus) {
return
}
showDialog.value = showStatus
}
toggleDialogDisplay(!showDialog.value);
};
const closeToolbarItem = () => {
showDialog.value = false;
};
const toggleDialogDisplay = (showStatus: boolean) => {
if (showDialog.value === showStatus) {
return;
const onPopupClose = () => {
showDialog.value = false
}
showDialog.value = showStatus;
};
const onPopupClose = () => {
showDialog.value = false;
};
defineExpose({
toggleDialogDisplay,
});
defineExpose({
toggleDialogDisplay
})
</script>
<style lang="scss" scoped src="./style/index.scss"></style>

272
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,135 +30,174 @@
</template>
<script setup lang="ts">
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';
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'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
interface IProps {
displayType?: InputDisplayType;
}
const props = withDefaults(defineProps<IProps>(), {
displayType: 'editor',
});
const TYPES = TUIChatEngine.TYPES;
const quoteMessage = ref<IMessageModel>();
onMounted(() => {
TUIStore.watch(StoreName.CHAT, {
quoteMessage: onQuoteMessageUpdated,
});
});
onUnmounted(() => {
TUIStore.unwatch(StoreName.CHAT, {
quoteMessage: onQuoteMessageUpdated,
});
});
const quoteContentText = computed(() => {
let _quoteContentText;
switch (quoteMessage.value?.type) {
case TYPES.MSG_TEXT:
_quoteContentText = transformTextWithKeysToEmojiNames(quoteMessage.value.payload?.text);
break;
case TYPES.MSG_IMAGE:
_quoteContentText = TUITranslateService.t('TUIChat.图片');
break;
case TYPES.MSG_AUDIO:
_quoteContentText = TUITranslateService.t('TUIChat.语音');
break;
case TYPES.MSG_VIDEO:
_quoteContentText = TUITranslateService.t('TUIChat.视频');
break;
case TYPES.MSG_FILE:
_quoteContentText = TUITranslateService.t('TUIChat.文件');
break;
case TYPES.MSG_CUSTOM:
_quoteContentText = TUITranslateService.t('TUIChat.自定义');
break;
case TYPES.MSG_FACE:
_quoteContentText = TUITranslateService.t('TUIChat.表情');
break;
case TYPES.MSG_MERGER:
_quoteContentText = TUITranslateService.t('TUIChat.聊天记录');
break;
default:
_quoteContentText = TUITranslateService.t('TUIChat.消息');
break;
interface IProps {
displayType?: InputDisplayType
}
return _quoteContentText;
});
function cancelQuote() {
TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: undefined, type: 'quote' });
}
const props = withDefaults(defineProps<IProps>(), {
displayType: 'editor'
})
function onQuoteMessageUpdated(options?: { message: IMessageModel; type: string }) {
if (options?.message && options?.type === 'quote') {
quoteMessage.value = options.message;
} else {
quoteMessage.value = undefined;
const TYPES = TUIChatEngine.TYPES
const quoteMessage = ref<IMessageModel>()
onMounted(() => {
TUIStore.watch(StoreName.CHAT, {
quoteMessage: onQuoteMessageUpdated
})
})
onUnmounted(() => {
TUIStore.unwatch(StoreName.CHAT, {
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
if (isRedEnvelope.value) {
_quoteContentText = `${quoteRedEnvelopeContentText.value}`
} else {
switch (quoteMessage.value?.type) {
case TYPES.MSG_TEXT:
_quoteContentText = transformTextWithKeysToEmojiNames(
quoteMessage.value.payload?.text
)
break
case TYPES.MSG_IMAGE:
_quoteContentText = TUITranslateService.t('TUIChat.图片')
break
case TYPES.MSG_AUDIO:
_quoteContentText = TUITranslateService.t('TUIChat.语音')
break
case TYPES.MSG_VIDEO:
_quoteContentText = TUITranslateService.t('TUIChat.视频')
break
case TYPES.MSG_FILE:
_quoteContentText = TUITranslateService.t('TUIChat.文件')
break
case TYPES.MSG_CUSTOM:
_quoteContentText = TUITranslateService.t('TUIChat.自定义')
break
case TYPES.MSG_FACE:
_quoteContentText = TUITranslateService.t('TUIChat.表情')
break
case TYPES.MSG_MERGER:
_quoteContentText = TUITranslateService.t('TUIChat.聊天记录')
break
default:
_quoteContentText = TUITranslateService.t('TUIChat.消息')
break
}
}
return _quoteContentText
})
function cancelQuote() {
TUIStore.update(StoreName.CHAT, 'quoteMessage', {
message: undefined,
type: 'quote'
})
}
function onQuoteMessageUpdated(options?: {
message: IMessageModel
type: string
}) {
if (options?.message && options?.type === 'quote') {
quoteMessage.value = options.message
} else {
quoteMessage.value = undefined
}
}
}
</script>
<style lang="scss" scoped>
%common-container-style {
margin: 5px 100px 5px 8px;
display: flex;
flex: 0 1 auto;
.input-quote-content {
%common-container-style {
margin: 5px 100px 5px 8px;
display: flex;
flex: 0 1 auto;
background-color: #fafafa;
border-radius: 8px;
padding: 12px;
font-size: 12px;
align-items: center;
line-height: 16px;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
.max-one-line {
.input-quote-content {
display: flex;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #fafafa;
border-radius: 8px;
padding: 12px;
font-size: 12px;
align-items: center;
line-height: 16px;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
.max-one-line {
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.input-quote-close-icon {
margin-left: 5px;
padding: 5px;
}
}
.input-quote-close-icon {
margin-left: 5px;
padding: 5px;
.input-quote-container {
@extend %common-container-style;
}
}
.input-quote-container {
@extend %common-container-style;
}
.input-quote-container-uni {
@extend %common-container-style;
.input-quote-container-uni {
@extend %common-container-style;
margin: 5px 60px 0 30px;
}
margin: 5px 60px 0 30px;
}
.input-quote-container-h5 {
@extend %common-container-style;
.input-quote-container-h5 {
@extend %common-container-style;
margin: 5px 0 0;
}
margin: 5px 0 0;
}
</style>

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

File diff suppressed because it is too large Load Diff

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>

111
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,72 +11,72 @@
</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;
}
interface IEmit {
(key: 'previewImage'): void;
}
interface IProps {
content: IImageMessageContent
messageItem: IMessageModel
}
interface IEmit {
(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;
if (width === 0 || height === 0) {
return;
const genImageStyles = (value: { width?: any; height?: any }) => {
const { width, height } = value
if (width === 0 || height === 0) {
return
}
let imageWidth = 0
let imageHeight = 0
if (width >= height) {
imageWidth = DEFAULT_MAX_SIZE
imageHeight = (DEFAULT_MAX_SIZE * height) / width
} else {
imageWidth = (DEFAULT_MAX_SIZE * width) / height
imageHeight = DEFAULT_MAX_SIZE
}
imageStyles.value.width = imageWidth + 'px'
imageStyles.value.height = imageHeight + 'px'
}
let imageWidth = 0;
let imageHeight = 0;
if (width >= height) {
imageWidth = DEFAULT_MAX_SIZE;
imageHeight = (DEFAULT_MAX_SIZE * height) / width;
} else {
imageWidth = (DEFAULT_MAX_SIZE * width) / height;
imageHeight = DEFAULT_MAX_SIZE;
watchEffect(() => {
genImageStyles(props.content)
})
const imageLoad = (event: Event) => {
genImageStyles(event.detail)
}
imageStyles.value.width = imageWidth + 'px';
imageStyles.value.height = imageHeight + 'px';
};
watchEffect(() => {
genImageStyles(props.content);
});
const imageLoad = (event: Event) => {
genImageStyles(event.detail);
};
const handleImagePreview = () => {
if (props.messageItem?.status === 'success' || props.messageItem.progress === 1) {
emits('previewImage');
const handleImagePreview = () => {
if (
props.messageItem?.status === 'success' ||
props.messageItem.progress === 1
) {
emits('previewImage')
}
}
};
</script>
<style lang="scss" scoped>
.image-container {
position: relative;
background-color: #f4f4f4;
font-size: 0;
.image-container {
position: relative;
background-color: #f4f4f4;
font-size: 0;
.message-image {
max-width: 150px;
.message-image {
max-width: 150px;
}
}
}
</style>

177
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,86 +51,98 @@
</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;
}
interface IProps {
// Core data for rendering message record card and message list
renderData: IMergeMessageContent;
/**
* The MessageRecord component has two main functions:
* 1. display message record cards primarily.
* 2. clicking on it and show the simple message list.
* When used as a nested component with the disabled prop
* it is only need renderData to render message record cards.
* Therefore, 'messageItem' and 'disabled' is not a required prop.
*/
disabled?: boolean;
messageItem?: IMessageModel;
}
const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
messageItem: () => ({}) as IMessageModel,
disabled: false,
});
const isMessageListVisible = ref(false);
function openMergeDetail() {
if (props.disabled) {
return;
interface IEmits {
(e: 'assignMessageIDInUniapp', messageID: string): void
}
if (!isUniFrameWork) {
isMessageListVisible.value = true;
} else {
emits('assignMessageIDInUniapp', props.messageItem.ID);
}
}
function closeMergeDetail() {
isMessageListVisible.value = false;
}
interface IProps {
// Core data for rendering message record card and message list
renderData: IMergeMessageContent
/**
* The MessageRecord component has two main functions:
* 1. display message record cards primarily.
* 2. clicking on it and show the simple message list.
* When used as a nested component with the disabled prop
* it is only need renderData to render message record cards.
* Therefore, 'messageItem' and 'disabled' is not a required prop.
*/
disabled?: boolean
messageItem?: IMessageModel
}
const emits = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), {
messageItem: () => ({} as IMessageModel),
disabled: 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
}
if (!isUniFrameWork) {
isMessageListVisible.value = true
} else {
emits('assignMessageIDInUniapp', props.messageItem.ID)
}
}
function closeMergeDetail() {
isMessageListVisible.value = false
}
</script>
<style lang="scss" scoped>
:not(not) {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-width: 0;
}
.message-record-container {
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 10px;
cursor: pointer;
background-color: #fff;
max-width: 400px;
min-width: 180px;
overflow: hidden;
.record-abstract-container {
color: #bbb;
font-size: 12px;
margin: 8px 0;
:not(not) {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-width: 0;
}
.record-footer {
color: #888;
font-size: 11px;
padding-top: 5px;
border-top: 1px solid #eee;
.message-record-container {
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 10px;
cursor: pointer;
background-color: #fff;
max-width: 400px;
min-width: 180px;
overflow: hidden;
.record-abstract-container {
color: #bbb;
font-size: 12px;
margin: 8px 0;
}
.record-footer {
color: #888;
font-size: 11px;
padding-top: 5px;
border-top: 1px solid #eee;
}
}
}
</style>

570
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,270 +165,309 @@
</template>
<script setup lang="ts">
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';
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'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant'
interface IProps {
/**
* only use messageID when first render of simple-message-list
* because the nested simple-message-list do not have corresponding message object
* need to download message from sdk by constructed message
* and use downloaded message object to render nested simple-message-list
*/
messageID?: string;
isMounted?: boolean;
}
interface IEmits {
(e: 'closeOverlay'): void;
}
const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
messageID: '',
isMounted: false,
});
const TYPES = TUIChatEngine.TYPES;
const isDownloadOccurError = ref(false);
const messageListStack = ref<IMergeMessageContent[]>([]);
const currentMergeMessageInfo = ref<Partial<IMergeMessageContent>>({
title: '',
messageList: [],
});
const simpleMessageListRef = ref<HTMLElement>();
watch(() => messageListStack.value.length, async (newValue) => {
isDownloadOccurError.value = false;
if (newValue < 1) {
return;
interface IProps {
/**
* only use messageID when first render of simple-message-list
* because the nested simple-message-list do not have corresponding message object
* need to download message from sdk by constructed message
* and use downloaded message object to render nested simple-message-list
*/
messageID?: string
isMounted?: boolean
}
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);
// if download complete message, cover the original message in stack top
messageListStack.value[messageListStack.value.length - 1] = res.payload;
} catch (error) {
isDownloadOccurError.value = true;
interface IEmits {
(e: 'closeOverlay'): void
}
const emits = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), {
messageID: '',
isMounted: false
})
const TYPES = TUIChatEngine.TYPES
const isDownloadOccurError = ref(false)
const messageListStack = ref<IMergeMessageContent[]>([])
const currentMergeMessageInfo = ref<Partial<IMergeMessageContent>>({
title: '',
messageList: []
})
const simpleMessageListRef = ref<HTMLElement>()
watch(
() => messageListStack.value.length,
async newValue => {
isDownloadOccurError.value = false
if (newValue < 1) {
return
}
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)
// if download complete message, cover the original message in stack top
messageListStack.value[messageListStack.value.length - 1] =
res.payload
} catch (error) {
isDownloadOccurError.value = true
}
}
currentMergeMessageInfo.value =
messageListStack.value[messageListStack.value.length - 1]
}
)
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.'
)
}
const sdkMessagePayload = TUIStore.getMessageModel(
props.messageID
).getMessage().payload
messageListStack.value = [sdkMessagePayload]
} else {
messageListStack.value = []
}
},
{
immediate: true
}
)
const isReturn = computed(() => {
return messageListStack.value.length > 1
})
const isMergeMessageInfoLoaded = computed(() => {
return currentMergeMessageInfo.value?.messageList
? currentMergeMessageInfo.value.messageList.length > 0
: false
})
function entryNextLevel(e, sdkMessage: any) {
messageListStack.value.push(sdkMessage.messageBody[0].payload)
e.stopPropagation()
}
function backPreviousLevel() {
messageListStack.value.pop()
if (messageListStack.value.length < 1) {
emits('closeOverlay')
}
}
currentMergeMessageInfo.value = messageListStack.value[messageListStack.value.length - 1];
});
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.');
function previewVideoInUniapp(url: string) {
if (isUniFrameWork) {
const encodedUrl = encodeURIComponent(url)
uni.navigateTo({
url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`
})
}
const sdkMessagePayload = TUIStore.getMessageModel(props.messageID).getMessage().payload;
messageListStack.value = [sdkMessagePayload];
} else {
messageListStack.value = [];
}
}, {
immediate: true,
});
const isReturn = computed(() => {
return messageListStack.value.length > 1;
});
const isMergeMessageInfoLoaded = computed(() => {
return currentMergeMessageInfo.value?.messageList ? currentMergeMessageInfo.value.messageList.length > 0 : false;
});
function entryNextLevel(e, sdkMessage: any) {
messageListStack.value.push(sdkMessage.messageBody[0].payload);
e.stopPropagation();
}
function backPreviousLevel() {
messageListStack.value.pop();
if (messageListStack.value.length < 1) {
emits('closeOverlay');
}
}
function previewVideoInUniapp(url: string) {
if (isUniFrameWork) {
const encodedUrl = encodeURIComponent(url);
uni.navigateTo({
url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`,
});
}
}
function resolveBigFaceUrl(bigFaceKey: string): string {
let url = '';
if (bigFaceKey.indexOf('@custom') > -1) {
url = CUSTOM_BIG_EMOJI_URL + bigFaceKey;
} else {
url = DEFAULT_BIG_EMOJI_URL + bigFaceKey;
if (url.indexOf('@2x') === -1) {
url += '@2x.png';
function resolveBigFaceUrl(bigFaceKey: string): string {
let url = ''
if (bigFaceKey.indexOf('@custom') > -1) {
url = CUSTOM_BIG_EMOJI_URL + bigFaceKey
} else {
url += '.png';
url = DEFAULT_BIG_EMOJI_URL + bigFaceKey
if (url.indexOf('@2x') === -1) {
url += '@2x.png'
} else {
url += '.png'
}
}
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}`
}
return url;
}
</script>
<style scoped lang="scss">
:not(not){
display: flex;
flex-direction: column;
min-width: 0;
box-sizing: border-box;
}
.simple-message-list-container {
position: relative;
overflow: hidden;
width: calc(40vw);
min-width: 550px;
height: calc(100vh - 200px);
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
&-mobile {
width: 100vw;
height: 100vh;
min-width: auto;
border-radius: 0;
:not(not) {
display: flex;
flex-direction: column;
min-width: 0;
box-sizing: border-box;
}
.header-container {
width: 100%;
text-align: center;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 60px;
justify-content: center;
align-items: center;
padding: 0 70px;
.simple-message-list-container {
position: relative;
overflow: hidden;
width: calc(40vw);
min-width: 550px;
height: calc(100vh - 200px);
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
.back {
flex-direction: row;
align-items: center;
position: absolute;
left: 10px;
cursor: pointer;
&-mobile {
width: 100vw;
height: 100vh;
min-width: auto;
border-radius: 0;
}
.title {
.header-container {
width: 100%;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 60px;
justify-content: center;
align-items: center;
padding: 0 70px;
background-color: #fff;
.back {
flex-direction: row;
align-items: center;
position: absolute;
left: 10px;
cursor: pointer;
}
.title {
width: 100%;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.message-list {
padding: 60px 20px 20px;
flex: 1 1 auto;
overflow: hidden auto;
}
}
.message-list {
padding: 60px 20px 20px;
flex: 1 1 auto;
overflow: hidden auto;
}
}
.message-item {
flex-direction: row;
margin: 10px 0;
}
.message-text {
flex-flow: row wrap;
display: inline;
&-container {
display: inline;
flex: 0 0 auto;
.message-item {
flex-direction: row;
margin: 10px 0;
}
.text {
vertical-align: bottom;
.message-text {
flex-flow: row wrap;
display: inline;
&-container {
display: inline;
word-break: break-all;
}
flex: 0 0 auto;
flex-direction: row;
.simple-emoji {
display: inline-flex;
width: 20px;
height: 20px;
.text {
vertical-align: bottom;
display: inline;
word-break: break-all;
}
.simple-emoji {
display: inline-flex;
width: 20px;
height: 20px;
}
}
}
}
.message-image {
max-width: 180px;
border-radius: 10px;
overflow: hidden;
.image {
.message-image {
max-width: 180px;
}
}
.message-face {
max-width: 100px;
.image {
width: 80px;
height: 80px;
}
}
.message-audio {
flex-direction: row;
}
.message-video {
position: relative;
.image {
max-width: 180px;
}
.video-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video {
max-width: 150px;
width: inherit;
height: inherit;
border-radius: 10px;
}
}
overflow: hidden;
.message-combine {
max-width: 300px;
}
.image {
max-width: 180px;
}
}
.message-face {
max-width: 100px;
.image {
width: 80px;
height: 80px;
}
}
.message-audio {
flex-direction: row;
}
.message-video {
position: relative;
.image {
max-width: 180px;
}
.video-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video {
max-width: 150px;
width: inherit;
height: inherit;
border-radius: 10px;
}
}
.message-combine {
max-width: 300px;
}
</style>

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

493
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,17 +39,19 @@
size="40px"
/>
<div
v-if="userOnlineStatusMap && isShowUserOnlineStatus(conversation)"
v-if="
userOnlineStatusMap && isShowUserOnlineStatus(conversation)
"
:class="[
'online-status',
Object.keys(userOnlineStatusMap).length > 0 &&
Object.keys(userOnlineStatusMap).includes(
conversation.userProfile.userID
) &&
userOnlineStatusMap[conversation.userProfile.userID]
.statusType === 1
Object.keys(userOnlineStatusMap).includes(
conversation.userProfile.userID
) &&
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,26 +74,40 @@
<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' &&
conversation.groupAtInfoList &&
conversation.groupAtInfoList.length > 0
conversation.groupAtInfoList &&
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"
@@ -102,210 +121,262 @@
</template>
<script lang="ts" setup>
interface IUserStatus {
statusType: number;
customStatus: string;
}
interface IUserStatusMap {
[userID: string]: IUserStatus;
}
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';
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: 0,
left: undefined,
conversationHeight: undefined,
});
const displayOnlineStatus = ref(false);
const userOnlineStatusMap = ref<IUserStatusMap>();
let lastestOpenActionsMenuTime: number | null = null;
onMounted(() => {
TUIStore.watch(StoreName.CONV, {
currentConversationID: onCurrentConversationIDUpdated,
conversationList: onConversationListUpdated,
currentConversation: onCurrentConversationUpdated,
});
TUIStore.watch(StoreName.USER, {
displayOnlineStatus: onDisplayOnlineStatusUpdated,
userStatusList: onUserStatusListUpdated,
});
if (!isUniFrameWork && isIOS && !isPC) {
addLongPressHandler();
interface IUserStatus {
statusType: number
customStatus: string
}
});
onUnmounted(() => {
TUIStore.unwatch(StoreName.CONV, {
currentConversationID: onCurrentConversationIDUpdated,
conversationList: onConversationListUpdated,
currentConversation: onCurrentConversationUpdated,
});
interface IUserStatusMap {
[userID: string]: IUserStatus
}
TUIStore.unwatch(StoreName.USER, {
displayOnlineStatus: onDisplayOnlineStatusUpdated,
userStatusList: onUserStatusListUpdated,
});
});
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'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../constant'
const isShowUserOnlineStatus = (conversation: IConversationModel): boolean => {
return (
displayOnlineStatus.value
&& conversation.type === TUIChatEngine.TYPES.CONV_C2C
);
};
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: 0,
left: undefined,
conversationHeight: undefined
})
const displayOnlineStatus = ref(false)
const userOnlineStatusMap = ref<IUserStatusMap>()
const showConversationActionMenu = (
event: Event,
conversation: IConversationModel,
index: number,
isContextMenuEvent?: boolean,
) => {
if (isContextMenuEvent) {
event.preventDefault();
if (isUniFrameWork) {
return;
let lastestOpenActionsMenuTime: number | null = null
onMounted(() => {
TUIStore.watch(StoreName.CONV, {
currentConversationID: onCurrentConversationIDUpdated,
conversationList: onConversationListUpdated,
currentConversation: onCurrentConversationUpdated
})
TUIStore.watch(StoreName.USER, {
displayOnlineStatus: onDisplayOnlineStatusUpdated,
userStatusList: onUserStatusListUpdated
})
if (!isUniFrameWork && isIOS && !isPC) {
addLongPressHandler()
}
}
currentConversation.value = conversation;
lastestOpenActionsMenuTime = Date.now();
getActionsMenuPosition(event, index);
};
})
const closeConversationActionMenu = () => {
// Prevent continuous triggering of overlay tap events
if (
lastestOpenActionsMenuTime
&& Date.now() - lastestOpenActionsMenuTime > 300
) {
currentConversation.value = undefined;
isShowOverlay.value = false;
}
};
onUnmounted(() => {
TUIStore.unwatch(StoreName.CONV, {
currentConversationID: onCurrentConversationIDUpdated,
conversationList: onConversationListUpdated,
currentConversation: onCurrentConversationUpdated
})
const getActionsMenuPosition = (event: Event, index: number) => {
if (isUniFrameWork) {
if (typeof conversationListDomRef.value === 'undefined') {
emits('getPassingRef', conversationListDomRef);
}
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;
TUIStore.unwatch(StoreName.USER, {
displayOnlineStatus: onDisplayOnlineStatusUpdated,
userStatusList: onUserStatusListUpdated
})
})
const isShowUserOnlineStatus = (
conversation: IConversationModel
): boolean => {
return (
displayOnlineStatus.value &&
conversation.type === TUIChatEngine.TYPES.CONV_C2C
)
}
const showConversationActionMenu = (
event: Event,
conversation: IConversationModel,
index: number,
isContextMenuEvent?: boolean
) => {
if (isContextMenuEvent) {
event.preventDefault()
if (isUniFrameWork) {
return
}
}).exec();
} else {
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,
};
}
isShowOverlay.value = true;
currentConversation.value = conversation
lastestOpenActionsMenuTime = Date.now()
getActionsMenuPosition(event, index)
}
};
const enterConversationChat = (conversationID: string) => {
emits('handleSwitchConversation', conversationID);
TUIConversationService.switchConversation(conversationID);
};
function addLongPressHandler() {
if (!conversationListInnerDomRef.value) {
return;
const closeConversationActionMenu = () => {
// Prevent continuous triggering of overlay tap events
if (
lastestOpenActionsMenuTime &&
Date.now() - lastestOpenActionsMenuTime > 300
) {
currentConversation.value = undefined
isShowOverlay.value = false
}
}
addLongPressListener({
element: conversationListInnerDomRef.value,
onLongPress: (event, target) => {
const index = (Array.from(conversationListInnerDomRef.value!.children) as HTMLElement[]).indexOf(target!);
showConversationActionMenu(event, conversationList.value[index], index);
},
options: {
eventDelegation: {
subSelector: '.tui-conversation-content',
const getActionsMenuPosition = (event: Event, index: number) => {
if (isUniFrameWork) {
if (typeof conversationListDomRef.value === 'undefined') {
emits('getPassingRef', conversationListDomRef)
}
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
}
})
.exec()
} else {
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
}
}
isShowOverlay.value = true
}
}
const enterConversationChat = (conversationID: string) => {
emits('handleSwitchConversation', conversationID)
TUIConversationService.switchConversation(conversationID)
}
function addLongPressHandler() {
if (!conversationListInnerDomRef.value) {
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
)
},
},
});
}
function onCurrentConversationUpdated(conversation: IConversationModel) {
currentConversation.value = conversation;
}
function onConversationListUpdated(list: IConversationModel[]) {
conversationList.value = list;
}
function onCurrentConversationIDUpdated(id: string) {
currentConversationID.value = id;
}
function onDisplayOnlineStatusUpdated(status: boolean) {
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;
},
{} as IUserStatusMap,
);
options: {
eventDelegation: {
subSelector: '.tui-conversation-content'
}
}
})
}
}
// Expose to the parent component and close actionsMenu when a sliding event is detected
defineExpose({ closeChildren: closeConversationActionMenu });
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
}
function onCurrentConversationIDUpdated(id: string) {
currentConversationID.value = id
}
function onDisplayOnlineStatusUpdated(status: boolean) {
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
},
{} as IUserStatusMap
)
}
}
// Expose to the parent component and close actionsMenu when a sliding event is detected
defineExpose({ closeChildren: closeConversationActionMenu })
</script>
<style lang="scss" scoped src="./style/index.scss"></style>
<style lang="scss" scoped>
.disable-select {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.disable-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</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
})
// const newRes = await TUIGroupService.getGroupProfile({
// groupID: e.groupId
// })
// ========= 原本逻辑
// 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: ''
// })
// }
// 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,

110
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,47 +404,63 @@
const updateProfile = async (newGroupProfile: any) => {
const { key, value } = newGroupProfile
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 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
})
})
// 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
})
}

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

@@ -1,48 +1,46 @@
<template>
<view>
<uni-popup ref="popup" type="bottom">
<view class="modal">
<view class="title">
请输入支付密码
<view class="close" @click="close">
<uni-icons type="closeempty" size="20"></uni-icons>
</view>
</view>
<view class="input">
<view
class="row"
v-for="i in 6"
:class="current == i ? 'active' : ''"
>
<view class="pwd" v-if="current > i"></view>
</view>
</view>
<view class="tip" @click="forgetPwd">忘记密码？</view>
<view class="keyboard">
<view
class="row"
v-for="i in key"
:key="i"
:class="{ 'no-i': i === -2 }"
@click="i !== -2 && input(i)"
>
<uni-icons
v-if="i == -1"
type="closeempty"
size="24"
></uni-icons>
<text v-if="i != -1">
{{ i >= 0 ? i : '' }}
</text>
</view>
<uni-popup ref="popup" type="bottom">
<view class="modal">
<view class="title">
请输入支付密码
<view class="close" @click="close">
<uni-icons type="closeempty" size="20"></uni-icons>
</view>
</view>
<view></view>
</uni-popup>
</view>
<view class="input">
<view
class="row"
v-for="i in 6"
:class="current == i ? 'active' : ''"
>
<view class="pwd" v-if="current > i"></view>
</view>
</view>
<view class="tip" @click="forgetPwd">忘记密码？</view>
<view class="keyboard">
<view
class="row"
v-for="i in key"
:key="i"
:class="{ 'no-i': i === -2 }"
@click="i !== -2 && input(i)"
>
<uni-icons
v-if="i == -1"
type="closeempty"
size="24"
></uni-icons>
<text v-if="i != -1">
{{ i >= 0 ? i : '' }}
</text>
</view>
</view>
</view>
<view></view>
</uni-popup>
</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()