|
@@ -13,77 +13,11 @@ var $ = require('yoho-jquery'), |
|
@@ -13,77 +13,11 @@ var $ = require('yoho-jquery'), |
|
13
|
require('bootstrap');
|
13
|
require('bootstrap');
|
|
14
|
require('../common');
|
14
|
require('../common');
|
|
15
|
|
15
|
|
|
16
|
-config.conversationMessage.userId = 15575902; // todo 暂时写死
|
16
|
+config.conversationMessage.userId = 15575902; // todo userId 暂时写死
|
|
17
|
|
17
|
|
|
18
|
-var conversationMessage = config.conversationMessage;
|
18
|
+var cM = config.conversationMessage;
|
|
19
|
|
19
|
|
|
20
|
-socketChat.init(Object.assign(config, {
|
|
|
|
21
|
-
|
|
|
|
22
|
- onOpen: function (e) {
|
|
|
|
23
|
- console.log('websocket opened!')
|
|
|
|
24
|
- },
|
|
|
|
25
|
-
|
|
|
|
26
|
- onMessage: function (e) {
|
|
|
|
27
|
- var jsonString = e.data;
|
|
|
|
28
|
- var received = JSON.parse(jsonString);
|
|
|
|
29
|
- conversationMessage.conversationId = received.conversationId;
|
|
|
|
30
|
- console.log('监听到消息时：received=', received);
|
|
|
|
31
|
- },
|
|
|
|
32
|
-
|
|
|
|
33
|
- onClose: function() {
|
|
|
|
34
|
- console.log('websocket closed!')
|
|
|
|
35
|
- }
|
|
|
|
36
|
-
|
|
|
|
37
|
-}));
|
|
|
|
38
|
-
|
|
|
|
39
|
-// 调整窗口位置
|
|
|
|
40
|
-$(window).on('resize', function() {
|
|
|
|
41
|
- var vh = $(this).height(),
|
|
|
|
42
|
- vw = $(this).width();
|
|
|
|
43
|
|
20
|
|
|
44
|
- $('.chat-panel').css({
|
|
|
|
45
|
- width: vw - (vh - (70 + 950) / 1.7),
|
|
|
|
46
|
- 'margin-left': (vh - (70 + 950) / 1.7) / 2
|
|
|
|
47
|
- }).show();
|
|
|
|
48
|
-}).trigger('resize');
|
|
|
|
49
|
-
|
|
|
|
50
|
-// 获取鼠标位置
|
|
|
|
51
|
-$.fn.getCursorPosition = function() {
|
|
|
|
52
|
- var el = $(this).get(0);
|
|
|
|
53
|
- var pos = 0;
|
|
|
|
54
|
-
|
|
|
|
55
|
- if ('selectionStart' in el) {
|
|
|
|
56
|
- pos = el.selectionStart;
|
|
|
|
57
|
- } else if ('selection' in document) {
|
|
|
|
58
|
- el.focus();
|
|
|
|
59
|
- var Sel = document.selection.createRange();
|
|
|
|
60
|
- var SelLength = document.selection.createRange().text.length;
|
|
|
|
61
|
-
|
|
|
|
62
|
- Sel.moveStart('character', -el.value.length);
|
|
|
|
63
|
- pos = Sel.text.length - SelLength;
|
|
|
|
64
|
- }
|
|
|
|
65
|
- return pos;
|
|
|
|
66
|
-};
|
|
|
|
67
|
-
|
|
|
|
68
|
-
|
|
|
|
69
|
-// // 图片上传
|
|
|
|
70
|
-// $('#sendImg').fileupload({
|
|
|
|
71
|
-// dataType: 'json',
|
|
|
|
72
|
-// url: 'test',
|
|
|
|
73
|
-// done: function(e, data) {
|
|
|
|
74
|
-// $.each(data.result.files, function(index, file) {
|
|
|
|
75
|
-// $('<p/>').text(file.name).appendTo(document.body);
|
|
|
|
76
|
-// });
|
|
|
|
77
|
-// }
|
|
|
|
78
|
-// });
|
|
|
|
79
|
-
|
|
|
|
80
|
-// enter提交 ctrl+enter换行
|
|
|
|
81
|
-$('.msg-edit .msg-area').on('keydown', msgEnterAction);
|
|
|
|
82
|
-
|
|
|
|
83
|
-// 常见问题
|
|
|
|
84
|
-$('.qa-list .q').on('click', toggleAnswer);
|
|
|
|
85
|
-
|
|
|
|
86
|
-$('.send-order').on('click', sendOrderInfo);
|
|
|
|
87
|
|
21
|
|
|
88
|
|
22
|
|
|
89
|
/**
|
23
|
/**
|
|
@@ -180,6 +114,10 @@ function dispatchUtil(e) { |
|
@@ -180,6 +114,10 @@ function dispatchUtil(e) { |
|
180
|
$('#makeEvaluation').modal({
|
114
|
$('#makeEvaluation').modal({
|
|
181
|
show: true
|
115
|
show: true
|
|
182
|
});
|
116
|
});
|
|
|
|
117
|
+ },
|
|
|
|
118
|
+
|
|
|
|
119
|
+ 3: function() {
|
|
|
|
120
|
+ connectService();
|
|
183
|
}
|
121
|
}
|
|
184
|
};
|
122
|
};
|
|
185
|
|
123
|
|
|
@@ -369,7 +307,7 @@ function msgEnterAction(e) { |
|
@@ -369,7 +307,7 @@ function msgEnterAction(e) { |
|
369
|
|
307
|
|
|
370
|
if (!ctrlLike) {
|
308
|
if (!ctrlLike) {
|
|
371
|
e.preventDefault();
|
309
|
e.preventDefault();
|
|
372
|
- sendMsg(e);
|
310
|
+ _sendMessage(e);
|
|
373
|
} else {
|
311
|
} else {
|
|
374
|
var tag = $(e.target),
|
312
|
var tag = $(e.target),
|
|
375
|
pos = tag.getCursorPosition(),
|
313
|
pos = tag.getCursorPosition(),
|
|
@@ -385,22 +323,6 @@ function msgEnterAction(e) { |
|
@@ -385,22 +323,6 @@ function msgEnterAction(e) { |
|
385
|
}
|
323
|
}
|
|
386
|
|
324
|
|
|
387
|
/**
|
325
|
/**
|
|
388
|
- * 发送消息
|
|
|
|
389
|
- * @param e
|
|
|
|
390
|
- */
|
|
|
|
391
|
-function sendMsg(e) {
|
|
|
|
392
|
- var tag = $(e.target),
|
|
|
|
393
|
- msg = tag.val();
|
|
|
|
394
|
-
|
|
|
|
395
|
- if (!msg) return;
|
|
|
|
396
|
- conversationMessage.type = 3;
|
|
|
|
397
|
- conversationMessage.message.content = msg;
|
|
|
|
398
|
- // conversationMessage.uuid = uuid.randomUUID();
|
|
|
|
399
|
- console.log('消息发送时conversationMessage=', conversationMessage);
|
|
|
|
400
|
- socketChat.send(JSON.stringify(Object.assign(conversationMessage)));
|
|
|
|
401
|
-}
|
|
|
|
402
|
-
|
|
|
|
403
|
-/**
|
|
|
|
404
|
* 常见问题
|
326
|
* 常见问题
|
|
405
|
* @param e
|
327
|
* @param e
|
|
406
|
*/
|
328
|
*/
|
|
@@ -423,16 +345,199 @@ function sendOrderInfo(e) { |
|
@@ -423,16 +345,199 @@ function sendOrderInfo(e) { |
|
423
|
}
|
345
|
}
|
|
424
|
|
346
|
|
|
425
|
/**
|
347
|
/**
|
|
426
|
- * 连接客服
|
|
|
|
427
|
- * @param e
|
348
|
+ * 连线客服
|
|
|
|
349
|
+ * @param
|
|
428
|
*/
|
350
|
*/
|
|
429
|
function connectService() {
|
351
|
function connectService() {
|
|
430
|
- conversationMessage.type = 2;
|
|
|
|
431
|
- console.log('连线客服时：', conversationMessage);
|
|
|
|
432
|
- socketChat.send(JSON.stringify(conversationMessage));
|
352
|
+ cM.type = 2;
|
|
|
|
353
|
+ socketChat.send(JSON.stringify(cM));
|
|
433
|
|
354
|
|
|
434
|
}
|
355
|
}
|
|
435
|
|
356
|
|
|
|
|
357
|
+/**
|
|
|
|
358
|
+ * 处理收到消息
|
|
|
|
359
|
+ * @private
|
|
|
|
360
|
+ */
|
|
|
|
361
|
+function _getMessage(received) {
|
|
|
|
362
|
+ console.log('客户收到消息！', received);
|
|
|
|
363
|
+
|
|
|
|
364
|
+ var recType = received.type,
|
|
|
|
365
|
+ message = received.message,
|
|
|
|
366
|
+ msgType = message.type,
|
|
|
|
367
|
+ allTypes = config.receivedType;
|
|
|
|
368
|
+
|
|
|
|
369
|
+ // 请求人工/接入人工成功/接入人工失败
|
|
|
|
370
|
+ var tipTpl;
|
|
|
|
371
|
+
|
|
|
|
372
|
+ if (recType === 2) {
|
|
|
|
373
|
+ switch(msgType) {
|
|
|
|
374
|
+ case 0: // 0是没上班
|
|
|
|
375
|
+ tipTpl = `<div class="list-item">
|
|
|
|
376
|
+ <p class="push-tip">
|
|
|
|
377
|
+ <span class="tip">${message.content}</span>
|
|
|
|
378
|
+ </p>
|
|
|
|
379
|
+ </div>`;
|
|
|
|
380
|
+ break;
|
|
|
|
381
|
+ case 1: // 1是需要排队
|
|
|
|
382
|
+ tipTpl = `<div class="list-item">
|
|
|
|
383
|
+ <p class="push-tip">
|
|
|
|
384
|
+ <span class="tip">${message.content}您也可以选择<a class="leave-msg">留言</a>！</span>
|
|
|
|
385
|
+ </p>
|
|
|
|
386
|
+ </div>`;
|
|
|
|
387
|
+ break;
|
|
|
|
388
|
+ case 2: // 2是接入人工成功
|
|
|
|
389
|
+ tipTpl = `<div class="list-item">
|
|
|
|
390
|
+ <p class="push-tip">
|
|
|
|
391
|
+ <span class="tip">${message.content}</span>
|
|
|
|
392
|
+ </p>
|
|
|
|
393
|
+ </div>`;
|
|
|
|
394
|
+ break;
|
|
|
|
395
|
+ }
|
|
|
|
396
|
+ }
|
|
|
|
397
|
+
|
|
|
|
398
|
+ // 待重构
|
|
|
|
399
|
+ if(recType === 3 || recType === 103 || recType === 10003) {
|
|
|
|
400
|
+
|
|
|
|
401
|
+ message.newContent = message.newContent.replace(/src="(\d{3}).gif"/g, 'src="/img/service/emoji/$1.gif"');
|
|
|
|
402
|
+ message.content = message.content.replace(/src="(\d{3}).gif"/g, 'src="/img/service/emoji/$1.gif"');
|
|
|
|
403
|
+ if(recType === 3) {
|
|
|
|
404
|
+ tipTpl = `<div class="list-item host">
|
|
|
|
405
|
+ <img src="/img/service/cus-avatar.png" class="avatar">
|
|
|
|
406
|
+ <div class="item-detail">
|
|
|
|
407
|
+ <span class="time">18823562175 10:14:37</span>
|
|
|
|
408
|
+ <div class="msg-bubble">
|
|
|
|
409
|
+ <div>${message.newContent}</div>
|
|
|
|
410
|
+ </div>
|
|
|
|
411
|
+ </div>
|
|
|
|
412
|
+ </div>`
|
|
|
|
413
|
+ }
|
|
|
|
414
|
+
|
|
|
|
415
|
+ if(recType === 103) {
|
|
|
|
416
|
+
|
|
|
|
417
|
+ tipTpl = `<div class="list-item guest">
|
|
|
|
418
|
+ <img src="/img/service/agent-avatar.png" class="avatar">
|
|
|
|
419
|
+ <div class="item-detail">
|
|
|
|
420
|
+ <span class="time">客服机器人 10:14:37</span>
|
|
|
|
421
|
+ <div class="msg-bubble">
|
|
|
|
422
|
+ <div>${message.newContent}</div>
|
|
|
|
423
|
+ </div>
|
|
|
|
424
|
+ </div>
|
|
|
|
425
|
+ </div>`
|
|
|
|
426
|
+ }
|
|
|
|
427
|
+
|
|
|
|
428
|
+ if(recType === 10003) {
|
|
|
|
429
|
+
|
|
|
|
430
|
+ tipTpl = `<div class="list-item guest">
|
|
|
|
431
|
+ <img src="/img/service/agent-avatar.png" class="avatar">
|
|
|
|
432
|
+ <div class="item-detail">
|
|
|
|
433
|
+ <span class="time">客服助手 10:14:37</span>
|
|
|
|
434
|
+ <div class="msg-bubble">
|
|
|
|
435
|
+ <div>${message.newContent}</div>
|
|
|
|
436
|
+ </div>
|
|
|
|
437
|
+ </div>
|
|
|
|
438
|
+ </div>`
|
|
|
|
439
|
+ }
|
|
|
|
440
|
+ }
|
|
|
|
441
|
+
|
|
|
|
442
|
+ if(recType === 999999999) {
|
|
|
|
443
|
+ tipTpl = `<div class="list-item">
|
|
|
|
444
|
+ <p class="push-tip">
|
|
|
|
445
|
+ <span class="tip">${message.content}<a class="red-tip reconnect">连线客服</a></span>
|
|
|
|
446
|
+ </p>
|
|
|
|
447
|
+ </div>`;
|
|
|
|
448
|
+ }
|
|
|
|
449
|
+
|
|
|
|
450
|
+ $('.msg-list').append(tipTpl);
|
|
|
|
451
|
+
|
|
|
|
452
|
+ $('.panel-main .main-body').scrollTop($('.panel-main .main-body')[0].scrollHeight);
|
|
|
|
453
|
+}
|
|
|
|
454
|
+
|
|
|
|
455
|
+/**
|
|
|
|
456
|
+ * 处理发送消息
|
|
|
|
457
|
+ * @private
|
|
|
|
458
|
+ */
|
|
|
|
459
|
+function _sendMessage(e, msgType) {
|
|
|
|
460
|
+ var tag = $('.msg-area'),
|
|
|
|
461
|
+ msg = tag.val().trim();
|
|
|
|
462
|
+
|
|
|
|
463
|
+ if (!msg) return;
|
|
|
|
464
|
+ cM.type = 3;
|
|
|
|
465
|
+ cM.message.content = msg;
|
|
|
|
466
|
+ cM.message.type = msgType || 1;
|
|
|
|
467
|
+ cM.uuid = uuid.v4(); // 用于标示当条消息
|
|
|
|
468
|
+ socketChat.send(JSON.stringify(Object.assign(cM)));
|
|
|
|
469
|
+ tag.val('');
|
|
|
|
470
|
+}
|
|
|
|
471
|
+
|
|
|
|
472
|
+socketChat.init(Object.assign(config, {
|
|
|
|
473
|
+
|
|
|
|
474
|
+ onOpen: function (e) {
|
|
|
|
475
|
+ console.log('websocket opened!')
|
|
|
|
476
|
+ },
|
|
|
|
477
|
+
|
|
|
|
478
|
+ onMessage: function (e) {
|
|
|
|
479
|
+ var jsonString = e.data;
|
|
|
|
480
|
+ var received = JSON.parse(jsonString);
|
|
|
|
481
|
+
|
|
|
|
482
|
+ cM.conversationId = received.conversationId;
|
|
|
|
483
|
+ _getMessage(received);
|
|
|
|
484
|
+ },
|
|
|
|
485
|
+
|
|
|
|
486
|
+ onClose: function() {
|
|
|
|
487
|
+ console.log('websocket closed!')
|
|
|
|
488
|
+ }
|
|
|
|
489
|
+
|
|
|
|
490
|
+}));
|
|
|
|
491
|
+
|
|
|
|
492
|
+// 调整窗口位置
|
|
|
|
493
|
+$(window).on('resize', function() {
|
|
|
|
494
|
+ var vh = $(this).height(),
|
|
|
|
495
|
+ vw = $(this).width();
|
|
|
|
496
|
+
|
|
|
|
497
|
+ $('.chat-panel').css({
|
|
|
|
498
|
+ width: vw - (vh - (70 + 950) / 1.7),
|
|
|
|
499
|
+ 'margin-left': (vh - (70 + 950) / 1.7) / 2
|
|
|
|
500
|
+ }).show();
|
|
|
|
501
|
+}).trigger('resize');
|
|
|
|
502
|
+
|
|
|
|
503
|
+// 获取鼠标位置
|
|
|
|
504
|
+$.fn.getCursorPosition = function() {
|
|
|
|
505
|
+ var el = $(this).get(0);
|
|
|
|
506
|
+ var pos = 0;
|
|
|
|
507
|
+
|
|
|
|
508
|
+ if ('selectionStart' in el) {
|
|
|
|
509
|
+ pos = el.selectionStart;
|
|
|
|
510
|
+ } else if ('selection' in document) {
|
|
|
|
511
|
+ el.focus();
|
|
|
|
512
|
+ var Sel = document.selection.createRange();
|
|
|
|
513
|
+ var SelLength = document.selection.createRange().text.length;
|
|
|
|
514
|
+
|
|
|
|
515
|
+ Sel.moveStart('character', -el.value.length);
|
|
|
|
516
|
+ pos = Sel.text.length - SelLength;
|
|
|
|
517
|
+ }
|
|
|
|
518
|
+ return pos;
|
|
|
|
519
|
+};
|
|
|
|
520
|
+
|
|
|
|
521
|
+
|
|
|
|
522
|
+// // 图片上传
|
|
|
|
523
|
+// $('#sendImg').fileupload({
|
|
|
|
524
|
+// dataType: 'json',
|
|
|
|
525
|
+// url: 'test',
|
|
|
|
526
|
+// done: function(e, data) {
|
|
|
|
527
|
+// $.each(data.result.files, function(index, file) {
|
|
|
|
528
|
+// $('<p/>').text(file.name).appendTo(document.body);
|
|
|
|
529
|
+// });
|
|
|
|
530
|
+// }
|
|
|
|
531
|
+// });
|
|
|
|
532
|
+
|
|
|
|
533
|
+// enter提交 ctrl+enter换行
|
|
|
|
534
|
+$('.msg-edit .msg-area').on('keydown', msgEnterAction);
|
|
|
|
535
|
+
|
|
|
|
536
|
+// 常见问题
|
|
|
|
537
|
+$('.qa-list .q').on('click', toggleAnswer);
|
|
|
|
538
|
+
|
|
|
|
539
|
+$('.send-order').on('click', sendOrderInfo);
|
|
|
|
540
|
+
|
|
436
|
// 订单信息、常见问题
|
541
|
// 订单信息、常见问题
|
|
437
|
$('.right-head .tab').click('click', switchTab);
|
542
|
$('.right-head .tab').click('click', switchTab);
|
|
438
|
|
543
|
|
|
@@ -451,6 +556,9 @@ $('.emoji-component .emoji').on('click', setEmoji); |
|
@@ -451,6 +556,9 @@ $('.emoji-component .emoji').on('click', setEmoji); |
|
451
|
// 连线客服
|
556
|
// 连线客服
|
|
452
|
$('.push-tip .reconnect').on('click', connectService);
|
557
|
$('.push-tip .reconnect').on('click', connectService);
|
|
453
|
|
558
|
|
|
|
|
559
|
+// 发送
|
|
|
|
560
|
+$('.msg-edit .send').on('click', _sendMessage);
|
|
|
|
561
|
+
|
|
454
|
// 记录鼠标位置
|
562
|
// 记录鼠标位置
|
|
455
|
var cursorPo;
|
563
|
var cursorPo;
|
|
456
|
$('.msg-area').on('blur', function() {
|
564
|
$('.msg-area').on('blur', function() {
|
