mirror of https://gitee.com/godoos/godoos.git
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
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>
|
|
|