添加音视频发送信息

2026-02-09 02:10:27 +08:00
parent bed88896f8
commit eb57bfb6b4
8 changed files with 1147 additions and 901 deletions
--- a/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
@@ -1,102 +1,112 @@
 <script setup lang="ts">
-	import ToolbarItemContainer from '../toolbar-item-container/index.vue'
-	import custom from '../../../../assets/icon/telephone-icon.svg'
-	import videoIcon from '../../../../assets/icon/video-icon.svg'
-	import { isUniFrameWork } from '../../../../utils/env'
-	import { computed, ref } from 'vue'
-	import { type IConversationModel } from '@tencentcloud/chat-uikit-engine-lite'
-	import { navigateTo } from '../../../../../utils/router'
-	import TUIChatEngine, {
-		TUIConversationService,
-		TUIFriendService,
-		TUIChatService
-	} from '@tencentcloud/chat-uikit-engine-lite'
+  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
+  import custom from '../../../../assets/icon/telephone-icon.svg'
+  import videoIcon from '../../../../assets/icon/video-icon.svg'
+  import { isUniFrameWork } from '../../../../utils/env'
+  import { computed, ref } from 'vue'
+  import { type IConversationModel } from '@tencentcloud/chat-uikit-engine-lite'
+  import { navigateTo } from '../../../../../utils/router'
+  import TUIChatEngine, {
+    TUIConversationService,
+    TUIFriendService,
+    TUIChatService
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { useUserStore } from '../../../../../stores/user'

-	const props = withDefaults(
-		defineProps<{
-			/** 通话状态： 0 语音 1 视频 */
-			type ?: '0' | '1'
-			/** 信息数据 */
-			currentConversation ?: IConversationModel
-		}>(),
-		{
-			type: '0',
-			currentConversation: () => ({} as IConversationModel)
-		}
-	)
+  const props = withDefaults(
+    defineProps<{
+      /** 通话状态： 0 语音 1 视频 */
+      type?: '0' | '1'
+      /** 信息数据 */
+      currentConversation?: IConversationModel
+    }>(),
+    {
+      type: '0',
+      currentConversation: () => ({} as IConversationModel)
+    }
+  )

-	/** 语音通话状态 */
-	const isType = computed(() => props.type === '0')
+  const { updateCallMode } = useUserStore()

-	const evaluateIcon = isType.value ? custom : videoIcon
+  /** 语音通话状态 */
+  const isType = computed(() => props.type === '0')

-	const emits = defineEmits(['onDialogPopupShowOrHide'])
+  const evaluateIcon = isType.value ? custom : videoIcon

-	const container = ref()
-	const closeDialog = () => {
-		container?.value?.toggleDialogDisplay(false)
-	}
+  const emits = defineEmits(['onDialogPopupShowOrHide'])

+  const container = ref()
+  const closeDialog = () => {
+    container?.value?.toggleDialogDisplay(false)
+  }

-	const onDialogShow = () => {
-		console.log('弹出窗口', props.currentConversation)
-		const data = props.currentConversation.userProfile
-		emits('onDialogPopupShowOrHide', true)
+  const onDialogShow = () => {
+    console.log('弹出窗口', props.currentConversation)
+    const data = props.currentConversation.userProfile
+    emits('onDialogPopupShowOrHide', false)

-		if (isType.value) {
-			let params = {
-				to: props.currentConversation.conversationID,
-				conversationType: TUIChatEngine.TYPES.CONV_C2C,
-				payload: {
-					text: "拨打语音"
-				}
-			}
-			console.log('params: ', params);
-			// TUIChatService.sendTextMessage(params)
-			navigateTo('/pages/room/incom', {
-				type: 'call',
-				userID: data.userID,
-				mediaType: 'audio',
-				callType: 'out',
-			})
-		} else {
-			let params = {
-				to: props.currentConversation.conversationID,
-				conversationType: TUIChatEngine.TYPES.CONV_C2C,
-				payload: {
-					text: "拨打视频"
-				}
-			}
-			// TUIChatService.sendTextMessage(params)
-			uni.setStorageSync('room-parameters', {
-				callType: 'out',
-				mediaType: 'video',
-				targetId: data.userID,
-				callSelect: 'single',
-			});
-			navigateTo('/pages/room/room')
-		}
-	}
+    if (isType.value) {
+      let params = {
+        to: props.currentConversation.conversationID,
+        conversationType: TUIChatEngine.TYPES.CONV_C2C,
+        payload: {
+          text: '拨打语音'
+        }
+      }
+      updateCallMode('0')
+      console.log('params: ', params)
+      // TUIChatService.sendTextMessage(params)
+      navigateTo('/pages/room/incom', {
+        type: 'call',
+        userID: data.userID,
+        mediaType: 'audio',
+        callType: 'out'
+      })
+    } else {
+      let params = {
+        to: props.currentConversation.conversationID,
+        conversationType: TUIChatEngine.TYPES.CONV_C2C,
+        payload: {
+          text: '拨打视频'
+        }
+      }
+      // TUIChatService.sendTextMessage(params)
+      uni.setStorageSync('room-parameters', {
+        callType: 'out',
+        mediaType: 'video',
+        targetId: data.userID,
+        callSelect: 'single'
+      })
+      updateCallMode('1')
+      navigateTo('/pages/room/room')
+    }
+  }

-	const onDialogClose = () => {
-		console.log('关闭窗口')
-		emits('onDialogPopupShowOrHide', false)
-	}
+  const onDialogClose = () => {
+    console.log('关闭窗口')
+    emits('onDialogPopupShowOrHide', false)
+  }

-	const onDial = () => {
-		const data = props.currentConversation.userProfile
-		// data.userID
-		// CallLib.enableMicrophone(true)
-		// CallLib.startSingleCall(data.userID, 0, '邀请您进行语音通话')
-	}
+  const onDial = () => {
+    const data = props.currentConversation.userProfile
+    // data.userID
+    // CallLib.enableMicrophone(true)
+    // CallLib.startSingleCall(data.userID, 0, '邀请您进行语音通话')
+  }
 </script>

 <template>
-	<!-- needBottomPopup -->
-	<ToolbarItemContainer ref="container" :iconFile="evaluateIcon" :iconWidth="isUniFrameWork ? '34px' : '20px'"
-		:iconHeight="isUniFrameWork ? '34px' : '20px'" :title="isType ? '语音通话' : '视频通话'" @onDialogShow="onDialogShow"
-		@onDialogClose="onDialogClose">
-		<!-- <view class="box-index">
+  <!-- needBottomPopup -->
+  <ToolbarItemContainer
+    ref="container"
+    :iconFile="evaluateIcon"
+    :iconWidth="isUniFrameWork ? '34px' : '20px'"
+    :iconHeight="isUniFrameWork ? '34px' : '20px'"
+    :title="isType ? '语音通话' : '视频通话'"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+  >
+    <!-- <view class="box-index">
      <view class="top-icon">
        <uni-icons
          type="back"
@@ -130,7 +140,7 @@
        挂点
      </button>
    </view> -->
-	</ToolbarItemContainer>
+  </ToolbarItemContainer>
 </template>

-<style scoped lang="scss" src="./style/index.scss"></style>
+<style scoped lang="scss" src="./style/index.scss"></style>
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -151,6 +151,25 @@
        </view>
      </view>
    </template>
+    <!-- 音视频通话 -->
+    <template
+      v-else-if="
+        customData.businessID === CHAT_MSG_CUSTOM_TYPE.VOICE_CALL ||
+        customData.businessID === CHAT_MSG_CUSTOM_TYPE.VIDEO_CALL
+      "
+    >
+      <view class="call-box" @click="onCall">
+        <text class="call-text">{{ goodsData.title }}</text>
+        <uni-icons
+          :type="
+            customData.businessID === CHAT_MSG_CUSTOM_TYPE.VOICE_CALL
+              ? 'phone'
+              : 'videocam'
+          "
+          size="30rpx"
+        ></uni-icons>
+      </view>
+    </template>
    <template v-else>
      <span v-html="content.custom" />
    </template>
@@ -165,7 +184,7 @@
    computed,
    reactive
  } from '../../../../adapter-vue'
-  import {
+  import TUIChatEngine, {
    TUITranslateService,
    IMessageModel
  } from '@tencentcloud/chat-uikit-engine-lite'
@@ -177,6 +196,7 @@
  import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
  import kaiEnvelope from '../../../../assets/icon/kai-unopened-envelope.svg'
  import { navigateTo } from '../../../../../utils/router'
+  import { useUserStore } from '../../../../../stores/user'

  interface Props {
    messageItem: IMessageModel
@@ -187,6 +207,8 @@
    (key: 'claim'): void
  }

+  const { updateCallMode } = useUserStore()
+
  const emits = defineEmits<IEmit>()

  const props = withDefaults(defineProps<Props>(), {
@@ -230,6 +252,32 @@
    return JSON.parse(props.messageItem.payload.data)
  })

+  /** 点击拨打音视频电话 */
+  const onCall = () => {
+    if (props.messageItem.flow === 'out') {
+      if (
+        goodsData.value.businessID === CHAT_MSG_CUSTOM_TYPE.VOICE_CALL
+      ) {
+        updateCallMode('0')
+        navigateTo('/pages/room/incom', {
+          type: 'call',
+          userID: goodsData.value.userID,
+          mediaType: 'audio',
+          callType: 'out'
+        })
+      } else {
+        uni.setStorageSync('room-parameters', {
+          callType: 'out',
+          mediaType: 'video',
+          targetId: goodsData.value.userID,
+          callSelect: 'single'
+        })
+        updateCallMode('1')
+        navigateTo('/pages/room/room')
+      }
+    }
+  }
+
  /** 点击商品详情 */
  const onGoods = () => {
    navigateTo('/pages/mall/detail', { productId: goodsData.value.id })
@@ -467,4 +515,12 @@
      }
    }
  }
+
+  .call-box {
+    display: flex;
+    align-items: center;
+    .call-text {
+      margin-right: 10rpx;
+    }
+  }
 </style>
--- a/TUIKit/components/TUIConversation/conversation-list/index.vue
+++ b/TUIKit/components/TUIConversation/conversation-list/index.vue
@@ -404,6 +404,20 @@
          return `[直播信息]:${data.title}`
        }
      }
+      if (data.businessID === CHAT_MSG_CUSTOM_TYPE.VOICE_CALL) {
+        if (isText) {
+          return `${text[0]}:[语音通话]`
+        } else {
+          return `[语音通话]`
+        }
+      }
+      if (data.businessID === CHAT_MSG_CUSTOM_TYPE.VIDEO_CALL) {
+        if (isText) {
+          return `${text[0]}:[视频通话]`
+        } else {
+          return `[视频通话]`
+        }
+      }
      if (data.content === 'Create Group' && item.type === 'GROUP') {
        return `${item.getLastMessage('text')?.split(':')[0]}:创建群聊`
      }
--- a/TUIKit/constant.ts
+++ b/TUIKit/constant.ts
@@ -23,7 +23,11 @@ export const CHAT_MSG_CUSTOM_TYPE = {
  /** 商品详情 */
  GOODS: "goods",
  /** 直播 */
-  LIVE: "live"
+  LIVE: "live",
+  /** 语音通话 */
+  VOICE_CALL: "voiceCall",
+  /** 视频通话 */
+  VIDEO_CALL: "videoCall",
 };

 export const DIALOG_CONTENT = {