468 lines
28 KiB
HTML
468 lines
28 KiB
HTML
{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;
|
||
}
|
||
.payment-tabs {
|
||
margin-bottom: 20px;
|
||
}
|
||
.payment-tab {
|
||
padding: 10px 15px;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
border: 1px solid #e6e6e6;
|
||
margin-right: 5px;
|
||
}
|
||
.payment-tab.active {
|
||
background-color: #1E9FFF;
|
||
color: #fff;
|
||
border-color: #1E9FFF;
|
||
}
|
||
</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">H5页面配置</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> 配置多个H5应用，系统将根据域名自动匹配使用哪个H5应用。若请求域名未匹配到对应H5应用，则使用默认H5应用配置。
|
||
</div>
|
||
</div>
|
||
<input type="hidden" name="key" value="h5_setting" lay-verify="required" class="layui-input">
|
||
|
||
<div id="h5app-container">
|
||
|
||
{if isset($data.h5apps) && is_array($data.h5apps)}
|
||
{foreach $data.h5apps as $index => $h5app}
|
||
<div class="h5app-item" style="border: 1px solid #e6e6e6; padding: 20px; margin-bottom: 20px; position: relative;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">H5名称</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="h5apps[{$index}][name]" value="{$h5app.name|default=''}" lay-verify="required" class="layui-input" placeholder="请输入H5应用名称">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">是否默认</label>
|
||
<div class="layui-input-inline">
|
||
<input type="checkbox" name="h5apps[{$index}][is_default]" value="1" title="设为默认" lay-filter="is_default" {if isset($h5app.is_default) && $h5app.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="h5apps[{$index}][appid]" value="{$h5app.appid|default=''}" lay-verify="required" class="layui-input" placeholder="请输入H5应用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="h5apps[{$index}][app_secret]" value="{$h5app.app_secret|default=''}" lay-verify="required" class="layui-input" placeholder="请输入H5应用AppSecret">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">域名</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="h5apps[{$index}][domain]" value="{$h5app.domain|default=''}" 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="h5apps[{$index}][order_prefix]" value="{$h5app.order_prefix|default=''}" maxlength="2" class="layui-input" placeholder="请输入订单前缀">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">长度为2位字符，用于标识订单来源H5应用</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">支付方式</label>
|
||
<div class="layui-input-block">
|
||
<div class="payment-tabs">
|
||
<div class="payment-tab active" data-payment="alipay">支付宝支付</div>
|
||
<div class="payment-tab" data-payment="wechat">微信支付</div>
|
||
</div>
|
||
|
||
<!-- 支付宝商户 -->
|
||
<div class="payment-content" id="alipay-payment-{$index}">
|
||
<div class="merchant-selector">
|
||
{if isset($alimerchants) && is_array($alimerchants) && count($alimerchants) > 0}
|
||
{foreach $alimerchants as $merchant_id => $merchant}
|
||
<div class="merchant-item-mini">
|
||
<input type="checkbox" name="h5apps[{$index}][ali_merchants][]" value="{$merchant.appId}" title="{$merchant.name}" lay-skin="primary" {if isset($h5app.ali_merchants) && in_array($merchant.appId, $h5app.ali_merchants)}checked{/if}>
|
||
</div>
|
||
{/foreach}
|
||
{else}
|
||
<div class="layui-form-mid">暂无可用支付宝商户，请先在<a href="{:url('/admin/alipay')}" class="layui-btn layui-btn-xs">支付宝支付设置</a>中添加商户</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 微信支付商户 -->
|
||
<div class="payment-content" id="wechat-payment-{$index}" style="display: none;">
|
||
<div class="merchant-selector">
|
||
{if isset($wxmerchants) && is_array($wxmerchants) && count($wxmerchants) > 0}
|
||
{foreach $wxmerchants as $merchant_id => $merchant}
|
||
<div class="merchant-item-mini">
|
||
<input type="checkbox" name="h5apps[{$index}][wx_merchants][]" value="{$merchant.mch_id}" title="{$merchant.name}" lay-skin="primary" {if isset($h5app.wx_merchants) && in_array($merchant.mch_id, $h5app.wx_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>
|
||
</div>
|
||
|
||
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm remove-h5app" style="position: absolute; top: 10px; right: 10px;">删除H5应用</button>
|
||
</div>
|
||
{/foreach}
|
||
{else}
|
||
<!-- 默认H5应用项 -->
|
||
<div class="h5app-item" style="border: 1px solid #e6e6e6; padding: 20px; margin-bottom: 20px; position: relative;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">H5名称</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="h5apps[0][name]" value="默认H5应用" lay-verify="required" class="layui-input" placeholder="请输入H5应用名称">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">是否默认</label>
|
||
<div class="layui-input-inline">
|
||
<input type="checkbox" name="h5apps[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="h5apps[0][appid]" value="" lay-verify="required" class="layui-input" placeholder="请输入H5应用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="h5apps[0][app_secret]" value="" lay-verify="required" class="layui-input" placeholder="请输入H5应用AppSecret">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">域名</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="h5apps[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="h5apps[0][order_prefix]" value="H5" maxlength="2" class="layui-input" placeholder="请输入订单前缀">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">长度为2位字符，用于标识订单来源H5应用</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">支付方式</label>
|
||
<div class="layui-input-block">
|
||
<div class="payment-tabs">
|
||
<div class="payment-tab active" data-payment="alipay">支付宝支付</div>
|
||
<div class="payment-tab" data-payment="wechat">微信支付</div>
|
||
</div>
|
||
|
||
<!-- 支付宝商户 -->
|
||
<div class="payment-content" id="alipay-payment-0">
|
||
<div class="merchant-selector">
|
||
{if isset($alimerchants) && is_array($alimerchants) && count($alimerchants) > 0}
|
||
{foreach $alimerchants as $merchant_id => $merchant}
|
||
<div class="merchant-item-mini">
|
||
<input type="checkbox" name="h5apps[0][ali_merchants][]" value="{$merchant.appId}" title="{$merchant.name}" lay-skin="primary">
|
||
</div>
|
||
{/foreach}
|
||
{else}
|
||
<div class="layui-form-mid">暂无可用支付宝商户，请先在<a href="{:url('/admin/alipay')}" class="layui-btn layui-btn-xs">支付宝支付设置</a>中添加商户</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 微信支付商户 -->
|
||
<div class="payment-content" id="wechat-payment-0" style="display: none;">
|
||
<div class="merchant-selector">
|
||
{if isset($wxmerchants) && is_array($wxmerchants) && count($wxmerchants) > 0}
|
||
{foreach $wxmerchants as $merchant_id => $merchant}
|
||
<div class="merchant-item-mini">
|
||
<input type="checkbox" name="h5apps[0][wx_merchants][]" value="{$merchant.mch_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>
|
||
</div>
|
||
|
||
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm remove-h5app" style="position: absolute; top: 10px; right: 10px;">删除H5应用</button>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn layui-btn-normal" id="add-h5app">添加H5应用</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;
|
||
|
||
// 监听默认H5应用复选框
|
||
form.on('checkbox(is_default)', function(data){
|
||
if(data.elem.checked){
|
||
// 取消其他默认H5应用
|
||
$('input[name$="[is_default]"]').not(this).prop('checked', false);
|
||
form.render('checkbox');
|
||
}
|
||
});
|
||
|
||
// 支付方式选项卡切换
|
||
$(document).on('click', '.payment-tab', function() {
|
||
var $this = $(this);
|
||
var payment = $this.data('payment');
|
||
var $parent = $this.closest('.layui-input-block');
|
||
|
||
// 切换选项卡样式
|
||
$this.addClass('active').siblings().removeClass('active');
|
||
|
||
// 切换内容显示
|
||
$parent.find('.payment-content').hide();
|
||
$parent.find('[id^=' + payment + '-payment-]').show();
|
||
});
|
||
|
||
// 添加H5应用按钮点击事件
|
||
$('#add-h5app').on('click', function() {
|
||
var index = $('.h5app-item').length;
|
||
|
||
// 构建微信商户选择器HTML
|
||
var wxMerchantSelectorHtml = '';
|
||
{if isset($wxmerchants) && is_array($wxmerchants) && count($wxmerchants) > 0}
|
||
wxMerchantSelectorHtml = `
|
||
<div class="merchant-selector">
|
||
{foreach $wxmerchants as $merchant_id => $merchant}
|
||
<div class="merchant-item-mini">
|
||
<input type="checkbox" name="h5apps[\${index}][wx_merchants][]" value="{$merchant.mch_id}" title="{$merchant.name}" lay-skin="primary">
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
`;
|
||
{else}
|
||
wxMerchantSelectorHtml = `
|
||
<div class="merchant-selector">
|
||
<div class="layui-form-mid">暂无可用微信商户，请先在<a href="{:url('/admin/weixinpay')}" class="layui-btn layui-btn-xs">微信支付设置</a>中添加商户</div>
|
||
</div>
|
||
`;
|
||
{/if}
|
||
|
||
// 构建支付宝商户选择器HTML
|
||
var aliMerchantSelectorHtml = '';
|
||
{if isset($alimerchants) && is_array($alimerchants) && count($alimerchants) > 0}
|
||
aliMerchantSelectorHtml = `
|
||
<div class="merchant-selector">
|
||
{foreach $alimerchants as $merchant_id => $merchant}
|
||
<div class="merchant-item-mini">
|
||
<input type="checkbox" name="h5apps[\${index}][ali_merchants][]" value="{$merchant.appId}" title="{$merchant.name}" lay-skin="primary">
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
`;
|
||
{else}
|
||
aliMerchantSelectorHtml = `
|
||
<div class="merchant-selector">
|
||
<div class="layui-form-mid">暂无可用支付宝商户，请先在<a href="{:url('/admin/alipay')}" class="layui-btn layui-btn-xs">支付宝支付设置</a>中添加商户</div>
|
||
</div>
|
||
`;
|
||
{/if}
|
||
|
||
var newItemHtml = `
|
||
<div class="h5app-item" style="border: 1px solid #e6e6e6; padding: 20px; margin-bottom: 20px; position: relative;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">H5名称</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="h5apps[\${index}][name]" value="" lay-verify="required" class="layui-input" placeholder="请输入H5应用名称">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">是否默认</label>
|
||
<div class="layui-input-inline">
|
||
<input type="checkbox" name="h5apps[\${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="h5apps[\${index}][appid]" value="" lay-verify="required" class="layui-input" placeholder="请输入H5应用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="h5apps[\${index}][app_secret]" value="" lay-verify="required" class="layui-input" placeholder="请输入H5应用AppSecret">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">域名</label>
|
||
<div class="layui-input-inline ggg">
|
||
<input type="text" name="h5apps[\${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="h5apps[\${index}][order_prefix]" value="" maxlength="2" class="layui-input" placeholder="请输入订单前缀">
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">长度为2位字符，用于标识订单来源H5应用</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">支付方式</label>
|
||
<div class="layui-input-block">
|
||
<div class="payment-tabs">
|
||
<div class="payment-tab active" data-payment="alipay">支付宝支付</div>
|
||
<div class="payment-tab" data-payment="wechat">微信支付</div>
|
||
</div>
|
||
|
||
<!-- 支付宝商户 -->
|
||
<div class="payment-content" id="alipay-payment-\${index}">
|
||
\${aliMerchantSelectorHtml}
|
||
</div>
|
||
|
||
<!-- 微信支付商户 -->
|
||
<div class="payment-content" id="wechat-payment-\${index}" style="display: none;">
|
||
\${wxMerchantSelectorHtml}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm remove-h5app" style="position: absolute; top: 10px; right: 10px;">删除H5应用</button>
|
||
</div>
|
||
`;
|
||
$('#h5app-container').append(newItemHtml);
|
||
form.render();
|
||
});
|
||
|
||
// 删除H5应用按钮点击事件(使用事件委托)
|
||
$(document).on('click', '.remove-h5app', function() {
|
||
if ($('.h5app-item').length <= 1) {
|
||
layer.msg('至少保留一个H5应用配置', {icon: 2});
|
||
} else {
|
||
$(this).closest('.h5app-item').remove();
|
||
// 重新排序索引
|
||
$('.h5app-item').each(function(idx) {
|
||
$(this).find('input, select').each(function() {
|
||
var name = $(this).attr('name');
|
||
if (name) {
|
||
// 修改索引，同时保持数组结构
|
||
$(this).attr('name', name.replace(/h5apps\[\d+\]/, 'h5apps[' + idx + ']'));
|
||
}
|
||
});
|
||
|
||
// 更新支付选项卡的ID
|
||
$(this).find('[id^=wechat-payment-]').attr('id', 'wechat-payment-' + idx);
|
||
$(this).find('[id^=alipay-payment-]').attr('id', 'alipay-payment-' + idx);
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
function check(){
|
||
var $ = layui.$;
|
||
|
||
// 确保至少有一个默认H5应用
|
||
var hasDefault = false;
|
||
$('input[name$="[is_default]"]').each(function() {
|
||
if(this.checked) {
|
||
hasDefault = true;
|
||
return false; // 跳出循环
|
||
}
|
||
});
|
||
|
||
if (!hasDefault) {
|
||
layer.msg('请至少设置一个默认H5应用', {icon: 2, anim: 6, time: 2000});
|
||
return false;
|
||
}
|
||
|
||
// 检查订单前缀长度
|
||
var hasError = false;
|
||
$('input[name$="[order_prefix]"]').each(function() {
|
||
var prefix = $(this).val();
|
||
if (prefix && prefix.length !== 2) {
|
||
hasError = true;
|
||
layer.msg('订单前缀必须是2位字符', {icon: 2, anim: 6, time: 2000});
|
||
return false; // 跳出循环
|
||
}
|
||
});
|
||
|
||
if (hasError) {
|
||
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> |