Files
2026-02-07 15:48:27 +08:00

682 lines
26 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>客服专区</title>
<link rel="stylesheet" type="text/css" href="/css/api.css" />
<link rel="stylesheet" type="text/css" href="/css/content.css" />
<script type="text/javascript" src="/scripts/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.cookie.min.js"></script>
<!--<script type="text/javascript" src="/scripts/iscroll.js"></script>-->
<script type="text/javascript" src="/script/main.js?t=0"></script>
<script type="text/javascript" src="/layer/layer.js"></script>
<script type="text/javascript" src="/Scripts/long.js"></script>
<script type="text/javascript" src="/script/moment.js"></script>
<script type="text/javascript" src="/Scripts/TouchSlide.1.1.js"></script>
<script type="text/javascript" src="/script/api.js"></script>
<style type="text/css">
html, body {
overflow: hidden;
background-color: #051E54;
}
.picScroll .bd ul li {
float: left;
border: 0;
height: 2.5em;
width: 14%;
}
.picScroll .bd ul li img {
height: 1.8em;
width: 1.8em;
background: none;
}
.picScroll .hd {
border-bottom: 0;
margin-right: 35%;
}
.picScroll .hd ul {
margin-top: 1.1em;
}
#wrapper {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.pullDown {
position: absolute;
top: -1.25rem;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
display: none;
}
.pullUp {
position: absolute;
bottom: -1.25rem;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
display: none;
}
.pullDown.loading, .pullUp.loading, .pullDown.refresh, .pullUp.refresh {
display: block;
}
.uploadpic_btn {
position: absolute;
width: 2.6em;
height: 2.8em;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
}
footer {
height: 3.5em;
}
footer .addchatbox .addbody textarea {
height: 2.6em;
line-height: 2.5em;
}
.layer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, .5);
display: none;
}
.layer img {
width: auto;
max-width: 20em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<script type="text/javascript">
var userId = null;
var LoginId = null;
var CartId = null;
var opentimes = null;
var timeout0 = null;
var startsj = "";
var uploading = 0;
var myScroll = null;
var pullDown = 1; // 下拉刷新避免多次执行
var pullUp = 1; // 上拉加载避免多次执行
var downHeight = 0;
var upHeight = 0;
var isload = true;//设置是否终止滚动加载
var curScrollHeight = 0;//当前滚动位置
var curCount = 1;//计数器,防止滚动时重复执行加载下一页
$(document).ready(function () {
userId = getlocalStorage("userId");
LoginId = getlocalStorage("LoginId");
CartId = getlocalStorage("CartId");
document.onkeydown = function (event) {
var e = event || window.event;
if (e.keyCode === 13) {
onkeyupbody();
}
};
rdata(1);
if (timeout0 != null) {
clearInterval(timeout0);
}
timeout0 = setInterval("rdata(1)", 8000);
});
function onScroll() {
if (myScroll != null) {
myScroll.destroy();
myScroll = null;
}
myScroll = new IScroll('#wrapper', {
probeType: 2,
fadeScrollbars: false
});
myScroll.on('scroll', function () {
var y = myScroll.y;
downHeight = $(".pullDown").height();
upHeight = $(".pullUp").height();
// 下拉加载
if (y >= downHeight && pullDown) {
$(".pullDown").addClass("refresh").html("松开刷新...");
myScroll.minScrollY = downHeight;
pullDown = 0;
}
if (y <= downHeight && y >= 0 && !pullDown) {
$(".pullDown").removeClass("refresh").html("下拉刷新...");
pullDown = 1;
myScroll.minScrollY = 0;
}
// 上拉刷新
var maxHeight = myScroll.maxScrollY;
if (y < (maxHeight - upHeight) && pullUp) {
$(".pullUp").addClass("loading").html("松开加载...");
myScroll.maxScrollY = maxHeight - upHeight;
pullUp = 0;
}
if (y > maxHeight && y < (maxHeight + upHeight) && !pullUp) {
$(".pullUp").removeClass("loading").html("上拉加载...");
myScroll.maxScrollY = maxHeight + upHeight;
pullUp = 1;
}
});
myScroll.on('scrollEnd', function () {
if ($(".pullDown").hasClass("refresh")) {
$(".pullDown").text("正在刷新...");
opentimes = setTimeout(function () {
clearInterval(opentimes);
rdata(1);
$(".pullDown").removeClass("refresh").html("下拉刷新...");
pullDown = 1;
myScroll.refresh();
}, 2000);
}
if ($(".pullUp").hasClass("loading")) {
$(".pullUp").text("正在加载...");
opentimes = setTimeout(function () {
clearInterval(opentimes);
rdata(0);
myScroll.refresh();
}, 1000);
}
});
myScroll.on('refresh', function () {
$(".pullUp").removeClass("loading").html("上拉加载...");
pullUp = 1;
});
}
function onScroll0() {
isload = true;//设置是否终止滚动加载
curScrollHeight = 0;//当前滚动位置
curCount = 1;//计数器,防止滚动时重复执行加载下一页
$("#wrapper").scroll(function () {
var pageHeight = $("#sysnew").height();
var showHeight = $("#wrapper").height();
var scrollHeight = $("#wrapper").scrollTop();
if (curScrollHeight - scrollHeight < 10 && curScrollHeight > 0) {
if (curCount == 1 && isload) {
rdata(2);
}
curCount++; //加载下一页后计数器+1
}
if (curScrollHeight < scrollHeight) {
curScrollHeight = pageHeight - showHeight;//滚动到页面底部时,重设当前滚动位置
curCount = 1;
}
});
}
function rdata(ag) {
userId = getlocalStorage("userId");
LoginId = getlocalStorage("LoginId");
var Start = $("#sysnew .databox").length;
if (ag == 1) {
Start = 0;
}
if (ag == 0 || ag == 2) {
$(".ajaxLoader").removeClass("uhide");
}
if (ag == 0 || ag == 1) {
startsj = "";
}
$.ajax({
type: 'GET',
url: "/apiajax.ashx",
data: "&action=getchatlist&ttype=0&ifweb=1&startsj=" + startsj + "&Start=" + Start + "&userId=" + (userId != null ? userId : "") + "&LoginId=" + (LoginId != null ? LoginId : ""),
dataType: "JSON",
error: function (xhr, type) {
tishi3("发生错误:" + JSON.stringify(xhr));
},
success: function (data) {
if (data) {
if (data.status == 1) {
var html = "";
if (ag == 2) {
if (data.data.length > 0) {
startsj = data.data[data.data.length - 1].addtime;
for (i = 0; i < data.data.length; i++) {
var bifshow = 0;
if ($("#databox_" + data.data[i].id).length == 0) {
bifshow = 1;
}
if (bifshow == 1) {
html += addMsg(data.data[i], i);
}
}
}
} else {
if (data.data.length > 0) {
startsj = data.data[data.data.length - 1].addtime;
for (i = data.data.length - 1; i >= 0; i--) {
var bifshow = 0;
if (ag == 0 || ag == 2) {
if ($("#databox_" + data.data[i].id).length == 0) {
bifshow = 1;
}
} else {
bifshow = 1;
}
if (bifshow == 1) {
html += addMsg(data.data[i], i);
}
}
}
}
$(".more_box").html("");
if (ag == 1) {
//setlocalStorage("kf_data", JSON.stringify(data.data));
$('#sysnew').html(html);
onScroll0();
} else if (ag == 2) {
var yhtml = $("#sysnew").html();
$("#sysnew").html((html + yhtml));
} else {
$("#sysnew").append(html);
}
var imgs = $("#sysnew img");
for (var i = 0; i < imgs.length; i++) {
$(imgs[i]).click(function () {
var asrc = $(this).attr("src");
onshowimg(asrc);
})
}
var ele = document.documentElement || document.body;
if (ag == 2) {
setTimeout(function () {
//设置滚动条到最顶部
ele.scrollTop = 0;
}, 300);
} else {
setTimeout(function () {
//设置滚动条到最底部
ele.scrollTop = ele.scrollHeight;
}, 300);
}
$(".ajaxLoader").addClass("uhide");
} else {
if (Start > 0) {
if (Start > 10) {
$(".more_box").html("亲,找不到更多信息了!");
}
} else {
if (ag == 1) {
$('#sysnew').html("");
}
$(".more_box").html("亲,暂无信息!");
}
}
} else {
tishi3("网络错误!");
$(".ajaxLoader").addClass("uhide");
}
}
});
}
function addMsg(param) {
var avatar = param.avatar;
if (avatar == "") {
avatar = "/image/logo.png";
}
var html = '<div class="demo-container' + (param.userid == 0 ? '-right' : '') + ' demo-container-box" id="databox_' + param.id + '" >'
+ '<div class="demo-container-time-box"><div>' + judgetime(param.addtime) + '</div></div>'
+ '<div class="demo-container-box-to">';
if (param.userid > 0) {
html += '<div class="demo-container-left-box">'
+ '<img src="' + avatar + '"/>'
+ '</div>';
}
html += '<div class="demo-container-right-box">'
+ '<div class="webui-popover">';
html += '<div class="webui-popover-content">';
if (param.CategoryId == 1) {
html += '<div class="audio" isplayed="' + isplayed + '" id="audio_' + param.id + '" data-src="' + api + param.content + '" onclick="onplayto(' + param.id + ',' + (param.userid == userId ? 1 : 0) + ')"><img src="../image/audio' + (param.userid == userId ? 2 : 1) + '.png" /><div style="width:' + (param.seconds > 10 ? 10 : param.seconds) + 'em;"><div class="secondsfont">' + param.seconds + '"</div></div>' + yuanquan + '</div>';
} else if (param.CategoryId == 2) {
html += '<img onclick="onviewimage(\'' + param.minpic + '\')" src="' + param.minpic + '" />';
} else if (param.CategoryId == 4) {
html += '<div class="position" onclick="onshowposition(\'' + param.content + '\')"><img src="' + param.content + '" /></div>';
} else {
html += '<div class="content">' + param.content + '</div>';
}
html += '</div>';
if (param.CategoryId != 1 && param.CategoryId != 2) {
html += '<div class="webui-popover-ico"></div>';
}
html += '</div>';
if (param.userid == 0) {
html += '<div class="demo-container-left-box">'
+ '<img src="' + avatar + '"/>'
+ '</div>';
}
html += '</div>';
html += '</div>';
html += '</div><div class="clear"></div>';
return html;
}
function onshowimg(_src) {
$(".layer img").attr("src", _src);
$(".layer").fadeIn();
}
function onselectpic(id) {
var val = $("#File_AdsImg" + id).val();
if (val != "") {
var file = document.getElementById("File_AdsImg" + id).files[0];
//$("#uploadForm span").html("已选择图片");
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload = function (e) {
$("#showimg" + id).html("<img src=\"" + this.result + "\" style=\"width:100px;\" />");
}
//$("#showimg").html("<img src=\"" + getFileUrl("File_AdsImg") + "\" style=\"width:80px;\" />");
}
}
function stopPropagation(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = false;
}
}
function hideshowthjto(type) {
$("#showthjto" + type).addClass("uhide");
;
}
function onkeyupbody() {
var key = $("#addbody").val();
var ifb = false;
if (key != "") {
if (/\n/g.test(key)) {
ifb = true;
}
}
if (ifb) {
$('footer').addClass('mykf');
} else {
$('footer').removeClass('mykf');
}
if (fTrim(key) != "") {
$('#addabtn1').css('display', 'none');
$('#addabtn2').css('display', 'block');
} else {
$('#addabtn1').css('display', 'block');
$('#addabtn2').css('display', 'none');
}
}
function showadd(t) {
if (t == 2) {
var key = fTrim($("#addbody").val());
if (key != "") {
onCommitJson(key, 0);
}
} else if (t == 0) {
$("#showthjto0").removeClass("uhide");
$.ajax({
url: "/Images/emojicons/emojicons.xml",
dataType: 'xml',
type: 'GET',
timeout: 2000,
error: function (xml) {
alert("加载XML 文件出错!");
},
success: function (xml) {
var html = "";
var keys = $(xml).find("key");
var strings = $(xml).find("string");
for (var i = 0; i < keys.length; i++) {
var key = keys.eq(i).text();
var string = strings.eq(i).text();
if (i == 0 || i == 28 || i == 56 || i == 84 || i == 112) {
html += '<ul>';
}
html += '<li onclick="onemojicons(\'' + key + '\')"><a href="javascript:void(0);"><img src="/Images/emojicons/' + string + '" /></a></li>';
if (i == 27 || i == 55 || i == 83 || i == 104) {
html += '</ul>';
}
}
$("#picScroll .bd").html(html);
TouchSlide({
slideCell: "#picScroll",
titCell: ".hd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层
autoPage: true, //自动分页
pnLoop: "false", // 前后按钮不循环
});
}
})
}
}
function onemojicons(key) {
var body = $("#addbody").val();
$("#addbody").val(body + key);
hideshowthjto(0);
onkeyupbody();
}
function onCommitJson(data, t) {
userId = getlocalStorage("userId");
LoginId = getlocalStorage("LoginId");
if (userId != null) {
if ($(".ajaxLoader.uhide").length > 0) {
$(".ajaxLoader").removeClass("uhide");
var datas = {
action: "sendmsg",
userId: userId,
LoginId: LoginId,
ttype: 0,
t: t,
body: escape(data)
};
$.ajax({
type: 'POST',
url: "/apiajax.ashx?ifweb=1",
data: datas,
dataType: "json",
error: function (xhr) {
tishi3("发生错误:" + JSON.stringify(xhr));
},
success: function (data) {
$('#addabtn1').css('display', 'block');
$('#addabtn2').css('display', 'none');
if (data.status == 1) {
rdata(0);
$("#addbody").val("");
$(".ajaxLoader").addClass("uhide");
} else {
tishi3(data.msg);
$(".ajaxLoader").addClass("uhide");
}
}
});
}
} else {
onlink("/");
}
}
function uploadimg() {
userId = getlocalStorage("userId");
LoginId = getlocalStorage("LoginId");
if (userId != null) {
var myForm = document.getElementById("myForm");
var formdata0 = new FormData(myForm);
formdata0.append("action", "uploadImage");
formdata0.append("userId", userId);
formdata0.append("LoginId", LoginId);
formdata0.append("uploadpic", document.getElementById("uploadpic").files[0]);
uploading = 1;
$.ajax({
type: "POST",
url: "/apiajax.ashx?ifweb=1",
data: formdata0,
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success: function (data) {
tishi2close();
uploading = 0;
if (data.status == 1) {
tishi3('上传成功');
onCommitJson(data.url[1], 2);
} else {
tishi3(data.msg);
}
},
error: function (jqXHR) {
tishi3("发生错误:" + JSON.stringify(jqXHR));
},
});
} else {
onlink("/");
}
}
</script>
</head>
<body class="wrap">
<header class="renwuheader">
<div class="ub">
<div class="nav-btn" id="nav-left" style=" margin:0; padding:0; padding-top:0.2em; min-width:3em" onclick="closeWin()">
<img src="../image/faifei.png" style="margin-left:0; margin-top:0em; height:1.2em;width:1.2em;" />
</div>
<h1 class="ub-f1" tabindex="0" style=" margin:0; padding:0; position:relative; font-size:16px; ">
客服专区
</h1>
<div class="nav-btn blue" id="nav-right" style=" margin:0; padding:0; min-width:3em; padding-right:1em;">
</div>
</div>
</header>
<section class="ub-f1" id="wrapper">
<div id="wrapper_content">
<p class="pullDown">下拉刷新...</p>
<div class="clear"></div>
<div class="ub ub-ver" style="padding:0.8em;" id="sysnew"> </div>
<div class="clear"></div>
<div class="more_box"></div>
<div class="clear"></div>
<p class="pullUp">上拉加载...</p>
</div>
</section>
<footer>
<div class="ub addchatbox">
<div class="ub-f1 addbody">
<textarea id="addbody" name="addbody" placeholder="想说点什么呢?" onblur="onkeyupbody()" onkeyup="onkeyupbody()" onkeydown="onkeyupbody()" onfocus="placeholder = ''; "></textarea>
</div>
<div class="addabtn" id="addabtn0" onclick="showadd(0)"><img src="../Images/emojicons/14.png" /></div>
<div class="addabtn" id="addabtn1"><form id="myForm">
<img src="../image/add2.png" />
<input type="file" id="uploadpic" class="uploadpic_btn" onchange="uploadimg()" accept="image/*" />
</form>
</div>
<div class="mybtn addabtn0" id="addabtn2" onclick="showadd(2)">发送</div>
</div>
</footer>
<div class="showthjto uhide" id="showthjto0" onclick='hideshowthjto(0);'>
<div class="showthjto_box" onclick="stopPropagation(event)">
<h3><span>插入表情</span><span class="close" onclick='hideshowthjto(0);'>X</span></h3>
<div id="picScroll" class="picScroll">
<div class="bd">
</div>
<div class="clear"></div>
<div class="hd">
<span class="next"></span>
<ul></ul>
<span class="prev"></span>
</div>
</div>
</div>
</div>
<div class="layer" onclick='$(".layer").fadeOut();'>
<img src="/images/jt.png" alt="">
</div>
<div class="ajaxLoader ub ub-ac uhide" onclick="reload()">
<div class="ub ub-ac ub-ver"><img src="image/load.gif" /><br>正在加载...</div>
</div>
</body>
</html>