Skip to content

Commit 9c96709

Browse files
icssoaicssoa
committed
添加 mock 数据，添加客服聊天
1 parent cdc38f2 commit 9c96709

File tree

11 files changed

+173
-70
lines changed

11 files changed

+173
-70
lines changed

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cool-admin-vue",
3-
"version": "3.0.2",
3+
"version": "3.1.0",
44
"scripts": {
55
"serve": "vue-cli-service serve",
66
"build": "vue-cli-service build",
@@ -10,8 +10,8 @@
1010
},
1111
"dependencies": {
1212
"axios": "^0.21.1",
13-
"cl-admin": "^1.3.4",
14-
"cl-admin-crud": "^1.6.0",
13+
"cl-admin": "^1.4.0",
14+
"cl-admin-crud": "^1.6.2",
1515
"cl-admin-theme": "^0.0.4",
1616
"clipboard": "^2.0.7",
1717
"codemirror": "^5.59.4",
@@ -20,6 +20,7 @@
2020
"echarts": "^4.5.0",
2121
"element-ui": "^2.15.1",
2222
"js-beautify": "^1.13.5",
23+
"mockjs": "^1.1.0",
2324
"nprogress": "^0.2.0",
2425
"qs": "^6.9.1",
2526
"quill": "^1.3.7",

‎src/cool/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default {
2525
}
2626
}
2727
},
28+
"chat",
2829
"task",
2930
"copy",
3031
"distpicker",

‎src/cool/modules/base/components/route-nav/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default {
6666
},
6767
6868
computed: {
69-
...mapGetters(["conf", "menuGroup"]),
69+
...mapGetters(["menuGroup"]),
7070
7171
lastName() {
7272
return _.last(this.list).name;

‎src/cool/modules/chat/components/box.vue renamed to ‎src/cool/modules/chat/components/chat.vue

Lines changed: 72 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div class="chat-wrap">
2+
<div class="cl-chat__wrap">
33
<!-- 聊天窗口 -->
44
<cl-dialog :visible.sync="visible" v-bind="conf">
5-
<div class="chat-box">
5+
<div class="cl-chat">
66
<!-- 会话区域 -->
7-
<div class="chat-box__session">
8-
<div class="chat-box__session-search">
7+
<div class="cl-chat__session">
8+
<div class="cl-chat__session-search">
99
<el-input
1010
v-model="session.keyWord"
1111
placeholder="搜索"
@@ -18,9 +18,9 @@
1818
</div>
1919

2020
<!-- 会话列表 -->
21-
<ul class="chat-box__session-list scroller1">
21+
<ul class="cl-chat__session-list scroller1" v-if="sessionList.length > 0">
2222
<li
23-
class="chat-box__session-item"
23+
class="cl-chat__session-item"
2424
v-for="(item, index) in sessionList"
2525
:key="index"
2626
:class="{
@@ -47,18 +47,23 @@
4747
</div>
4848
</li>
4949
</ul>
50+
51+
<!-- 空态 -->
52+
<div class="cl-chat__session-empty" v-else>
53+
没有搜索到内容...
54+
</div>
5055
</div>
5156

5257
<!-- 会话详情 -->
53-
<div class="chat-box__detail">
58+
<div class="cl-chat__detail">
5459
<template v-if="session.current">
5560
<div
56-
class="chat-box__detail-container scroller1"
61+
class="cl-chat__detail-container scroller1"
5762
ref="scroller"
5863
v-loading="message.loading"
5964
>
6065
<!-- 加载更多 -->
61-
<div class="chat-box__detail-more" v-if="message.list.length > 0">
66+
<div class="cl-chat__detail-more" v-if="message.list.length > 0">
6267
<el-button
6368
round
6469
size="mini"
@@ -72,9 +77,9 @@
7277
<message :list="message.list" />
7378
</div>
7479

75-
<div class="chat-box__detail-footer">
80+
<div class="cl-chat__detail-footer">
7681
<!-- 工具栏 -->
77-
<div class="chat-box__opbar">
82+
<div class="cl-chat__opbar">
7883
<ul>
7984
<!-- 表情 -->
8085
<li>
@@ -93,7 +98,7 @@
9398
</el-popover>
9499
</li>
95100
<!-- 图片上传 -->
96-
<li>
101+
<li hidden>
97102
<cl-upload
98103
accept="image/*"
99104
list-type
@@ -103,7 +108,7 @@
103108
</cl-upload>
104109
</li>
105110
<!-- 视频上传 -->
106-
<li>
111+
<li hidden>
107112
<cl-upload
108113
accept="video/*"
109114
list-type
@@ -126,7 +131,7 @@
126131
</div>
127132

128133
<!-- 输入框，发送按钮 -->
129-
<div class="chat-box__input">
134+
<div class="cl-chat__input">
130135
<el-input
131136
v-model="message.value"
132137
placeholder="请描述您想咨询的问题"
@@ -158,9 +163,9 @@
158163

159164
<script>
160165
import dayjs from "dayjs";
161-
import io from "socket.io-client";
162-
import { isString, debounce } from "cl-admin/utils";
163166
import { mapGetters } from "vuex";
167+
import { isString, debounce } from "cl-admin/utils";
168+
import io from "socket.io-client";
164169
import { socketUrl } from "@/config/env";
165170
import Emoji from "./emoji";
166171
import Message from "./message";
@@ -180,14 +185,16 @@ export default {
180185
data() {
181186
return {
182187
visible: false,
188+
socket: null,
183189
conf: {
184190
title: "聊天对话框",
191+
height: "650px",
192+
width: "1000px",
185193
props: {
186194
modal: true,
187-
"custom-class": "chat-box__wrap",
195+
customClass: "cl-chat__dialog",
188196
"append-to-body": true,
189-
"close-on-click-modal": false,
190-
width: "1000px"
197+
"close-on-click-modal": false
191198
}
192199
},
193200
message: {
@@ -212,8 +219,7 @@ export default {
212219
},
213220
emoji: {
214221
visible: false
215-
},
216-
socket: null
222+
}
217223
};
218224
},
219225
@@ -233,28 +239,26 @@ export default {
233239
}
234240
},
235241
236-
mounted() {
237-
this.socket = io(`${socketUrl}?isAdmin=true&token=${this.token}`);
238-
239-
this.socket.on("connect", () => {
240-
console.log("socket connect");
241-
});
242-
243-
this.socket.on("admin", msg => {
244-
this.onMessage(msg);
245-
});
246-
247-
this.socket.on("error", err => {
248-
console.log(err);
249-
});
250-
251-
this.socket.on("disconnect", () => {
252-
console.log("disconnect connect");
253-
});
242+
created() {
243+
// this.socket = io(`${socketUrl}?isAdmin=true&token=${this.token}`);
244+
// this.socket.on("connect", () => {
245+
// console.log("socket connect");
246+
// });
247+
// this.socket.on("admin", msg => {
248+
// this.onMessage(msg);
249+
// });
250+
// this.socket.on("error", err => {
251+
// console.log(err);
252+
// });
253+
// this.socket.on("disconnect", () => {
254+
// console.log("disconnect connect");
255+
// });
254256
},
255257
256258
destroyed() {
257-
this.socket.close();
259+
if (this.socket) {
260+
this.socket.close();
261+
}
258262
},
259263
260264
methods: {
@@ -342,7 +346,7 @@ export default {
342346
order: "updateTime",
343347
sort: "desc"
344348
})
345-
.then(async res => {
349+
.then(res => {
346350
this.session.list = res.list;
347351
this.session.pagination = res.pagination;
348352
@@ -411,7 +415,10 @@ export default {
411415
scrollToBottom: debounce(function() {
412416
this.$nextTick(() => {
413417
if (this.$refs["scroller"]) {
414-
this.$refs["scroller"].scrollTo(0, 999999);
418+
this.$refs["scroller"].scrollTo({
419+
top: 99999,
420+
behavior: "smooth"
421+
});
415422
}
416423
});
417424
}, 300),
@@ -580,12 +587,14 @@ export default {
580587
content
581588
});
582589
583-
this.socket.emit(`user@${userId}`, {
584-
contentType,
585-
type: 0,
586-
content: JSON.stringify(content),
587-
sessionId: id
588-
});
590+
if (this.socket) {
591+
this.socket.emit(`user@${userId}`, {
592+
contentType,
593+
type: 0,
594+
content: JSON.stringify(content),
595+
sessionId: id
596+
});
597+
}
589598
},
590599
591600
/**
@@ -642,22 +651,22 @@ export default {
642651
</script>
643652

644653
<style lang="scss">
645-
.chat-box__wrap {
646-
height: 650px;
647-
min-width: 1000px;
654+
.cl-chat__dialog {
648655
margin-bottom: 0 !important;
656+
min-width: 1000px;
649657
650658
.el-dialog__body {
651-
height: calc(100% - 46px);
652659
padding: 0;
660+
}
653661
662+
&.is-fullscreen {
654663
.cl-dialog__container {
655-
height: 100%;
664+
height: calc(100vh - 46px) !important;
656665
}
657666
}
658667
}
659668
660-
.chat-box {
669+
.cl-chat {
661670
display: flex;
662671
height: 100%;
663672
background-color: #f7f7f7;
@@ -673,7 +682,7 @@ export default {
673682
padding: 10px;
674683
}
675684
676-
ul {
685+
&-list {
677686
height: calc(100% - 52px);
678687
overflow: auto;
679688
@@ -684,14 +693,12 @@ export default {
684693
border-left: 5px solid #fff;
685694
686695
.avatar {
687-
height: 40px;
688-
width: 40px;
689696
margin-right: 12px;
690697
691698
img {
692699
display: block;
693-
height: 100%;
694-
width: 100%;
700+
height: 40px;
701+
width: 40px;
695702
border-radius: 3px;
696703
background-color: #eee;
697704
}
@@ -741,6 +748,11 @@ export default {
741748
}
742749
}
743750
}
751+
752+
&-empty {
753+
text-align: center;
754+
margin-top: 10px;
755+
}
744756
}
745757
746758
&__detail {
@@ -779,6 +791,7 @@ export default {
779791
780792
&__opbar {
781793
margin-bottom: 5px;
794+
782795
ul {
783796
display: flex;
784797
li {

‎src/cool/modules/chat/components/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import Notice from "./notice";
2+
import Chat from "./chat";
23

3-
export default { Notice };
4+
export default { Notice, Chat };

‎src/cool/modules/chat/components/message.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<div class="main">
1414
<div class="avatar" @tap="toUserDetail(item)">
15-
<el-image :src="item.avatarUrl"></el-image>
15+
<img :src="item.avatarUrl" />
1616
</div>
1717

1818
<div class="det">
@@ -185,11 +185,13 @@ export default {
185185
186186
.avatar {
187187
flex-shrink: 0;
188-
height: 40px;
189-
width: 40px;
190188
191-
.el-image {
189+
img {
190+
display: block;
191+
height: 40px;
192+
width: 40px;
192193
border-radius: 3px;
194+
background-color: #fff;
193195
}
194196
}
195197

‎src/cool/modules/chat/service/message.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { BaseService, Service, Permission } from "cl-admin";
22

3-
@Service("app/im/message")
3+
@Service({
4+
namespace: "im/message",
5+
mock: true
6+
})
47
class ImMessage extends BaseService {
58
@Permission("read")
69
read(data) {

‎src/cool/modules/chat/service/session.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { BaseService, Service, Permission } from "cl-admin";
22

3-
@Service("app/im/session")
3+
@Service({
4+
namespace: "im/session",
5+
mock: true
6+
})
47
class ImSession extends BaseService {
58
@Permission("unreadCount")
69
unreadCount() {

0 commit comments

Comments
 (0)