107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<template>
|
|
<div class="chat-header">
|
|
<Navigation :title="title">
|
|
<template #left>
|
|
<div @click="back">
|
|
<Icon :file="backSVG" />
|
|
</div>
|
|
</template>
|
|
<template #right>
|
|
<div @click="onNavigationBarButtonTap">
|
|
<Icon v-if="isGroup" :file="More" />
|
|
</div>
|
|
</template>
|
|
</Navigation>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, ref } from '../../../adapter-vue'
|
|
import {
|
|
TUIStore,
|
|
StoreName,
|
|
IConversationModel,
|
|
TUITranslateService
|
|
} from '@tencentcloud/chat-uikit-engine-lite'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import Navigation from '../../common/Navigation/index.vue'
|
|
import Icon from '../../common/Icon.vue'
|
|
import More from '../../../assets/icon/more.svg'
|
|
import backSVG from '../../../assets/icon/back.svg'
|
|
import { useUI } from '../../../../utils/use-ui'
|
|
import { endUserService } from '../../../../api/my-index'
|
|
|
|
const { showDialog, showToast } = useUI()
|
|
|
|
const emits = defineEmits(['openGroupManagement'])
|
|
const props = defineProps(['isGroup', 'serviceID'])
|
|
|
|
const currentConversation = ref<IConversationModel>()
|
|
const typingStatus = ref(false)
|
|
const title = ref('')
|
|
|
|
const setChatHeaderContent = (content: string) => {
|
|
title.value = content || '云通信 IM'
|
|
}
|
|
|
|
const onNavigationBarButtonTap = () => {
|
|
if (props.isGroup) {
|
|
emits('openGroupManagement')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
TUIStore.watch(StoreName.CONV, {
|
|
currentConversation: onCurrentConversationUpdated
|
|
})
|
|
TUIStore.watch(StoreName.CHAT, {
|
|
typingStatus: onTypingStatusUpdated
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
TUIStore.unwatch(StoreName.CONV, {
|
|
currentConversation: onCurrentConversationUpdated
|
|
})
|
|
TUIStore.unwatch(StoreName.CHAT, {
|
|
typingStatus: onTypingStatusUpdated
|
|
})
|
|
})
|
|
|
|
onLoad(() => {
|
|
setChatHeaderContent(currentConversation.value?.getShowName())
|
|
})
|
|
|
|
function onCurrentConversationUpdated(
|
|
conversation: IConversationModel
|
|
) {
|
|
currentConversation.value = conversation
|
|
if (!typingStatus.value) {
|
|
setChatHeaderContent(currentConversation?.value?.getShowName())
|
|
}
|
|
}
|
|
|
|
function onTypingStatusUpdated(status: boolean) {
|
|
typingStatus.value = status
|
|
if (typingStatus.value) {
|
|
setChatHeaderContent(TUITranslateService.t('TUIChat.对方正在输入'))
|
|
} else {
|
|
setChatHeaderContent(currentConversation.value?.getShowName())
|
|
}
|
|
}
|
|
|
|
const back = async () => {
|
|
if (props.serviceID) {
|
|
const show = await showDialog('提示', '确定要退出当前会话吗？')
|
|
if (show) {
|
|
await endUserService(props.serviceID)
|
|
await showToast('结束服务成功')
|
|
uni.navigateBack()
|
|
}
|
|
} else {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped></style>
|