320 lines
7.9 KiB
Vue
320 lines
7.9 KiB
Vue
<script setup lang="ts">
|
|
import { formatDate } from '@/utils/formatTime'
|
|
import { reactive } from 'vue'
|
|
/* 头像相关 */
|
|
import informIcon from '@/assets/imgs/im/avatar/inform.png'
|
|
/* route */
|
|
const route = useRoute()
|
|
/* router */
|
|
const router = useRouter()
|
|
//取系统通知数据
|
|
const informDetail = computed(() => {
|
|
const informDetailArr = reactive([
|
|
{
|
|
from: '系统通知',
|
|
desc: '您有一条新的通知',
|
|
time: new Date(),
|
|
untreated: 1
|
|
}
|
|
])
|
|
const lastInformDeatail = informDetailArr[0] || {}
|
|
const untreated = 1
|
|
return { untreated, lastInformDeatail }
|
|
})
|
|
|
|
//取好友列表(主要使用好友下的用户属性相关)
|
|
const friendList = reactive({
|
|
1: {
|
|
avatarurl: 'https://img.yzcdn.cn/vant/cat.jpeg'
|
|
}
|
|
})
|
|
//取会话数据
|
|
const conversationList = reactive([
|
|
{
|
|
conversationKey: 1,
|
|
conversationInfo: { avatarUrl: 'https://img.yzcdn.cn/vant/cat.jpeg' },
|
|
|
|
name: '好友1',
|
|
conversationType: 2,
|
|
latestMessage: {
|
|
msg: 'hello word!'
|
|
},
|
|
latestSendTime: new Date(),
|
|
unreadMessageNum: 5,
|
|
isMention: false
|
|
}
|
|
])
|
|
|
|
//处理会话name
|
|
const handleConversationName = computed(() => {
|
|
return ''
|
|
})
|
|
//处理lastmsg的from昵称
|
|
const handleLastMsgNickName = computed(() => {
|
|
return ''
|
|
})
|
|
const emit = defineEmits(['toInformDetails', 'toChatMessage'])
|
|
//普通会话
|
|
const checkedConverItemIndex = ref(null)
|
|
const toChatMessage = (item, itemKey, index) => {
|
|
checkedConverItemIndex.value = index
|
|
console.log('选中的会话key', itemKey)
|
|
//跳转至对应的消息界面
|
|
emit('toChatMessage', itemKey, item.conversationType)
|
|
}
|
|
//删除某条会话
|
|
const deleteConversation = (itemKey) => {
|
|
console.log('选中的会话key', itemKey)
|
|
}
|
|
</script>
|
|
<template>
|
|
<el-scrollbar class="session_list" style="overflow: auto" tag="ul">
|
|
<!-- 系统通知会话 -->
|
|
<li
|
|
v-if="JSON.stringify(informDetail.lastInformDeatail) !== '{}' && informDetail.untreated >= 1"
|
|
class="session_list_item"
|
|
@click="$emit('toInformDetails')"
|
|
>
|
|
<div class="item_body item_left">
|
|
<!-- 通知头像 -->
|
|
<div class="session_other_avatar">
|
|
<el-avatar :size="34" :src="informIcon" />
|
|
</div>
|
|
</div>
|
|
<div class="item_body item_main">
|
|
<div class="name">系统通知</div>
|
|
<div class="last_msg_body">
|
|
{{ informDetail.lastInformDeatail.from }}:{{ informDetail.lastInformDeatail.desc }}
|
|
</div>
|
|
</div>
|
|
<div class="item_body item_right">
|
|
<span class="time">{{
|
|
formatDate(informDetail.lastInformDeatail.time, 'MM/DD/HH:mm')
|
|
}}</span>
|
|
<span class="unReadNum_box" v-if="informDetail.untreated >= 1">
|
|
<sup
|
|
class="unReadNum_count"
|
|
v-text="informDetail.untreated >= 99 ? '99+' : informDetail.untreated"
|
|
></sup>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
<!-- 普通会话 -->
|
|
<template v-if="Object.keys(conversationList).length > 0">
|
|
<li
|
|
v-for="(item, itemKey, index) in conversationList"
|
|
:key="itemKey"
|
|
@click="toChatMessage(item, itemKey, index)"
|
|
:style="{
|
|
background: checkedConverItemIndex === index ? '#E5E5E5' : ''
|
|
}"
|
|
>
|
|
<el-popover
|
|
popper-class="conversation_popover"
|
|
placement="right-end"
|
|
trigger="contextmenu"
|
|
:show-arrow="false"
|
|
:offset="-10"
|
|
>
|
|
<template #reference>
|
|
<div class="session_list_item">
|
|
<div class="item_body item_left">
|
|
<div class="session_other_avatar">
|
|
<el-avatar
|
|
:size="34"
|
|
:src="
|
|
friendList[item.conversationKey] && friendList[item.conversationKey].avatarurl
|
|
? friendList[item.conversationKey].avatarurl
|
|
: item.conversationInfo.avatarUrl
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="item_body item_main">
|
|
<div class="name"> 好友 </div>
|
|
<div class="last_msg_body">
|
|
<span class="last_msg_body_mention" v-if="item.isMention">[有人@我]</span>
|
|
<span v-show="item.conversationType === 2">好友</span>
|
|
{{ item.latestMessage.msg }}
|
|
</div>
|
|
</div>
|
|
<div class="item_body item_right">
|
|
<span class="time">{{ formatDate(item.latestSendTime, 'MM/DD/HH:mm') }}</span>
|
|
<span class="unReadNum_box" v-if="item.unreadMessageNum >= 1">
|
|
<sup
|
|
class="unReadNum_count"
|
|
v-text="item.unreadMessageNum >= 99 ? '99+' : item.unreadMessageNum"
|
|
></sup>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<div class="session_list_delete" @click="deleteConversation(itemKey)"> 删除会话 </div>
|
|
</template>
|
|
</el-popover>
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<el-empty description="暂无最近会话" />
|
|
</template>
|
|
</el-scrollbar>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.session_list {
|
|
position: relative;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.offline_hint {
|
|
width: 100%;
|
|
height: 30px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
color: #f35f81;
|
|
background: #fce7e8;
|
|
font-size: 7px;
|
|
|
|
.plaint_icon {
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
color: #e5e5e5;
|
|
text-align: center;
|
|
line-height: 15px;
|
|
font-size: 7px;
|
|
font-weight: bold;
|
|
background: #e6686e;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.session_list .session_list_item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
height: 66px;
|
|
background: #f0f0f0;
|
|
color: var(--el-color-primary);
|
|
border-bottom: 1px solid var(--el-border-color);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #e5e5e5;
|
|
}
|
|
|
|
.item_body {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
.item_left {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.item_main {
|
|
width: 225px;
|
|
max-width: 225px;
|
|
height: 34px;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
|
|
.name {
|
|
min-width: 56px;
|
|
max-width: 180px;
|
|
height: 17px;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
/* identical to box height */
|
|
color: #333333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.last_msg_body {
|
|
max-width: 185px;
|
|
height: 17px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 17px;
|
|
letter-spacing: 0.3px;
|
|
color: #a3a3a3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.last_msg_body_mention {
|
|
font-size: 12px;
|
|
line-height: 17px;
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
.item_right {
|
|
width: 25%;
|
|
height: 34px;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
margin-right: 10px;
|
|
|
|
.time {
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
letter-spacing: 0.25px;
|
|
color: #a3a3a3;
|
|
}
|
|
|
|
.unReadNum_box {
|
|
margin-top: 10px;
|
|
vertical-align: middle;
|
|
|
|
.unReadNum_count {
|
|
display: inline-block;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
padding: 0 6px;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
background: #f5222d;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.session_list_item_active {
|
|
background: #d2d2d2;
|
|
}
|
|
|
|
.session_list .session_list_item + .list_item {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.session_list_delete {
|
|
cursor: pointer;
|
|
transition: all 0.5s;
|
|
|
|
&:hover {
|
|
background: #e1e1e1;
|
|
}
|
|
}
|
|
</style>
|