Skip to content

libai / guodong

Go to a project
Commit 846f4120 by libai
Options

测试

parent 15053ffa
Inline Side-by-side
Showing with 80 additions and 29 deletions
gzh/customer/index.html
...@@ -18,6 +18,10 @@ ...@@ -18,6 +18,10 @@
input[type="button"],button{ input[type="button"],button{
-webkit-appearance: none; -webkit-appearance: none;
} }
a{
color: #428bca;
text-decoration:none;
}
.cs-box{ .cs-box{
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -73,7 +77,7 @@ ...@@ -73,7 +77,7 @@
outline: none; outline: none;
border: none; border: none;
background: none; background: none;
width: 90%; width: 95%;
min-height: 0.9rem; min-height: 0.9rem;
padding: 0.266667rem 0 0.133333rem 0; padding: 0.266667rem 0 0.133333rem 0;
line-height: 0.9rem; line-height: 0.9rem;
...@@ -83,6 +87,7 @@ ...@@ -83,6 +87,7 @@
font-size: 18px; font-size: 18px;
resize: none; resize: none;
color: #353535; color: #353535;
display: inline-block;
} }
.btn input{ .btn input{
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
...@@ -107,7 +112,7 @@ ...@@ -107,7 +112,7 @@
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid transparent; border: 1px solid transparent;
position: relative; display: inline-block;
background-color: #eee; background-color: #eee;
} }
.txt .uploadimg input{ .txt .uploadimg input{
...@@ -201,7 +206,7 @@ ...@@ -201,7 +206,7 @@
.system{ .system{
text-align: center; text-align: center;
color:gray; color:gray;
font-size: 10px; font-size: 13px;
margin: 10px 0; margin: 10px 0;
} }
.funbtn{ .funbtn{
...@@ -209,11 +214,10 @@ ...@@ -209,11 +214,10 @@
width: 50%; width: 50%;
height: 1.5rem; height: 1.5rem;
line-height: 1.5rem; line-height: 1.5rem;
border: 1px solid #ccc;
font-size: 15px; font-size: 15px;
margin-left: 25%; margin-left: 25%;
border-radius: 3px; text-decoration: underline;
background-color: ghostwhite; color:#229ffd;
} }
.tips{ .tips{
...@@ -238,6 +242,10 @@ ...@@ -238,6 +242,10 @@
background:rgba(27,154,247, 0.8); background:rgba(27,154,247, 0.8);
color:#fff; color:#fff;
} }
.des{
background:rgb(81, 206, 255);
color:#fff;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -245,7 +253,7 @@ ...@@ -245,7 +253,7 @@
<h4>客服聊天<span id="state"></span></h4> <h4>客服聊天<span id="state"></span></h4>
<div id="cs-chat" class="cs-chat"> <div id="cs-chat" class="cs-chat">
<div class="chat-box service" id="help"> <div class="chat-box service" id="help">
<div class="info">系统</div> <div class="info des">系统</div>
<span class="chat-text service-text">您好，有什么需要帮助的吗？</span> <span class="chat-text service-text">您好，有什么需要帮助的吗？</span>
</div> </div>
</div> </div>
...@@ -259,7 +267,7 @@ ...@@ -259,7 +267,7 @@
<div class="btn"> <div class="btn">
<input type="button" value="发送" id="send"/> <input type="button" value="发送" id="send"/>
</div> </div>
<div class="tips" id="tips" hidden="hidden">测试</div> <div class="tips" id="tips" hidden="hidden"></div>
</div> </div>
<div class="copyright"> <div class="copyright">
...@@ -272,9 +280,24 @@ ...@@ -272,9 +280,24 @@
var ws; var ws;
var checkTimer; var checkTimer;
var sendtime=0; var sendtime=0;
var map = new Map();
$(function(){ $(function(){
btninit(); btninit();
params();
}); });
function params(){
var url = window.location.search;
if (url.indexOf("?") != -1) {
var p = url.substr(1);
keys = p.split("&");
for (i = 0; i < keys.length; i++) {
map.set(keys[i].split("=")[0],keys[i].split("=")[1]);
if("guestid"===keys[i].split("=")[0]){
setCookie('cs-guestid',keys[i].split("=")[1],3);
}
}
}
}
function btninit(){ function btninit(){
$("#send").click(function(){ $("#send").click(function(){
sendmsg(); sendmsg();
...@@ -327,13 +350,13 @@ ...@@ -327,13 +350,13 @@
$.each(list,function(i,msg){ $.each(list,function(i,msg){
historybulid(msg.mtype,msg.content,msg.fid,msg.mid); historybulid(msg.mtype,msg.content,msg.fid,msg.mid);
if(i==list.length-1){ if(i==list.length-1){
system('上次聊到这里('+msg.sendtime+')'); system('---上次聊到这里('+msg.sendtime+')---');
$("#cs-chat").append('<div class="system">---------------</div>'); $("#cs-chat").append('<div class="system">---------------</div>');
} }
}); });
} }
if(data.more){ if(data.more){
$("#cs-chat").prepend('<div class="funbtn" onclick="more()">更早的聊天</div>'); $("#cs-chat").prepend('<div class="funbtn" onclick="more()">更早的聊天记录</div>');
} }
WebSocketStart(guestid,send); WebSocketStart(guestid,send);
}else{ }else{
...@@ -362,14 +385,14 @@ ...@@ -362,14 +385,14 @@
$.each(list,function(i,msg){ $.each(list,function(i,msg){
historybulid(msg.mtype,msg.content,msg.fid,msg.mid); historybulid(msg.mtype,msg.content,msg.fid,msg.mid);
if(i==list.length-1){ if(i==list.length-1){
$("#cs-chat").prepend('<div class="funbtn" onclick="more()">更早的聊天</div>'); $("#cs-chat").prepend('<div class="funbtn" onclick="more()">更早的聊天记录</div>');
} }
if(i==0){ if(i==0){
$("#cs-chat").prepend('<div class="system">'+msg.sendtime+'</div>'); $("#cs-chat").prepend('<div class="system">'+msg.sendtime+'</div>');
} }
}); });
}else{ }else{
$("#cs-chat").prepend('<div class="system">没有更多了</div>'); $("#cs-chat").prepend('<div class="system">哦豁，没有了</div>');
} }
}else{ }else{
$("#cs-chat").prepend('<div class="system">获取失败('+data.code+')</div>'); $("#cs-chat").prepend('<div class="system">获取失败('+data.code+')</div>');
...@@ -388,9 +411,15 @@ ...@@ -388,9 +411,15 @@
if(cname=='system'){ if(cname=='system'){
$("#cs-chat").children("div:last-child").text(msg); $("#cs-chat").children("div:last-child").text(msg);
}else{ }else{
$("#cs-chat").append(sysmsg); var chat=$("#cs-chat");
$("#cs-chat").animate({scrollTop: $('#cs-chat')[0].scrollHeight}, 500); chat.append(sysmsg);
} var offset=chat[0].scrollHeight-chat[0].clientHeight;
if(offset-chat[0].scrollTop<(chat[0].clientHeight/2)){
chat.animate({scrollTop: chat.scrollHeight}, 500);
}else{
tips("有新的系统消息","normal",3000);
}
}
} }
function state(msg){ function state(msg){
$("#state").text("("+msg+")"); $("#state").text("("+msg+")");
...@@ -407,33 +436,57 @@ ...@@ -407,33 +436,57 @@
} }
function msgbulid(type,msg,kf,fid){ function msgbulid(type,msg,kf,fid){
var content=""; var content="";
var size=200;
if(fid>0){ if(fid>0){
content+='<div class="chat-box service"><div class="info">'+kf+'</div><span class="chat-text service-text">'; if(fid==1){
content+='<div class="chat-box service"><div class="info des">'+kf+'</div><span class="chat-text service-text">';
}else{
content+='<div class="chat-box service"><div class="info">'+kf+'</div><span class="chat-text service-text">';
}
}else{ }else{
content+='<div class="chat-box custom"><span class="chat-text ">'; content+='<div class="chat-box custom"><span class="chat-text ">';
} }
if(type==1){ if(type==1){
content+=msg+'</span></div>'; content+=msg+'</span></div>';
}else{ }else{
msg+='?x-oss-process=image/resize,l_200,m_mfit'; if(fid>0){
msg+='?x-oss-process=image/resize,p_95';
}else{
msg+='?x-oss-process=image/resize,l_'+size+',m_mfit';
}
content+='<img width="200px" src="'+cdn+msg+'"></span></div>'; content+='<img width="200px" src="'+cdn+msg+'"></span></div>';
} }
$("#cs-chat").append(content); var chat=$("#cs-chat");
$("#cs-chat").animate({scrollTop: $('#cs-chat')[0].scrollHeight}, 1000); chat.append(content);
var offset=chat[0].scrollHeight-chat[0].clientHeight;
if(offset-chat[0].scrollTop<(chat[0].clientHeight/2)){
chat.animate({scrollTop: chat.scrollHeight}, 1000);
}else{
if(fid>0){
tips("收到一条新消息","normal",3000);
}
}
if(type==2){
system('长按图片即可放大或保存到手机查看');
}
} }
function historybulid(type,msg,fid,mid){ function historybulid(type,msg,fid,mid){
var content=""; var content="";
var size=200;
if(fid>0){ if(fid>0){
content+='<div class="chat-box service" data-mid="'+mid+'"><div class="info">客服</div><span class="chat-text service-text">'; content+='<div class="chat-box service" data-mid="'+mid+'"><div class="info des">客服</div><span class="chat-text service-text">';
}else{ }else{
content+='<div class="chat-box custom" data-mid="'+mid+'"><span class="chat-text ">'; content+='<div class="chat-box custom" data-mid="'+mid+'"><span class="chat-text ">';
} }
if(type==1){ if(type==1){
content+=msg+'</span></div>'; content+=msg+'</span></div>';
}else{ }else{
msg+='?x-oss-process=image/resize,l_200,m_mfit'; if(fid>0){
msg+='?x-oss-process=image/resize,p_95';
}else{
msg+='?x-oss-process=image/resize,l_'+size+',m_mfit';
}
content+='<img width="200px" src="'+cdn+msg+'"></span></div>'; content+='<img width="200px" src="'+cdn+msg+'"></span></div>';
} }
$("#cs-chat").prepend(content); $("#cs-chat").prepend(content);
...@@ -470,6 +523,7 @@ ...@@ -470,6 +523,7 @@
var msg=JSON.parse(evt.data); var msg=JSON.parse(evt.data);
if(msg.uid!='0'){ if(msg.uid!='0'){
msgbulid(msg.mtype,msg.content,msg.kfName,msg.fid); msgbulid(msg.mtype,msg.content,msg.kfName,msg.fid);
sendtime=new Date().getTime();
} }
}; };
ws.onclose = function(event) ws.onclose = function(event)
...@@ -481,7 +535,7 @@ ...@@ -481,7 +535,7 @@
{ {
// 关闭 websocket // 关闭 websocket
state("连接错误"); state("连接错误");
msgbulid(1,"会话意外断开,请重新发送消息联系客服","系统",1); msgbulid(1,"会话意外断开,发送消息即可联系客服","系统",1);
console.error("WebSocket error observed:", event); console.error("WebSocket error observed:", event);
}; };
} else{ } else{
...@@ -491,12 +545,12 @@ ...@@ -491,12 +545,12 @@
} }
function check(){ function check(){
if(sendtime>0){ if(sendtime>0){
var min=1; var min=2;
var cut=1; var cut=5;
if(new Date().getTime()-sendtime>1000*60*min){ if(new Date().getTime()-sendtime>1000*60*min){
var index= $(".chat-box").last().attr("class").indexOf("service"); var index= $(".chat-box").last().attr("class").indexOf("service");
if(index>-1){ if(index>-1){
system("客服还没有等到您的回复,系统将在"+cut+"分钟后切断会话"); msgbulid(1,"客服还没有等到您的回复,系统将在"+cut+"分钟后切断会话","系统",1);
} }
} }
if(new Date().getTime()-sendtime>1000*60*(min+cut)){ if(new Date().getTime()-sendtime>1000*60*(min+cut)){
...@@ -515,10 +569,7 @@ ...@@ -515,10 +569,7 @@
if (!window.WebSocket) { return; } if (!window.WebSocket) { return; }
if (ws.readyState == WebSocket.OPEN) { if (ws.readyState == WebSocket.OPEN) {
var guestid=$("#guestid").val(); var guestid=$("#guestid").val();
var map = new Map();
map.set("guestid",guestid); map.set("guestid",guestid);
map.set("pkg","wechat");
map.set("cid","wechat");
var msg=new WsMsg(cid,message,JSON.stringify(mapToObj(map))); var msg=new WsMsg(cid,message,JSON.stringify(mapToObj(map)));
ws.send(JSON.stringify(msg)); ws.send(JSON.stringify(msg));
if(cid==2001){ if(cid==2001){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment