Skip to content

libai / guodong

Go to a project
Commit 846f4120 by libai
Options

测试

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