Files
tk-mini-program/TUIKit/components/TUIChat/chat-header/index.vue
pengxiaolong bcaa54bec8 优化页面
2025-06-19 22:27:00 +08:00

134 lines
3.1 KiB
Vue

<template>
<div class="Navigation">
<div class="Navigationcontent">
<image
@click="Returnfunc"
style="width: 46rpx;height: 46rpx;;"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
mode="scaleToFill"
class="Navigation-return"
/>
<div class="Navigation-name">
{{ Title }}
</div>
<div></div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "../../../adapter-vue";
import {
TUIStore,
StoreName,
IConversationModel,
TUITranslateService,
} from "@tencentcloud/chat-uikit-engine";
import { TUIGlobal } from "@tencentcloud/universal-api";
import { onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app";
const emits = defineEmits(["openGroupManagement"]);
const props = defineProps(["isGroup"]);
const currentConversation = ref<IConversationModel>();
const typingStatus = ref(false);
const Title = ref("Global"); // 初始化为默认标题
// #ifdef APP-PLUS
onNavigationBarButtonTap(() => {
if (props.isGroup) {
emits("openGroupManagement");
}
});
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const currentWebview = currentPage.$getAppWebview();
if (!props.isGroup) {
// hidden menu button in C2C chat
// override current webview titleNView
currentWebview.setStyle({
titleNView: {
...currentWebview.getStyle().titleNView,
buttons: [],
},
});
}
// #endif
function Returnfunc() {
uni.navigateBack({
delta: 1,
});
}
const setChatHeaderContent = (content: string | undefined) => {
Title.value = content || "Global"; // 确保默认值存在
};
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());
}
}
</script>
<style>
.Navigation-name {
font-size: 36rpx;
color: #000000;
font-weight: bold;
}
.Navigation {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 240rpx;
background-image: url("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png");
background-position: 100% 100%;
background-repeat: no-repeat;
}
.Navigationcontent{
width: 80%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 60rpx;
}
</style>