60 lines
1.7 KiB
Vue
60 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, defineAsyncComponent } from 'vue'
|
|
import { SearchInput } from '@/components/Im/SearchInput'
|
|
import ConversationList from '../Conversation/components/ConversationList.vue'
|
|
import { Welcome } from '@/components/Im/Welcome'
|
|
|
|
// 异步加载可能的对话框内容组件
|
|
const InformDetailsComponent = defineAsyncComponent(
|
|
() => import('@/views/im/InformDetails/index.vue')
|
|
)
|
|
const MessageComponent = defineAsyncComponent(() => import('@/views/im/Message/index.vue'))
|
|
|
|
const currentComponent = ref(Welcome) // 默认加载欢迎页组件
|
|
|
|
// 更改为使用动态组件切换而非路由跳转
|
|
const toInformDetails = () => {
|
|
currentComponent.value = InformDetailsComponent // 加载系统通知组件
|
|
}
|
|
|
|
const toChatMessage = (id, chatType) => {
|
|
console.log('>>>>>>>id', id)
|
|
currentComponent.value = MessageComponent // 加载消息组件
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-container style="height: 100%">
|
|
<el-aside class="chat_conversation_box">
|
|
<!-- 搜索组件 -->
|
|
<SearchInput :searchType="'conversation'" />
|
|
<div class="chat_conversation_list">
|
|
<ConversationList @to-inform-details="toInformDetails" @to-chat-message="toChatMessage" />
|
|
</div>
|
|
</el-aside>
|
|
<el-main class="chat_conversation_main_box">
|
|
<component :is="currentComponent" />
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.chat_conversation_box {
|
|
position: relative;
|
|
background: #cfdbf171;
|
|
overflow: hidden;
|
|
min-width: 324px;
|
|
|
|
.chat_conversation_list {
|
|
height: calc(100% - 60px);
|
|
}
|
|
}
|
|
|
|
.chat_conversation_main_box {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
</style>
|