Skip to content

Commit 38d07a3

Browse files
icssoaicssoa
committed
优化客服聊天
1 parent 9c96709 commit 38d07a3

File tree

9 files changed

+865
-707
lines changed

9 files changed

+865
-707
lines changed

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

Lines changed: 50 additions & 626 deletions
Large diffs are not rendered by default.

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

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
<template>
2+
<div class="cl-chat-input">
3+
<!-- 工具栏 -->
4+
<div class="cl-chat-input__opbar">
5+
<ul>
6+
<!-- 表情 -->
7+
<li>
8+
<el-popover
9+
v-model="emoji.visible"
10+
placement="top-start"
11+
width="470"
12+
trigger="click"
13+
>
14+
<emoji @select="onEmojiSelect" />
15+
<img slot="reference" src="../static/images/emoji.png" alt="" />
16+
</el-popover>
17+
</li>
18+
<!-- 图片上传 -->
19+
<li hidden>
20+
<cl-upload accept="image/*" list-type :on-success="onImageSelect">
21+
<img src="../static/images/image.png" alt="" />
22+
</cl-upload>
23+
</li>
24+
<!-- 视频上传 -->
25+
<li hidden>
26+
<cl-upload
27+
accept="video/*"
28+
list-type
29+
:before-upload="
30+
f => {
31+
onBeforeUpload(f, 'video');
32+
}
33+
"
34+
:on-progress="onUploadProgress"
35+
:on-success="
36+
(r, f) => {
37+
onUploadSuccess(r, f, 'video');
38+
}
39+
"
40+
>
41+
<img src="../static/images/video.png" alt="" />
42+
</cl-upload>
43+
</li>
44+
</ul>
45+
</div>
46+
47+
<!-- 输入框，发送按钮 -->
48+
<div class="cl-chat-input__content">
49+
<el-input
50+
v-model="value"
51+
placeholder="请描述您想咨询的问题"
52+
type="textarea"
53+
:rows="5"
54+
@keyup.enter.native="onTextSend"
55+
></el-input>
56+
57+
<el-button type="primary" size="mini" :disabled="!value" @click="onTextSend"
58+
>发送</el-button
59+
>
60+
</div>
61+
</div>
62+
</template>
63+
64+
<script>
65+
import { mapGetters } from "vuex";
66+
import Emoji from "./emoji";
67+
import eventBus from "../utils/event-bus";
68+
69+
export default {
70+
components: {
71+
Emoji
72+
},
73+
74+
inject: ["socket"],
75+
76+
data() {
77+
return {
78+
value: "",
79+
emoji: {
80+
visible: false
81+
}
82+
};
83+
},
84+
85+
computed: {
86+
...mapGetters(["session"])
87+
},
88+
89+
methods: {
90+
// 上传前
91+
onBeforeUpload(file, key) {
92+
const data = {
93+
content: {
94+
[`${key}Url`]: ""
95+
},
96+
type: 0,
97+
contentType: MODES.indexOf(key),
98+
uid: file.uid,
99+
loading: true,
100+
progress: "0%"
101+
};
102+
103+
this.append(data);
104+
},
105+
106+
// 上传中
107+
onUploadProgress(e, file) {
108+
const item = this.message.list.find(e => e.uid == file.uid);
109+
110+
if (item) {
111+
item.progress = e.percent + "%";
112+
}
113+
},
114+
115+
// 上传成功
116+
onUploadSuccess(res, file, key) {
117+
const item = this.message.list.find(e => e.uid == file.uid);
118+
119+
if (item) {
120+
item.loading = false;
121+
item.content[`${key}Url`] = res.data;
122+
123+
this.send(item);
124+
}
125+
},
126+
127+
// 发送文本内容
128+
onTextSend() {
129+
if (this.value) {
130+
if (this.value.replace(/\n/g, "") !== "") {
131+
const data = {
132+
type: 0,
133+
contentType: 0,
134+
content: {
135+
text: this.value
136+
}
137+
};
138+
139+
this.send(data, true);
140+
141+
this.$nextTick(() => {
142+
this.value = "";
143+
});
144+
}
145+
}
146+
},
147+
148+
// 图片选择
149+
onImageSelect(res) {
150+
this.send(
151+
{
152+
content: {
153+
imageUrl: res.data
154+
},
155+
type: 0,
156+
contentType: 1
157+
},
158+
true
159+
);
160+
},
161+
162+
// 表情选择
163+
onEmojiSelect(url) {
164+
this.emoji.visible = false;
165+
this.send(
166+
{
167+
content: {
168+
imageUrl: url
169+
},
170+
type: 0,
171+
contentType: 2
172+
},
173+
true
174+
);
175+
},
176+
177+
// 视频选择
178+
onVideoSelect(url) {
179+
this.send(
180+
{
181+
content: {
182+
videoUrl: url
183+
},
184+
type: 0,
185+
contentType: 4
186+
},
187+
true
188+
);
189+
},
190+
191+
// 发送消息
192+
send(data, isAppend) {
193+
const { id, userId } = this.session;
194+
195+
// 更新消息
196+
// this.updateSession({
197+
// contentType,
198+
// content
199+
// });
200+
201+
if (this.socket) {
202+
this.socket.emit(`user@${userId}`, {
203+
contentType: data.contentType,
204+
type: 0,
205+
content: JSON.stringify(data.content),
206+
sessionId: id
207+
});
208+
209+
if (isAppend) {
210+
this.append(data);
211+
}
212+
}
213+
214+
if (isAppend) {
215+
this.append(data);
216+
}
217+
},
218+
219+
// 追加消息
220+
append(data) {
221+
eventBus.$emit("message-append", data);
222+
}
223+
}
224+
};
225+
</script>
226+
227+
<style lang="scss" scoped>
228+
.cl-chat-input {
229+
background-color: #fff;
230+
padding: 10px;
231+
border-radius: 3px;
232+
233+
&__opbar {
234+
margin-bottom: 5px;
235+
236+
ul {
237+
display: flex;
238+
li {
239+
list-style: none;
240+
margin-right: 10px;
241+
cursor: pointer;
242+
243+
&:hover {
244+
opacity: 0.7;
245+
}
246+
247+
img {
248+
height: 26px;
249+
width: 26px;
250+
}
251+
}
252+
}
253+
}
254+
255+
&__content {
256+
position: relative;
257+
258+
.el-button {
259+
position: absolute;
260+
right: 10px;
261+
bottom: 10px;
262+
}
263+
}
264+
}
265+
</style>

0 commit comments

Comments
 (0)