音视频通话开发

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

@@ -0,0 +1,51 @@
+<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 } from 'vue'
+
+  const props = withDefaults(
+    defineProps<{
+      /** 通话状态： 0 语音 1 视频 */
+      type?: '0' | '1'
+    }>(),
+    {
+      type: '0'
+    }
+  )
+
+  /** 语音通话状态 */
+  const isType = computed(() => props.type === '0')
+
+  const evaluateIcon = isType.value ? custom : videoIcon
+
+  const emits = defineEmits(['onDialogPopupShowOrHide'])
+
+  const onDialogShow = () => {
+    console.log('弹出窗口')
+    emits('onDialogPopupShowOrHide', true)
+  }
+
+  const onDialogClose = () => {
+    console.log('关闭窗口')
+    emits('onDialogPopupShowOrHide', false)
+  }
+</script>
+
+<template>
+  <ToolbarItemContainer
+    ref="container"
+    needBottomPopup
+    :iconFile="evaluateIcon"
+    :iconWidth="isUniFrameWork ? '34px' : '20px'"
+    :iconHeight="isUniFrameWork ? '34px' : '20px'"
+    :title="isType ? '语音通话' : '视频通话'"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+  >
+    测试通话
+  </ToolbarItemContainer>
+</template>
+
+<style scoped lang="scss" src="./style/index.scss"></style>