h5在線1v1客服|web在線客服系統|h5即時聊天

網上有不少環信、美恰之類的客服系統，最近也使用h5+css3+fontJs+swiper+wcPop等技術架構開發了一個在線客服(1v1溝通聊天)，能夠應用到在線臨時聊天、在線諮詢等情景。實現了消息、表情(含動圖)，圖片、附件發送及商品的推送。css

項目截圖：html

以下圖：可點擊「Apple官方旗艦店」或機器人按鈕發起在線聊天，聊天窗口以向上彈出展現；css3

以下圖：長按聊天信息，可出行菜單提示，操做更加方便簡潔，另外聊天背景能夠自行設置；架構

以下圖：聊天表情以彈窗定位形式展現，含有表情及動圖，讓聊天內容更加豐富；app

以下圖：聊天客服可根據顧客需求，推送一些熱門商品；ide

// 發送信息
var $chatMsgList = $("#J__chatMsgList"); function isEmpty(){ var html = $editor.html(); html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n"); html = html.replace(/<[^img].*?>/ig, ""); html = html.replace(/&nbsp;/ig, ""); return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == ""; } $(".J__wchatSubmit").on("click", function(){ // 判斷內容是否爲空
    if(isEmpty()) return; var html = $editor.html(); var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; html = html.replace(reg, "<a href='$1$2' target='_blank'>$1$2</a>"); var msgTpl = [ '<li class="me">\ <div class="content">\ <p class="author">遊客</p>\ <div class="msg">'+ html +'</div>\ </div>\ <a class="avatar"><img src="img/uimg/u__chat-imgDefault.jpg" /></a>\ </li>' ].join(""); $chatMsgList.append(msgTpl); $(".wc__choose-panel").hide(); // 清空聊天框並獲取焦點（處理輸入法和表情 - 聚焦）
    if(!$(".wc__choose-panel").is(":hidden")){ $editor.html(""); }else{ $editor.html("").focus().trigger("click"); } wchat_ToBottom(); }); // ...圖片選擇窗口
$("#J__chooseImg").on("change", function () { $(".wc__choose-panel").hide(); var file = this.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var _img = this.result; var _tpl = [ '<li class="me">\ <div class="content">\ <p class="author">遊客</p>\ <div class="msg picture"><img class="img__pic" src="'+ _img + '" /></div>\ </div>\ <a class="avatar"><img src="img/uimg/u__chat-imgDefault.jpg" /></a>\ </li>' ].join(""); $chatMsgList.append(_tpl); wchat_ToBottom(); } }); // ...文件選擇窗口
$("#J__chooseFile").on("change", function () { $(".wc__choose-panel").hide(); var file = this.files[0], fileSuffix = /\.[^\.]+/.exec(file.name).toString(), fileExt = fileSuffix.substr(fileSuffix.indexOf('.') + 1, fileSuffix.length).toLowerCase(); console.log(fileExt); var fileTypeArr = ['jpg', 'jpeg', 'png', 'gif', 'txt', 'rar', 'zip', 'pdf', 'docx', 'xls']; if ($.inArray(fileExt, fileTypeArr) < 0) { wcPop({ content: '附件只支持jpg、jpeg、png、gif、txt、rar、zip、pdf、docx、xls格式的文件', time: 2 }); return; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var _file = this.result; console.log(_file); var _tpl = [ '<li class="me">\ <div class="content">\ <p class="author">遊客</p>\ <div class="msg attachment">\ <i class="ico-attachment"></i>\ <span class="file-info">\ <p class="filename">'+ file.name + '</p>\ <p class="filesize">'+ formateSize(file.size) + '</p>\ </span>\ <a class="ico-download" href="'+ _file + '" target="_blank" download="' + file.name + '" title="' + file.name + '"></a>\ </div>\ </div>\ <a class="avatar"><img src="img/uimg/u__chat-imgDefault.jpg" /></a>\ </li>' ].join(""); $chatMsgList.append(_tpl); wchat_ToBottom(); } /** 格式化文件大小顯示 value : file文件的大小值 */ formateSize = function (value) { if (null == value || value == '') { return "0 Bytes"; } var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"); var index = 0; var srcsize = parseFloat(value); index = Math.floor(Math.log(srcsize) / Math.log(1024)); var size = srcsize / Math.pow(1024, index); size = size.toFixed(2);        //保留的小數位數
        return size + unitArr[index]; } });