初始上传
This commit is contained in:
304
app/shop/view/config/servicer.html
Executable file
304
app/shop/view/config/servicer.html
Executable file
@@ -0,0 +1,304 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user