You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

182 lines
3.5 KiB

<template>
<div
v-if="store.targetChatId"
class="chat-user-info"
>
<!-- 用户信息区域 -->
<div
v-if="
store.targetUserInfo &&
Object.keys(store.targetUserInfo).length > 0
"
class="user-content"
>
<div class="user-details">
<h2>{{ store.targetUserInfo.displayName }}</h2>
<p>工号:{{ targetUserInfo.jobNumber }}</p>
<p>岗位:{{ targetUserInfo.desc }}</p>
<p>邮箱:{{ targetUserInfo.email }}</p>
<p>电话:{{ targetUserInfo.phone }}</p>
<p>入职日期:{{ targetUserInfo.hiredDate }}</p>
</div>
<div class="avatar">
<el-avatar
style="width: 80px; height: 80px"
:src="targetUserInfo.avatar"
alt="avatar"
/>
</div>
</div>
<!-- 群信息区域 -->
<div
v-else-if="
store.targetGroupInfo &&
Object.keys(store.targetGroupInfo).length > 0
"
class="group-content"
>
<div class="group-details">
<h2>{{ store.targetGroupInfo.displayName }}</h2>
<p>群ID:{{ store.targetGroupInfo.chatId }}</p>
<p>群人数:{{ targetGroupInfo.memberCount }}人</p>
<p>创建时间:{{ targetGroupInfo.createdAt }}</p>
</div>
<div class="group-avatar">
<div class="avatar-container">
<el-avatar
style="width: 80px; height: 80px"
:src="targetGroupInfo.avatar"
alt="group-avatar"
/>
</div>
</div>
</div>
<!-- 分割线 -->
<div class="divider"></div>
<!-- 发送按钮 -->
<div class="send-button-container">
<el-button
type="primary"
@click="
sendMessage(
store.targetGroupInfo?.chatId ||
store.targetUserInfo.chatId,
store.targetGroupInfo
? 'group'
: store.targetUserInfo.type
)
"
>
发送消息
</el-button>
</div>
</div>
<div v-else class="empty-container">
<el-empty description="请选择一个用户或群聊" />
</div>
</template>
<script lang="ts" setup>
import { useChatStore } from "@/stores/chat";
const store = useChatStore();
// 模拟用户信息
const targetUserInfo = {
avatar: "./logo.png",
jobNumber: 12345678,
desc: "测试岗位",
email: "12345678@qq.com",
phone: "12345678910",
hiredDate: "2024-01-01",
};
// 模拟群信息
const targetGroupInfo = {
avatar: "./logo.png",
chatId: "1234567890",
memberCount: 100,
createdAt: "2024-01-01",
};
const sendMessage = (chatId: string, type: string) => {
store.currentNavId = 0;
store.getGroupMemberList(chatId);
store.addChatListAndGetChatHistory(chatId, type);
};
</script>
<style scoped>
.empty-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.chat-user-info {
display: flex;
flex-direction: column;
width: 100%;
padding: 20px;
}
.user-content,
.group-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.user-details,
.group-details {
flex: 1;
display: flex;
flex-direction: column;
}
.user-details h2,
.group-details h2 {
margin: 0;
font-size: 1.5rem;
}
.user-details p,
.group-details p {
margin: 5px 0;
color: #666;
}
.avatar,
.group-avatar {
width: 80px;
height: 100%;
object-fit: cover;
margin-left: 20px;
}
.divider {
width: 100%;
height: 1px;
background-color: #e0e0e0;
margin: 20px 0;
}
.send-button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.el-button {
background-color: #0d42d2;
color: #fff;
}
.el-button:hover {
background-color: #4080ff;
color: #fff;
}
</style>