QAQ

TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
+  import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index.esm'
   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 } from 'vue'
+  import { computed, ref } from 'vue'
   import { type IConversationModel } from '@tencentcloud/chat-uikit-engine-lite'
 
+  CallLib.init({});
+
   const props = withDefaults(
     defineProps<{
       /** 通话状态： 0 语音 1 视频 */
@@ -26,28 +29,97 @@
 
   const emits = defineEmits(['onDialogPopupShowOrHide'])
 
+  const container = ref()
+  const closeDialog = () => {
+    container?.value?.toggleDialogDisplay(false)
+  }
+
   const onDialogShow = () => {
     console.log('弹出窗口')
     console.log(props.currentConversation)
-    // emits('onDialogPopupShowOrHide', true)
+    emits('onDialogPopupShowOrHide', true)
   }
 
   const onDialogClose = () => {
     console.log('关闭窗口')
-    // emits('onDialogPopupShowOrHide', false)
+    emits('onDialogPopupShowOrHide', false)
+  }
+
+  CallLib.onCallReceived(res => {
+    console.log(res)
+    console.log(
+      'Engine:OnCallReceived=>' + '监听通话呼入, 目标id=>',
+      res.data.targetId
+    )
+  })
+
+  CallLib.onCallConnected(res => {
+    console.log(res)
+    console.log(
+      'Engine:OnCallConnected=>' +
+        '已建立通话通话接通时，通过回调 onCallConnected 通知当前 call 的详细信息',
+      res
+    )
+  })
+
+  CallLib.onRemoteUserJoined(res => {
+    console.log(
+      'Engine:OnRemoteUserJoined=>' +
+        '主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>',
+      res.data.userId
+    )
+  })
+
+  CallLib.onCallDisconnected(res => {
+    console.log(
+      'Engine:OnCallDisconnected=>' + '挂断成功, 挂断原因=>',
+      res.data.reason
+    )
+  })
+
+  const onDial = () => {
+    const data = props.currentConversation.userProfile
+    // data.userID
+    CallLib.enableMicrophone(true)
+    CallLib.startSingleCall(data.userID, 0, '邀请您进行语音通话')
   }
 </script>
 
 <template>
   <ToolbarItemContainer
     ref="container"
+    needBottomPopup
     :iconFile="evaluateIcon"
     :iconWidth="isUniFrameWork ? '34px' : '20px'"
     :iconHeight="isUniFrameWork ? '34px' : '20px'"
     :title="isType ? '语音通话' : '视频通话'"
     @onDialogShow="onDialogShow"
     @onDialogClose="onDialogClose"
-  ></ToolbarItemContainer>
+  >
+    <view class="box-index">
+      <view class="top-icon">
+        <uni-icons
+          type="back"
+          color="#ffffff"
+          size="42rpx"
+          @click.stop="closeDialog"
+        ></uni-icons>
+      </view>
+
+      <button @click.stop="onDial">拨打</button>
+
+      <button
+        @click.stop="
+          () => {
+            CallLib.enableMicrophone(true)
+            CallLib.accept()
+          }
+        "
+      >
+        接听
+      </button>
+    </view>
+  </ToolbarItemContainer>
 </template>
 
 <style scoped lang="scss" src="./style/index.scss"></style>

TUIKit/components/TUIChat/message-input-toolbar/call-view/style/index.scss

@@ -0,0 +1,13 @@
+.box-index {
+  height: 100vh;
+  background: #161616;
+
+  .top-icon {
+    padding-top: var(--status-bar-height);
+    padding-left: 20rpx;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 100rpx;
+  }
+}