Files
uniapp-im-shop/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
2026-02-09 02:10:27 +08:00

147 lines
3.9 KiB
Vue

<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 { useUserStore } from '../../../../../stores/user'
const props = withDefaults(
defineProps<{
/** 通话状态: 0 语音 1 视频 */
type?: '0' | '1'
/** 信息数据 */
currentConversation?: IConversationModel
}>(),
{
type: '0',
currentConversation: () => ({} as IConversationModel)
}
)
const { updateCallMode } = useUserStore()
/** 语音通话状态 */
const isType = computed(() => props.type === '0')
const evaluateIcon = isType.value ? custom : videoIcon
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', false)
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 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">
<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>
<button
@click.stop="
() => {
CallLib.enableMicrophone(true)
CallLib.hangup()
}
"
>
挂点
</button>
</view> -->
</ToolbarItemContainer>
</template>
<style scoped lang="scss" src="./style/index.scss"></style>