83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
<template>
|
|
<div class="g2-message-wrapper" @click="handleCall">
|
|
<Icon :type="iconType" :size="28"></Icon>
|
|
<div class="g2-message-status">{{ status }}</div>
|
|
<div v-if="duration" class="g2-message-duration">{{ duration }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
/** 音视频消息组件 */
|
|
|
|
import Icon from '@/components/Icon.vue'
|
|
import { t } from '@/utils/im/i18n'
|
|
import { convertSecondsToTime, startCall, isApp } from '@/utils/im/index'
|
|
import { g2StatusMap } from '@/utils/im/constants'
|
|
import { V2NIMMessageForUI } from '@xkit-yx/im-store-v2/dist/types/types'
|
|
|
|
const props = withDefaults(defineProps<{ msg: V2NIMMessageForUI }>(), {})
|
|
|
|
/** 通话时长 */
|
|
const duration = convertSecondsToTime(
|
|
//@ts-ignore
|
|
props.msg.attachment?.durations[0]?.duration
|
|
)
|
|
/** 通话状态 */
|
|
//@ts-expect-error
|
|
const status = g2StatusMap[props.msg.attachment?.status]
|
|
const iconType =
|
|
//@ts-expect-error
|
|
props.msg.attachment?.type == 1 ? 'icon-yuyin8' : 'icon-shipin8'
|
|
|
|
/** 发起呼叫 */
|
|
const handleCall = () => {
|
|
if (isApp) {
|
|
//@ts-ignore
|
|
const callType = props.msg.attachment?.type
|
|
|
|
const myAccount = uni.$UIKitStore.userStore.myUserInfo.accountId
|
|
const isSelfMsg = props.msg.senderId === myAccount
|
|
|
|
if (isSelfMsg) {
|
|
const remoteShowName = uni.$UIKitStore.uiStore.getAppellation({
|
|
account: props.msg.receiverId,
|
|
})
|
|
|
|
startCall({
|
|
remoteUserAccid: props.msg.receiverId,
|
|
currentUserAccid: myAccount,
|
|
type: callType,
|
|
remoteShowName: remoteShowName,
|
|
})
|
|
} else {
|
|
const remoteShowName = uni.$UIKitStore.uiStore.getAppellation({
|
|
account: props.msg.senderId,
|
|
})
|
|
startCall({
|
|
remoteUserAccid: props.msg.senderId,
|
|
currentUserAccid: myAccount,
|
|
type: callType,
|
|
remoteShowName: remoteShowName,
|
|
})
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: t('callFailedText'),
|
|
icon: 'none',
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.g2-message-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.g2-message-status {
|
|
margin: 0 7px;
|
|
}
|
|
</style>
|