Skip to content

libai / guodong

Go to a project
Commit 3d59d510 by libai
Options

测试

parent d39311bf
Inline Side-by-side
Showing with 608 additions and 0 deletions
gzh/customer/img/img.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614752793372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1173" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M778 183.8H247c-50.8 0-92 41.2-92 92v435c-1.2 4.8-1.2 9.4 0 14v23.6c0 50.8 41.2 92 92 92h531c50.8 0 92-41.2 92-92V275.8c0-50.8-41.2-92-92-92z m-531 56h531c19.8 0 36 16.2 36 36v349.4c-20.8-28.2-46-59-72.2-83.4-15.6-14.6-35-20.6-56.2-17.6-33.4 4.8-70 32.6-111.8 84.8-10 12.4-19 24.8-26.4 35.4-36.8-50.8-109.2-144.6-170.6-187.8-18.2-12.8-38.6-15.8-59.4-9-22.6 7.4-44.6 26.6-67 58.6-13 18.4-26.2 41.2-39.6 68V275.8c0.2-20 16.2-36 36.2-36z" p-id="1174"></path><path d="M632 374.8a63 63 0 1 0 126 0 63 63 0 1 0-126 0z" p-id="1175"></path></svg>
\ No newline at end of file
gzh/customer/index.html 0 → 100644
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>客服聊天</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.cs-box{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.cs-box h4{
text-align: center;
height: 30px;
line-height: 30px;
width: 100%;
background: #229ffd;
color: rgb(255, 255, 255);
margin: 0;
}
.cs-chat{
overflow-y: auto;
padding: 10px;
height: 380px;
word-wrap: break-word;
background-color: #f3f5f7;
flex: 1 1 auto;
}
.cs-submit{
width: 100%;
background-color:gainsboro;
flex: 0 0 auto;
display: flex;
justify-content: space-around;
padding: 0.266667rem;
position: relative;
}
.txt{
display:flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #d7d7d7;
border-radius: 0.16rem;
overflow: hidden;
position: relative;
background:#fcfafa;
width: 80%;
}
.btn{
display: flex;
position: relative;
}
.txt .content{
outline: none;
border: none;
background: none;
width: 90%;
min-height: 0.9rem;
padding: 0.266667rem 0 0.133333rem 0;
line-height: 0.9rem;
white-space: pre-wrap;
overflow-x: hidden;
overflow-y: scroll;
font-size: 18px;
resize: none;
color: #353535;
}
.btn input{
padding: 0.25rem 1rem;
border-radius: 5px;
box-sizing: border-box;
background-color: #428bca;
color: #fff;
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
font-weight: 500;
margin-right: 8px;
outline: none;
}
.txt .uploadimg{
width: 2rem;
height: 1.9rem;
margin:0.1rem;
border-radius: 10%;
background: url(img/img.png) no-repeat;
background-size: contain;
text-align: center;
box-sizing: border-box;
border: 1px solid transparent;
position: relative;
background-color: #eee;
}
.txt .uploadimg input{
opacity: 0;
width: 100%;
height: 100%;
}
.chat-box{
position: relative;
width: 100%;
margin: 5px 0;
}
.info{
display: inline-block;
width:2.2rem;
height:2.2rem;
line-height: 2.2rem;
overflow: hidden;
vertical-align: top;
font-size: 13px;
background-color: #229ffd;
border-radius: 50%;
text-align: center;
color: #fff;
padding: 0.1rem;
margin-right:6px;
}
.chat-text{
display: inline-block;
vertical-align: top;
position: relative;
padding: 0.4rem 0.3rem;
max-width: 80%;
white-space: pre-wrap;
border: 1px solid #DEDEDE;
background-color: #fff;
border-radius: 4px;
box-sizing: border-box;
color: #252525;
}
.service{
text-align: left;
}
.custom{
text-align: right;
}
.custom .chat-text{
margin-right:6px;
background-color: #A5DE37;
color: #fff;
}
.service-text:before {
content: '';
position: absolute;
top: 50%;
left: -4px;
width: 5px;
height: 5px;
background: #fff;
border-top: 1px solid #DEDEDE;
border-left: 1px solid #DEDEDE;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#custom .chat-text:after {
content: '';
position: absolute;
top: 50%;
right: -10px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #A5DE37;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.system{
text-align: center;
color:gray;
font-size: 10px;
margin: 10px 0;
}
.funbtn{
text-align: center;
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;
}
.tips{
position: absolute;
width: 100%;
height: 1.5rem;
line-height: 1.5rem;
top: -1.5rem;
left: 0;
font-size: 12px;
padding-left: 0.4rem;
}
.warn{
background:rgba(254,174,27, 0.8);
color:#fff;
}
.error{
background:rgba( 255,67,81, 0.8);
color:#fff;
}
.normal{
background:rgba(27,154,247, 0.8);
color:#fff;
}
</style>
</head>
<body>
<div class="cs-box">
<h4>客服聊天<span id="state"></span></h4>
<div id="cs-chat" class="cs-chat">
<div class="chat-box service" id="help">
<div class="info">系统</div>
<span class="chat-text service-text">您好，有什么需要帮助的吗？</span>
</div>
</div>
<div class="cs-submit">
<div class="txt">
<textarea id="content" class="content" placeholder="请输入您的问题"></textarea>
<div class="uploadimg">
<input accept="image/*" type="file" id="img" onchange="uploadimg()" />
</div>
</div>
<div class="btn">
<input type="button" value="发送" id="send"/>
</div>
<div class="tips" id="tips" hidden="hidden">测试</div>
</div>
<input type="text" hidden="hidden" id="guestid">
</div>
<script>
var server="http://test.liveauth.ishuaji.cn";
var cdn="https://app.ixiulive.com/";
var ws;
var checkTimer;
var sendtime=0;
$(function(){
btninit();
});
function btninit(){
$("#send").click(function(){
sendmsg();
});
$("#img").click(function(){
var guestid=$("#guestid").val();
if(null==guestid||guestid==''){
//连接客服
system('正在转接客服,请稍等');
connect();
}
});
}
function sendmsg(){
var content=$("#content").val();
if(null==content||content==''){
tips("不可以发送空消息","error",5000);
return;
}
if(content.length>120){
tips("内容超过最大限制","warn",5000);
return;
}
var guestid=$("#guestid").val();
if(null==guestid||guestid==''){
//连接客服
system('正在转接客服,请稍等');
connect();
}else{
send(content,2001)
}
}
function connect(){
var guestid=getCookie('cs-guestid');
$.ajax({
url:server+"/guest/service",
data:{guestid:guestid},
dataType:"json",
type:"POST",
success:function(data){
if(data.code==1){
guestid=data.guestid;
$("#guestid").val(guestid);
setCookie('cs-guestid',guestid,3)
var list=data.history;
if(list!=null&&list.length>0&&sendtime==0){
$("#help").remove();
$.each(list,function(i,msg){
historybulid(msg.mtype,msg.content,msg.fid,msg.mid);
if(i==list.length-1){
system('上次聊到这里('+msg.sendtime+')');
$("#cs-chat").append('<div class="system">---------------</div>');
}
});
}
if(data.more){
$("#cs-chat").prepend('<div class="funbtn" onclick="more()">更早的聊天</div>');
}
WebSocketStart(guestid);
}else{
system("连接失败("+data.code+")");
}
},
error:function(){
system("网络异常");
}
});
}
function more(){
var guestid=$("#guestid").val();
var index= $("#cs-chat").children(".chat-box").eq(0).attr("data-mid");
$.ajax({
url:server+"/guest/chathistory",
data:{guestid:guestid,index:index},
dataType:"json",
type:"POST",
success:function(data){
if(data.code==1){
$("#cs-chat").find(".funbtn").remove();
var list=data.history;
if(list.length>0){
$.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>');
}
if(i==0){
$("#cs-chat").prepend('<div class="system">'+msg.sendtime+'</div>');
}
});
}else{
$("#cs-chat").prepend('<div class="system">没有更多了</div>');
}
}else{
$("#cs-chat").prepend('<div class="system">获取失败('+data.code+')</div>');
}
},
error:function(){
$("#cs-chat").prepend('<div class="system">服务出错</div>');
}
});
}
function system(msg){
var sysmsg='<div class="system">'+msg+'</div>';
var cname= $("#cs-chat").children("div:last-child").attr("class");
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);
}
}
function state(msg){
$("#state").text("("+msg+")");
}
function tips(msg,type,time){
if(time>0){
$("#tips").removeClass("error warn normal").addClass(type).text(msg).show().delay(time).hide(300);
}else{
$("#tips").removeClass("error warn normal").addClass(type).text(msg).show();
}
}
function removetips(){
$("#tips").hide();
}
function msgbulid(type,msg,kf,fid){
var content="";
if(fid>0){
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';
content+='<img width="200px" src="'+cdn+msg+'"></span></div>';
}
$("#cs-chat").append(content);
$("#cs-chat").animate({scrollTop: $('#cs-chat')[0].scrollHeight}, 1000);
}
function historybulid(type,msg,fid,mid){
var content="";
if(fid>0){
content+='<div class="chat-box service" data-mid="'+mid+'"><div class="info">客服</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';
content+='<img width="200px" src="'+cdn+msg+'"></span></div>';
}
$("#cs-chat").prepend(content);
}
function WebSocketStart(guestid) {
state("连接中");
if(ws!=null&&ws.readyState == WebSocket.OPEN){
system("The socket is opening,please close first!");
return;
}
if ("WebSocket" in window)
{
// 打开一个 web socket
var url="ws://114.55.165.186:21901/ws?guestid="+guestid+"&type=5";
try {
ws = new WebSocket(url);
}catch(err){
console.error("WebSocket connect error:", err);
system("连接失败");
}
ws.onopen = function()
{
state("连接成功");
system("客服已接入");
sendmsg();
checkTimer=setInterval("check()",60000);
};
ws.onmessage = function (evt)
{
var msg=JSON.parse(evt.data);
if(msg.uid!='0'){
msgbulid(msg.mtype,msg.content,msg.kfName,msg.fid);
}
};
ws.onclose = function(event)
{
state("连接断开");
console.error("WebSocket close observed:", event);
};
ws.onerror = function(event)
{
// 关闭 websocket
state("连接错误");
msgbulid(1,"会话意外断开,请重新发送消息联系客服","系统",1);
console.error("WebSocket error observed:", event);
};
} else{
// 浏览器不支持 WebSocket
state("不支持");
}
}
function check(){
if(sendtime>0){
var min=1;
var cut=1;
if(new Date().getTime()-sendtime>1000*60*min){
var index= $(".chat-box").last().attr("class").indexOf("service");
if(index>-1){
system("客服还没有等到您的回复,系统将在"+cut+"分钟后切断会话");
}
}
if(new Date().getTime()-sendtime>1000*60*(min+cut)){
var index= $(".chat-box").last().attr("class").indexOf("service");
if(index>-1){
msgbulid(1,"因您长时间未回复，本次会话已经中止，如果还有问题需要咨询，请直接发送消息","系统",1);
checkTimer=null;
sendtime=-1;
$("#guestid").val('');
ws.close();
}
}
}
}
function send(message,cid) {
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){
msgbulid(1,message,'',0)
}else{
msgbulid(2,message,'',0)
}
$("#content").val('');
sendtime=new Date().getTime();
} else {
tips("连接已断开","error",3000);
state("连接断开");
}
}
function mapToObj(strMap){
let obj= Object.create(null);
for (let[k,v] of strMap) {
obj[k] = v;
}
return obj;
}
function WsMsg(cid,content,extend) {
this.time = new Date().getTime();
this.msgid=Math.random().toString(36).slice(-8);
this.cid = cid;
this.content = content;
this.extend = extend;
this.toUid=2000;
}
function uploadimg(){
var file=$("#img")[0].files;
if(file.length<1){
return;
}
if(file.length>1){
tips("每次只可选择一个图片","error",3000);
return;
}
if(file[0].size>10485760){
tips("超过限制，最大支持10M的图片","error",5000);
return;
}
var guestid=$("#guestid").val();
var formdata = new FormData();
formdata.append("img",file[0]);
formdata.append("guestid",guestid);
var url=server+"/guest/upload/img";
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.open("post", url, true);
xhr.onload = function () {
var result = xhr.responseText;
var json = eval("(" + result + ")");
switch (json.code) {
case 1:
// var path=cdn+;
send(json.imgkey,2002);
$("#img").val('');
break;
default:
system(json.msg);
$("#img").val('');
break;
}
};
xhr.send(formdata);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
tips("上传中("+percentComplete+"%)","normal");
if(percentComplete==100){
tips("上传完成","normal",3000);
}
}
else {
tips("上传失败","error",3000);
}
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}
function clearCookie(name) {
setCookie(name, "", -1);
}
</script>
</body>
</html>
\ No newline at end of file
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