370 lines
22 KiB
HTML
Executable File
370 lines
22 KiB
HTML
Executable File
{include file="Public:header2"/}
|
||
<body style="min-height: 100%;background-color: #fff">
|
||
<style type="text/css">
|
||
.ggg{
|
||
width:600px !important
|
||
}
|
||
.merchant-selector {
|
||
width: 100%;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
padding: 10px;
|
||
border: 1px solid #e6e6e6;
|
||
margin-top: 10px;
|
||
}
|
||
.merchant-item-mini {
|
||
margin-bottom: 5px;
|
||
}
|
||
</style>
|
||
<div class="layui-fluid">
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">微信小程序配置</div>
|
||
<div class="layui-card-body">
|
||
<form onsubmit="return false;">
|
||
<div class="layui-form" wid100 lay-filter="">
|
||
<div class="layui-form-item">
|
||
<div class="layui-alert layui-bg-gray">
|
||
<i class="layui-icon layui-icon-tips"></i> 配置多个微信小程序，系统将根据域名自动匹配使用哪个小程序。若请求域名未匹配到对应小程序，则使用默认小程序配置。
|
||
</div>
|
||
</div>
|
||
<input type="hidden" name="key" value="miniprogram_setting" lay-verify="required" class="layui-input">
|
||
|
||
<div id="miniprogram-container">
|
||
{if isset($data.miniprograms) && is_array($data.miniprograms)}
|
||
{foreach $data.miniprograms as $index => $miniprogram}
|
||
<div class="miniprogram-item" style="border: 1px solid #e6e6e6; padding: 20px; margin-bottom: 20px; position: relative;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">小程序名称</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[{$index}][name]" value="{$miniprogram.name}" lay-verify="required" class="layui-input" placeholder="请输入小程序名称">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">是否默认</label>
|
||
<div class="layui-input-inline">
|
||
<input type="checkbox" name="miniprograms[{$index}][is_default]" value="1" title="设为默认" lay-filter="is_default" {if isset($miniprogram.is_default) && $miniprogram.is_default==1}checked{/if}>
|
||
<div class="layui-form-mid layui-word-aux">设为默认后将用于未匹配域名的请求</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">Appid</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[{$index}][appid]" value="{$miniprogram.appid}" lay-verify="required" class="layui-input" placeholder="请输入微信小程序AppID">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">AppSecret</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[{$index}][app_secret]" value="{$miniprogram.app_secret}" lay-verify="required" class="layui-input" placeholder="请输入微信小程序AppSecret">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">域名</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[{$index}][domain]" value="{$miniprogram.domain}" class="layui-input" placeholder="请输入域名，多个域名用英文逗号分隔">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">多个域名使用英文逗号分隔，如：example.com,www.example.com</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">订单前缀</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="miniprograms[{$index}][order_prefix]" value="{$miniprogram.order_prefix|default=''}" maxlength="2" class="layui-input" placeholder="请输入订单前缀">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">长度为2位字符，用于标识订单来源小程序</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">关联商户</label>
|
||
<div class="layui-input-block">
|
||
<div class="merchant-selector">
|
||
{if isset($merchants) && is_array($merchants)}
|
||
{foreach $merchants as $merchant_id => $merchant}
|
||
<div class="merchant-item-mini">
|
||
<input type="checkbox" name="miniprograms[{$index}][merchants][]" value="{$merchant.id}" title="{$merchant.name}" lay-skin="primary" {if isset($miniprogram.merchants) && in_array($merchant.id, $miniprogram.merchants)}checked{/if}>
|
||
</div>
|
||
{/foreach}
|
||
{else}
|
||
<div class="layui-form-mid">暂无可用商户，请先在<a href="{:url('/admin/weixinpay')}" class="layui-btn layui-btn-xs">微信支付设置</a>中添加商户</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm remove-miniprogram" style="position: absolute; top: 10px; right: 10px;">删除小程序</button>
|
||
</div>
|
||
{/foreach}
|
||
{else}
|
||
<!-- 默认小程序项 -->
|
||
<div class="miniprogram-item" style="border: 1px solid #e6e6e6; padding: 20px; margin-bottom: 20px; position: relative;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">小程序名称</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[0][name]" value="默认小程序" lay-verify="required" class="layui-input" placeholder="请输入小程序名称">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">是否默认</label>
|
||
<div class="layui-input-inline">
|
||
<input type="checkbox" name="miniprograms[0][is_default]" value="1" title="设为默认" lay-filter="is_default" checked>
|
||
<div class="layui-form-mid layui-word-aux">设为默认后将用于未匹配域名的请求</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">Appid</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[0][appid]" value="{$wechat_setting.appid|default=''}" lay-verify="required" class="layui-input" placeholder="请输入微信小程序AppID">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">AppSecret</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[0][app_secret]" value="{$wechat_setting.appSecret|default=''}" lay-verify="required" class="layui-input" placeholder="请输入微信小程序AppSecret">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">域名</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[0][domain]" value="" class="layui-input" placeholder="请输入域名，多个域名用英文逗号分隔">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">多个域名使用英文逗号分隔，如：example.com,www.example.com</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">订单前缀</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="miniprograms[0][order_prefix]" value="" maxlength="2" class="layui-input" placeholder="请输入订单前缀">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">长度为2位字符，用于标识订单来源小程序</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">关联商户</label>
|
||
<div class="layui-input-block">
|
||
<div class="merchant-selector">
|
||
{if isset($merchants) && is_array($merchants)}
|
||
{foreach $merchants as $merchant_id => $merchant}
|
||
<div class="merchant-item-mini">
|
||
<input type="checkbox" name="miniprograms[0][merchants][]" value="{$merchant.id}" title="{$merchant.name}" lay-skin="primary">
|
||
</div>
|
||
{/foreach}
|
||
{else}
|
||
<div class="layui-form-mid">暂无可用商户，请先在<a href="{:url('/admin/weixinpay')}" class="layui-btn layui-btn-xs">微信支付设置</a>中添加商户</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm remove-miniprogram" style="position: absolute; top: 10px; right: 10px;">删除小程序</button>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn layui-btn-normal" id="add-miniprogram">添加小程序</button>
|
||
<button class="layui-btn" onclick="return check()">确认保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{include file="Public:footer"/}
|
||
</body>
|
||
</html>
|
||
<script type="text/javascript">
|
||
layui.use(['layer','form','upload','element'], function(){
|
||
var $ = layui.$;
|
||
var form = layui.form;
|
||
|
||
// 监听默认小程序复选框
|
||
form.on('checkbox(is_default)', function(data){
|
||
if(data.elem.checked){
|
||
// 取消其他默认小程序
|
||
$('input[name$="[is_default]"]').not(this).prop('checked', false);
|
||
form.render('checkbox');
|
||
}
|
||
});
|
||
|
||
// 添加小程序按钮点击事件
|
||
$('#add-miniprogram').on('click', function() {
|
||
var index = $('.miniprogram-item').length;
|
||
|
||
// 构建商户选择器HTML
|
||
var merchantSelectorHtml = '';
|
||
{if isset($merchants) && is_array($merchants)}
|
||
merchantSelectorHtml = `
|
||
<div class="merchant-selector">
|
||
{foreach $merchants as $merchant_id => $merchant}
|
||
<div class="merchant-item-mini">
|
||
<input type="checkbox" name="miniprograms[${index}][merchants][]" value="{$merchant.id}" title="{$merchant.name}" lay-skin="primary">
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
`;
|
||
{else}
|
||
merchantSelectorHtml = `
|
||
<div class="merchant-selector">
|
||
<div class="layui-form-mid">暂无可用商户，请先在<a href="{:url('/admin/weixinpay')}" class="layui-btn layui-btn-xs">微信支付设置</a>中添加商户</div>
|
||
</div>
|
||
`;
|
||
{/if}
|
||
|
||
var newItemHtml = `
|
||
<div class="miniprogram-item" style="border: 1px solid #e6e6e6; padding: 20px; margin-bottom: 20px; position: relative;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">小程序名称</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[${index}][name]" value="" lay-verify="required" class="layui-input" placeholder="请输入小程序名称">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">是否默认</label>
|
||
<div class="layui-input-inline">
|
||
<input type="checkbox" name="miniprograms[${index}][is_default]" value="1" title="设为默认" lay-filter="is_default">
|
||
<div class="layui-form-mid layui-word-aux">设为默认后将用于未匹配域名的请求</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">Appid</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[${index}][appid]" value="" lay-verify="required" class="layui-input" placeholder="请输入微信小程序AppID">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">AppSecret</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[${index}][app_secret]" value="" lay-verify="required" class="layui-input" placeholder="请输入微信小程序AppSecret">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">域名</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="miniprograms[${index}][domain]" value="" class="layui-input" placeholder="请输入域名，多个域名用英文逗号分隔">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">多个域名使用英文逗号分隔，如：example.com,www.example.com</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">订单前缀</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="miniprograms[${index}][order_prefix]" value="" maxlength="2" class="layui-input" placeholder="请输入订单前缀">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">长度为2位字符，用于标识订单来源小程序</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">关联商户</label>
|
||
<div class="layui-input-block">
|
||
${merchantSelectorHtml}
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm remove-miniprogram" style="position: absolute; top: 10px; right: 10px;">删除小程序</button>
|
||
</div>
|
||
`;
|
||
$('#miniprogram-container').append(newItemHtml);
|
||
form.render();
|
||
});
|
||
|
||
// 删除小程序按钮点击事件(使用事件委托)
|
||
$(document).on('click', '.remove-miniprogram', function() {
|
||
if ($('.miniprogram-item').length <= 1) {
|
||
layer.msg('至少保留一个小程序配置', {icon: 2});
|
||
} else {
|
||
$(this).closest('.miniprogram-item').remove();
|
||
// 重新排序索引
|
||
$('.miniprogram-item').each(function(idx) {
|
||
$(this).find('input').each(function() {
|
||
var name = $(this).attr('name');
|
||
if (name) {
|
||
// 保持数组结构的替换
|
||
$(this).attr('name', name.replace(/miniprograms\[\d+\]/, 'miniprograms[' + idx + ']'));
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
function check(){
|
||
var $ = layui.$;
|
||
|
||
// 确保至少有一个默认小程序
|
||
var hasDefault = false;
|
||
$('input[name$="[is_default]"]').each(function() {
|
||
if(this.checked) {
|
||
hasDefault = true;
|
||
return false; // 跳出循环
|
||
}
|
||
});
|
||
|
||
if (!hasDefault) {
|
||
layer.msg('请至少设置一个默认小程序', {icon: 2, anim: 6, time: 2000});
|
||
return false;
|
||
}
|
||
|
||
// 验证订单前缀
|
||
var prefixes = [];
|
||
var prefixValid = true;
|
||
|
||
$('.miniprogram-item').each(function(index) {
|
||
var prefixInput = $(this).find('input[name$="[order_prefix]"]');
|
||
var prefix = prefixInput.val().trim();
|
||
var name = $(this).find('input[name$="[name]"]').val();
|
||
|
||
if (prefix) {
|
||
if (prefix.length != 2) {
|
||
layer.msg('小程序"' + name + '"的订单前缀必须是2位字符', {icon: 2, anim: 6, time: 2000});
|
||
prefixValid = false;
|
||
return false; // 跳出循环
|
||
}
|
||
|
||
if (prefixes.indexOf(prefix) !== -1) {
|
||
layer.msg('订单前缀"' + prefix + '"重复，每个小程序的前缀必须唯一', {icon: 2, anim: 6, time: 2000});
|
||
prefixValid = false;
|
||
return false; // 跳出循环
|
||
}
|
||
|
||
prefixes.push(prefix);
|
||
}
|
||
});
|
||
|
||
if (!prefixValid) {
|
||
return false;
|
||
}
|
||
|
||
// 提交表单
|
||
var url="{:url('/admin/update')}";
|
||
var load=layer.load(2);
|
||
$.post(url,$("form").serialize(),function(data){
|
||
if(data.status==1){
|
||
layer.msg(data.msg,{icon:1,time:1000},function(){
|
||
location.reload();
|
||
});
|
||
}else{
|
||
layer.msg(data.msg,{icon:2,anim:6,time:1500},function(){
|
||
layer.close(load);
|
||
});
|
||
}
|
||
})
|
||
}
|
||
</script> |