chatrecord.jsp 20.9 KB
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="referrer" content="no-referrer" />
		<title>客服记录</title>
		<link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/zzhnc/res/css/basic.css">
		<link rel="stylesheet" href="/zzhnc/res/plugins/photoswipe/photoswipe.css">
        <link rel="stylesheet" href="/zzhnc/res/plugins/photoswipe/default-skin/default-skin.css">
	</head>
	<style>
		.layui-table td,
		.layui-table th {
			padding: 9px 9px;
		}
		.userimg {
			max-height: 40px;
			max-width: 100px;
			cursor: pointer;
			border: 1px solid #999;
		}
		.toChatBox{
			float: right;
		}
		.nickbox{
			cursor: pointer;
		}
	</style>
	<body class="wrap">
		<form class="layui-form">
			<div class="layui-form-item searchbox" style="margin-bottom: 0px;">
				<div class="layui-input-inline" style="width: 150px;">
					<select name="replytype">
						<option value="">答复类别</option>
						<option value="1">机器人</option>
						<option value="2">自动回复</option>
						<option value="3">逻辑判断</option>
						<option value="4">人工客服</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 150px;">
					<input name="date1" class="layui-input" placeholder="开始时间" onclick="layui.laydate({elem: this,format: 'YYYY-MM-DD hh:mm:ss',istime: true})">
				</div>
				<div class="layui-input-inline" style="width: 150px;">
					<input name="date2" class="layui-input" placeholder="结束时间" onclick="layui.laydate({elem: this,format: 'YYYY-MM-DD hh:mm:ss',istime: true})">
				</div>
				<div class="layui-input-inline" style="width: 150px;">
					<input type="text" class="layui-input" name="keyword" placeholder="关键字" />
				</div>
				<button class="layui-btn" lay-submit lay-filter="querybtn">查询</button>
				<button class="layui-btn layui-btn-primary" lay-submit lay-filter="resetbtn">重置</button>
				<div class="toChatBox">
					<button type="button" id="toNewChat" class="layui-btn">对话版界面</button>
				</div>
			</div>
			
		</form>
		<table class="layui-table">
			<thead>
				<tr>
					<th style="width:30px;">No</th>
					<th style="min-width: 130px;width: 130px;max-width:220px;">头像昵称</th>
					<th style="min-width:200px;">问题</th>
					<th style="min-width: 200px;">答复</th>
					<th style="min-width: 70px;width: 70px;">答复类别 </th>
					<th style="min-width: 76px;width: 76px;">问题时间</th>
					<th style="min-width: 70px;width: 70px;">销售人员</th>
					<th style="min-width: 76px;width: 76px;">答复时间</th>
					<!-- <th style="min-width: 70px;width: 70px;">粉丝图片 </th>
					<th style="min-width: 70px;width: 70px;">客服图片</th> -->
				</tr>
			</thead>
			<tbody id="noticelist">
			</tbody>
		</table>
		<div class="nulldata">暂无数据</div>
		<div id="page"></div>
		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="pswp__bg"></div>
				<div class="pswp__scroll-wrap">
					<div class="pswp__container">
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
					</div>
					<div class="pswp__ui pswp__ui--hidden">
						<div class="pswp__top-bar">
							<div class="pswp__counter"></div>
							<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
							<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
							<div class="pswp__preloader">
								<div class="pswp__preloader__icn">
									<div class="pswp__preloader__cut">
										<div class="pswp__preloader__donut"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
							<div class="pswp__share-tooltip"></div>
						</div>
						<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
						<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
						<div class="pswp__caption">
							<div class="pswp__caption__center"></div>
						</div>
					</div>
				</div>
			</div>
	</body>
	<script src='/zzhnc/res/js/jquery.min.js'></script>
	<script src="/zzhnc/res/plugins/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="/zzhnc/res/js/me.js"></script>
	<script src="/zzhnc/res/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
	<script src="/zzhnc/res/plugins/photoswipe/photoswipe.min.js"></script>
	<script>
		layui.use(['form', 'element', 'laydate', 'layer', 'laypage'], function () {
			var form = layui.form(),
				element = layui.element(),
				laydate = layui.laydate,
				layer = layui.layer,
				laypage = layui.laypage;
			var queryObj = {
				page: 1,
				replytype: "",
				date1: "",
				date2: "",
				keyword: ""
			};
			var faceText = ["微笑", "撇嘴", "色", "发呆", "得意", "流泪", "害羞", "闭嘴", "睡", "大哭", "尴尬", "发怒", "调皮", "呲牙", "惊讶", "难过", "酷", "囧", "抓狂", "吐", "偷笑", "愉快", "白银", "傲慢", "饥饿", "困", "恐慌", "流汗", "憨笑", "悠闲", "奋斗", "咒骂", "疑问", "嘘", "晕", "疯了", "哀", "骷髅", "敲打", "再见", "擦汗", "抠鼻", "鼓掌", "糗大了", "坏笑", "左哼哼", "右哼哼", "哈欠", "鄙视", "委屈", "快哭了", "阴险", "亲亲", "吓", "可怜", "菜刀", "西瓜", "啤酒", "篮球", "乒乓", "咖啡", "饭", "猪头", "玫瑰", "凋谢", "嘴唇", "爱心", "心碎", "蛋糕", "闪电", "炸弹", "刀", "足球", "瓢虫", "便便", "月亮", "太阳", "礼物", "拥抱", "强", "弱", "握手", "胜利", "抱拳", "勾引", "拳头", "差劲", "爱你", "NO", "OK", "爱情", "飞吻", "跳跳", "发抖", "怄火", "转圈", "磕头", "回头", "跳绳", "投降", "激动", "乱舞", "献吻", "左太极", "右太极"]
			var faceText2 = ["/微笑", "/撇嘴", "/色", "/发呆", "/得意", "/流泪", "/害羞", "/闭嘴", "/睡", "/大哭", "/尴尬", "/发怒", "/调皮", "/呲牙", "/惊讶", "/难过", "/酷", "/囧", "/抓狂", "/吐", "/偷笑", "/愉快", "/白银", "/傲慢", "/饥饿", "/困", "/恐慌", "/流汗", "/憨笑", "/悠闲", "/奋斗", "/咒骂", "/疑问", "/嘘", "/晕", "/疯了", "/哀", "/骷髅", "/敲打", "/再见", "/擦汗", "/抠鼻", "/鼓掌", "/糗大了", "/坏笑", "/左哼哼", "/右哼哼", "/哈欠", "/鄙视", "/委屈", "/快哭了", "/阴险", "/亲亲", "/吓", "/可怜", "/菜刀", "/西瓜", "/啤酒", "/篮球", "/乒乓", "/咖啡", "/饭", "/猪头", "/玫瑰", "/凋谢", "/嘴唇", "/爱心", "/心碎", "/蛋糕", "/闪电", "/炸弹", "/刀", "/足球", "/瓢虫", "/便便", "/月亮", "/太阳", "/礼物", "/拥抱", "/强", "/弱", "/握手", "/胜利", "/抱拳", "/勾引", "/拳头", "/差劲", "/爱你", "/NO", "/OK", "/爱情", "/飞吻", "/跳跳", "/发抖", "/怄火", "/转圈", "/磕头", "/回头", "/跳绳", "/投降", "/激动", "/乱舞", "/献吻", "/左太极", "/右太极"]
			var faceImg = ["http://www.onegreen.net/QQ/UploadFiles/201404/20140427102755304.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102806118.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102811204.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102816272.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102821779.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102826616.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102831909.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102836860.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102841446.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102846605.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102851155.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102856815.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102901326.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102906485.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102911867.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102916775.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102921112.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102926579.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102931107.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102936174.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102941562.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102946241.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102951305.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102956983.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103001341.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103006230.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103011620.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103016770.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103021180.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103026333.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103031826.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103036856.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103041851.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103046204.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103051515.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103056368.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103101584.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103106639.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103111714.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103116995.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103121307.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103126628.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103131537.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103136922.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103141708.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103146409.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103151786.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103156150.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103201493.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103206968.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103211938.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103216563.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103221494.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103226447.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103231181.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103236908.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103241610.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103246942.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103251889.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103256822.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103301730.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103306315.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103311631.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103316218.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103321727.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103326466.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103331391.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103336293.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103341727.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103346519.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103351983.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103356315.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103401393.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103406284.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103411342.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103416889.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103421513.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103426896.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103431815.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103436286.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103441411.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103446541.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103451461.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103456248.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103501861.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103506188.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103511436.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103516890.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103521415.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103526248.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103531694.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103536789.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103541535.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103546800.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103551956.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103556647.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103601489.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103606571.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103611997.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103616555.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103621939.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103626894.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103636123.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103641405.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103646322.png"]
			//初始化数据
			initData(queryObj);
			function initData(queryObj) {
				$.post("/zzhnc/report/getChatLogList", queryObj, function (data) {
					console.log(data)
					data = data.data;
					laypage({
						cont: 'page',
						pages: data.totalPages,
						curr: queryObj.page,
						skip: true,
						jump: function (obj, first) {
							if (!first) {
								queryObj.page = obj.curr
								initData(queryObj)
							}
						}
					});
					$("#noticelist").html("")
					if (data.rows.length > 0) {
						$(".nulldata").hide()
						var str = "";
						for (var i = 0; i < data.rows.length; i++) {
							var nick = "";
							if ((data.rows[i].nickname == null || data.rows[i].nickname == "") && (data.rows[i].logo == null || data.rows[i].logo == "")) {
								nick = '<div class="nickbox" style="text-align:left;">未授权(id:' + data.rows[i].fansid + ')</div>';
							} else {
								if (data.rows[i].logo == null || data.rows[i].logo == "") {
									nick = '<div class="nickbox"><div id="wlogo" style="background:url(/zzhnc/res/images/default_user.png) no-repeat center;-webkit-background-size:contain;background-size:contain;"></div><span class="nick"> ' + data.rows[i].nickname + '</span></div>';
								} else {
									nick = '<div class="nickbox"><div id="wlogo" style="background:url(' + data.rows[i].logo + ') no-repeat center;-webkit-background-size:contain;background-size:contain;"></div><span class="nick"> ' + data.rows[i].nickname + '</span></div>';
								}
							}
							str += '<tr data-fansid="'+ data.rows[i].fansid +'" data-saleid="'+ data.rows[i].salesid +'">'
								+ '<td>' + ((data.page - 1) * data.pageSize + i + 1) + '</td>'
								+ '<td style="text-align:left;">' + nick + '</td>'
								+ '<td style="text-align:left;color:#ce7414;">' + (data.rows[i].imgurl ? createImgTag(data.rows[i].imgurl) : toFace(data.rows[i].ask)) + '</td>'
								+ '<td style="text-align:left;color:#119323;">' + (data.rows[i].imgurl2 ? createImgTag(data.rows[i].imgurl2) : toFace(data.rows[i].reply)) + '</td>'
								+ '<td>' + replyType(data.rows[i].replytype) + '</td>'
								+ '<td>' + toTime_G(data.rows[i].asktime).substring(5) + '</td>'
								+ '<td>' + data.rows[i].salename + '</td>'
								+ '<td>' + toTime_G(data.rows[i].replytime).substring(5) + '</td>'
								// +'<td><div class="logoimg" style="background:url('+ data.rows[i].imgurl +') no-repeat center;-webkit-background-size:contain;background-size:contain;"></div></td>'
								// +'<td><div class="logoimg" style="background:url('+ data.rows[i].imgurl2 +') no-repeat center;-webkit-background-size:contain;background-size:contain;"></div></td>'
								+ '</tr>'
						}
						$("#noticelist").html(str)
						toNull_G();
						showimg.bind()
					} else {
						$(".nulldata").show()
						return false;
					}
				})
			}

			$("#toNewChat").click(function(){
				location.href='/zzhnc/report/chatrecordCopy'
			})
			$(document).on('click','.nickbox',function(){
				var fansid = $(this).parents('tr').data('fansid')
				var saleid = $(this).parents('tr').data('saleid')
				var logo = $(this).find('div').css('backgroundImage')
				var name = $(this).find('span').text()
				name = encodeURIComponent(name)
				location.href='/zzhnc/report/chatrecordCopy?fansid='+ fansid +'&saleid=' + saleid + '&fansname=' + name + '&logo=' + logo
				
			})
			form.on("submit(querybtn)", function (e) {
				queryObj = e.field;
				queryObj.page = 1;
				initData(queryObj)
				return false
			})
			form.on("submit(resetbtn)", function (e) {
				$("[name=replytype]").val("0")
				$("[name=date1]").val("")
				$("[name=date2]").val("")
				$("[name=keyword]").val("")
				queryObj = {
					page: 1,
					replytype: "",
					date1: "",
					date2: "",
					keyword: ""
				};
				form.render();
				initData(queryObj)
				return false
			})
			function replyType(t) {
				if (t == 1) {
					return "机器人"
				} else if (t == 2) {
					return "自动回复"
				} else if (t == 3) {
					return "逻辑判断"
				} else if (t == 4) {
					return "人工客服"
				} else {
					return ""
				}
			}
			function askfrom(f) {
				if (f == 1) {
					return "销售助手"
				} else if (f == 2) {
					return "万小二"
				} else {
					return "";
				}
			}
			function toFace(msg) {
				var _msg = msg
				var reg = /\[.*?\]/g;
				var some = reg.exec(_msg);                //匹配到的字段
				var isReset = false
				while (some) {
					var _some = some[0].replace(/\[/, "")
					_some = _some.replace(/\]/, "")
					var index = faceText.indexOf(_some)
					if (index > -1) {
						msg = msg.replace(new RegExp(_some, 'g'), '<image src="' + faceImg[index] + '" alt="">')
					} else {
						isReset = "[" + _some + "]"
					}
					some = reg.exec(_msg);
				}
				faceText2.forEach(function (e, i) {
					var reg2 = new RegExp(e, "g")
					if (reg2.test(msg)) {
						msg = msg.replace(reg2, '<image src="' + faceImg[i] + '" alt="">')
					}
				})
				msg = !!msg ? msg : ""
				msg = msg.replace(/\[/g, "")
				msg = msg.replace(/\]/g, "")
				msg = msg.replace(/</g, "&lt;")
				msg = msg.replace(/&lt;image/g, "<img")
				if (isReset) {
					return isReset
				} else {
					return msg
				}
			}
			function createImgTag(e) {
				var randomVal = Math.random().toString(36).substr(2);
				var tag = '<span>图片消息 : </span><img class="userimg" src="' + e + '?'+ randomVal +'">'
				return tag
			}
		})
		function Showimg(el) {
			this.el = el
		}
		Showimg.prototype = {
			getitems: function (el) { //获取items数组对象
				var list = document.querySelectorAll(el)
				var items = []
				for (i = 0; i < list.length; i++) {
					var obj = {}
					obj.src = list[i].src
					obj.h = list[i].naturalHeight
					obj.w = list[i].naturalWidth
					items.push(obj)
				}
				return items
			},
			ceratePhoto: function (i) { //初始化新的相册框
				var pswpElement = document.querySelectorAll('.pswp')[0];
				var items = this.getitems(this.el);
				var options = {
					history: false,
					focus: false,
					index: i,
					showAnimationDuration: 0,
					hideAnimationDuration: 0
				};
				gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
				gallery.init()
			},
			bind: function () { //绑定click事件
				var that = this
				$(document).off("click", this.el)
				$(document).on("click", this.el, function () {
					var index = $(this).index(that.el)
					that.ceratePhoto(index)
				})
				$(this.el).click(function () { })
			}
		}
		var showimg = new Showimg(".userimg")
		showimg.bind()
	</script>
	</html>