|
|
|
|
@ -0,0 +1,218 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="chat-container">
|
|
|
|
|
<div class="header">当前客服：小爱</div>
|
|
|
|
|
<div class="body">
|
|
|
|
|
<div class="aside">
|
|
|
|
|
<div class="aside-header">近期会话</div>
|
|
|
|
|
<ul class="session-list">
|
|
|
|
|
<li v-for="(item, index) in sessionList" :key="index" class="session-item">
|
|
|
|
|
<el-badge class="session-count" :hidden="item.count === 0" :max="99" :value="item.count">
|
|
|
|
|
<el-avatar circle :src="item.avatar" />
|
|
|
|
|
</el-badge>
|
|
|
|
|
<div class="session-info">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="session-name">{{ item.name }}</div>
|
|
|
|
|
<div class="session-time">{{ item.time }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="session-content">{{ item.content }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="content-header">
|
|
|
|
|
<div class="content-header-left">
|
|
|
|
|
<div class="name sex-1">
|
|
|
|
|
{{ currentSession.name }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-header-right">
|
|
|
|
|
<el-button>转移会话</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="message-list"></div>
|
|
|
|
|
<div class="operation-bar">
|
|
|
|
|
<el-button type="text">
|
|
|
|
|
<el-icon name="chat-smile-3-fill" size="24" />
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="text">
|
|
|
|
|
<el-icon name="image-fill" size="24" />
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="text">
|
|
|
|
|
<el-icon name="movie-fill" size="24" />
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input">
|
|
|
|
|
<el-input v-model="state.message" type="textarea" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="send">
|
|
|
|
|
<el-button type="primary">发送</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
const sessionList = reactive([
|
|
|
|
|
{
|
|
|
|
|
name: '小可爱',
|
|
|
|
|
avatar: 'https://placem.at/people',
|
|
|
|
|
count: 1,
|
|
|
|
|
time: '2019-12-12',
|
|
|
|
|
content: '你好，请问这个能有优惠吗？',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '小可爱',
|
|
|
|
|
avatar: 'https://placem.at/people',
|
|
|
|
|
count: 0,
|
|
|
|
|
time: '2019-12-12',
|
|
|
|
|
content: '你好，请问这个能有优惠吗？',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '小可爱',
|
|
|
|
|
avatar: 'https://placem.at/people',
|
|
|
|
|
count: 0,
|
|
|
|
|
time: '2019-12-12',
|
|
|
|
|
content: '你好，请问这个能有优惠吗？',
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const state = reactive({
|
|
|
|
|
currentIndex: 0,
|
|
|
|
|
message: '',
|
|
|
|
|
});
|
|
|
|
|
const currentSession = computed(() => {
|
|
|
|
|
return sessionList[state.currentIndex];
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.chat-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.header {
|
|
|
|
|
padding: @layout-space 0;
|
|
|
|
|
}
|
|
|
|
|
.body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
.aside {
|
|
|
|
|
border-right: 1px solid #eee;
|
|
|
|
|
.aside-header {
|
|
|
|
|
height: 60px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: @layout-space;
|
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
font-size: @layout-h3;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
}
|
|
|
|
|
.session-list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.session-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: @layout-space;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
.session-count {
|
|
|
|
|
margin-right: @layout-space;
|
|
|
|
|
:deep(.el-badge__content) {
|
|
|
|
|
top: calc(@layout-space / 2);
|
|
|
|
|
right: calc(@layout-space * 1.25);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.session-info {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
margin-left: @layout-space;
|
|
|
|
|
.row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.session-time,
|
|
|
|
|
.session-content {
|
|
|
|
|
font-size: 0.8em;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
.session-content {
|
|
|
|
|
width: 150px;
|
|
|
|
|
margin-top: @layout-space-small;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
+ .session-item {
|
|
|
|
|
border-top: 1px solid #eee;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.content-header {
|
|
|
|
|
height: 60px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: @layout-space;
|
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
.content-header-left {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.name {
|
|
|
|
|
font-size: @layout-h3;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
&.sex-0::before {
|
|
|
|
|
content: '♀';
|
|
|
|
|
color: var(--el-color-danger);
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
font-family: '黑体';
|
|
|
|
|
}
|
|
|
|
|
&.sex-1::before {
|
|
|
|
|
content: '♂';
|
|
|
|
|
color: var(--el-color-primary);
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
font-family: '黑体';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.message-list {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
.operation-bar {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: @layout-space;
|
|
|
|
|
border-top: 1px solid #eee;
|
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
}
|
|
|
|
|
.input {
|
|
|
|
|
height: 100px;
|
|
|
|
|
.el-textarea {
|
|
|
|
|
height: 100%;
|
|
|
|
|
:deep(textarea) {
|
|
|
|
|
height: 100% !important;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.send {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
padding: @layout-space-small;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
向文可
2 years ago