添加音视频发送信息

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>