|
|
|
@ -4,6 +4,7 @@ |
|
|
|
<el-header height="50px"> |
|
|
|
<span>{{ title }}</span> |
|
|
|
<span title="群聊信息" v-show="isGroup" class="btn-side el-icon-more" @click="showSide = !showSide"></span> |
|
|
|
<span title="用户信息" v-show="isPrivate" class="btn-side el-icon-more" @click="showUserSide = !showUserSide"></span> |
|
|
|
</el-header> |
|
|
|
<el-main style="padding: 0;"> |
|
|
|
<el-container> |
|
|
|
@ -72,6 +73,61 @@ |
|
|
|
<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)"> |
|
|
|
</chat-group-side> |
|
|
|
</el-aside> |
|
|
|
<el-aside class="side-box user-info-side" width="320px" v-if="showUserSide"> |
|
|
|
<div class="user-info-container"> |
|
|
|
<div class="user-info-header"> |
|
|
|
<img :src="userInfo.headImage || userInfo.headImageThumb" class="user-avatar-large" /> |
|
|
|
<h3 class="user-nickname">{{ userInfo.nickName }}</h3> |
|
|
|
<p class="user-username">@{{ userInfo.userName }}</p> |
|
|
|
</div> |
|
|
|
<div class="user-info-content"> |
|
|
|
<div class="info-item"> |
|
|
|
<div class="info-label">用户ID</div> |
|
|
|
<div class="info-value">{{ userInfo.id }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-item" v-if="userInfo.lastLoginIp"> |
|
|
|
<div class="info-label">用户IP</div> |
|
|
|
<div class="info-value">{{ userInfo.lastLoginIp }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-item" v-if="userInfo.sourceUrl"> |
|
|
|
<div class="info-label">来源地址</div> |
|
|
|
<div class="info-value">{{ userInfo.sourceUrl }}</div> |
|
|
|
</div> |
|
|
|
<div class="info-item" v-if="userInfo.sex !== undefined && userInfo.sex !== null"> |
|
|
|
<div class="info-label">性别</div> |
|
|
|
<div class="info-value">{{ userInfo.sex === 1 ? '女' : '男' }}</div> |
|
|
|
</div> |
|
|
|
<!-- 添加标签信息 --> |
|
|
|
<div class="info-item" v-if="userInfo.labelNames && userInfo.labelNames.length > 0"> |
|
|
|
<div class="info-label">标签</div> |
|
|
|
<div class="info-value"> |
|
|
|
<el-tag |
|
|
|
v-for="(label, index) in userInfo.labelNames" |
|
|
|
:key="index" |
|
|
|
size="small" |
|
|
|
style="margin-right: 5px; margin-bottom: 5px;" |
|
|
|
> |
|
|
|
{{ label }} |
|
|
|
</el-tag> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 添加群组信息 --> |
|
|
|
<div class="info-item" v-if="userInfo.groupNames && userInfo.groupNames.length > 0"> |
|
|
|
<div class="info-label">群组</div> |
|
|
|
<div class="info-value"> |
|
|
|
<el-tag |
|
|
|
v-for="(group, index) in userInfo.groupNames" |
|
|
|
:key="index" |
|
|
|
size="small" |
|
|
|
style="margin-right: 5px; margin-bottom: 5px;" |
|
|
|
> |
|
|
|
{{ group }} |
|
|
|
</el-tag> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-aside> |
|
|
|
</el-container> |
|
|
|
</el-main> |
|
|
|
<emotion ref="emoBox" @emotion="onEmotion"></Emotion> |
|
|
|
@ -130,6 +186,7 @@ export default { |
|
|
|
isReceipt: true, |
|
|
|
showRecord: false, // 是否显示语音录制弹窗 |
|
|
|
showSide: false, // 是否显示群聊信息栏 |
|
|
|
showUserSide: false, // 是否显示用户信息栏 |
|
|
|
showHistory: false, // 是否显示历史聊天记录 |
|
|
|
showChangeCustomer: false, // 是否显示转接客服弹窗 |
|
|
|
lockMessage: false, // 是否锁定发送， |
|
|
|
@ -280,6 +337,7 @@ export default { |
|
|
|
}, |
|
|
|
onCloseSide() { |
|
|
|
this.showSide = false; |
|
|
|
this.showUserSide = false; |
|
|
|
}, |
|
|
|
onScrollToTop() { |
|
|
|
// 多展示10条信息 |
|
|
|
@ -631,9 +689,11 @@ export default { |
|
|
|
method: 'GET' |
|
|
|
}).then((userInfo) => { |
|
|
|
this.userInfo = userInfo; |
|
|
|
console.log(this.userInfo); |
|
|
|
this.updateFriendInfo(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
showName(msgInfo) { |
|
|
|
if (!msgInfo) { |
|
|
|
return "" |
|
|
|
@ -843,6 +903,7 @@ export default { |
|
|
|
// 滚到底部 |
|
|
|
this.scrollToBottom(); |
|
|
|
this.showSide = false; |
|
|
|
this.showUserSide = false; |
|
|
|
// 消息已读 |
|
|
|
this.readedMessage() |
|
|
|
// 初始状态只显示30条消息 |
|
|
|
@ -1010,5 +1071,72 @@ export default { |
|
|
|
border-left: var(--im-border); |
|
|
|
} |
|
|
|
|
|
|
|
.user-info-side { |
|
|
|
.user-info-container { |
|
|
|
padding: 20px; |
|
|
|
height: 100%; |
|
|
|
overflow-y: auto; |
|
|
|
|
|
|
|
.user-info-header { |
|
|
|
text-align: center; |
|
|
|
padding-bottom: 20px; |
|
|
|
border-bottom: 1px solid #eee; |
|
|
|
|
|
|
|
.user-avatar-large { |
|
|
|
width: 100px; |
|
|
|
height: 100px; |
|
|
|
border-radius: 50%; |
|
|
|
object-fit: cover; |
|
|
|
margin-bottom: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.user-nickname { |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 600; |
|
|
|
margin: 10px 0 5px; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.user-username { |
|
|
|
font-size: 14px; |
|
|
|
color: #999; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.user-info-content { |
|
|
|
padding: 20px 0; |
|
|
|
|
|
|
|
.info-item { |
|
|
|
display: flex; |
|
|
|
padding: 10px 0; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
|
|
|
|
.info-label { |
|
|
|
width: 70px; |
|
|
|
font-size: 14px; |
|
|
|
color: #999; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.info-value { |
|
|
|
flex: 1; |
|
|
|
font-size: 14px; |
|
|
|
color: #333; |
|
|
|
word-break: break-all; |
|
|
|
/* 标签容器样式 */ |
|
|
|
.el-tag { |
|
|
|
margin-right: 8px; |
|
|
|
margin-bottom: 8px; |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
[yxf]
1 month ago