瀏覽代碼

在线客服游客创建工单开发

lihai 6 年之前
父節點
當前提交
653f13ddb1
共有 4 個文件被更改,包括 516 次插入6 次删除
  1. 121 1
      WebSite/chatWith.html
  2. 93 4
      WebSite/css/chat.css
  3. 301 0
      WebSite/js/chat.js
  4. 1 1
      WebUI/CallCenterWeb.UI/js/chat.js

+ 121 - 1
WebSite/chatWith.html

@@ -1,4 +1,4 @@
1
-<!DOCTYPE html>
1
+<!DOCTYPE html>
2 2
 <html>
3 3
 	<head>
4 4
 		<meta charset="UTF-8">
@@ -112,8 +112,128 @@
112 112
 				</div>
113 113
 				
114 114
 			</div>
115
+            <div class="chat_rightcontent">
116
+                <div class="personalIM">
117
+                    <form name="form" novalidate="novalidate">
118
+                        <table class="table table-bordered">
119
+                            <tr>
120
+                                <td style="width:30%;"><i class="must">*</i>姓名:</td>
121
+                                <td style="width:70%;">
122
+                                    <input type="text" id="cusname" placeholder="请输入您的姓名" />
123
+                                </td>
124
+                            </tr>
125
+
126
+                            <tr>
127
+                                <td><i class="must">*</i>联系电话:</td>
128
+                                <td><input type="text" id="conphone" placeholder="请输入您的电话" /></td>
129
+
130
+                            </tr>
131
+
132
+                            <tr>
133
+                                <td>姓别:</td>
134
+                                <td>
135
+                                    <label class="radio-inline">
136
+                                        <input type="radio" name="sex" value="0"> 男
137
+                                    </label>
138
+                                    <label class="radio-inline">
139
+                                        <input type="radio" name="sex" value="1"> 女
140
+                                    </label>
141
+
142
+                                </td>
143
+                            </tr>
144
+                            <tr>
145
+                                <td>电子信箱:</td>
146
+                                <td><input type="text" id="email" placeholder="请输入您的电子信箱" /></td>
147
+                            </tr>
148
+                            <tr>
149
+                                <td>邮编编码:</td>
150
+                                <td><input type="text" id="zipcode" placeholder="请输入邮政编码" /></td>
151
+                            </tr>
152
+                            <tr>
153
+                                <td><i class="must">*</i>投诉电话:</td>
154
+                                <td><input type="text" id="touSuphone" placeholder="请输入投诉电话" /></td>
155
+                            </tr>
156
+                            <tr>
157
+                                <td>来源:</td>
158
+                                <td>网站在线客服</td>
159
+                            </tr>
160
+
161
+                            <tr>
162
+                                <td><i class="must">*</i>投诉主题:</td>
163
+                                <td><input type="text" id="title" placeholder="请输入主题" /></td>
164
+                            </tr>
165
+                            <tr>
166
+                                <td><i class="must">*</i>投诉内容:</td>
167
+                                <td>
168
+                                    <textarea id="content" class="form-control" rows="4" placeholder="请输入投诉内容..."></textarea>
169
+                                </td>
170
+                            </tr>
171
+                            <tr>
172
+                                <td><i class="must">*</i>信息类别:</td>
173
+                                <td>
174
+                                    <select name="drpSort" id="xxlb"></select>
175
+                                </td>
176
+                            </tr>
177
+                            <tr>
178
+                                <td><i class="must">*</i>主题词:</td>
179
+                                <td>
180
+                                    <select name="drpSort" id="keys"></select>
181
+                                </td>
182
+                            </tr>
183
+                            <tr>
184
+                                <td>上传附件:</td>
185
+                                <td>
186
+                                    <div class="fileBox">
187
+                                    </div>
188
+                                    <input type="file" class="Input_" name="upFile" id="upFile" multiple="multiple" style="display: none;">
189
+                                    <input type="button" class="Input_" value="上传" id="scwj" />
190
+                                    </br>
191
+                                    <span style="color:#FF0000;">
192
+                                        <!--(*文件格式为png,jpg,mp4,mp3,pdf,doc,docx,xls,xlsx)-->
193
+                                    </span>
194
+                                    <!--<input type="button" class="Input_" value="删除附件" id="scfj" style="display:none;" />-->
195
+                                    <input type="hidden" id="file" />
196
+                                </td>
197
+                            </tr>
198
+                            <tr>
199
+                                <td><i class="must">*</i>事件地址:</td>
200
+                                <td class="adressBox">
201
+                                    <div>
202
+                                        <select name="" id="sourcearea"></select>
203
+                                        <select name="" id="town"></select>
204
+                                        <select name="" id="village"></select>
205
+                                    </div>
206
+
207
+                                    <input type="text" id="sourceaddress" placeholder="请输入详细地址..." />
208
+                                </td>
209
+                            </tr>
210
+                            <tr>
211
+                                <td>是否公开:</td>
212
+                                <td>
213
+                                    <label class="radio-inline">
214
+                                        <input type="radio" name="secret" value="0"> 是
215
+                                    </label>
216
+                                    <label class="radio-inline">
217
+                                        <input type="radio" name="secret" value="1"> 否
218
+                                    </label>
219
+                                </td>
220
+
221
+                            </tr>
222
+                            <tr>
223
+                                <!--<td colspan="2"><a href="">提交</a></td>-->
224
+                                <td colspan="2" style="text-align: center;">
225
+                                    <input class="nextGo" id="SavedSubmit" type="button" value="点击提交">
226
+
227
+                                </td>
228
+                            </tr>
229
+                        </table>
230
+
231
+                    </form>
232
+                </div>
233
+            </div>
115 234
 		</div>
116 235
 		 <input type="hidden" class="hidnum" />
236
+        <script src="layer/layer.js"></script>
117 237
 		<script src="./js/chat.js"></script>
118 238
 	</body>
119 239
 </html>

+ 93 - 4
WebSite/css/chat.css

@@ -14,8 +14,6 @@ ul, li {
14 14
 #chat {
15 15
     /*margin: 20px auto;*/
16 16
     width: 100%;
17
-    /*width: 900px;*/
18
-    /*height: 100%;*/
19 17
     height: 450px;
20 18
     overflow: hidden;
21 19
     border-radius: 3px;
@@ -46,7 +44,11 @@ ul, li {
46 44
 #chat .chat_left, #chat .chat_main, #chat .chat_sidebar, .message_mincon {
47 45
     height: 100%;
48 46
 }
49
-
47
+.chat_main {
48
+    float:left;
49
+    width:782px;
50
+    /*width:460px;*/
51
+}
50 52
 #chat .chat_main, .message_mincon {
51 53
     position: relative;
52 54
     /*overflow: hidden;*/
@@ -233,7 +235,7 @@ ul, li {
233 235
     .main_sendMessage textarea {
234 236
         padding: 10px;
235 237
         height: 55%;
236
-        width: 98%;
238
+        /*width: 98%;*/
237 239
         border: none;
238 240
         outline: 0;
239 241
         font-family: Micrsofot Yahei;
@@ -258,3 +260,90 @@ ul, li {
258 260
             }
259 261
 
260 262
 /*聊天区域结束*/
263
+/*在线客服 - 智能回复 样式 sta*/
264
+#btnaddworkorder {
265
+    color:red;
266
+    cursor:pointer;
267
+}
268
+.chat_rightcontent{
269
+				overflow-y: auto;
270
+				/*width: 322px;*/
271
+                width:316px;
272
+				height: 100%;
273
+				padding: 6px 9px;
274
+                margin-left:2px;
275
+   				box-sizing: border-box;
276
+    float:right;
277
+    background-color:#eee;
278
+    border-left:#ddd 1px solid;
279
+    display:none;
280
+			}
281
+
282
+.must {
283
+            font-style: normal;
284
+            color: red;
285
+            vertical-align: middle;
286
+            margin-right: 3px;
287
+        }
288
+.table > tbody > tr > td {
289
+    line-height:28px;
290
+}
291
+.personalIM .table {
292
+	/*width: 90%;*/
293
+	margin: 0px auto;
294
+}
295
+
296
+.personalIM .table tr td {
297
+	/*text-align: center;*/
298
+}
299
+
300
+.personalIM .table tr td img {
301
+	margin-right: 5px;
302
+}
303
+
304
+.personalIM .table tr td input[type=text] {
305
+	width: 100%;
306
+	height: 20px;
307
+	border: 0;
308
+	outline: none;
309
+    padding:3px 3px;
310
+    line-height:200px;
311
+	/*text-align: center;*/
312
+}
313
+    .personalIM .table tr td .form-control {
314
+	width: 100%;border:0px; resize: none;    
315
+    padding:3px 3px;
316
+    font-family:'';
317
+    }
318
+
319
+.personalIM .table tr td:first-child {
320
+	text-align: right;
321
+	width: 20%;
322
+    font-size:14px;
323
+}
324
+
325
+.personalIM .table tr td select {
326
+	vertical-align: middle;
327
+	font-size: 14px;
328
+	outline: none;
329
+	width: 59px;
330
+	height: 24px;
331
+	padding-left: 5px;
332
+    border:0px;
333
+}
334
+#xxlb{
335
+	width:100%;
336
+}
337
+#keys{
338
+	width:100%;
339
+}
340
+.personalIM .table tr td button {
341
+	color: #fff;
342
+	background: #ac2e3b;
343
+	border: 0;
344
+	padding: 5px 10px;
345
+	border-radius: 3px;
346
+	margin: 10px auto;
347
+	display: block;
348
+}
349
+/*在线客服 - 智能回复 样式 end*/

+ 301 - 0
WebSite/js/chat.js

@@ -217,3 +217,304 @@ function notice(cname, msg) {
217 217
     $(".chatlist_con").scrollTop($(".chatlist_con")[0].scrollHeight);
218 218
 }
219 219
 
220
+//智能回复 - 动作 start
221
+// 创建工单
222
+$(".chatlist_con").on('click', "li .message_mincon .message_text #btnaddworkorder", function () {
223
+    var width_active = 460;
224
+    //$("#chat").width(width_active);
225
+    if ($(".chat_main").width() == width_active) {
226
+        $(".chat_main").width(782);
227
+        $(".chat_rightcontent").css('display', 'none');
228
+    } else {
229
+        $(".chat_main").width(width_active);
230
+        $(".chat_rightcontent").css('display', 'block');
231
+    }
232
+});
233
+
234
+//信息分类
235
+LB($("#xxlb"));
236
+//主题关键词
237
+ZT($("#keys"));
238
+//事件区域
239
+QY($('#sourcearea'), 0);
240
+$('#sourcearea').change(function () {
241
+    QY($('#town'), $(this).val())
242
+})
243
+$('#town').change(function () {
244
+    QY($('#village'), $(this).val())
245
+})
246
+
247
+//上传附件
248
+$("#scwj").click(function () {
249
+    $("#upFile").trigger("click");
250
+})
251
+$("#upFile").change(function () {
252
+    upload();
253
+})
254
+// 创建工单
255
+$("#SavedSubmit").click(function () {
256
+    var myreg = /^[0-9]*$/;
257
+    var myregs = /^[0-9]*$/
258
+    var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
259
+    var cusname = $('#cusname').val(); //姓名
260
+    var cussex = $("input[name='sex']:checked").val(); //性别
261
+    var touSuphone = $('#touSuphone').val(); //投诉电话
262
+    var cusphone = $("#conphone").val(); //投诉人电话
263
+    var title = $('#title').val(); //主题
264
+    var content = $('#content').val(); //内容
265
+    var email = $("#email").val();
266
+    var zipcode = $("#zipcode").val();
267
+    var sourcearea = $("#sourcearea").val(); //=事发地域id
268
+    var sourceaddress = $('#sourceaddress').val(); //=事发详细地址
269
+    var type = $('#xxlb').val(); //信息类别ID
270
+    var keys = $('#keys').val(); //主题词
271
+    var isprotect = $("input[name='secret']:checked").val(); //(0保密1公开)
272
+    if (!$.trim(cusname)) {
273
+        layer.confirm('请输入姓名!', {
274
+            btn: ['确定']
275
+        });
276
+        return;
277
+    }
278
+    if (!$.trim(cusphone)) {
279
+        layer.confirm('请输入联系电话!', {
280
+            btn: ['确定']
281
+        });
282
+        return;
283
+    }
284
+    if (!myreg.test($.trim(cusphone))) {
285
+        layer.confirm('联系电话格式不正确!', {
286
+            btn: ['确定']
287
+        });
288
+        return;
289
+    }
290
+    if (email) {
291
+        if (!reg.test($.trim(email))) {
292
+            layer.confirm('邮箱格式不正确!', {
293
+                btn: ['确定']
294
+            });
295
+            return;
296
+        }
297
+    }
298
+    if (zipcode) {
299
+        if (!/^[0-9][0-9]{5}$/.test($.trim(zipcode))) {
300
+            layer.confirm('邮编格式不正确!', {
301
+                btn: ['确定']
302
+            });
303
+            return;
304
+        }
305
+    }
306
+    if (!$.trim(touSuphone)) {
307
+        layer.confirm('请输入投诉电话!', {
308
+            btn: ['确定']
309
+        });
310
+        return;
311
+    }
312
+    if (!/^[0-9]*$/.test($.trim(touSuphone))) {
313
+        layer.confirm('投诉电话格式不正确!', {
314
+            btn: ['确定']
315
+        });
316
+        return;
317
+    }
318
+    if (!$.trim(title)) {
319
+        layer.confirm('请输入主题!', {
320
+            btn: ['确定']
321
+        });
322
+        return;
323
+    }
324
+    if (!type) {
325
+        layer.confirm('请选择信息类别!', {
326
+            btn: ['确定']
327
+        });
328
+        return;
329
+    }
330
+    if (!$.trim(content)) {
331
+        layer.confirm('请输入内容!', {
332
+            btn: ['确定']
333
+        });
334
+        return;
335
+    }
336
+    if (!keys) {
337
+        layer.confirm('请选择主题词!', {
338
+            btn: ['确定']
339
+        });
340
+        return;
341
+    }
342
+    if (!$.trim(sourceaddress)) {
343
+        layer.confirm('请输入详细地址!', {
344
+            btn: ['确定']
345
+        });
346
+        return;
347
+    }
348
+
349
+    $.ajax({
350
+        type: "post",
351
+        url: huayi.config.callcenter_url + 'web/AddWebWorkOrder',
352
+        async: true,
353
+        dataType: 'json',
354
+        data: {
355
+            cusname: cusname,
356
+            cussex: cussex,
357
+            conphone: touSuphone,
358
+            //投诉电话
359
+            cusphone: cusphone,
360
+            //=投诉人电话
361
+            //cusaddress: cusaddress,
362
+            sourcearea: sourcearea,
363
+            sourceaddress: $('#town').find("option:selected").text() + " " + $('#village').find("option:selected").text() + " " + $('#sourceaddress').val(),
364
+            zipcode: zipcode,
365
+            email: email,
366
+            title: title,
367
+            content: content,
368
+            //isfile:isfile,
369
+            //filename:filename,
370
+            files: $("#file").val(),
371
+            keys: keys,
372
+            type: type,
373
+            source: 4,
374
+            issubmit: 1,
375
+            //=(0保存1保存并提交)
376
+            isprotect: isprotect
377
+        },
378
+        success: function (result) {
379
+            if (result.state.toLowerCase() == "success") {
380
+                var msg = '受理编号:' + result.data.workorderid + '&nbsp;查询密码:' + result.data.password + ',如需要查询请进网络查询'
381
+                if ($.trim(msg)) {
382
+                    obj.action = "cusreceive";  //cussend
383
+                    obj.msg = msg;
384
+                    Send();
385
+                    layer.msg('网上受理,提交成功');
386
+                }
387
+                Clean();
388
+            }
389
+        }
390
+    });
391
+});
392
+
393
+//信息类别
394
+function LB(obj) {
395
+    obj.empty();
396
+    $.ajax({
397
+        type: "get",
398
+        url: huayi.config.callcenter_url + "web/GetWebTypeList",
399
+        async: true,
400
+        dataType: 'json',
401
+        success: function (data) {
402
+            if (data.state.toLowerCase() == "success") {
403
+                var content = data.data;
404
+                $(content).each(function (i, n) {
405
+                    $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo(obj);
406
+                })
407
+            }
408
+        }
409
+    });
410
+
411
+}
412
+//主题词
413
+function ZT(obj) {
414
+    obj.empty();
415
+    //obj.append('<option selected="selected" value="">请选择</option>');
416
+    $.ajax({
417
+        type: "get",
418
+        url: huayi.config.callcenter_url + "web/GetWebKeyList",
419
+        async: true,
420
+        dataType: 'json',
421
+        success: function (data) {
422
+            if (data.state.toLowerCase() == "success") {
423
+                var content = data.data;
424
+                $(content).each(function (i, n) {
425
+                    $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo(obj);
426
+                })
427
+            }
428
+        }
429
+    });
430
+}
431
+function QY(obj, aid) {
432
+    obj.empty();
433
+    //obj.append('<option selected="selected" value="">请选择</option>');
434
+    $.ajax({
435
+        type: "get",
436
+        url: huayi.config.callcenter_url + "Web/GetWebAreaListById",
437
+        async: true,
438
+        dataType: 'json',
439
+        data: {
440
+            id: aid,
441
+        },
442
+        success: function (data) {
443
+            if (data.state.toLowerCase() == "success") {
444
+                var content = data.data;
445
+                $(content).each(function (i, n) {
446
+                    $("<option value='" + n.F_AreaId + "'>" + n.F_AreaName + "</option>").appendTo(obj);
447
+                })
448
+                obj.trigger('change')
449
+            }
450
+
451
+        }
452
+    });
453
+}
454
+//清除事件
455
+function Clean() {
456
+    $('#cusname').val(''); //姓名
457
+    $('#conphone').val(''); //联系电话
458
+    $('#touSuphone').val(''); //投诉电话
459
+    $('#zipcode').val(''); //邮编
460
+    $('#email').val(''); //邮箱
461
+    $('#title').val(''); //内容主题
462
+    $('#content').val(''); //详细内容
463
+    $('#sourceaddress').val(''); //事件详细地址
464
+    $('#xxlb').val(''); //形式分类id
465
+}
466
+//上传文件
467
+function upload() {
468
+    var Files = document.getElementById("upFile").files;
469
+
470
+    if (Files.length > 0) {
471
+        var formData = new FormData();
472
+        for (var i = 0; i < Files.length; i++) {
473
+            formData.append('file' + i, Files[i]);
474
+        }
475
+        var typeName = Files[0].name.split('.')[1];
476
+        if (typeName == "png" || typeName == 'jpg' || typeName == 'mp4' || typeName == 'mp3' || typeName == 'pdf' || typeName == 'doc' || typeName == 'docx' || typeName == 'xls' || typeName == 'xlsx') {
477
+            $.ajax({
478
+                url: huayi.config.callcenter_url + "Web/UploadFile",
479
+                type: "POST",
480
+                data: formData,
481
+                /**
482
+				 *必须false才会自动加上正确的Content-Type
483
+				 */
484
+                contentType: false,
485
+                /**
486
+				 * 必须false才会避开jQuery对 formdata 的默认处理
487
+				 * XMLHttpRequest会对 formdata 进行正确的处理
488
+				 */
489
+                processData: false,
490
+                success: function (result) {
491
+                    document.getElementById("upFile").outerHTML = document.getElementById("upFile").outerHTML;
492
+                    $("#upFile").change(function () {
493
+                        upload();
494
+                    });
495
+                    var r = $.parseJSON(result);
496
+                    if (r.state.toLowerCase() == "success") {
497
+                        var a = r.data;
498
+                        $(a).each(function (i, n) {
499
+                            var strs = '<span class="files" fiel-num="' + n.F_FileId + '">' + n.F_FileName + '<i class="fa del_file">X</i></span>'
500
+                            $(strs).appendTo($('.fileBox')).find('.del_file').click(function (event) {
501
+                                event.stopPropagation();
502
+                                $(this).parent().remove();
503
+                                file_num();
504
+                            })
505
+
506
+                        })
507
+                        file_num();
508
+                    }
509
+                }
510
+            });
511
+        } else {
512
+            layer.msg("格式不正确");
513
+        }
514
+    } else {
515
+        layer.confirm('请上传文件!', {
516
+            btn: ['确定']
517
+        });
518
+    }
519
+}
520
+//智能回复 - 动作 end

+ 1 - 1
WebUI/CallCenterWeb.UI/js/chat.js

@@ -430,7 +430,7 @@ function customer_answer() {
430 430
         dataType: 'json',
431 431
         async: true,
432 432
         data: {
433
-            keyword: $('#key_workorder').val(),
433
+            keyword: $('#key_customer').val(),
434 434
             page: 1,         //当前第几页
435 435
             pagesize: 20,    //每页显示的记录数
436 436
             token: $.cookie("token")