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

完善分享功能 console.log(item, '==2222222=')

Browse Source
This commit is contained in:
cbb
2026-01-28 17:54:45 +08:00
parent 5d0700ee70
commit 990f2df972
12 changed files with 1368 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
View File

@@ -177,7 +177,7 @@
const props = withDefaults(defineProps<IProps>(), { const props = withDefaults(defineProps<IProps>(), {
isAudioPlayed: false, isAudioPlayed: false,
messageItem: () => ({} as IMessageModel), messageItem: () => ({}) as IMessageModel,
content: () => ({}), content: () => ({}),
blinkMessageIDList: () => [], blinkMessageIDList: () => [],
classNameList: () => [], classNameList: () => [],
@@ -411,7 +411,7 @@
} }
.content-out { .content-out {
background: #00D9C5; background: #00d9c5;
border-radius: 10px 0 10px 10px; border-radius: 10px 0 10px 10px;
} }

252
TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue
View File

@@ -3,167 +3,203 @@
v-if="hasQuoteContent" v-if="hasQuoteContent"
:class="{ :class="{
'reference-content': true, 'reference-content': true,
'reverse': message.flow === 'out', reverse: message.flow === 'out'
}" }"
@click="scrollToOriginalMessage" @click="scrollToOriginalMessage"
> >
<div <div v-if="isMessageRevoked" class="revoked-text">
v-if="isMessageRevoked"
class="revoked-text"
>
{{ TUITranslateService.t('TUIChat.引用内容已撤回') }} {{ TUITranslateService.t('TUIChat.引用内容已撤回') }}
</div> </div>
<div <div v-else class="max-double-line">
v-else {{ messageQuoteContent.messageSender }}:
class="max-double-line" {{ transformTextWithKeysToEmojiNames(messageQuoteText) }}
>
{{ messageQuoteContent.messageSender }}: {{ transformTextWithKeysToEmojiNames(messageQuoteText) }}
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, onMounted } from '../../../../../adapter-vue'; import { computed, ref, onMounted } from '../../../../../adapter-vue'
import { import {
TUIStore, TUIStore,
StoreName, StoreName,
IMessageModel, IMessageModel,
TUITranslateService, TUITranslateService
} from '@tencentcloud/chat-uikit-engine-lite'; } from '@tencentcloud/chat-uikit-engine-lite'
import { getBoundingClientRect, getScrollInfo } from '@tencentcloud/universal-api'; import {
import { isUniFrameWork } from '../../../../../utils/env'; getBoundingClientRect,
import { Toast, TOAST_TYPE } from '../../../../../components/common/Toast/index'; getScrollInfo
import { ICloudCustomData, IQuoteContent, MessageQuoteTypeEnum } from './interface.ts'; } from '@tencentcloud/universal-api'
import { transformTextWithKeysToEmojiNames } from '../../../emoji-config'; import { isUniFrameWork } from '../../../../../utils/env'
import {
Toast,
TOAST_TYPE
} from '../../../../../components/common/Toast/index'
import {
ICloudCustomData,
IQuoteContent,
MessageQuoteTypeEnum
} from './interface.ts'
import { transformTextWithKeysToEmojiNames } from '../../../emoji-config'
export interface IProps { export interface IProps {
message: IMessageModel; message: IMessageModel
}
export interface IEmits {
(e: 'scrollTo', scrollHeight: number): void;
(e: 'blinkMessage', messageID: string | undefined): void;
}
const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
message: () => ({} as IMessageModel),
});
let selfAddValue = 0;
const messageQuoteText = ref<string>('');
const hasQuoteContent = ref(false);
const messageQuoteContent = ref<IQuoteContent>({} as IQuoteContent);
const isMessageRevoked = computed<boolean>(() => {
try {
const cloudCustomData: ICloudCustomData = JSON.parse(props.message?.cloudCustomData || '{}');
const quotedMessageModel = TUIStore.getMessageModel(cloudCustomData.messageReply.messageID);
return quotedMessageModel?.isRevoked;
} catch (error) {
return true;
} }
});
onMounted(() => { export interface IEmits {
(e: 'scrollTo', scrollHeight: number): void
(e: 'blinkMessage', messageID: string | undefined): void
}
const emits = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), {
message: () => ({}) as IMessageModel
})
let selfAddValue = 0
const messageQuoteText = ref<string>('')
const hasQuoteContent = ref(false)
const messageQuoteContent = ref<IQuoteContent>({} as IQuoteContent)
const isMessageRevoked = computed<boolean>(() => {
try { try {
const cloudCustomData: ICloudCustomData = JSON.parse(props.message?.cloudCustomData || '{}'); const cloudCustomData: ICloudCustomData = JSON.parse(
hasQuoteContent.value = Boolean(cloudCustomData.messageReply); props.message?.cloudCustomData || '{}'
)
const quotedMessageModel = TUIStore.getMessageModel(
cloudCustomData.messageReply.messageID
)
return quotedMessageModel?.isRevoked
} catch (error) {
return true
}
})
onMounted(() => {
try {
const cloudCustomData: ICloudCustomData = JSON.parse(
props.message?.cloudCustomData || '{}'
)
hasQuoteContent.value = Boolean(cloudCustomData.messageReply)
if (hasQuoteContent.value) { if (hasQuoteContent.value) {
messageQuoteContent.value = cloudCustomData.messageReply; messageQuoteContent.value = cloudCustomData.messageReply
messageQuoteText.value = performQuoteContent(messageQuoteContent.value); messageQuoteText.value = performQuoteContent(
messageQuoteContent.value
)
} }
} catch (error) { } catch (error) {
hasQuoteContent.value = false; hasQuoteContent.value = false
} }
}); })
function performQuoteContent(params: IQuoteContent) {
let messageKey: string = ''
let quoteContent: string = ''
function performQuoteContent(params: IQuoteContent) {
let messageKey: string = '';
let quoteContent: string = '';
switch (params.messageType) { switch (params.messageType) {
case MessageQuoteTypeEnum.TYPE_TEXT: case MessageQuoteTypeEnum.TYPE_TEXT:
messageKey = '[文本]'; messageKey = '[文本]'
break; break
case MessageQuoteTypeEnum.TYPE_CUSTOM: case MessageQuoteTypeEnum.TYPE_CUSTOM:
messageKey = '[自定义消息]'; messageKey = '[自定义消息]'
break; break
case MessageQuoteTypeEnum.TYPE_IMAGE: case MessageQuoteTypeEnum.TYPE_IMAGE:
messageKey = '[图片]'; messageKey = '[图片]'
break; break
case MessageQuoteTypeEnum.TYPE_SOUND: case MessageQuoteTypeEnum.TYPE_SOUND:
messageKey = '[音频]'; messageKey = '[音频]'
break; break
case MessageQuoteTypeEnum.TYPE_VIDEO: case MessageQuoteTypeEnum.TYPE_VIDEO:
messageKey = '[视频]'; messageKey = '[视频]'
break; break
case MessageQuoteTypeEnum.TYPE_FILE: case MessageQuoteTypeEnum.TYPE_FILE:
messageKey = '[文件]'; messageKey = '[文件]'
break; break
case MessageQuoteTypeEnum.TYPE_LOCATION: case MessageQuoteTypeEnum.TYPE_LOCATION:
messageKey = '[地理位置]'; messageKey = '[地理位置]'
break; break
case MessageQuoteTypeEnum.TYPE_FACE: case MessageQuoteTypeEnum.TYPE_FACE:
messageKey = '[动画表情]'; messageKey = '[动画表情]'
break; break
case MessageQuoteTypeEnum.TYPE_GROUP_TIPS: case MessageQuoteTypeEnum.TYPE_GROUP_TIPS:
messageKey = '[群提示]'; messageKey = '[群提示]'
break; break
case MessageQuoteTypeEnum.TYPE_MERGER: case MessageQuoteTypeEnum.TYPE_MERGER:
messageKey = '[聊天记录]'; messageKey = '[聊天记录]'
break; break
default: default:
messageKey = '[消息]'; messageKey = '[消息]'
break; break
} }
if ( if (
[ [
MessageQuoteTypeEnum.TYPE_TEXT, MessageQuoteTypeEnum.TYPE_TEXT,
MessageQuoteTypeEnum.TYPE_MERGER, MessageQuoteTypeEnum.TYPE_MERGER
].includes(params.messageType) ].includes(params.messageType)
) { ) {
quoteContent = params.messageAbstract; quoteContent = params.messageAbstract
}
return quoteContent
? quoteContent
: TUITranslateService.t(`TUIChat.${messageKey}`)
} }
return quoteContent ? quoteContent : TUITranslateService.t(`TUIChat.${messageKey}`);
}
async function scrollToOriginalMessage() { async function scrollToOriginalMessage() {
if (isMessageRevoked.value) { if (isMessageRevoked.value) {
return; return
} }
const originMessageID = messageQuoteContent.value?.messageID; const originMessageID = messageQuoteContent.value?.messageID
const currentMessageList = TUIStore.getData(StoreName.CHAT, 'messageList'); const currentMessageList = TUIStore.getData(
const isOriginalMessageInScreen = currentMessageList.some(msg => msg.ID === originMessageID); StoreName.CHAT,
'messageList'
)
const isOriginalMessageInScreen = currentMessageList.some(
msg => msg.ID === originMessageID
)
if (originMessageID && isOriginalMessageInScreen) { if (originMessageID && isOriginalMessageInScreen) {
try { try {
const scrollViewRect = await getBoundingClientRect('#messageScrollList', 'messageList'); const scrollViewRect = await getBoundingClientRect(
const originalMessageRect = await getBoundingClientRect('#tui-' + originMessageID, 'messageList'); '#messageScrollList',
const { scrollTop } = await getScrollInfo('#messageScrollList', 'messageList'); 'messageList'
const finalScrollTop = originalMessageRect.top + scrollTop - scrollViewRect.top - (selfAddValue++ % 2); )
const isNeedScroll = originalMessageRect.top < scrollViewRect.top; const originalMessageRect = await getBoundingClientRect(
'#tui-' + originMessageID,
'messageList'
)
const { scrollTop } = await getScrollInfo(
'#messageScrollList',
'messageList'
)
const finalScrollTop =
originalMessageRect.top +
scrollTop -
scrollViewRect.top -
(selfAddValue++ % 2)
const isNeedScroll = originalMessageRect.top < scrollViewRect.top
if (!isUniFrameWork && window) { if (!isUniFrameWork && window) {
const scrollView = document.getElementById('messageScrollList'); const scrollView = document.getElementById('messageScrollList')
if (isNeedScroll && scrollView) { if (isNeedScroll && scrollView) {
scrollView.scrollTop = finalScrollTop; scrollView.scrollTop = finalScrollTop
} }
} else if (isUniFrameWork && isNeedScroll) { } else if (isUniFrameWork && isNeedScroll) {
emits('scrollTo', finalScrollTop); emits('scrollTo', finalScrollTop)
} }
emits('blinkMessage', originMessageID); emits('blinkMessage', originMessageID)
} catch (error) { } catch (error) {
console.error(error); console.error(error)
} }
} else { } else {
Toast({ Toast({
message: TUITranslateService.t('TUIChat.无法定位到原消息'), message: TUITranslateService.t('TUIChat.无法定位到原消息'),
type: TOAST_TYPE.WARNING, type: TOAST_TYPE.WARNING
}); })
}
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.reference-content { .reference-content {
max-width: 272px; max-width: 272px;
margin-top: 4px; margin-top: 4px;
margin-left: 44px; margin-left: 44px;
@@ -177,23 +213,23 @@ async function scrollToOriginalMessage() {
line-height: 16.8px; line-height: 16.8px;
cursor: pointer; cursor: pointer;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.reverse.reference-content { .reverse.reference-content {
margin-right: 44px; margin-right: 44px;
margin-left: auto; margin-left: auto;
} }
.revoked-text { .revoked-text {
color: #999; color: #999;
} }
.max-double-line { .max-double-line {
word-break: break-all; word-break: break-all;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
max-height: 33px; max-height: 33px;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
</style> </style>

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

@@ -4,10 +4,7 @@
ref="messageToolDom" ref="messageToolDom"
:class="['dialog-item', !isPC ? 'dialog-item-h5' : 'dialog-item-web']" :class="['dialog-item', !isPC ? 'dialog-item-h5' : 'dialog-item-web']"
> >
<slot <slot v-if="featureConfig.EmojiReaction" name="TUIEmojiPlugin" />
v-if="featureConfig.EmojiReaction"
name="TUIEmojiPlugin"
/>
<div <div
class="dialog-item-list" class="dialog-item-list"
:class="!isPC ? 'dialog-item-list-h5' : 'dialog-item-list-web'" :class="!isPC ? 'dialog-item-list-h5' : 'dialog-item-list-web'"
@@ -20,10 +17,7 @@
@click="getFunction(index)" @click="getFunction(index)"
@mousedown="beforeCopy(item.key)" @mousedown="beforeCopy(item.key)"
> >
<Icon <Icon :file="item.iconUrl" :size="'15px'" />
:file="item.iconUrl"
:size="'15px'"
/>
<span class="list-item-text">{{ item.text }}</span> <span class="list-item-text">{{ item.text }}</span>
</div> </div>
</template> </template>
@@ -32,118 +26,140 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import TUIChatEngine, { import TUIChatEngine, {
TUIStore, TUIStore,
StoreName, StoreName,
TUITranslateService, TUITranslateService,
IMessageModel, IMessageModel
} from '@tencentcloud/chat-uikit-engine-lite'; } from '@tencentcloud/chat-uikit-engine-lite'
import { TUIGlobal } from '@tencentcloud/universal-api'; import { TUIGlobal } from '@tencentcloud/universal-api'
import { ref, watchEffect, computed, onMounted, onUnmounted } from '../../../../adapter-vue'; import {
import Icon from '../../../common/Icon.vue'; ref,
import { Toast, TOAST_TYPE } from '../../../common/Toast/index'; watchEffect,
import delIcon from '../../../../assets/icon/msg-del.svg'; computed,
import copyIcon from '../../../../assets/icon/msg-copy.svg'; onMounted,
import quoteIcon from '../../../../assets/icon/msg-quote.svg'; onUnmounted
import revokeIcon from '../../../../assets/icon/msg-revoke.svg'; } from '../../../../adapter-vue'
import forwardIcon from '../../../../assets/icon/msg-forward.svg'; import Icon from '../../../common/Icon.vue'
import translateIcon from '../../../../assets/icon/translate.svg'; import { Toast, TOAST_TYPE } from '../../../common/Toast/index'
import multipleSelectIcon from '../../../../assets/icon/multiple-select.svg'; import delIcon from '../../../../assets/icon/msg-del.svg'
import convertText from '../../../../assets/icon/convertText_zh.svg'; import copyIcon from '../../../../assets/icon/msg-copy.svg'
import { enableSampleTaskStatus } from '../../../../utils/enableSampleTaskStatus'; import quoteIcon from '../../../../assets/icon/msg-quote.svg'
import { transformTextWithKeysToEmojiNames } from '../../emoji-config'; import revokeIcon from '../../../../assets/icon/msg-revoke.svg'
import { isH5, isPC, isUniFrameWork } from '../../../../utils/env'; import forwardIcon from '../../../../assets/icon/msg-forward.svg'
import { ITranslateInfo, IConvertInfo } from '../../../../interface'; import translateIcon from '../../../../assets/icon/translate.svg'
import TUIChatConfig from '../../config'; import multipleSelectIcon from '../../../../assets/icon/multiple-select.svg'
import AiRobotManager from '../../aiRobotManager'; import convertText from '../../../../assets/icon/convertText_zh.svg'
import { enableSampleTaskStatus } from '../../../../utils/enableSampleTaskStatus'
import { transformTextWithKeysToEmojiNames } from '../../emoji-config'
import { isH5, isPC, isUniFrameWork } from '../../../../utils/env'
import { ITranslateInfo, IConvertInfo } from '../../../../interface'
import TUIChatConfig from '../../config'
import AiRobotManager from '../../aiRobotManager'
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
// uni-app conditional compilation will not run the following code // uni-app conditional compilation will not run the following code
// #ifndef APP || APP-PLUS || MP || H5 // #ifndef APP || APP-PLUS || MP || H5
import CopyManager from '../../utils/copy'; import CopyManager from '../../utils/copy'
// #endif // #endif
interface IProps { interface IProps {
messageItem: IMessageModel; messageItem: IMessageModel
isMultipleSelectMode: boolean; isMultipleSelectMode: boolean
} }
interface IEmits { interface IEmits {
(key: 'toggleMultipleSelectMode'): void; (key: 'toggleMultipleSelectMode'): void
} }
const emits = defineEmits<IEmits>(); const emits = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), { const props = withDefaults(defineProps<IProps>(), {
isMultipleSelectMode: false, isMultipleSelectMode: false,
messageItem: () => ({}) as IMessageModel, messageItem: () => ({}) as IMessageModel
}); })
const featureConfig = TUIChatConfig.getFeatureConfig(); const featureConfig = TUIChatConfig.getFeatureConfig()
const TYPES = TUIChatEngine.TYPES; const TYPES = TUIChatEngine.TYPES
const actionItems = ref([ const actionItems = ref([
{ {
key: 'open', key: 'open',
text: TUITranslateService.t('TUIChat.打开'), text: TUITranslateService.t('TUIChat.打开'),
iconUrl: copyIcon, iconUrl: copyIcon,
renderCondition() { renderCondition() {
if (!featureConfig.DownloadFile || !message.value) return false; if (!featureConfig.DownloadFile || !message.value) return false
return isPC && (message.value?.type === TYPES.MSG_FILE return (
|| message.value.type === TYPES.MSG_VIDEO isPC &&
|| message.value.type === TYPES.MSG_IMAGE); (message.value?.type === TYPES.MSG_FILE ||
message.value.type === TYPES.MSG_VIDEO ||
message.value.type === TYPES.MSG_IMAGE)
)
}, },
clickEvent: openMessage, clickEvent: openMessage
}, },
{ {
key: 'copy', key: 'copy',
text: TUITranslateService.t('TUIChat.复制'), text: TUITranslateService.t('TUIChat.复制'),
iconUrl: copyIcon, iconUrl: copyIcon,
renderCondition() { renderCondition() {
if (!featureConfig.CopyMessage || !message.value) return false; if (!featureConfig.CopyMessage || !message.value) return false
const isAiRobotTextMessage = AiRobotManager.isRobotMessage(message.value); const isAiRobotTextMessage = AiRobotManager.isRobotMessage(
return message.value.type === TYPES.MSG_TEXT || isAiRobotTextMessage; message.value
)
return (
message.value.type === TYPES.MSG_TEXT || isAiRobotTextMessage
)
}, },
clickEvent: copyMessage, clickEvent: copyMessage
}, },
{ {
key: 'revoke', key: 'revoke',
text: TUITranslateService.t('TUIChat.撤回'), text: TUITranslateService.t('TUIChat.撤回'),
iconUrl: revokeIcon, iconUrl: revokeIcon,
renderCondition() { renderCondition() {
if (!featureConfig.RevokeMessage || !message.value) return false; if (!featureConfig.RevokeMessage || !message.value) return false
return message.value.flow === 'out' && message.value.status === 'success'; if (isRedEnvelopeMessage(message.value)) return false
return (
message.value.flow === 'out' &&
message.value.status === 'success'
)
}, },
clickEvent: revokeMessage, clickEvent: revokeMessage
}, },
{ {
key: 'delete', key: 'delete',
text: TUITranslateService.t('TUIChat.删除'), text: TUITranslateService.t('TUIChat.删除'),
iconUrl: delIcon, iconUrl: delIcon,
renderCondition() { renderCondition() {
if (!featureConfig.DeleteMessage || !message.value) return false; if (!featureConfig.DeleteMessage || !message.value) return false
return message.value.status === 'success'; return message.value.status === 'success'
}, },
clickEvent: deleteMessage, clickEvent: deleteMessage
}, },
{ {
key: 'forward', key: 'forward',
text: TUITranslateService.t('TUIChat.转发'), text: TUITranslateService.t('TUIChat.转发'),
iconUrl: forwardIcon, iconUrl: forwardIcon,
renderCondition() { renderCondition() {
if (!featureConfig.ForwardMessage || !message.value) return false; if (!featureConfig.ForwardMessage || !message.value) return false
return message.value.status === 'success'; if (isRedEnvelopeMessage(message.value)) return false
return message.value.status === 'success'
}, },
clickEvent: forwardSingleMessage, clickEvent: forwardSingleMessage
}, },
{ {
key: 'quote', key: 'quote',
text: TUITranslateService.t('TUIChat.引用'), text: TUITranslateService.t('TUIChat.引用'),
iconUrl: quoteIcon, iconUrl: quoteIcon,
renderCondition() { renderCondition() {
if (!featureConfig.QuoteMessage || !message.value) return false; if (!featureConfig.QuoteMessage || !message.value) return false
const _message = TUIStore.getMessageModel(message.value.ID); const _message = TUIStore.getMessageModel(message.value.ID)
return message.value.status === 'success' && !_message.getSignalingInfo(); return (
message.value.status === 'success' &&
!_message.getSignalingInfo()
)
}, },
clickEvent: quoteMessage, clickEvent: quoteMessage
}, },
{ {
key: 'translate', key: 'translate',
@@ -151,10 +167,14 @@ const actionItems = ref([
visible: false, visible: false,
iconUrl: translateIcon, iconUrl: translateIcon,
renderCondition() { renderCondition() {
if (!featureConfig.TranslateMessage || !message.value) return false; if (!featureConfig.TranslateMessage || !message.value)
return message.value.status === 'success' && message.value.type === TYPES.MSG_TEXT; return false
return (
message.value.status === 'success' &&
message.value.type === TYPES.MSG_TEXT
)
}, },
clickEvent: translateMessage, clickEvent: translateMessage
}, },
{ {
key: 'convert', key: 'convert',
@@ -162,241 +182,298 @@ const actionItems = ref([
visible: false, visible: false,
iconUrl: convertText, iconUrl: convertText,
renderCondition() { renderCondition() {
if (!featureConfig.VoiceToText || !message.value) return false; if (!featureConfig.VoiceToText || !message.value) return false
return message.value.status === 'success' && message.value.type === TYPES.MSG_AUDIO; return (
message.value.status === 'success' &&
message.value.type === TYPES.MSG_AUDIO
)
}, },
clickEvent: convertVoiceToText, clickEvent: convertVoiceToText
}, },
{ {
key: 'multi-select', key: 'multi-select',
text: TUITranslateService.t('TUIChat.多选'), text: TUITranslateService.t('TUIChat.多选'),
iconUrl: multipleSelectIcon, iconUrl: multipleSelectIcon,
renderCondition() { renderCondition() {
if (!featureConfig.MultiSelection || !message.value) return false; if (!featureConfig.MultiSelection || !message.value) return false
return message.value.status === 'success'; return message.value.status === 'success'
}, },
clickEvent: multipleSelectMessage, clickEvent: multipleSelectMessage
}, }
]); ])
const message = ref<IMessageModel>(); const message = ref<IMessageModel>()
const messageToolDom = ref<HTMLElement>(); const messageToolDom = ref<HTMLElement>()
onMounted(() => { onMounted(() => {
TUIStore.watch(StoreName.CHAT, { TUIStore.watch(StoreName.CHAT, {
translateTextInfo: onMessageTranslationInfoUpdated, translateTextInfo: onMessageTranslationInfoUpdated,
voiceToTextInfo: onMessageConvertInfoUpdated, voiceToTextInfo: onMessageConvertInfoUpdated
}); })
}); })
onUnmounted(() => { onUnmounted(() => {
TUIStore.unwatch(StoreName.CHAT, { TUIStore.unwatch(StoreName.CHAT, {
translateTextInfo: onMessageTranslationInfoUpdated, translateTextInfo: onMessageTranslationInfoUpdated,
voiceToTextInfo: onMessageConvertInfoUpdated, voiceToTextInfo: onMessageConvertInfoUpdated
}); })
}); })
watchEffect(() => { watchEffect(() => {
message.value = TUIStore.getMessageModel(props.messageItem.ID); message.value = TUIStore.getMessageModel(props.messageItem.ID)
}); })
const isAllActionItemInvalid = computed(() => { const isAllActionItemInvalid = computed(() => {
for (let i = 0; i < actionItems.value.length; ++i) { for (let i = 0; i < actionItems.value.length; ++i) {
if (actionItems.value[i].renderCondition()) { if (actionItems.value[i].renderCondition()) {
return false; return false
} }
} }
return true; return true
}); })
function getFunction(index: number) { function getFunction(index: number) {
// Compatible with Vue2 and WeChat Mini Program syntax, dynamic binding is not allowed. // Compatible with Vue2 and WeChat Mini Program syntax, dynamic binding is not allowed.
actionItems.value[index].clickEvent(); actionItems.value[index].clickEvent()
} }
function openMessage() { function openMessage() {
let url = ''; let url = ''
switch (message.value?.type) { switch (message.value?.type) {
case TUIChatEngine.TYPES.MSG_FILE: case TUIChatEngine.TYPES.MSG_FILE:
url = message.value.payload.fileUrl; url = message.value.payload.fileUrl
break; break
case TUIChatEngine.TYPES.MSG_VIDEO: case TUIChatEngine.TYPES.MSG_VIDEO:
url = message.value.payload.remoteVideoUrl; url = message.value.payload.remoteVideoUrl
break; break
case TUIChatEngine.TYPES.MSG_IMAGE: case TUIChatEngine.TYPES.MSG_IMAGE:
url = message.value.payload.imageInfoArray[0].url; url = message.value.payload.imageInfoArray[0].url
break; break
}
window?.open(url, '_blank')
} }
window?.open(url, '_blank');
}
function revokeMessage() { function revokeMessage() {
if (!message.value) return; if (!message.value) return
const messageModel = TUIStore.getMessageModel(message.value.ID); const messageModel = TUIStore.getMessageModel(message.value.ID)
messageModel messageModel
.revokeMessage() .revokeMessage()
.then(() => { .then(() => {
enableSampleTaskStatus('revokeMessage'); enableSampleTaskStatus('revokeMessage')
}) })
.catch((error: any) => { .catch((error: any) => {
// The message cannot be recalled after the time limit was reached, which is 2 minutes by default. // The message cannot be recalled after the time limit was reached, which is 2 minutes by default.
if (error.code === 20016 || error.code === 10031) { if (error.code === 20016 || error.code === 10031) {
const message = TUITranslateService.t('TUIChat.已过撤回时限'); const message = TUITranslateService.t('TUIChat.已过撤回时限')
Toast({ Toast({
message, message,
type: TOAST_TYPE.ERROR, type: TOAST_TYPE.ERROR
}); })
}
})
} }
});
}
function deleteMessage() { function deleteMessage() {
if (!message.value) return; if (!message.value) return
if (AiRobotManager.isStreamingMessage(message.value as IMessageModel)) { if (
const message = TUITranslateService.t('TUIChat.回答输出中，请稍后或点击停止回答'); AiRobotManager.isStreamingMessage(message.value as IMessageModel)
) {
const message = TUITranslateService.t(
'TUIChat.回答输出中，请稍后或点击停止回答'
)
return Toast({ return Toast({
message, message,
type: TOAST_TYPE.NORMAL, type: TOAST_TYPE.NORMAL
}); })
}
const messageModel = TUIStore.getMessageModel(message.value.ID)
messageModel.deleteMessage()
} }
const messageModel = TUIStore.getMessageModel(message.value.ID);
messageModel.deleteMessage();
}
async function copyMessage() { async function copyMessage() {
if (AiRobotManager.isStreamingMessage(message.value as IMessageModel)) { if (
const message = TUITranslateService.t('TUIChat.回答输出中，请稍后或点击停止回答'); AiRobotManager.isStreamingMessage(message.value as IMessageModel)
) {
const message = TUITranslateService.t(
'TUIChat.回答输出中，请稍后或点击停止回答'
)
return Toast({ return Toast({
message, message,
type: TOAST_TYPE.NORMAL, type: TOAST_TYPE.NORMAL
}); })
} }
const isAiRobotText = AiRobotManager.getRobotRenderText(message.value as IMessageModel); const isAiRobotText = AiRobotManager.getRobotRenderText(
const text = isAiRobotText ? isAiRobotText : message.value?.payload.text; message.value as IMessageModel
)
const text = isAiRobotText
? isAiRobotText
: message.value?.payload.text
if (isUniFrameWork) { if (isUniFrameWork) {
TUIGlobal?.setClipboardData({ TUIGlobal?.setClipboardData({
data: transformTextWithKeysToEmojiNames(text), data: transformTextWithKeysToEmojiNames(text)
}); })
} else { } else {
// uni-app conditional compilation will not run the following code // uni-app conditional compilation will not run the following code
// #ifndef APP || APP-PLUS || MP || H5 // #ifndef APP || APP-PLUS || MP || H5
CopyManager.copySelection(text); CopyManager.copySelection(text)
// #endif // #endif
} }
} }
function beforeCopy(key: string) { function beforeCopy(key: string) {
// only pc support copy selection or copy full message text // only pc support copy selection or copy full message text
// uni-app and h5 only support copy full message text // uni-app and h5 only support copy full message text
if (key !== 'copy' || isH5) { if (key !== 'copy' || isH5) {
return; return
} }
// uni-app conditional compilation will not run the following code // uni-app conditional compilation will not run the following code
// #ifndef APP || APP-PLUS || MP || H5 // #ifndef APP || APP-PLUS || MP || H5
CopyManager.saveCurrentSelection(); CopyManager.saveCurrentSelection()
// #endif // #endif
} }
function forwardSingleMessage() { function forwardSingleMessage() {
if (!message.value) return; if (!message.value) return
if (AiRobotManager.isStreamingMessage(message.value as IMessageModel)) { if (
const message = TUITranslateService.t('TUIChat.回答输出中，请稍后或点击停止回答'); AiRobotManager.isStreamingMessage(message.value as IMessageModel)
) {
const message = TUITranslateService.t(
'TUIChat.回答输出中，请稍后或点击停止回答'
)
return Toast({ return Toast({
message, message,
type: TOAST_TYPE.NORMAL, type: TOAST_TYPE.NORMAL
}); })
}
TUIStore.update(
StoreName.CUSTOM,
'singleForwardMessageID',
message.value.ID
)
} }
TUIStore.update(StoreName.CUSTOM, 'singleForwardMessageID', message.value.ID);
}
function quoteMessage() { function quoteMessage() {
if (!message.value) return; if (!message.value) return
message.value.quoteMessage(); message.value.quoteMessage()
} }
function translateMessage() { function translateMessage() {
const enable = TUIStore.getData(StoreName.APP, 'enabledTranslationPlugin'); const enable = TUIStore.getData(
StoreName.APP,
'enabledTranslationPlugin'
)
if (!enable) { if (!enable) {
Toast({ Toast({
message: TUITranslateService.t('TUIChat.请开通翻译功能'), message: TUITranslateService.t('TUIChat.请开通翻译功能'),
type: TOAST_TYPE.WARNING, type: TOAST_TYPE.WARNING
}); })
return; return
} }
if (!message.value) return; if (!message.value) return
const index = actionItems.value.findIndex(item => item.key === 'translate'); const index = actionItems.value.findIndex(
item => item.key === 'translate'
)
TUIStore.update(StoreName.CHAT, 'translateTextInfo', { TUIStore.update(StoreName.CHAT, 'translateTextInfo', {
conversationID: message.value.conversationID, conversationID: message.value.conversationID,
messageID: message.value.ID, messageID: message.value.ID,
visible: !actionItems.value[index].visible, visible: !actionItems.value[index].visible
}); })
} }
function convertVoiceToText() { function convertVoiceToText() {
const enable = TUIStore.getData(StoreName.APP, 'enabledVoiceToText'); const enable = TUIStore.getData(StoreName.APP, 'enabledVoiceToText')
if (!enable) { if (!enable) {
Toast({ Toast({
message: TUITranslateService.t('TUIChat.请开通语音转文字功能'), message: TUITranslateService.t('TUIChat.请开通语音转文字功能'),
type: '', type: ''
}); })
return; return
} }
if (!message.value) return; if (!message.value) return
const index = actionItems.value.findIndex(item => item.key === 'convert'); const index = actionItems.value.findIndex(
item => item.key === 'convert'
)
TUIStore.update(StoreName.CHAT, 'voiceToTextInfo', { TUIStore.update(StoreName.CHAT, 'voiceToTextInfo', {
conversationID: message.value.conversationID, conversationID: message.value.conversationID,
messageID: message.value.ID, messageID: message.value.ID,
visible: !actionItems.value[index].visible, visible: !actionItems.value[index].visible
}); })
} }
function multipleSelectMessage() { function multipleSelectMessage() {
emits('toggleMultipleSelectMode'); emits('toggleMultipleSelectMode')
} }
function onMessageTranslationInfoUpdated(info: Map<string, ITranslateInfo[]>) { /** 判断是否是红包消息 */
if (info === undefined) return; const isRedEnvelopeMessage = (message: IMessageModel) => {
const translationInfoList = info.get(props.messageItem.conversationID) || []; const modelData = message?.payload?.data
const idx = actionItems.value.findIndex(item => item.key === 'translate'); // 判断是否是红包消息
if (
modelData &&
JSON.parse(modelData)?.businessID ===
CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
) {
return true
}
}
function onMessageTranslationInfoUpdated(
info: Map<string, ITranslateInfo[]>
) {
if (info === undefined) return
const translationInfoList =
info.get(props.messageItem.conversationID) || []
const idx = actionItems.value.findIndex(
item => item.key === 'translate'
)
for (let i = 0; i < translationInfoList.length; ++i) { for (let i = 0; i < translationInfoList.length; ++i) {
const { messageID, visible } = translationInfoList[i]; const { messageID, visible } = translationInfoList[i]
if (messageID === props.messageItem.ID) { if (messageID === props.messageItem.ID) {
actionItems.value[idx].text = TUITranslateService.t(visible ? 'TUIChat.隐藏' : 'TUIChat.翻译'); actionItems.value[idx].text = TUITranslateService.t(
actionItems.value[idx].visible = !!visible; visible ? 'TUIChat.隐藏' : 'TUIChat.翻译'
return; )
actionItems.value[idx].visible = !!visible
return
} }
} }
actionItems.value[idx].text = TUITranslateService.t('TUIChat.翻译'); actionItems.value[idx].text = TUITranslateService.t('TUIChat.翻译')
} }
function onMessageConvertInfoUpdated(info: Map<string, IConvertInfo[]>) { function onMessageConvertInfoUpdated(
if (info === undefined) return; info: Map<string, IConvertInfo[]>
const convertInfoList = info.get(props.messageItem.conversationID) || []; ) {
const idx = actionItems.value.findIndex(item => item.key === 'convert'); if (info === undefined) return
const convertInfoList =
info.get(props.messageItem.conversationID) || []
const idx = actionItems.value.findIndex(
item => item.key === 'convert'
)
for (let i = 0; i < convertInfoList.length; ++i) { for (let i = 0; i < convertInfoList.length; ++i) {
const { messageID, visible } = convertInfoList[i]; const { messageID, visible } = convertInfoList[i]
if (messageID === props.messageItem.ID) { if (messageID === props.messageItem.ID) {
actionItems.value[idx].text = TUITranslateService.t(visible ? 'TUIChat.隐藏' : 'TUIChat.转文字'); actionItems.value[idx].text = TUITranslateService.t(
actionItems.value[idx].visible = !!visible; visible ? 'TUIChat.隐藏' : 'TUIChat.转文字'
return; )
actionItems.value[idx].visible = !!visible
return
} }
} }
actionItems.value[idx].text = TUITranslateService.t('TUIChat.转文字'); actionItems.value[idx].text = TUITranslateService.t('TUIChat.转文字')
} }
defineExpose({ defineExpose({
messageToolDom, messageToolDom
}); })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../../assets/styles/common"; @import '../../../../assets/styles/common';
.dialog-item-web { .dialog-item-web {
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
@@ -423,9 +500,9 @@ defineExpose({
} }
} }
} }
} }
.dialog-item-h5 { .dialog-item-h5 {
@extend .dialog-item-web; @extend .dialog-item-web;
padding: 0; padding: 0;
@@ -449,5 +526,5 @@ defineExpose({
} }
} }
} }
} }
</style> </style>

161
TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue
View File

@@ -1,5 +1,10 @@
<template> <template>
<div :class="['tui-contact-list-card', !isPC && 'tui-contact-list-card-h5']"> <div
:class="[
'tui-contact-list-card',
!isPC && 'tui-contact-list-card-h5'
]"
>
<div class="tui-contact-list-card-left"> <div class="tui-contact-list-card-left">
<Avatar <Avatar
useSkeletonAnimation useSkeletonAnimation
@@ -11,7 +16,7 @@
:class="{ :class="{
'online-status': true, 'online-status': true,
'online-status-online': isOnline, 'online-status-online': isOnline,
'online-status-offline': !isOnline, 'online-status-offline': !isOnline
}" }"
/> />
</div> </div>
@@ -41,119 +46,147 @@
v-if="showApplicationStatus.style === 'text'" v-if="showApplicationStatus.style === 'text'"
class="tui-contact-list-card-right-application-text" class="tui-contact-list-card-right-application-text"
> >
{{ TUITranslateService.t(`TUIContact.${showApplicationStatus.label}`) }} {{
TUITranslateService.t(
`TUIContact.${showApplicationStatus.label}`
)
}}
</div> </div>
<button <button
v-else-if="showApplicationStatus.style === 'button'" v-else-if="showApplicationStatus.style === 'button'"
class="tui-contact-list-card-right-application-button" class="tui-contact-list-card-right-application-button"
@click.stop="showApplicationStatus.onClick" @click.stop="showApplicationStatus.onClick"
> >
{{ TUITranslateService.t(`TUIContact.${showApplicationStatus.label}`) }} {{
TUITranslateService.t(
`TUIContact.${showApplicationStatus.label}`
)
}}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, withDefaults, inject, watch, ref, Ref } from '../../../../adapter-vue'; import {
import TUIChatEngine, { computed,
withDefaults,
inject,
watch,
ref,
Ref
} from '../../../../adapter-vue'
import TUIChatEngine, {
TUITranslateService, TUITranslateService,
IGroupModel, IGroupModel,
FriendApplication, FriendApplication,
Friend, Friend
} from '@tencentcloud/chat-uikit-engine-lite'; } from '@tencentcloud/chat-uikit-engine-lite'
import { IContactInfoType, IUserStatus } from '../../../../interface'; import { IContactInfoType, IUserStatus } from '../../../../interface'
import Avatar from '../../../common/Avatar/index.vue'; import Avatar from '../../../common/Avatar/index.vue'
import { generateAvatar, generateName, acceptFriendApplication } from '../../utils'; import {
import { isPC } from '../../../../utils/env'; generateAvatar,
generateName,
acceptFriendApplication
} from '../../utils'
import { isPC } from '../../../../utils/env'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
item: IContactInfoType; item: IContactInfoType
displayOnlineStatus?: boolean; displayOnlineStatus?: boolean
}>(), }>(),
{ {
item: () => ({} as IContactInfoType), item: () => ({}) as IContactInfoType,
displayOnlineStatus: false, displayOnlineStatus: false
}, }
); )
const userOnlineStatusMap = inject<Ref<Map<string, IUserStatus>>>('userOnlineStatusMap'); const userOnlineStatusMap = inject<Ref<Map<string, IUserStatus>>>(
const isOnline = ref<boolean>(false); 'userOnlineStatusMap'
)
const isOnline = ref<boolean>(false)
const groupType = { const groupType = {
[TUIChatEngine.TYPES.GRP_WORK]: 'Work', [TUIChatEngine.TYPES.GRP_WORK]: 'Work',
[TUIChatEngine.TYPES.GRP_AVCHATROOM]: 'AVChatRoom', [TUIChatEngine.TYPES.GRP_AVCHATROOM]: 'AVChatRoom',
[TUIChatEngine.TYPES.GRP_PUBLIC]: 'Public', [TUIChatEngine.TYPES.GRP_PUBLIC]: 'Public',
[TUIChatEngine.TYPES.GRP_MEETING]: 'Meeting', [TUIChatEngine.TYPES.GRP_MEETING]: 'Meeting',
[TUIChatEngine.TYPES.GRP_COMMUNITY]: 'Community', [TUIChatEngine.TYPES.GRP_COMMUNITY]: 'Community'
}; }
const otherContentForSow = computed((): string => { const otherContentForSow = computed((): string => {
let content = ''; let content = ''
if ( if (
(props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME (props.item as FriendApplication)?.type ===
|| (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME ||
(props.item as FriendApplication)?.type ===
TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
) { ) {
content = (props.item as FriendApplication)?.wording || ''; content = (props.item as FriendApplication)?.wording || ''
} else if ((props.item as IGroupModel)?.groupID) { } else if ((props.item as IGroupModel)?.groupID) {
content = `ID:${(props.item as IGroupModel)?.groupID}`; content = `ID:${(props.item as IGroupModel)?.groupID}`
} }
return content; return content
}); })
const groupTypeForShow = computed((): string => { const groupTypeForShow = computed((): string => {
let type = ''; let type = ''
if ((props.item as IGroupModel)?.groupID) { if ((props.item as IGroupModel)?.groupID) {
type = groupType[(props.item as IGroupModel)?.type]; type = groupType[(props.item as IGroupModel)?.type]
} }
return type; return type
}); })
const showApplicationStatus = computed(() => { const showApplicationStatus = computed(() => {
if ( if (
(props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME (props.item as FriendApplication)?.type ===
TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
) { ) {
return { return {
style: 'text', style: 'text',
label: '等待验证', label: '等待验证'
}; }
} else if ( } else if (
(props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME (props.item as FriendApplication)?.type ===
TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
) { ) {
return { return {
style: 'button', style: 'button',
label: '同意', label: '同意',
onClick: () => { onClick: () => {
acceptFriendApplication((props.item as FriendApplication)?.userID); acceptFriendApplication(
}, (props.item as FriendApplication)?.userID
}; )
} }
return false; }
}); }
return false
})
watch( watch(
() => userOnlineStatusMap?.value, () => userOnlineStatusMap?.value,
() => { () => {
isOnline.value = getOnlineStatus(); isOnline.value = getOnlineStatus()
}, },
{ {
immediate: true, immediate: true,
deep: true, deep: true
}, }
); )
function getOnlineStatus(): boolean { function getOnlineStatus(): boolean {
return !!( return !!(
props.displayOnlineStatus props.displayOnlineStatus &&
&& userOnlineStatusMap?.value userOnlineStatusMap?.value &&
&& (props.item as Friend)?.userID (props.item as Friend)?.userID &&
&& userOnlineStatusMap.value?.[(props.item as Friend).userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE userOnlineStatusMap.value?.[(props.item as Friend).userID]
); ?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE
} )
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tui-contact-list-card { .tui-contact-list-card {
padding: 10px 0; padding: 10rpx 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -244,9 +277,9 @@ function getOnlineStatus(): boolean {
} }
} }
} }
} }
.tui-contact-list-card-h5 { .tui-contact-list-card-h5 {
cursor: none !important; cursor: none !important;
} }
</style> </style>

1
TUIKit/components/TUIContact/contact-list/index.vue
View File

@@ -254,7 +254,6 @@
} else { } else {
currentContactListKey.value = key currentContactListKey.value = key
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', key) TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', key)
if (key === 'friendApplicationList') { if (key === 'friendApplicationList') {
TUIFriendService.setFriendApplicationRead() TUIFriendService.setFriendApplicationRead()
} }

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

@@ -365,6 +365,7 @@
} }
return false return false
} }
/** 红包文案 */ /** 红包文案 */
const redEnvelopeText = (item: IConversationModel) => { const redEnvelopeText = (item: IConversationModel) => {
const payload = JSON.parse(item.lastMessage?.payload?.data) const payload = JSON.parse(item.lastMessage?.payload?.data)
@@ -379,12 +380,22 @@
/** 是否最开始创建群聊 */ /** 是否最开始创建群聊 */
const isFirstCreateGroup = (item: IConversationModel) => { const isFirstCreateGroup = (item: IConversationModel) => {
// 打印
if (item.type === 'GROUP' && item?.lastMessage?.payload?.data) { if (item.type === 'GROUP' && item?.lastMessage?.payload?.data) {
const data = JSON.parse(item?.lastMessage?.payload?.data) const data = JSON.parse(item?.lastMessage?.payload?.data)
return data.content === 'Create Group' return data.content === 'Create Group'
? `${item.getLastMessage('text')?.split(':')[0]}:创建群聊` ? `${item.getLastMessage('text')?.split(':')[0]}:创建群聊`
: '' : ''
} }
if (item?.lastMessage?.payload?.data) {
const data = JSON.parse(item?.lastMessage?.payload?.data)
if (data.businessID === CHAT_MSG_CUSTOM_TYPE.GOODS) {
console.log(item, '==2222222=')
return `自定义数据--`
}
return ''
}
return '' return ''
} }

6
TUIKit/components/common/Avatar/index.vue
View File

@@ -108,6 +108,7 @@
} }
.avatar-container { .avatar-container {
flex-shrink: 0;
position: relative; position: relative;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -121,7 +122,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #ececec; background-color: #ececec;
transition: opacity 0.3s, background-color 0.1s ease-out; transition:
opacity 0.3s,
background-color 0.1s ease-out;
&.skeleton-animation { &.skeleton-animation {
animation: breath 2s linear 0.3s infinite; animation: breath 2s linear 0.3s infinite;
@@ -134,6 +137,7 @@
} }
.avatar-image { .avatar-image {
flex-shrink: 0;
width: 80rpx !important; width: 80rpx !important;
height: 80rpx !important; height: 80rpx !important;
border-radius: 80rpx !important; border-radius: 80rpx !important;

6
TUIKit/constant.ts
View File

@@ -19,7 +19,11 @@ export const CHAT_MSG_CUSTOM_TYPE = {
CALL: 1, CALL: 1,
ORDER: "order", ORDER: "order",
/** 红包 */ /** 红包 */
RED_ENVELOPE: "redEnvelope" RED_ENVELOPE: "redEnvelope",
/** 商品详情 */
GOODS: "goods",
/** 直播 */
LIVE: "live"
}; };
export const DIALOG_CONTENT = { export const DIALOG_CONTENT = {

449
components/share-popup/share-popup.vue Normal file
View File

@@ -0,0 +1,449 @@
<script setup>
import TUIChatEngine, {
TUIStore,
StoreName,
TUIChatService
} from '@tencentcloud/chat-uikit-engine-lite'
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useUI } from '../../utils/use-ui'
import { CHAT_MSG_CUSTOM_TYPE } from '../../TUIKit/constant'
import { isEnabledMessageReadReceiptGlobal } from '../../TUIKit/components/TUIChat/utils/utils'
const { showLoading, hideLoading, showToast, showDialog } = useUI()
const isShow = defineModel('show', {
type: Boolean,
default: false
})
const props = defineProps({
/** 分享类型: 1 直播 2 商品详情*/
type: {
type: String,
default: '2'
},
id: {
type: String,
default: ''
},
/** 分享文本 */
text: {
type: String,
default: ''
},
/** 封面图 */
cover: {
type: String,
default: ''
}
})
const refPopup = ref(null)
/** 多选状态 */
const isMultiple = ref(false)
/** 群列表 */
const groupList = ref([])
/** 好友列表 */
const friendList = ref([])
/** 选中数据 */
const selectedList = ref([])
watch(
() => isShow.value,
v => {
if (v) {
refPopup.value.open()
} else {
refPopup.value.close()
selectedList.value = []
isMultiple.value = false
}
}
)
const onShow = v => {
isShow.value = v.show
}
/** 获取好友列表 */
const onFriendListUpdated = list => {
console.log('好友列表：', list)
friendList.value = list
}
/** 获取群列表 */
const onGroupListUpdated = list => {
console.log('群列表：', list)
groupList.value = list
}
/** 判断多选状态 */
const multipleShow = id => {
return selectedList.value.some(item => item.id === id)
}
/**
* 选项
* @param item
* @param state 1 群聊 0 好友
*/
const onSelect = (item, state) => {
let data = {}
if (state) {
data = {
id: `GROUP${item.groupID}`,
name: item.name,
avatar: item.avatar
}
} else {
data = {
id: `C2C${item.profile.userID}`,
name: item.profile.nick || item.profile.userID,
avatar: item.profile.avatar
}
}
if (isMultiple.value) {
if (multipleShow(data.id)) {
selectedList.value = selectedList.value.filter(
item => item.id !== data.id
)
} else {
if (selectedList.value.length >= 9) {
showDialog('提示', '最多选择9个', false)
return
}
selectedList.value.push(data)
}
} else {
onConfirm(0, data)
}
}
/**
* 确定分享
* @param state 1 多选 0 单选
* @param data
*/
const onConfirm = async (state, item) => {
if (state) {
console.log('多选分享?')
} else {
// props
const show = await showDialog(
'提示',
`确定分享${props.type == 1 ? '直播间' : '商品'}吗？`
)
if (!show) {
return
}
console.log('单选数据', item.id)
// 字符串匹配 GROUP C2C
let to = ''
let isGroup = false
if (item.id.includes('GROUP')) {
// 分割 GROUP
to = item.id.split('GROUP')[1]
isGroup = true
} else {
to = item.id.split('C2C')[1]
isGroup = false
}
const payload = {
data: JSON.stringify({
id: props.id,
businessID: CHAT_MSG_CUSTOM_TYPE.GOODS,
title: props.text,
cover: props.cover
}),
description: props.text,
extension: props.text
}
const options = {
to,
payload,
conversationType: isGroup
? TUIChatEngine.TYPES.CONV_GROUP
: TUIChatEngine.TYPES.CONV_C2C,
needReadReceipt: isEnabledMessageReadReceiptGlobal()
}
showLoading()
await TUIChatService.sendCustomMessage(options)
hideLoading()
await showToast('分享成功', 'success')
isShow.value = false
console.log(options)
}
}
onMounted(() => {
TUIStore.watch(StoreName.GRP, {
groupList: onGroupListUpdated
})
TUIStore.watch(StoreName.FRIEND, {
friendList: onFriendListUpdated
})
})
onUnmounted(() => {
TUIStore.unwatch(StoreName.GRP, {
groupList: onGroupListUpdated
})
TUIStore.unwatch(StoreName.FRIEND, {
friendList: onFriendListUpdated
})
})
</script>
<template>
<uni-popup
ref="refPopup"
type="bottom"
background-color="#ffffff"
borderRadius="16rpx 16rpx 0 0"
@change="onShow"
>
<!-- 顶部标题 -->
<view class="top-box">
<text
class="close"
@click="
() => {
if (!isMultiple) {
isShow = false
} else {
selectedList = []
isMultiple = false
}
}
"
>
{{ isMultiple ? '关闭' : '取消' }}
</text>
<text class="text">选择聊天</text>
<text
v-if="isMultiple"
:class="{ 'on-btn': !selectedList.length > 0 }"
class="multiple-btn"
@click="onConfirm(1)"
>
{{
`下一步 ${selectedList.length > 0 ? selectedList.length : ''}`
}}
</text>
<text v-else class="multiple" @click="isMultiple = true">多选</text>
</view>
<!-- 选项数据 -->
<view v-if="selectedList.length > 0" class="option-box">
<view
v-for="(item, index) in selectedList"
:key="index"
class="option-card"
>
<image
v-if="item.avatar"
:src="item.avatar"
mode="aspectFill"
class="avatar"
></image>
<view v-else class="avatar">
<uni-icons type="contact-filled" size="98rpx"></uni-icons>
</view>
</view>
</view>
<!-- 列表 -->
<view class="list-box">
<!-- 群聊列表 ================ -->
<view
v-for="(item, index) in groupList"
:key="index"
class="item-box"
@click="onSelect(item, 1)"
>
<view v-if="isMultiple" class="box">
<uni-icons
v-if="!multipleShow(`GROUP${item.groupID}`)"
type="circle"
color="#b7b7b7"
size="30"
></uni-icons>
<uni-icons
v-else
type="checkbox-filled"
color="#00d993"
size="30"
></uni-icons>
</view>
<view class="card-box">
<image
v-if="item.avatar"
:src="item.avatar"
mode="aspectFill"
class="head-img"
></image>
<view v-else class="head-img">
<uni-icons type="contact-filled" size="108rpx"></uni-icons>
</view>
<view class="right-box">
<text class="name">
{{ item.name }}
</text>
<text class="num">({{ item.memberCount }}人)</text>
</view>
</view>
</view>
<!-- 好友列表================== -->
<view
v-for="(item, index) in friendList"
:key="index"
class="item-box"
@click="onSelect(item, 0)"
>
<view v-if="isMultiple" class="box">
<uni-icons
v-if="!multipleShow(`C2C${item.profile.userID}`)"
type="circle"
color="#b7b7b7"
size="30"
></uni-icons>
<uni-icons
v-else
type="checkbox-filled"
color="#00d993"
size="30"
></uni-icons>
</view>
<view class="card-box">
<image
v-if="item.profile.avatar"
:src="item.profile.avatar"
mode="aspectFill"
class="head-img"
></image>
<view v-else class="head-img">
<uni-icons type="contact-filled" size="108rpx"></uni-icons>
</view>
<view class="right-box">
<text class="name">
{{ item.profile.nick || item.profile.userID }}
</text>
</view>
</view>
</view>
</view>
</uni-popup>
</template>
<style lang="scss" scoped>
.top-box {
padding: 32rpx 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
color: #333333;
font-weight: 400;
border-bottom: 2rpx solid #f2f2f2;
box-sizing: border-box;
position: relative;
.close {
font-size: 28rpx;
}
.multiple {
font-size: 28rpx;
}
.multiple-btn {
position: absolute;
right: 24rpx;
font-size: 28rpx;
color: #ffffff;
background: #00d993;
border-radius: 8rpx;
padding: 4rpx 12rpx;
}
.on-btn {
background: #b7b7b7;
}
.text {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 32rpx;
font-weight: 500;
}
}
.list-box {
padding: 22rpx 24rpx;
height: 46vh;
overflow-y: auto;
.item-box + .item-box {
margin-top: 12rpx;
padding-top: 12rpx;
border-top: 2rpx solid #f2f2f2;
}
.item-box {
display: flex;
align-items: center;
.box {
margin-right: 10rpx;
}
.card-box {
display: flex;
align-items: center;
.head-img {
width: 80rpx;
height: 80rpx;
border-radius: 80rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 16rpx;
}
.right-box {
display: flex;
.name {
flex-shrink: 0;
max-width: 340rpx;
font-size: 28rpx;
font-weight: 500;
// 显示省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.num {
margin-left: 8rpx;
font-size: 24rpx;
color: #999999;
}
}
}
}
}
.option-box {
padding: 20rpx 24rpx;
border-bottom: 2rpx solid #f2f2f2;
// 超过宽度左右滑动
overflow-x: auto;
display: flex;
align-items: center;
.option-card + .option-card {
margin-left: 14rpx;
}
.option-card {
.avatar {
flex-shrink: 0;
width: 70rpx;
height: 70rpx;
border-radius: 70rpx;
display: flex;
justify-content: center;
align-items: center;
background: rgb(194, 194, 194);
}
}
}
</style>

4
pages/login/login.vue
View File

@@ -69,7 +69,9 @@
<agreement-checkbox v-model="formData.agreement" /> <agreement-checkbox v-model="formData.agreement" />
<cb-button <cb-button
class="bottom-btn" class="bottom-btn"
:disabled="!formData.username || !formData.password" :disabled="
!formData.username || !formData.password || !formData.agreement
"
@click="onLogin" @click="onLogin"
> >
登录 登录

15
pages/mall/detail.vue
View File

@@ -10,6 +10,8 @@
const groupId = ref('') const groupId = ref('')
/** 评论数量 */ /** 评论数量 */
const commentNum = ref(0) const commentNum = ref(0)
/** 分享弹窗 */
const shareDialog = ref(false)
const getData = async productId => { const getData = async productId => {
const res = await getProductDetail(productId) const res = await getProductDetail(productId)
viewData.value = res.data viewData.value = res.data
@@ -69,13 +71,14 @@
class="left-icon" class="left-icon"
></image> ></image>
</template> </template>
<!-- <template #right> <template #right>
<image <image
src="/static/images/public/share-icon.png" src="/static/images/public/share-icon.png"
mode="heightFix" mode="heightFix"
class="right-icon" class="right-icon"
@click="shareDialog = true"
></image> ></image>
</template> --> </template>
</nav-bar> </nav-bar>
<!-- 顶部图片 --> <!-- 顶部图片 -->
<view class="top-img"> <view class="top-img">
@@ -158,6 +161,14 @@
<bottom-view> <bottom-view>
<cb-button @click="onConfirm">拼单购买</cb-button> <cb-button @click="onConfirm">拼单购买</cb-button>
</bottom-view> </bottom-view>
<!-- 分享弹窗 -->
<share-popup
v-model:show="shareDialog"
:id="productId"
:text="viewData.productName"
:cover="viewData.mainImage"
></share-popup>
</view> </view>
</template> </template>

1
pages/mall/list.vue
View File

@@ -61,7 +61,6 @@
:default-page-size="formData.pageSize" :default-page-size="formData.pageSize"
safe-area-inset-bottom safe-area-inset-bottom
use-safe-area-placeholder use-safe-area-placeholder
:show-loading-more-no-more-view="false"
:paging-style="{ 'background-color': '#f9f9f9' }" :paging-style="{ 'background-color': '#f9f9f9' }"
@query="getListData" @query="getListData"
> >