mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 22:20:27 +08:00
808 lines
15 KiB
Vue
808 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<div class="chat-wrap">
|
|||
|
|
<!-- 聊天窗口 -->
|
|||
|
|
<cl-dialog :visible.sync="visible" v-bind="conf">
|
|||
|
|
<div class="chat-box">
|
|||
|
|
<!-- 会话区域 -->
|
|||
|
|
<div class="chat-box__session">
|
|||
|
|
<div class="chat-box__session-search">
|
|||
|
|
<el-input
|
|||
|
|
v-model="session.keyWord"
|
|||
|
|
placeholder="搜索"
|
|||
|
|
prefix-icon="el-icon-search"
|
|||
|
|
size="small"
|
|||
|
|
clearable
|
|||
|
|
@clear="onSearch"
|
|||
|
|
@keyup.enter.native="onSearch"
|
|||
|
|
></el-input>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 会话列表 -->
|
|||
|
|
<ul class="chat-box__session-list scroller1">
|
|||
|
|
<li
|
|||
|
|
class="chat-box__session-item"
|
|||
|
|
v-for="(item, index) in sessionList"
|
|||
|
|
:key="index"
|
|||
|
|
:class="{
|
|||
|
|
'is-active': session.current ? item.id == session.current.id : false
|
|||
|
|
}"
|
|||
|
|
@click="sessionDetail(item)"
|
|||
|
|
@contextmenu.stop.prevent="openSessionCM($event, item.id, index)"
|
|||
|
|
>
|
|||
|
|
<!-- 头像 -->
|
|||
|
|
<div class="avatar">
|
|||
|
|
<el-badge
|
|||
|
|
:value="item.serviceUnreadCount"
|
|||
|
|
:hidden="item.serviceUnreadCount === 0"
|
|||
|
|
:max="99"
|
|||
|
|
>
|
|||
|
|
<img :src="item.headimgurl" alt="" />
|
|||
|
|
</el-badge>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 昵称，内容 -->
|
|||
|
|
<div class="det">
|
|||
|
|
<p class="name">{{ item.nickname }}</p>
|
|||
|
|
<p class="content">{{ item.lastMessage }}</p>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 会话详情 -->
|
|||
|
|
<div class="chat-box__detail">
|
|||
|
|
<template v-if="session.current">
|
|||
|
|
<div
|
|||
|
|
class="chat-box__detail-container scroller1"
|
|||
|
|
ref="scroller"
|
|||
|
|
v-loading="message.loading"
|
|||
|
|
>
|
|||
|
|
<!-- 加载更多 -->
|
|||
|
|
<div class="chat-box__detail-more" v-if="message.list.length > 0">
|
|||
|
|
<el-button
|
|||
|
|
round
|
|||
|
|
size="mini"
|
|||
|
|
:loading="message.loading"
|
|||
|
|
@click="onLoadmore"
|
|||
|
|
>加载更多</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 消息列表 -->
|
|||
|
|
<message :list="message.list" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chat-box__detail-footer">
|
|||
|
|
<!-- 工具栏 -->
|
|||
|
|
<div class="chat-box__opbar">
|
|||
|
|
<ul>
|
|||
|
|
<!-- 表情 -->
|
|||
|
|
<li>
|
|||
|
|
<el-popover
|
|||
|
|
v-model="emoji.visible"
|
|||
|
|
placement="top-start"
|
|||
|
|
width="470"
|
|||
|
|
trigger="click"
|
|||
|
|
>
|
|||
|
|
<emoji @select="onEmojiSelect" />
|
|||
|
|
<img
|
|||
|
|
slot="reference"
|
|||
|
|
src="../static/images/emoji.png"
|
|||
|
|
alt=""
|
|||
|
|
/>
|
|||
|
|
</el-popover>
|
|||
|
|
</li>
|
|||
|
|
<!-- 图片上传 -->
|
|||
|
|
<li>
|
|||
|
|
<cl-upload
|
|||
|
|
accept="image/*"
|
|||
|
|
list-type
|
|||
|
|
:on-success="onImageSelect"
|
|||
|
|
>
|
|||
|
|
<img src="../static/images/image.png" alt="" />
|
|||
|
|
</cl-upload>
|
|||
|
|
</li>
|
|||
|
|
<!-- 视频上传 -->
|
|||
|
|
<li>
|
|||
|
|
<cl-upload
|
|||
|
|
accept="video/*"
|
|||
|
|
list-type
|
|||
|
|
:before-upload="
|
|||
|
|
(f) => {
|
|||
|
|
onBeforeUpload(f, 'video');
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
:on-progress="onUploadProgress"
|
|||
|
|
:on-success="
|
|||
|
|
(r, f) => {
|
|||
|
|
onUploadSuccess(r, f, 'video');
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<img src="../static/images/video.png" alt="" />
|
|||
|
|
</cl-upload>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 输入框，发送按钮 -->
|
|||
|
|
<div class="chat-box__input">
|
|||
|
|
<el-input
|
|||
|
|
v-model="message.value"
|
|||
|
|
placeholder="请描述您想咨询的问题"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="5"
|
|||
|
|
@keyup.enter.native="onTextSend"
|
|||
|
|
></el-input>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
size="mini"
|
|||
|
|
:disabled="!message.value"
|
|||
|
|
@click="onTextSend"
|
|||
|
|
>发送</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</cl-dialog>
|
|||
|
|
|
|||
|
|
<!-- MP3 -->
|
|||
|
|
<div class="mp3">
|
|||
|
|
<audio style="display: none" ref="sound" src="../static/notify.mp3" controls></audio>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import dayjs from "dayjs";
|
|||
|
|
import io from "socket.io-client";
|
|||
|
|
import { isString, debounce } from "cl-admin/utils";
|
|||
|
|
import { mapGetters } from "vuex";
|
|||
|
|
import { socketUrl } from "@/config/env";
|
|||
|
|
import Emoji from "./emoji";
|
|||
|
|
import Message from "./message";
|
|||
|
|
import { parseContent } from "../utils";
|
|||
|
|
|
|||
|
|
// 消息模式
|
|||
|
|
const MODES = ["text", "image", "emoji", "voice", "video"];
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "cl-chat",
|
|||
|
|
|
|||
|
|
components: {
|
|||
|
|
Message,
|
|||
|
|
Emoji
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
visible: false,
|
|||
|
|
conf: {
|
|||
|
|
title: "聊天对话框",
|
|||
|
|
props: {
|
|||
|
|
modal: true,
|
|||
|
|
"custom-class": "chat-box__wrap",
|
|||
|
|
"append-to-body": true,
|
|||
|
|
"close-on-click-modal": false,
|
|||
|
|
width: "1000px"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
message: {
|
|||
|
|
list: [],
|
|||
|
|
pagination: {
|
|||
|
|
page: 1,
|
|||
|
|
size: 20,
|
|||
|
|
total: 0
|
|||
|
|
},
|
|||
|
|
loading: false,
|
|||
|
|
value: ""
|
|||
|
|
},
|
|||
|
|
session: {
|
|||
|
|
list: [],
|
|||
|
|
pagination: {
|
|||
|
|
page: 1,
|
|||
|
|
size: 100,
|
|||
|
|
total: 0
|
|||
|
|
},
|
|||
|
|
current: null,
|
|||
|
|
keyWord: ""
|
|||
|
|
},
|
|||
|
|
emoji: {
|
|||
|
|
visible: false
|
|||
|
|
},
|
|||
|
|
socket: null
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters(["userInfo", "token"]),
|
|||
|
|
|
|||
|
|
sessionList() {
|
|||
|
|
return this.session.list
|
|||
|
|
.map((e) => {
|
|||
|
|
let { _text } = parseContent(e);
|
|||
|
|
e.lastMessage = _text;
|
|||
|
|
return e;
|
|||
|
|
})
|
|||
|
|
.sort((a, b) => {
|
|||
|
|
return a.updateTime < b.updateTime ? 1 : -1;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
this.socket = io(`${socketUrl}?isAdmin=true&token=${this.token}`);
|
|||
|
|
|
|||
|
|
this.socket.on("connect", () => {
|
|||
|
|
console.log("socket connect");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.socket.on("admin", (msg) => {
|
|||
|
|
this.onMessage(msg);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.socket.on("error", (err) => {
|
|||
|
|
console.log(err);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.socket.on("disconnect", () => {
|
|||
|
|
console.log("disconnect connect");
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
destroyed() {
|
|||
|
|
this.socket.close();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
open() {
|
|||
|
|
this.visible = true;
|
|||
|
|
|
|||
|
|
this.refreshSession().then((res) => {
|
|||
|
|
this.sessionDetail(res.list[0]);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
close() {
|
|||
|
|
this.visible = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 上传前
|
|||
|
|
onBeforeUpload(file, key) {
|
|||
|
|
const data = {
|
|||
|
|
content: {
|
|||
|
|
[`${key}Url`]: ""
|
|||
|
|
},
|
|||
|
|
type: 0,
|
|||
|
|
contentType: MODES.indexOf(key),
|
|||
|
|
uid: file.uid,
|
|||
|
|
loading: true,
|
|||
|
|
progress: "0%"
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.append(data);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 上传中
|
|||
|
|
onUploadProgress(e, file) {
|
|||
|
|
let item = this.message.list.find((e) => e.uid == file.uid);
|
|||
|
|
|
|||
|
|
if (item) {
|
|||
|
|
item.progress = e.percent + "%";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 上传成功
|
|||
|
|
onUploadSuccess(res, file, key) {
|
|||
|
|
let item = this.message.list.find((e) => e.uid == file.uid);
|
|||
|
|
|
|||
|
|
if (item) {
|
|||
|
|
item.loading = false;
|
|||
|
|
item.content[`${key}Url`] = res.data;
|
|||
|
|
|
|||
|
|
this.sendMessage(item);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 打开会话列表右键菜单
|
|||
|
|
openSessionCM(e, id, index) {
|
|||
|
|
this.$crud.openContextMenu(e, {
|
|||
|
|
list: [
|
|||
|
|
{
|
|||
|
|
label: "删除",
|
|||
|
|
icon: "el-icon-delete",
|
|||
|
|
callback: (item, done) => {
|
|||
|
|
this.$service.im.session.delete({
|
|||
|
|
ids: id
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.session.list.splice(index, 1);
|
|||
|
|
|
|||
|
|
if (id == this.session.current.id) {
|
|||
|
|
this.sessionDetail();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
done();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 刷新会话列表
|
|||
|
|
refreshSession(params) {
|
|||
|
|
return this.$service.im.session
|
|||
|
|
.page({
|
|||
|
|
...this.session.pagination,
|
|||
|
|
keyWord: this.session.keyWord,
|
|||
|
|
params,
|
|||
|
|
order: "updateTime",
|
|||
|
|
sort: "desc"
|
|||
|
|
})
|
|||
|
|
.then(async (res) => {
|
|||
|
|
this.session.list = res.list;
|
|||
|
|
this.session.pagination = res.pagination;
|
|||
|
|
|
|||
|
|
return res;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 刷新详情
|
|||
|
|
async sessionDetail(item) {
|
|||
|
|
if (item) {
|
|||
|
|
let { id } = this.session.current || {};
|
|||
|
|
|
|||
|
|
if (id != item.id) {
|
|||
|
|
item.serviceUnreadCount = 0;
|
|||
|
|
|
|||
|
|
this.conf.title = `与${item.nickname}聊天中`;
|
|||
|
|
this.message.loading = true;
|
|||
|
|
this.message.list = [];
|
|||
|
|
this.session.current = item;
|
|||
|
|
|
|||
|
|
await this.refreshMessage({ page: 1 });
|
|||
|
|
|
|||
|
|
this.message.loading = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.scrollToBottom();
|
|||
|
|
} else {
|
|||
|
|
this.conf.title = "聊天对话框";
|
|||
|
|
this.message.list = [];
|
|||
|
|
this.session.current = null;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 刷新消息列表
|
|||
|
|
refreshMessage(params) {
|
|||
|
|
return this.$service.im.message
|
|||
|
|
.page({
|
|||
|
|
...this.message.pagination,
|
|||
|
|
...params,
|
|||
|
|
sessionId: this.session.current.id,
|
|||
|
|
order: "createTime",
|
|||
|
|
sort: "desc"
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
this.message.pagination = res.pagination;
|
|||
|
|
this.prepend.apply(this, res.list);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 更新会话消息
|
|||
|
|
updateSession(data) {
|
|||
|
|
Object.assign(this.session.current, data);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 搜索关键字
|
|||
|
|
onSearch() {
|
|||
|
|
this.refreshSession({ page: 1 });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载更多
|
|||
|
|
onLoadmore() {
|
|||
|
|
this.refreshMessage({ page: this.message.pagination.page + 1 });
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 滚动到底部
|
|||
|
|
scrollToBottom: debounce(function () {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
if (this.$refs["scroller"]) {
|
|||
|
|
this.$refs["scroller"].scrollTo(0, 999999);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 300),
|
|||
|
|
|
|||
|
|
// 发送文本内容
|
|||
|
|
onTextSend() {
|
|||
|
|
if (this.message.value) {
|
|||
|
|
if (this.message.value.replace(/\n/g, "") !== "") {
|
|||
|
|
const data = {
|
|||
|
|
type: 0,
|
|||
|
|
contentType: 0,
|
|||
|
|
content: {
|
|||
|
|
text: this.message.value
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.append(data);
|
|||
|
|
this.sendMessage(data);
|
|||
|
|
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.message.value = "";
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 图片选择
|
|||
|
|
onImageSelect(res) {
|
|||
|
|
const data = {
|
|||
|
|
content: {
|
|||
|
|
imageUrl: res.data
|
|||
|
|
},
|
|||
|
|
type: 0,
|
|||
|
|
contentType: 1
|
|||
|
|
};
|
|||
|
|
this.append(data);
|
|||
|
|
this.sendMessage(data);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 表情选择
|
|||
|
|
onEmojiSelect(url) {
|
|||
|
|
this.emoji.visible = false;
|
|||
|
|
const data = {
|
|||
|
|
content: {
|
|||
|
|
imageUrl: url
|
|||
|
|
},
|
|||
|
|
type: 0,
|
|||
|
|
contentType: 2
|
|||
|
|
};
|
|||
|
|
this.append(data);
|
|||
|
|
this.sendMessage(data);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 视频选择
|
|||
|
|
onVideoSelect(url) {
|
|||
|
|
const data = {
|
|||
|
|
content: {
|
|||
|
|
videoUrl: url
|
|||
|
|
},
|
|||
|
|
type: 0,
|
|||
|
|
contentType: 4
|
|||
|
|
};
|
|||
|
|
this.append(data);
|
|||
|
|
this.sendMessage(data);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 监听消息
|
|||
|
|
onMessage(msg) {
|
|||
|
|
// 回调
|
|||
|
|
this.$emit("message", this.visible);
|
|||
|
|
|
|||
|
|
// 消息通知
|
|||
|
|
this.notification(msg);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const { contentType, fromId, content, msgId } = JSON.parse(msg);
|
|||
|
|
|
|||
|
|
// 是否当前
|
|||
|
|
const same = this.session.current && this.session.current.userId == fromId;
|
|||
|
|
|
|||
|
|
if (same) {
|
|||
|
|
// 更新消息
|
|||
|
|
this.updateSession({
|
|||
|
|
contentType,
|
|||
|
|
content
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 追加消息
|
|||
|
|
this.append({
|
|||
|
|
contentType,
|
|||
|
|
content: JSON.parse(content),
|
|||
|
|
type: 1
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 读消息
|
|||
|
|
this.$service.im.message.read({
|
|||
|
|
ids: [msgId],
|
|||
|
|
session: this.session.current.id
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 查找会话
|
|||
|
|
let item = this.session.list.find((e) => e.userId == fromId);
|
|||
|
|
|
|||
|
|
if (item) {
|
|||
|
|
if (!same) {
|
|||
|
|
item.serviceUnreadCount += 1;
|
|||
|
|
}
|
|||
|
|
// 更新消息
|
|||
|
|
Object.assign(item, {
|
|||
|
|
updateTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
|||
|
|
contentType,
|
|||
|
|
content
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 刷新会话列表
|
|||
|
|
this.refreshSession();
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error("消息格式异常", e);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 消息通知
|
|||
|
|
notification(msg) {
|
|||
|
|
const { _text } = parseContent(JSON.parse(msg));
|
|||
|
|
|
|||
|
|
// 播放音乐
|
|||
|
|
if (this.$refs.sound) {
|
|||
|
|
this.$refs.sound.play();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.visible) {
|
|||
|
|
// 页面消息提示
|
|||
|
|
this.$notify({
|
|||
|
|
title: "提示",
|
|||
|
|
message: this.$createElement("span", _text)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 浏览器消息通知
|
|||
|
|
const NotificationInstance = Notification || window.Notification;
|
|||
|
|
if (!!NotificationInstance) {
|
|||
|
|
if (NotificationInstance.permission !== "denied") {
|
|||
|
|
NotificationInstance.requestPermission((status) => {
|
|||
|
|
let n = new Notification("COOL-MALL", {
|
|||
|
|
body: _text,
|
|||
|
|
icon: "/favicon.ico"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
n.close();
|
|||
|
|
}, 2000);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 发送消息
|
|||
|
|
sendMessage({ contentType, content }) {
|
|||
|
|
const { id, userId } = this.session.current;
|
|||
|
|
|
|||
|
|
// 更新消息
|
|||
|
|
this.updateSession({
|
|||
|
|
contentType,
|
|||
|
|
content
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.socket.emit(`user@${userId}`, {
|
|||
|
|
contentType,
|
|||
|
|
type: 0,
|
|||
|
|
content: JSON.stringify(content),
|
|||
|
|
sessionId: id
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理消息数据
|
|||
|
|
* mode: 消息模式
|
|||
|
|
* type: 消息类型 0-回复，1-反馈
|
|||
|
|
* duration: 时常
|
|||
|
|
* videoUrl: 视频地址
|
|||
|
|
* videoCoverUrl: 视频封面
|
|||
|
|
* imageUrl: 图片地址
|
|||
|
|
* avatarUrl: 头像地址
|
|||
|
|
* nickName: 昵称
|
|||
|
|
*/
|
|||
|
|
handleMessage(e) {
|
|||
|
|
if (isString(e)) {
|
|||
|
|
e = JSON.parse(e);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isString(e.content)) {
|
|||
|
|
e.content = JSON.parse(e.content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 昵称
|
|||
|
|
const nickName = e.type == 0 ? this.userInfo.nickName : this.session.current.nickname;
|
|||
|
|
// 头像
|
|||
|
|
const avatarUrl =
|
|||
|
|
e.type == 0
|
|||
|
|
? this.userInfo.avatarUrl || require("../static/images/custom-avatar.png")
|
|||
|
|
: this.session.current.headimgurl;
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
...e,
|
|||
|
|
avatarUrl,
|
|||
|
|
nickName,
|
|||
|
|
mode: MODES[e.contentType],
|
|||
|
|
date: dayjs().format("YYYY-MM-DD HH:mm:ss")
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 追加数据到开头
|
|||
|
|
prepend(...data) {
|
|||
|
|
data.map(this.handleMessage).forEach((e) => {
|
|||
|
|
this.message.list.unshift(e);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 追加数据到结尾
|
|||
|
|
append(...data) {
|
|||
|
|
this.message.list.push(...data.map(this.handleMessage));
|
|||
|
|
this.scrollToBottom();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.chat-box__wrap {
|
|||
|
|
height: 650px;
|
|||
|
|
min-width: 1000px;
|
|||
|
|
margin-bottom: 0 !important;
|
|||
|
|
|
|||
|
|
.el-dialog__body {
|
|||
|
|
height: calc(100% - 46px);
|
|||
|
|
padding: 0;
|
|||
|
|
|
|||
|
|
.cl-dialog__container {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-box {
|
|||
|
|
display: flex;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: #f7f7f7;
|
|||
|
|
|
|||
|
|
&__session {
|
|||
|
|
height: calc(100% - 10px);
|
|||
|
|
width: 250px;
|
|||
|
|
margin: 5px 0 5px 5px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
&-search {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul {
|
|||
|
|
height: calc(100% - 52px);
|
|||
|
|
overflow: auto;
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
display: flex;
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-left: 5px solid #fff;
|
|||
|
|
|
|||
|
|
.avatar {
|
|||
|
|
height: 40px;
|
|||
|
|
width: 40px;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
display: block;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
background-color: #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-badge {
|
|||
|
|
&__content {
|
|||
|
|
height: 14px;
|
|||
|
|
line-height: 14px;
|
|||
|
|
padding: 0 4px;
|
|||
|
|
background-color: #fa5151;
|
|||
|
|
border: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.det {
|
|||
|
|
flex: 1;
|
|||
|
|
.name {
|
|||
|
|
font-size: 13px;
|
|||
|
|
margin-top: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name,
|
|||
|
|
.content {
|
|||
|
|
@include text_ellipsis(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.is-active {
|
|||
|
|
background-color: #eee;
|
|||
|
|
border-color: $color-main;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #eee;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__detail {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 5px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
&-container {
|
|||
|
|
flex: 1;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
padding: 10px;
|
|||
|
|
overflow: auto;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-more {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-footer {
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__message {
|
|||
|
|
flex: 1;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__opbar {
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
ul {
|
|||
|
|
display: flex;
|
|||
|
|
li {
|
|||
|
|
list-style: none;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
height: 26px;
|
|||
|
|
width: 26px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__input {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.el-button {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
bottom: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|