kefu/application/service/view/index/index.html

691 lines
30 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>客服工作台</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html"/>
<![endif]-->
<link rel="shortcut icon" href="/favicon.ico">
<link href="__CDN__/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="/static/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="__CDN__/static/admin/css/animate.min.css" rel="stylesheet">
<link href="__CDN__/static/admin/css/style.min.css?v=4.1.0" rel="stylesheet">
<link href="/static/admin/js/layui/css/layui.css" rel="stylesheet">
<style>
#content-main {
height: calc(100% - 78px);
}
</style>
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">
<!--左侧导航开始-->
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="nav-close"><i class="fa fa-times-circle"></i>
</div>
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element">
<span><img alt="image" class="img-circle" src="{$uinfo['user_avatar']}" width="64px"
height="70px" /></span>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="clear">
<span class="block m-t-xs">欢迎您 --
<strong class="font-bold" id="user_name">
{$uinfo['user_name']}
<span id="user_status" class="layui-badge-dot layui-bg-green ident" style="
background: #f73939 !important;
"></span>
</strong>
</span>
<span class="text-muted text-xs block">客服<b class="caret"></b></span>
</span>
</a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li>
<a href="javascript:changeImg()">ID{$uinfo['id']}</a>
</li>
<li>
<a href="javascript:changeImg()">修改头像</a>
</li>
<li>
<a href="javascript:google_auth()">谷歌验证</a>
</li>
<li>
<a href="javascript:change()">修改密码</a>
</li>
</ul>
</div>
<div class="logo-element">AD
</div>
</li>
<!-- 菜单开始 -->
<li class="menu">
<a href="#">
<i class="fa fa-qq"></i>
<span class="nav-label">会话管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<!-- <li>
<a class="J_menuItem" href="index_v1.html">当前会话</a>
</li> -->
<li>
<!-- <a class="J_menuItem" href="offlinelist.html">离线用户</a> -->
<a class="J_menuItem" href="{:url('Dialogue/dialogueList')}">会话记录</a>
</li>
<!-- <li>
<a class="J_menuItem" href="{:url('index/all')}">所有用户</a>
</li> -->
</ul>
</li>
{if condition="$uinfo['kf_type'] eq 1"}
<!-- <li class="menu">
<a href="#">
<i class="layui-icon layui-icon-list"></i>
<span class="nav-label">订单管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="{:url('index/rechargeCoin')}">金币充值</a>
</li>
<li>
<a class="J_menuItem" href="{:url('index/getOrderList')}">历史订单</a>
</li>
</ul>
</li> -->
<li class="menu">
<a href="#">
<i class="layui-icon layui-icon-rate"></i>
<span class="nav-label">评价管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="{:url('index/getRateList')}">历史评价</a>
</li>
</ul>
</li>
<li class="menu">
<a href="#">
<i class="layui-icon layui-icon-chart"></i>
<span class="nav-label">数据中心</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="{:url('chart/index')}">数据统计</a>
</li>
<li>
<a class="J_menuItem" href="{:url('chart/incomeList')}">入账列表</a>
</li>
<li>
<a class="J_menuItem" href="{:url('chart/expenditureList')}">出账列表</a>
</li>
</ul>
</li>
<li class="menu">
<a href="#">
<i class="layui-icon layui-icon-dollar"></i>
<span class="nav-label">充值记录</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="{:url('index/getRechargeRecord')}">充值记录列表</a>
</li>
</ul>
</li>
<li class="menu">
<a href="#">
<i class="layui-icon layui-icon-flag"></i>
<span class="nav-label">工作记录</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="{:url('index/getWorkersLog')}">工作记录列表</a>
</li>
</ul>
</li>
{/if}
<li class="menu">
<a href="#">
<i class="layui-icon layui-icon-set"></i>
<span class="nav-label">常用语设置</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="{:url('setting/words')}">个人常用语管理</a>
</li>
<li>
<a class="J_menuItem" href="{:url('setting/greetings')}">问候语管理</a>
</li>
<li>
<a class="J_menuItem" href="{:url('setting/addword')}">添加个人常用语</a>
</li>
</ul>
</li>
<li class="menu">
<a href="#">
<i class="layui-icon layui-icon-pause"></i>
<span class="nav-label">黑名单管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="{:url('dialogue/blacklist')}">黑名单列表</a>
</li>
<!-- <li>
<a class="J_menuItem" href="{:url('dialogue/addBlacklist')}">添加黑名单</a>
</li> -->
</ul>
</li>
<!-- 菜单结束 -->
</ul>
</div>
</nav>
<!--左侧导航结束-->
<!--右侧部分开始-->
<div id="page-wrapper" class="gray-bg dashbard-1">
<div class="row border-bottom" hidden="true">
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
href="#"><i class="fa fa-bars"></i> </a>
</div>
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown hidden-xs">
<a class="right-sidebar-toggle" aria-expanded="false">
<i class="fa fa-tasks"></i> 主题
</a>
</li>
</ul>
</nav>
</div>
<div class="row content-tabs">
<button class="roll-nav roll-left J_tabLeft">
<i class="fa fa-backward"></i>
</button>
<nav class="page-tabs J_menuTabs">
<div class="page-tabs-content">
<a href="javascript:;" class="active J_menuTab" data-id="index_v1.html">当前会话</a>
</div>
</nav>
<button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i>
</button>
<div class="btn-group roll-nav roll-right">
<button class="dropdown J_tabClose" data-toggle="dropdown">常用操作<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu dropdown-menu-right">
<li class="J_tabGo"><a>前进</a>
</li>
<li class="J_tabBack"><a>后退</a>
</li>
<li class="J_tabFresh"><a>刷新</a>
</li>
<li class="divider"></li>
<li class="J_tabShowActive"><a>定位当前选项卡</a>
</li>
<li class="divider"></li>
<li class="J_tabCloseAll"><a>关闭全部选项卡</a>
</li>
<li class="J_tabCloseOther"><a>关闭其他选项卡</a>
</li>
</ul>
</div>
<a href="{:url('login/loginOut')}" class="roll-nav roll-right J_tabExit" id="login-out">
<i class="fa fa fa-sign-out"></i>
下班
</a>
</div>
<div class="row J_mainContent" id="content-main">
<iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="{:url('index/all')}"
frameborder="0" data-id="index_v1.html" seamless></iframe>
</div>
<div class="footer" style="padding-left: 0;">
<!-- <div class="pull-left">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#" style="margin: 0; position: absolute; bottom: 1px;">
<i class="fa fa-bars"></i>
</a>
</div> -->
<div class="pull-right">&copy; 2019-2021 {$version} <a href="#" target="_blank">客服系统</a>
</div>
</div>
</div>
<!--右侧部分结束-->
<!--右侧边栏开始-->
<div id="right-sidebar">
<div class="sidebar-container">
<ul class="nav nav-tabs navs-3">
<li class="active">
<a data-toggle="tab" href="#tab-1">
<i class="fa fa-gear"></i> 主题
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> 主题设置</h3>
<small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式,这些设置会被保存在本地,下次打开的时候会直接应用这些设置。</small>
</div>
<div class="skin-setttings">
<div class="title">主题设置</div>
<div class="setings-item">
<span>收起左侧菜单</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox"
id="collapsemenu">
<label class="onoffswitch-label" for="collapsemenu">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>固定顶部</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox"
id="fixednavbar">
<label class="onoffswitch-label" for="fixednavbar">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
固定宽度
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox"
id="boxedlayout">
<label class="onoffswitch-label" for="boxedlayout">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="title">皮肤选择</div>
<div class="setings-item default-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-0">
默认皮肤
</a>
</span>
</div>
<div class="setings-item blue-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-1">
蓝色主题
</a>
</span>
</div>
<div class="setings-item yellow-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-3">
黄色/紫色主题
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--右侧边栏结束-->
<!--mini聊天窗口开始-->
</div>
<!-- 修改个人信息头像 -->
<div class="ibox-content" id="box_img" style="display: none;text-align: center;">
<form class="form-horizontal m-t" method="post" action="{:url('setting/changeImg')}" id="editForms">
<span id="avatar" style="display:block;">
<img alt="image" class="img-circle" src="" width="64px" height="70px" />
</span>
<input type="hidden" value="" id="user_avatar" name="user_avatar">
<div class="input-group" style="margin:10px auto;padding: 0;">
<button type="button" class="layui-btn layui-btn-small" id="up-avatar">
<i class="layui-icon"></i>上传图片</button>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-8">
<button class="btn btn-primary" type="submit">确认修改</button>
</div>
</div>
</form>
</div>
<!-- 修改个人信息头像 -->
<!-- 修改个人信息Password -->
<div class="ibox-content" id="box" style="display: none">
<form class="form-horizontal m-t" method="post" action="{:url('setting/changePassword')}" id="editForm">
<div class="form-group">
<label class="col-sm-3 control-label">旧密码:</label>
<div class="input-group col-sm-7">
<input id="old_pwd" type="password" class="form-control" name="old_pwd" placeholder="请输入旧密码">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">新密码:</label>
<div class="input-group col-sm-7">
<input id="new_pwc" type="password" class="form-control" name="password" placeholder="请输入新密码">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">确认新密码:</label>
<div class="input-group col-sm-7">
<input id="new_pwc_c" type="password" class="form-control" name="password_c" placeholder="确认新密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-8">
<button class="btn btn-primary" type="submit">确认修改</button>
</div>
</div>
</form>
</div>
<!-- 修改个人信息Password -->
<!-- 绑定谷歌验证 -->
<div class="ibox-content" id="google_auth_box" style="display: none">
<form class="form-horizontal m-t" method="post" action="{:url('index/bind_google_auth')}" id="bindForm">
<div id="google_auth_qrcode">
</div>
<p class="p_big p_normal">
<a href="javascript:void 0" onclick="get_google_auth()">刷新二维码</a>
</p>
<p class="p_normal">请使用Google验证器扫描该二维码进行绑定</p>
<p class="p_big p_normal">谷歌验证器下载地址:
<a target="_blank" href="{$ga_android}">安卓版</a>
<a target="_blank" href="{$ga_ios}">苹果版</a>
</p>
{if $google_secret}
<div class="form-group">
<label class="col-sm-3 control-label">旧谷歌验证码:</label>
<div class="input-group col-sm-7">
<input id="old_google_auth" type="tel" class="form-control" name="old_google_auth" placeholder="请输入旧谷歌验证码">
</div>
</div>
{/if}
<div class="form-group">
<label class="col-sm-3 control-label">当前谷歌验证码:</label>
<div class="input-group col-sm-7">
<input id="new_google_auth" type="tel" class="form-control" name="new_google_auth" placeholder="请输入当前谷歌验证码">
</div>
</div>
<input type="hidden" id="key" name="key" value="">
<div class="form-group">
<div class="col-sm-4 col-sm-offset-8">
<button class="btn btn-primary" type="submit">确认</button>
</div>
</div>
</form>
</div>
<!-- 绑定谷歌验证 -->
<script src="__CDN__/static/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="__CDN__/static/admin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__CDN__/static/admin/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="__CDN__/static/admin/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="__CDN__/static/admin/js/plugins/layer/layer.min.js"></script>
<script src="__CDN__/static/admin/js/hplus.min.js?v=4.1.0"></script>
<script type="text/javascript" src="__CDN__/static/admin/js/contabs.js"></script>
<script src="__CDN__/static/admin/js/plugins/pace/pace.min.js"></script>
<script src="__CDN__/static/admin/js/layui/layui.js"></script>
<script src="__CDN__/static/admin/js/jquery.form.js"></script>
<script src="__CDN__/static/admin/js/qrcode.min.js"></script>
<script>
var box;
function change() {
layui.use(['layer'], function () {
box = layer.ready(function () {
box = layer.open({
type: 1,
title: '修改个人信息',
anim: 2,
skin: 'layui-layer-molv', //加上边框
area: ['620px', '350px'], //宽高
content: $('#box')
});
});
});
}
// 谷歌验证弹窗
function google_auth(){
layui.use(['layer'], function(){
box = layer.ready(function(){
box = layer.open({
type: 1,
title: '绑定谷歌验证',
anim: 2,
skin: 'layui-layer-molv', //加上边框
area: ['620px', '450px'], //宽高
content: $('#google_auth_box')
});
});
get_google_auth();
});
}
function get_google_auth()
{
$('#google_auth_qrcode').html('');
var qrcode = new QRCode(document.getElementById("google_auth_qrcode"), {
width : 150,
height : 150
});
$.getJSON("{:url('index/make_google_auth_secret')}", function(res){
if(1 == res.code){
qrcode.clear(); // 清除代码
qrcode.makeCode(res.qrcode_url);
$('#key').val(res.key);
// new QRCode(document.getElementById("google_auth_qrcode"), res.qrcode_url);
}else{
layer.tips(res.msg, "#clear", {time: 1500});
}
});
}
//管理员更改个人信息头像
function changeImg() {
layui.use(['layer'], function () {
box = layer.ready(function () {
box = layer.open({
type: 1,
title: '修改个人头像',
anim: 2,
skin: 'layui-layer-molv', //加上边框
area: ['620px', '250px'], //宽高
content: $('#box_img')
});
});
});
}
layui.use(['form', 'upload'], function () {
var form = layui.form;
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#up-avatar' //绑定元素
, url: "{:url('setting/upImg')}" //上传接口
, exts: 'png|jpg|jpeg|gif'
, done: function (res) {
//上传完毕回调
if (0 == res.code) {
// // console.log(res.data);
$("#avatar").html('<img alt="image" class="img-circle" src="' + res.data.src + '" width="64px" height="70px"/>');
$("#user_avatar").val(res.data.src);
} else {
layer.msg(res.msg);
}
}
, error: function () {
//请求异常回调
}
});
form.on('select(group)', function (value) {
$("#group_id").val(value.value);
});
});
//修改头像提交后回调
function showSuccessful(res) {
layui.use(['layer'], function () {
layer.ready(function () {
if (0 == res.code) {
layer.alert(res.msg);
} else if (1 == res.code) {
layer.alert(res.msg);
} else {
layer.msg(res.msg, { anim: 5, time: 2000 }, function () {
location.reload();
});
}
});
});
}
function showStart() {
return true;
}
function showSuccess(res) {
layui.use(['layer'], function () {
layer.ready(function () {
if (1 == res.code) {
layer.alert(res.msg, { title: '友情提示', icon: 1, closeBtn: 0 }, function () {
window.location.href = "{:url('login/loginOut')}";
});
} else if (111 == res.code) {
window.location.reload();
} else {
layer.msg(res.msg, { anim: 6 });
}
});
});
}
function showSuccessBind(res){
layui.use(['layer'], function(){
layer.ready(function(){
layer.closeAll();   //关闭所有层
if(1 == res.code){
layer.alert(res.msg);
} else {
layer.msg(res.msg, {anim: 6});
}
});
});
}
$(function () {
var options = {
beforeSubmit: showStart,
success: showSuccess
};
$('#editForm').submit(function () {
$(this).ajaxSubmit(options);
return false;
});
var options_img = {
beforeSubmit: showStart,
success: showSuccessful
}
$('#editForms').submit(function () {
$(this).ajaxSubmit(options_img);
return false;
});
var options_bind = {
beforeSubmit:showStart,
success:showSuccessBind
}
$('#bindForm').submit(function(){
$(this).ajaxSubmit(options_bind);
return false;
});
$("#clear").click(function () {
$.getJSON("{:url('index/clear')}", function (res) {
if (1 == res.code) {
layer.tips(res.msg, "#clear", { time: 1500 });
} else {
layer.tips(res.msg, "#clear", { time: 1500 });
}
});
});
});
// 点击图标菜单展开
// $('#side-menu li').on('click', function(e) {
// if ($('body').hasClass('mini-navbar')) {
// $('body').removeClass('mini-navbar');
// }
// })
</script>
</body>
<style>
#google_auth_qrcode img{
margin: 0 auto;
height: 150px;
}
.p_normal {
margin: 10px;
text-align: center;
}
.p_big {
font-weight: 700;
}
.p_big a {
color: #2d8cf0;
}
</style>
</html>