サマリー：<!DOCTYPE html><%@ page language="java" pageEncoding="utf-8"%><%@ include file="/platform/common/jsp/taglibs.jsp"%><html><head> <title>
<!DOCTYPE html>
<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="/platform/common/jsp/taglibs.jsp"%>
<html>
<head>
<title>php客服中心</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--微信不緩存東西 start-->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style type="text/css">
.myclass{
width:100%;
font-size: 12pt;
padding-bottom: 10px;
}
.myclass span{
width:100px;
background-color: #66b3ff;
border: 1px;
}
</style>
<link rel="stylesheet" type="text/css" href="${path}/module/cs/css/easyui.css">
<script type="text/javascript" src="${path}/module/cs/js/jquery.min.js"></script>
<script type="text/javascript" src="${path}/module/cs/js/jquery.easyui.min.js"></script>
<script type="text/javascript">
var oldId = 1;
//計(jì)算時(shí)間間隔
function computeTime(oldTime){
date = new Date(oldTime);
var date2 = date.getTime()-datetemp.getTime();
//一分鐘內(nèi)再次發(fā)消息，則不顯示發(fā)送消息的時(shí)間
if(date2>60000){
var flagH="";
var flagM="";
var hour = date.getHours();
var min= date.getMinutes();
//解決小時(shí)和分鐘小于10，數(shù)字前面不顯示0的情況
if(hour<10)flagH="0";else flagH="";
if(min<10)flagM=":0";else flagM=":";
//發(fā)送內(nèi)容時(shí)間
$("#contentCS").append("<div style='text-align:center ;'>"+flagH+hour+flagM+min+"</div>")
datetemp=date;
}
}
function getAllRecord(){
$.ajax({
url : "${path}/cs/getAllChatRecord?idTemp=user_id&id="+id+"&oldId="+oldId,
type : "POST",
dataType:"json",
data :null,
success : function(data) {
if (data.success) {
//將聊天信息顯示到頁(yè)面上
for ( var i in data.obj) {
var csChatRecord = data.obj[i];
if(csChatRecord.userContent != null && csChatRecord.userContent != ''){
computeTime(csChatRecord.time);
$("#contentCS").append("<div class='myclass' style='text-align:right ;'><span>"
+csChatRecord.userContent
+"</span></div>");
}
if(csChatRecord.customerContent != null && csChatRecord.customerContent != ''){
computeTime(csChatRecord.time);
$("#contentCS").append("<div class='myclass'><span>"
+csChatRecord.customerContent
+"</span></div>");
}
oldId=csChatRecord.id;
}
} else {
alert(data.msg);
}
} ,
error:function(result){
alert("服務(wù)器丟了");
}
});
}
//獲取左側(cè)正在溝通的用戶列表
function getCustomerList(){
$("#westList").html("");
$.ajax({
url : "${path}/cs/getCustomerList",
type : "POST",
dataType:"json",
success : function(data) {
if (data.success) {
var onlineFlag=1;
//用戶下線，如果客服人員正在與此人溝通，那么清空聊天頁(yè)面
for ( var i in data.obj) {
var customer = data.obj[i];
if(id==customer.id){
onlineFlag=0;
}
}
if(onlineFlag==1){
$("#contentCS").html("");
id="";
}
//獲得用戶列表，顯示到頁(yè)面上
for ( var i in data.obj) {
var customer = data.obj[i];
cId=customer.id;
var cHeadImg=customer.headImg;
var cName=customer.name;
if(customer.online >0){
$("#westList").append(
"<div id="+cId+" class='CustomerBG'><img alt='加載中' src='${path }/module/cs/images/"
+cHeadImg
+"' height='40px' width='40px' >"
+"<label id='labelId' class='checkLabel' style='font-size: 12pt;'data_id='"
+cId
+"'>"
+cName
+"</div>");
}
//防止列表刷新將選中的用戶置為未選中狀態(tài)
if(cId==id){
$("div#"+cId).css('background','#00ffff');
}
}
} else {
alert(data.msg);
}
} ,
error:function(result){
alert("服務(wù)器丟了");
}
});
}
var datetemp=new Date(0);//用于計(jì)算時(shí)間差的中間變量
var date;
$(function(){
//獲取用戶列表
getCustomerList();
//定時(shí)刷新
setInterval('getCustomerList()',1000);
//消息存入數(shù)據(jù)庫(kù)
$("#send").click(function() {
$.ajax({
url : "${path}/cs/saveUserChatRecord?id="+id,
type : "POST",
dataType:"json",
/* 向后端傳輸?shù)臄?shù)據(jù) */
data :$("#ff").serialize(),
success : function(data) {
if (!data.success) {
alert(data.msg);
}
$("#textId").textbox('clear');
} ,
error:function(result){
alert("發(fā)送失敗");
}
});
});
});
var id = "";
$(document).off("click", ".checkLabel").on("click", ".checkLabel", function(){
oldId = 1;
datetemp=new Date(0);
id = $(this).attr("data_id");
$(".CustomerBG").css('background','#ffffff');
$("div#"+id).css('background','#00ffff');
$("#contentCS").html("");
$("#contentCS").append("<div class='myclass'>當(dāng)前正在溝通的用戶："+$(this).text()+"</div>");
//從數(shù)據(jù)庫(kù)讀取消息
getAllRecord();
// 定時(shí)刷新組件，讀取數(shù)據(jù)庫(kù)信息
setInterval('getAllRecord()',1000);
});
</script>
</head>
<body>
<div id="cc" class="easyui-layout" style="width:600px;height:500px;" fit="true">
<!-- <div data-options="region:'north'" style="height:10%"></div> -->
<div data-options="region:'south'" style="height:30%;">
<form id="ff" style="height:100%;width:100%" >
<div>
<input id="textId" class="easyui-textbox" name="userContent" style="height:120px;width:100%;border: 0;" multiline="true" prompt="說(shuō)點(diǎn)什么吧..." />
</div>
<div style="float:right" >
<button type="button" id="send" >發(fā)送</button>
</div>
</form>
</div>
<!-- <div data-options="region:'east'" style="width:10%;"></div> -->
<div id="westList" data-options="region:'west'" style="width:20%;">
正在溝通的用戶
<button type="button" id="list" style="display: none"></button>
</div>
<div id="contentCS" data-options="region:'center'" style="padding:5px;" >
</div>
</div>
</body>
</html>
添削の先生：天蓬老師添削時(shí)間：2019-04-23 15:03:16
先生のまとめ：你是不是學(xué)習(xí)過(guò)ASP編程?
代碼寫得不錯(cuò), 非常的完整...