305 lines
15 KiB
HTML
Executable File
305 lines
15 KiB
HTML
Executable File
<style>
|
||
.layui-layout-admin .layui-body .body-content{background-color: transparent;padding: 0;}
|
||
.input-text span{margin-right: 15px;}
|
||
.form-wrap {margin-top: 0; position: relative;background: none;padding: 0}
|
||
.form-wrap .top{background: #f5f5f5;margin-top: 10px}
|
||
.layui-form-item.top .layui-form-label{text-align: left;font-weight: bold;padding-left: 15px;}
|
||
.layui-form-label + .layui-input-block{margin-left: 94px ;}
|
||
.layui-unselect.layui-form-radio.layui-form-radioed.layui-radio-disbaled i:after{background:#eee !important;}
|
||
.shop-information{width: 100%;background: white;padding: 20px;box-sizing: border-box;margin-bottom: 20px;}
|
||
.shop-information .layui-input-block{margin-left: 0 !important;}
|
||
.shop-information .main-title{display: flex;align-items: center;justify-content: space-between;margin-bottom: 18px;}
|
||
.shop-information .title{color:#333333;margin-bottom: 0;width: 50%;height: 16px;line-height: 16px;padding-left: 10px;border-left: 3px solid var(--base-color);box-sizing: border-box;font-size: 17px;}
|
||
.shop-information .main-title span{cursor: pointer;}
|
||
.word-aux{margin-left: 100px}
|
||
.all-box-left{margin-left: 100px;}
|
||
.card-common{margin-top: 0;}
|
||
.layui-layout-admin .form-wrap{padding-top: 0;}
|
||
.input-text span{margin-right: 15px;}
|
||
.layui-form-item.top .layui-form-label{text-align: left;font-weight: bold;padding-left: 15px;}
|
||
.layui-unselect.layui-form-radio.layui-form-radioed.layui-radio-disbaled i:after{background:#eee !important;}
|
||
.service-box .box .layui-form-label{width: 158px !important;height: 38px;line-height: 38px;}
|
||
.service-popup-box .layui-form-label{width: 140px;}
|
||
.service-popup-box .layui-form-label + .layui-input-block {margin-left: 140px}
|
||
.service-popup-box .word-aux{margin-left: 140px;}
|
||
.service-popup-box .all-box-left{margin-left: 140px;}
|
||
.service-box .box .top {margin-bottom: 0;}
|
||
.service-box{padding-bottom: 40px; width: calc(100% / 3);}
|
||
.card-common .layui-card-body{padding: 20px 0 0;}
|
||
</style>
|
||
|
||
<div class="layui-form form-wrap card-common">
|
||
<div class="layui-card card-common card-brief shop-information service-box">
|
||
<div class="layui-card-header main-title">
|
||
<span class="card-title">客服设置</span>
|
||
<span class="text-color" onclick="editService()">编辑</span>
|
||
</div>
|
||
<div class="layui-card-body box">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">H5/微信公众号端：</label>
|
||
<div class="layui-input-block">
|
||
{switch name="$config.h5.type"}
|
||
{case value="none"}未启用{/case}
|
||
{case value="niushop"}Niushop客服{/case}
|
||
{case value="wxwork"}企业微信客服{/case}
|
||
{case value="third"}第三方客服{/case}
|
||
{/switch}
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">微信小程序端：</label>
|
||
<div class="layui-input-block">
|
||
{switch name="$config.weapp.type"}
|
||
{case value="none"}未启用{/case}
|
||
{case value="niushop"}Niushop客服{/case}
|
||
{case value="wxwork"}企业微信客服{/case}
|
||
{case value="weapp"}小程序客服{/case}
|
||
{/switch}
|
||
</div>
|
||
</div>
|
||
{if addon_is_exit('pc', request()->siteid()) == 1}
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">PC端：</label>
|
||
<div class="layui-input-block">
|
||
{switch name="$config.pc.type"}
|
||
{case value="none"}未启用{/case}
|
||
{case value="third"}第三方客服{/case}
|
||
{/switch}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
{if addon_is_exit('aliapp', request()->siteid()) == 1 }
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">支付宝小程序：</label>
|
||
<div class="layui-input-block">
|
||
{switch name="$config.aliapp.type"}
|
||
{case value="none"}未启用{/case}
|
||
{case value="niushop"}Niushop客服{/case}
|
||
{case value="aliapp"}蚂蚁智能客服{/case}
|
||
{/switch}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/html" id="contentService">
|
||
<div class="layui-form form-wrap service-popup-box layui-card card-common card-brief">
|
||
<div class="layui-card-header">
|
||
<span class="card-title">H5/微信公众号端</span>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">客服类型：</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="h5[type]" lay-filter="serviceType" lay-type="h5" value="none" title="不启用" {if condition="$config.h5.type == 'none'"} checked {/if}>
|
||
{if addon_is_exit('servicer')}<input type="radio" name="h5[type]" lay-filter="serviceType" lay-type="h5" value="niushop" title="Niushop客服" {if condition="$config.h5.type == 'niushop'"} checked {/if}>{/if}
|
||
<input type="radio" name="h5[type]" lay-filter="serviceType" lay-type="h5" value="wxwork" title="企业微信客服" {if condition="$config.h5.type == 'wxwork'"} checked {/if}>
|
||
<input type="radio" name="h5[type]" lay-filter="serviceType" lay-type="h5" value="third" title="第三方客服" {if condition="$config.h5.type == 'third'"} checked {/if}>
|
||
</div>
|
||
</div>
|
||
<div class="h5-wrap wxwork" {if $config.h5.type != 'wxwork'} style="display: none" {/if}>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>企微客服链接：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" class="layui-input len-mid" name="h5[wxwork_url]" value="{$config.h5.wxwork_url ?? ''}" lay-verify="h5WxworkUrl">
|
||
</div>
|
||
</div>
|
||
<div class="word-aux">H5中如何接入企业微信客服请查看<a href="https://work.weixin.qq.com/nl/act/p/3f8820e724cb44c5" target="_blank" class="text-color">在微信内网页中接入</a></div>
|
||
</div>
|
||
<div class="h5-wrap third" {if $config.h5.type != 'third'} style="display: none" {/if}>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>第三方客服链接：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" class="layui-input len-mid" name="h5[third_url]" value="{$config.h5.third_url ?? ''}" lay-verify="h5ThirdUrl">
|
||
</div>
|
||
</div>
|
||
<div class="word-aux">请填写客服链接，聊天时跳转至第三方聊天窗口。例如：<a href="https://meiqia.com/zt/livechat?utm_source=tian&utm_medium=baidu&utm_term=pinzhuan" target="_blank" class="text-color">美洽客服</a>。</div>
|
||
</div>
|
||
<div class="layui-card-header">
|
||
<span class="card-title">微信小程序端</span>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">客服类型：</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="weapp[type]" lay-filter="serviceType" lay-type="weapp" value="none" title="不启用" {if condition="$config.weapp.type == 'none'"} checked {/if}>
|
||
{if addon_is_exit('servicer')}<input type="radio" name="weapp[type]" lay-filter="serviceType" lay-type="weapp" value="niushop" title="Niushop客服" {if condition="$config.weapp.type == 'niushop'"} checked {/if}>{/if}
|
||
<input type="radio" name="weapp[type]" lay-filter="serviceType" lay-type="weapp" value="weapp" title="小程序客服" {if condition="$config.weapp.type == 'weapp'"} checked {/if}>
|
||
<input type="radio" name="weapp[type]" lay-filter="serviceType" lay-type="weapp" value="wxwork" title="企业微信客服" {if condition="$config.weapp.type == 'wxwork'"} checked {/if}>
|
||
</div>
|
||
</div>
|
||
<div class="weapp-wrap wxwork" {if $config.weapp.type != 'wxwork'} style="display: none" {/if}>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>企业ID：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" class="layui-input len-mid" name="weapp[corpid]" value="{$config.weapp.corpid ?? ''}" lay-verify="weappCorpid">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>企微客服链接：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" class="layui-input len-mid" name="weapp[wxwork_url]" value="{$config.weapp.wxwork_url ?? ''}" lay-verify="weappWxworkUrl">
|
||
</div>
|
||
</div>
|
||
<div class="word-aux">小程序中如何接入企业微信客服请查看<a href="https://work.weixin.qq.com/nl/act/p/a733314375294bdd" target="_blank" class="text-color">在小程序中接入</a></div>
|
||
</div>
|
||
{if addon_is_exit('pc', request()->siteid()) == 1}
|
||
<div class="layui-card-header">
|
||
<span class="card-title">PC端</span>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">客服类型：</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="pc[type]" lay-filter="serviceType" lay-type="pc" value="none" title="不启用" {if condition="$config.pc.type == 'none'"} checked {/if}>
|
||
<input type="radio" name="pc[type]" lay-filter="serviceType" lay-type="pc" value="third" title="第三方客服" {if condition="$config.pc.type == 'third'"} checked {/if}>
|
||
</div>
|
||
</div>
|
||
<div class="pc-wrap third" {if $config.pc.type != 'third'} style="display: none" {/if}>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>第三方客服链接：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" class="layui-input len-mid" name="pc[third_url]" value="{$config.pc.third_url ?? ''}" lay-verify="pcThirdUrl">
|
||
</div>
|
||
</div>
|
||
<div class="word-aux">请填写客服链接，聊天时跳转至第三方聊天窗口。例如：<a href="https://meiqia.com/zt/livechat?utm_source=tian&utm_medium=baidu&utm_term=pinzhuan" target="_blank" class="text-color">美洽客服</a>。</div>
|
||
</div>
|
||
{/if}
|
||
|
||
{if addon_is_exit('aliapp', request()->siteid()) == 1 }
|
||
<div class="layui-card-header">
|
||
<span class="card-title">支付宝小程序</span>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">客服类型：</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="aliapp[type]" lay-filter="serviceType" lay-type="aliapp" value="none" title="不启用" {if condition="$config.aliapp.type == 'none'"} checked {/if}>
|
||
{if addon_is_exit('servicer')}<input type="radio" name="aliapp[type]" lay-filter="serviceType" lay-type="aliapp" value="niushop" title="Niushop客服" {if condition="$config.aliapp.type == 'niushop'"} checked {/if}>{/if}
|
||
<input type="radio" name="aliapp[type]" lay-filter="serviceType" lay-type="aliapp" value="aliapp" title="蚂蚁智能客服" {if condition="$config.aliapp.type == 'aliapp'"} checked {/if}>
|
||
</div>
|
||
</div>
|
||
<div class="aliapp-wrap aliapp" {if $config.aliapp.type != 'aliapp'} style="display: none" {/if}>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>租户ID：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" class="layui-input len-mid" name="aliapp[instid]" value="{$config.aliapp.instid ?? ''}" lay-verify="aliappInstid">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>聊天窗ID：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" class="layui-input len-mid" name="aliapp[scene]" value="{$config.aliapp.scene ?? ''}" lay-verify="aliappScene">
|
||
</div>
|
||
</div>
|
||
<div class="word-aux">小程序中如何接入蚂蚁智能客服请查看<a href="https://opendocs.alipay.com/b/03al9b" target="_blank" class="text-color">在小程序中接入</a></div>
|
||
</div>
|
||
{/if}
|
||
|
||
<div class="form-row all-box-left">
|
||
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
<script>
|
||
var repeat_flag = false; //防重复标识
|
||
var form,serviceOpen;
|
||
layui.use(['form'], function() {
|
||
form = layui.form;
|
||
|
||
form.render();
|
||
|
||
form.verify({
|
||
h5WxworkUrl: function(value){
|
||
if ($('[name="h5[type]"]:checked').val() == 'wxwork' && !/[\S]+/.test(value)) {
|
||
return '请输入客服链接';
|
||
}
|
||
},
|
||
h5ThirdUrl: function(value){
|
||
if ($('[name="h5[type]"]:checked').val() == 'third' && !/[\S]+/.test(value)) {
|
||
return '请输入客服链接';
|
||
}
|
||
},
|
||
weappCorpid: function(value){
|
||
if ($('[name="weapp[type]"]:checked').val() == 'wxwork' && !/[\S]+/.test(value)) {
|
||
return '请输入企业ID';
|
||
}
|
||
},
|
||
weappWxworkUrl: function(value){
|
||
if ($('[name="weapp[type]"]:checked').val() == 'wxwork' && !/[\S]+/.test(value)) {
|
||
return '请输入客服链接';
|
||
}
|
||
},
|
||
pcThirdUrl: function(value){
|
||
if ($('[name="pc[type]"]:checked').val() == 'third' && !/[\S]+/.test(value)) {
|
||
return '请输入客服链接';
|
||
}
|
||
},
|
||
aliappInstid: function(value){
|
||
if ($('[name="aliapp[type]"]:checked').val() == 'aliapp' && !/[\S]+/.test(value)) {
|
||
return '租户ID';
|
||
}
|
||
},
|
||
aliappScene: function(value){
|
||
if ($('[name="aliapp[type]"]:checked').val() == 'aliapp' && !/[\S]+/.test(value)) {
|
||
return '聊天窗ID';
|
||
}
|
||
}
|
||
})
|
||
|
||
form.on('radio(serviceType)',function(data){
|
||
var type = $(data.elem).attr('lay-type'), value = data.value;
|
||
$('.' + type + '-wrap').hide();
|
||
$('.' + type + '-wrap.' + value).show();
|
||
})
|
||
|
||
/**
|
||
* 监听提交
|
||
*/
|
||
form.on('submit(save)', function(data) {
|
||
if (repeat_flag) return false;
|
||
repeat_flag = true;
|
||
|
||
$.ajax({
|
||
url: ns.url("shop/config/servicer"),
|
||
data: data.field,
|
||
dataType: 'JSON',
|
||
type: 'POST',
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('编辑成功');
|
||
listenerHash(); // 刷新页面
|
||
layer.closeAll();
|
||
}else{
|
||
repeat_flag = false;
|
||
layer.msg(res.message);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
function showDemo(){
|
||
layer.open({
|
||
title: '查看示例',
|
||
type: 1,
|
||
area: ['700px', '660px'],
|
||
content: '<img style="margin:15px;" src="SHOP_IMG/chat1.png"><img style="margin:15px;" src="SHOP_IMG/chat2.png">'
|
||
})
|
||
}
|
||
|
||
function editService(){
|
||
serviceOpen= layer.open({
|
||
title:'客服设置',
|
||
type:1,
|
||
area: 'auto',
|
||
fixed:true,
|
||
maxWidth:1000,
|
||
maxHeight:800,
|
||
content:$("#contentService").html(),
|
||
success:function(layero,index){
|
||
form.render();
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|