476 lines
24 KiB
HTML
476 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>客服工作台</title>
|
||
<link rel="stylesheet" href="/static/service/js/layui/css/layui.css">
|
||
<link rel="stylesheet" href="__CDN__/static/service/css/mylink.css?version=20190814">
|
||
</head>
|
||
<style>
|
||
/* .wexin-class{
|
||
background: red;
|
||
} */
|
||
.layui-form-label{
|
||
padding: 9px 0px;
|
||
width: 70px;
|
||
}
|
||
.layui-input-block {
|
||
margin-left: 75px;
|
||
}
|
||
</style>
|
||
<body class="layui-layout-body">
|
||
<div class="layui-layout layui-layout-admin">
|
||
|
||
<div class="layui-side" style="background:#f2f2f2;top:0px;border-right:1px solid #aaa;">
|
||
<div class="layui-side-scroll">
|
||
<blockquote class="layui-elem-quote" style="color: white;background-color:rgb(70, 100, 139);">正在咨询的会员</blockquote>
|
||
<ul class="layui-unselect" id="user_list">
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-body" style="bottom:0;top:0px;">
|
||
<input type="hidden" id="active-user" data-avatar="" data-name="" data-id=""><!-- 当前对话的用户 -->
|
||
<div class="chat-left">
|
||
<div class="chat-box mylink-chat-main">
|
||
|
||
</div>
|
||
<div class="msg-send">
|
||
<div class="tools-bar">
|
||
<i class="layui-icon" style="font-size: 30px;" id="face"></i>
|
||
<i class="layui-icon" style="font-size: 30px;" id="image"></i>
|
||
<i class="layui-icon" style="font-size: 30px;" id="file"></i>
|
||
</div>
|
||
<div class="msg-box">
|
||
<textarea class="msg-area" id="msg-area"></textarea>
|
||
</div>
|
||
<div class="send-area">
|
||
<span style="margin-left:10px;color:gray;">快捷键 Enter</span>
|
||
<button class="layui-btn layui-btn-small" style="float:right;margin-right:10px;height: 36px;padding: 0 18px;color:white;background-color: #01c361;border-radius:4px" id="send">
|
||
<i class="layui-icon"></i>发送
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="width:28%;height:100%;float:left;margin-left:1%;overflow-y: auto">
|
||
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this" style="width:5%;">访客信息</li>
|
||
<li style="width:5%;">订单信息</li>
|
||
<li style="width:5%;">金币充值</li>
|
||
<li style="width:5%;">常用语</li>
|
||
</ul>
|
||
<div class="layui-tab-content" style="min-height: 100px;">
|
||
<!-- 访客信息 -->
|
||
<div class="layui-tab-item layui-show">
|
||
|
||
<!--基本信息-->
|
||
<div class="layui-form layui-form-pane">
|
||
|
||
<!-- <div class="layui-form-item">
|
||
<label class="layui-form-label">当前客服</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-kefu" value="{$uinfo['user_name']}" class="layui-input" readonly>
|
||
</div>
|
||
</div> -->
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">访客名</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-user" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">访客ID</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-user-id" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">IP</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-ip" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">地区</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-area" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
{if(1 == $status['change_status'])}
|
||
<label class="layui-form-label layui-bg-cyan" style="cursor: pointer;color:white;" id="scroll-link">转接</label>
|
||
{/if}
|
||
<label class="layui-form-label layui-bg-cyan" style="cursor: pointer;color:white;margin-left: 10px;" id="change-account">选择账号</label>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--支付信息-->
|
||
<div>
|
||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
||
<legend>支付信息</legend>
|
||
</fieldset>
|
||
<div style="height: 256px;text-align: center;" id='payment_img_div'>
|
||
{if condition="$payment_img['alias_id'] neq 'bank'"}
|
||
<div style="margin-bottom: 10px;">
|
||
<img class="layui-mylink-photos qr-img" id="payment_img" src='{$payment_img["payment_img"]}' width="100px" height="100px">
|
||
</div>
|
||
|
||
<div class="layui-form layui-form-pane">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">支付姓名</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-kefu" value="{$payment_img['name']}" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">支付账号</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-kefu" value="{$payment_img['account_num']}" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{else /}
|
||
<div class="layui-form layui-form-pane">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">支付方式</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-kefu1" value="{$payment_img['type_name']}" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">银行卡姓名</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-kefu2" value="{$payment_img['name']}" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">银行卡号</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-kefu3" value="{$payment_img['account_num']}" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">开户银行</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-kefu4" value="{$payment_img['open_bank']}" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">开户支行</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="f-kefu5" value="{$payment_img['branch_bank']}" class="layui-input" readonly>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
|
||
<div style="width: 100%" >
|
||
<select lay-verify="required" lay-filter="type" id="img" style='width: 70%;height: 38px;line-height: 20px;border-color: #e6e6e6;border-radius: 3px;'>
|
||
<option value="">请选择</option>
|
||
{if !empty($payment_information)}
|
||
{foreach name="payment_information" item="vo"}
|
||
{if condition="$vo['id'] eq $payment_img['id']"}
|
||
<option value="{$vo['id']}" selected>{$vo['type_name']}</option>
|
||
{else /}
|
||
<option value="{$vo['id']}">{$vo['type_name']}</option>
|
||
{/if}
|
||
<!-- <option value="{$vo['id']}">{$vo['type_name']}</option> -->
|
||
{/foreach}
|
||
{/if}
|
||
</select>
|
||
<label class="layui-form-label layui-bg-cyan" id="sendQrcode" style='width: 20%;float: right;text-align: center;' onclick="send_qrcode()">发送</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品或订单信息 -->
|
||
<div class="layui-tab-item">
|
||
<div class="layui-form layui-form-pane" id="order_list">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 金币充值tab切换页 -->
|
||
<div class="layui-tab-item">
|
||
<form class="layui-form" id="addGodsForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">玩家ID</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="id" id="coin_uid" autocomplete="off" class="layui-input" style="width:300px;margin-top:60px;" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">充值金额</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="coin_num" placeholder="请输入" lay-verify="number" autocomplete="off" class="layui-input" style="width:300px;margin-top:40px;margin-bottom:40px;">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">支付凭证</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="coin_num" placeholder="请输入支付截图链接" autocomplete="off" class="layui-input" style="width:300px;margin-top:40px;margin-bottom:5px;">
|
||
<span style="font-size:12px;color:red;">注意：聊天页面右键点击用户发送的支付截图复制图片链接</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item" style="margin-top:40px">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn" lay-submit lay-filter="btnAddObj">立即提交</button>
|
||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 常用语tab切换页 -->
|
||
<div class="layui-tab-item">
|
||
<div class="layui-form">
|
||
<table class="layui-table">
|
||
<thead>
|
||
<tr>
|
||
<th>内容</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{foreach name="word" item="vo"}
|
||
<tr>
|
||
<td>{$vo.content}</td>
|
||
<td>
|
||
<a href="javascript:" onclick="sendWord(this)" data-word="{$vo.content}" style="color:#009688">发送</a>
|
||
</td>
|
||
</tr>
|
||
{/foreach}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 转接提示层 -->
|
||
<div class="layui-form" id="change-box" style="display: none">
|
||
<div class="layui-form-item" style="margin-top: 20px">
|
||
<label class="layui-form-label">选择分组</label>
|
||
<div class="layui-input-block" style="width: 70%" >
|
||
<select lay-verify="required" lay-filter="group">
|
||
<option value=""></option>
|
||
{if !empty($groups)}
|
||
{foreach name="groups" item="vo"}
|
||
<option value="{$vo['id']}">{$vo['name']}</option>
|
||
{/foreach}
|
||
{/if}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 转接提示层 -->
|
||
|
||
<!-- 支付账号提示层 -->
|
||
<div class="layui-form" id="account-box" style="display: none">
|
||
<div class="layui-form-item" style="margin-top: 20px">
|
||
<div style="padding-top: 15px">
|
||
<label class="layui-form-label">选择支付类型</label>
|
||
<div class="layui-input-block" style="width: 70%" >
|
||
<select lay-verify="required" lay-filter="type" id="type">
|
||
<option value=""></option>
|
||
{if !empty($type)}
|
||
{foreach name="type" item="vo"}
|
||
<option value="{$vo['id']}">{$vo['type_name']}</option>
|
||
{/foreach}
|
||
{/if}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top: 15px">
|
||
<label class="layui-form-label">选择支付账号</label>
|
||
<div class="layui-input-block" style="width: 70%" >
|
||
<select lay-verify="required" lay-filter="group" id="payment">
|
||
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 支付账号提示层 -->
|
||
|
||
|
||
<!--商品渲染模板-->
|
||
<script id="goods_tpl" type="text/html">
|
||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
||
<legend>商品信息</legend>
|
||
</fieldset>
|
||
<div class="order-alone-li lastset_cm" >
|
||
|
||
<table width="100%" border="" cellspacing="" cellpadding="">
|
||
<tbody>
|
||
<tr class="time_or">
|
||
<td>
|
||
<div class="fl_ttmm">
|
||
<p>
|
||
<span class="time-num">商品id：<em class="num">{{ d.goods_id }}</em></span>
|
||
<span style="float: right;"><a href="{{ d.url }}" target="_blank">查看详情</a></span>
|
||
</p>
|
||
</div>
|
||
<div class="fr_ttmm"></div>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr class="conten_or">
|
||
<td class="sx1">
|
||
<div class="shop-if-dif">
|
||
<div class="shop-difimg">
|
||
<img src="{{ d.thumb }}" width="60" height="60">
|
||
</div>
|
||
<div class="shop_name">
|
||
<a href="{{ d.url }}" target="_blank">{{ d.goods_name }}</a>
|
||
<p><span>市场价格：</span><span>￥</span><span>{{ d.market_price }}</span></p>
|
||
<p style="color: red;"><span>本店价格：</span><span>￥</span><span>{{ d.shop_price }}</span></p>
|
||
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
|
||
</script>
|
||
|
||
|
||
<!--订单渲染模板-->
|
||
<script id="order_tpl" type="text/html">
|
||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
||
<legend>订单信息</legend>
|
||
</fieldset>
|
||
<div class="order-alone-li lastset_cm" >
|
||
|
||
|
||
<table width="100%" border="" cellspacing="" cellpadding="">
|
||
<tbody>
|
||
<tr class="time_or">
|
||
<td>
|
||
<div class="fl_ttmm">
|
||
|
||
<p>
|
||
<span class="time-num">下单时间：<em class="num">{{ d.info.add_time }}</em></span>
|
||
</p>
|
||
<p>
|
||
<span class="time-num">订单编号：<em class="num">{{ d.info.order_sn }}</em></span>
|
||
</p>
|
||
|
||
</div>
|
||
<div class="fr_ttmm"></div>
|
||
</td>
|
||
</tr>
|
||
|
||
{{# layui.each(d.list, function(index, item){ }}
|
||
|
||
<tr class="conten_or">
|
||
<td class="sx1">
|
||
<div class="shop-if-dif">
|
||
<div class="shop-difimg">
|
||
<img src="{{ item.thumb }}" width="60" height="60">
|
||
</div>
|
||
<div class="shop_name">
|
||
<a href="{{ item.url }}" target="_blank">{{ item.goods_name }}</a>
|
||
<p>规格:{{ item.spec_key_name }}</p>
|
||
<p>
|
||
<span>实际价格：</span><span>￥</span><span>{{ item.final_price }}</span>
|
||
<span>商城价格：</span><span>￥</span><span>{{ item.goods_price }}</span>
|
||
<span>成本价格：</span><span>￥</span><span>{{ item.cost_price }}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
{{# }); }}
|
||
|
||
<tr class="time_or">
|
||
<td>
|
||
<div class="fl_ttmm">
|
||
<span class="time-num">订单价格：<em class="num">￥{{ d.info.total_amount }}</em></span>
|
||
<span class="time-num">含运费：<em class="num">￥{{ d.info.shipping_price }}</em></span>
|
||
<span class="time-num">应付金额：<em class="num">￥{{ d.info.order_amount }}</em></span>
|
||
|
||
<span class="time-num">订单状态：<em>{{ d.info.order_status }}</em></span>
|
||
<span class="time-num">发货状态：<em>{{ d.info.shipping_status }}</em></span>
|
||
<span class="time-num">支付状态：<em>{{ d.info.pay_status }}</em></span>
|
||
|
||
|
||
</div>
|
||
<div class="fr_ttmm"></div>
|
||
</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
|
||
</script>
|
||
|
||
|
||
<script src="__CDN__/static/service/js/jquery-1.9.0.min.js"></script>
|
||
<script src="__CDN__/static/service/js/layui/layui.js"></script>
|
||
<script>
|
||
var uid = "{$uinfo['id']}";
|
||
var uname = "{$uinfo['user_name']}";
|
||
var avatar = "{$uinfo['user_avatar']}";
|
||
var group = "{$uinfo['group_id']}";
|
||
var token = '{$token}';
|
||
var socket_server = "{$socket}";
|
||
|
||
// 选择支付二维码
|
||
$("#img").change(function(){
|
||
var id = $(this).val()
|
||
$.ajax({
|
||
url: "{:url('index/payment_information')}",
|
||
type: "post",
|
||
data: {id:id},
|
||
dataType:"json",
|
||
success:function(res){
|
||
var src = res.payment_img
|
||
if(res.alias_id != 'bank'){
|
||
var _html = ""
|
||
_html += "<div style='height: 256px;text-align: center;' id='payment_img_div'>"
|
||
_html += "<div style='margin-bottom: 10px;'><img class='layui-mylink-photos qr-img' id='payment_img' src='"+src+"' width='100px' height='100px'></div>"
|
||
_html += "<div class='layui-form layui-form-pane'>"
|
||
_html += "<div class='layui-form-item'><label class='layui-form-label'>支付姓名</label><div class='layui-input-block'><input type='text' id='f-kefu' value='"+res.name+"' class='layui-input' readonly></div></div>"
|
||
_html += "<div class='layui-form-item'><label class='layui-form-label'>支付账号</label><div class='layui-input-block'><input type='text' id='f-kefu' value='"+res.account_num+"' class='layui-input' readonly></div></div>"
|
||
_html += "</div>"
|
||
$('#payment_img_div').html(_html)
|
||
}else{
|
||
var _html = ""
|
||
_html += "<div class='layui-form layui-form-pane'>"
|
||
_html += '<div class="layui-form-item"><label class="layui-form-label">支付方式</label><div class="layui-input-block"><input type="text" id="payment_type" value="'+res.type_name+'" class="layui-input" readonly></div></div>'
|
||
_html += '<div class="layui-form-item"><label class="layui-form-label">银行卡姓名</label><div class="layui-input-block"><input type="text" id="payment_name" value="'+res.name+'" class="layui-input" readonly></div></div>'
|
||
_html += '<div class="layui-form-item"><label class="layui-form-label">银行卡号</label><div class="layui-input-block"><input type="text" id="payment_num" value="'+res.account_num+'" class="layui-input" readonly></div></div>'
|
||
_html += '<div class="layui-form-item"><label class="layui-form-label">开户银行</label><div class="layui-input-block"><input type="text" id="payment_bank" value="'+res.open_bank+'" class="layui-input" readonly></div></div>'
|
||
_html += '<div class="layui-form-item"><label class="layui-form-label">开户支行</label><div class="layui-input-block"><input type="text" id="payment_open" value="'+res.branch_bank+'" class="layui-input" readonly></div></div>'
|
||
_html += "</div>"
|
||
$('#payment_img_div').html(_html)
|
||
}
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
<script type="text/javascript" src="__CDN__/static/service/js/functions.js"></script>
|
||
<script type="text/javascript" src="__CDN__/static/service/js/mylink.js?version=20190815"></script>
|
||
</body>
|
||
</html> |