manghe/app/admin/view/Config/miniprogram.html
2025-05-03 01:07:10 +08:00

303 lines
16 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{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">
{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.mch_id}" title="{$merchant.name}" lay-skin="primary" {if isset($miniprogram.merchants) && in_array($merchant.mch_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}
</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>