消息通知（未完成）
This commit is contained in:
parent
976c933788
commit
110de9301f
|
|
@ -138,6 +138,7 @@
|
||||||
type="primary"
|
type="primary"
|
||||||
class="primary-lease"
|
class="primary-lease"
|
||||||
icon="ChatDotRound"
|
icon="ChatDotRound"
|
||||||
|
@click="onChat"
|
||||||
>在线聊</el-button
|
>在线聊</el-button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -446,6 +447,47 @@
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 在线聊 -->
|
||||||
|
<el-dialog
|
||||||
|
title="在线聊"
|
||||||
|
v-model="dialogChatVisible"
|
||||||
|
width="80%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
>
|
||||||
|
<div class="chat-container" style="height: 700px; display: flex;">
|
||||||
|
<div class="contact-list" style="width: 20%; height: 100%;">
|
||||||
|
<div class="contact-list-header">聊天列表</div>
|
||||||
|
<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
||||||
|
<el-menu-item v-for="(contact, index) in contacts" :key="index" :index="index.toString()">
|
||||||
|
<el-avatar :src="contact.avatar" />
|
||||||
|
{{ contact.name }}
|
||||||
|
<el-badge :value="contact.unreadCount" class="custom-badge" v-if="contact.unreadCount > 0"></el-badge>
|
||||||
|
</el-menu-item>
|
||||||
|
<!-- 其他联系人 -->
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
<div class="chat-content" style="width: 70%; height: 100%; display: flex; flex-direction: column;">
|
||||||
|
<!-- 聊天内容框，占右侧高度的80% -->
|
||||||
|
<div class="message-box" style="flex: 8; overflow-y: auto;">
|
||||||
|
<!-- 聊天消息 -->
|
||||||
|
<div class="chat-content-header" style="text-align: left;">{{ "聊天人" }}</div>
|
||||||
|
<div class="message" v-for="message in messages" :key="message.id">
|
||||||
|
<el-avatar :src="message.avatar" />
|
||||||
|
<div class="message-text">{{ message.text }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 发送消息的输入框，占右侧高度的20% -->
|
||||||
|
<div class="input-box" style="flex: 1;display: flex;">
|
||||||
|
<el-input
|
||||||
|
v-model="newMessage"
|
||||||
|
class="chat-input"
|
||||||
|
></el-input>
|
||||||
|
<el-button type="primary" @click="sendMessage">发送</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
@ -1043,6 +1085,41 @@ const onAddCart = async () => {
|
||||||
})
|
})
|
||||||
.catch(() => {})
|
.catch(() => {})
|
||||||
}
|
}
|
||||||
|
const contacts = ref([
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
phone: '12345678901',
|
||||||
|
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
||||||
|
unreadCount: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '李四',
|
||||||
|
phone: '12345678902',
|
||||||
|
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
||||||
|
unreadCount: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '王五',
|
||||||
|
phone: '12345678903',
|
||||||
|
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
||||||
|
unreadCount: 0,
|
||||||
|
},
|
||||||
|
])
|
||||||
|
const unreadCount = ref(1)
|
||||||
|
const messages = ref([
|
||||||
|
{ id: 1, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', text: '你好，欢迎来到在线聊！' },
|
||||||
|
// 其他消息
|
||||||
|
],)
|
||||||
|
const dialogChatVisible = ref(false)
|
||||||
|
const onChat = () => {
|
||||||
|
dialogChatVisible.value = true
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// getUnreadCount()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
:deep(.dialoglease) {
|
:deep(.dialoglease) {
|
||||||
|
|
@ -1488,4 +1565,54 @@ const onAddCart = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.chat-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.contact-list {
|
||||||
|
width: 200px;
|
||||||
|
/* border-right: 1px solid #ccc; */
|
||||||
|
}
|
||||||
|
.chat-content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translate(50%, -50%);
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.contact-list-header {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
.chat-content-header {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue