94 lines
5.0 KiB
JavaScript
94 lines
5.0 KiB
JavaScript
/**
|
||
* 后台 JS：订阅计划面板交互
|
||
* - 隐藏旧的单一订阅字段（周期、默认数量、最小起订量、每周期价格、分级折扣）
|
||
* - 将后端渲染的表格（保持字段 name 不变）转换为“可折叠面板”形式
|
||
* - 支持新增/删除计划，折叠/展开计划详情
|
||
* - 保持与后端 save_meta 的兼容：使用相同的 name 数组结构提交
|
||
*/
|
||
(function($){
|
||
$(function(){
|
||
// 隐藏旧的单一订阅字段
|
||
['yoone_sub_enabled','yoone_sub_period','yoone_sub_qty_default','yoone_sub_min_qty','yoone_sub_price','yoone_sub_tier_rules'].forEach(function(id){
|
||
var $input = $('#'+id);
|
||
if ($input.length) {
|
||
var $field = $input.closest('.form-field');
|
||
if ($field.length) { $field.hide(); }
|
||
}
|
||
});
|
||
|
||
var $table = $('.yoone-sub-plans-table');
|
||
var $tbody = $('#yoone-sub-plans-body');
|
||
var $addBtn = $('#yoone-sub-plan-add');
|
||
|
||
function buildPanel(labelInput, periodSelect, priceInput, discountInput){
|
||
var $panel = $('<div class="yoone-sub-plan-panel"/>');
|
||
var $header = $('<div class="yoone-sub-plan-header"/>');
|
||
var $actions = $('<div class="yoone-sub-plan-actions"/>');
|
||
var $toggle = $('<button type="button" class="button yoone-sub-plan-toggle" aria-expanded="true"/>').text((typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.collapse : '折叠'));
|
||
var $remove = $('<button type="button" class="button yoone-sub-plan-remove"/>').text((typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.remove : '删除'));
|
||
var $title = $(labelInput || '<input type="text" class="yoone-sub-plan-title" name="yoone_sub_plans[label][]" placeholder="'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.placeholderLabel : '例如：标准计划')+'" />');
|
||
$title.addClass('yoone-sub-plan-title');
|
||
$actions.append($toggle).append(' ').append($remove);
|
||
$header.append($title).append($actions);
|
||
|
||
var $body = $('<div class="yoone-sub-plan-body"/>');
|
||
var $periodRow = $('<p/>').append('<label>'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.period : '周期')+'</label> ');
|
||
var $period = $(periodSelect || [
|
||
'<select name="yoone_sub_plans[period][]">',
|
||
'<option value="month">', (typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.month : '月'), '</option>',
|
||
'<option value="year">', (typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.year : '年'), '</option>',
|
||
'</select>'
|
||
].join(''));
|
||
$periodRow.append($period);
|
||
|
||
var $priceRow = $('<p/>').append('<label>'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.pricePerPeriod : '每周期价格')+'</label> ');
|
||
var $price = $(priceInput || '<input type="text" name="yoone_sub_plans[price][]" placeholder="'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.placeholderPrice : '留空表示用产品价')+'" />');
|
||
$priceRow.append($price);
|
||
|
||
var $discRow = $('<p/>').append('<label>'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.discountPercent : '折扣百分比(可选)')+'</label> ');
|
||
var $disc = $(discountInput || '<input type="number" min="0" step="0.1" name="yoone_sub_plans[discount_percent][]" placeholder="'+(typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.placeholderDiscount : '如：10 表示9折')+'" />');
|
||
$discRow.append($disc);
|
||
|
||
$body.append($periodRow).append($priceRow).append($discRow);
|
||
$panel.append($header).append($body);
|
||
return $panel;
|
||
}
|
||
|
||
if ($tbody.length && $addBtn.length) {
|
||
// 将现有表格行转换为面板
|
||
var $container = $('<div id="yoone-sub-plans-panels"/>');
|
||
$table.before($container);
|
||
$tbody.find('tr').each(function(){
|
||
var $tr = $(this);
|
||
var $label = $tr.find('input[name="yoone_sub_plans[label][]"]').detach();
|
||
var $period = $tr.find('select[name="yoone_sub_plans[period][]"]').detach();
|
||
var $price = $tr.find('input[name="yoone_sub_plans[price][]"]').detach();
|
||
var $disc = $tr.find('input[name="yoone_sub_plans[discount_percent][]"]').detach();
|
||
var $panel = buildPanel($label, $period, $price, $disc);
|
||
$container.append($panel);
|
||
});
|
||
// 隐藏表格
|
||
$table.hide();
|
||
|
||
// 新增面板
|
||
$addBtn.on('click', function(){
|
||
$container.append(buildPanel());
|
||
});
|
||
|
||
// 删除面板
|
||
$(document).on('click', '.yoone-sub-plan-remove', function(){
|
||
$(this).closest('.yoone-sub-plan-panel').remove();
|
||
});
|
||
|
||
// 折叠/展开
|
||
$(document).on('click', '.yoone-sub-plan-toggle', function(){
|
||
var $btn = $(this);
|
||
var $body = $btn.closest('.yoone-sub-plan-panel').find('.yoone-sub-plan-body');
|
||
var expanded = $btn.attr('aria-expanded') === 'true';
|
||
$btn.attr('aria-expanded', expanded ? 'false' : 'true');
|
||
$btn.text(expanded ? (typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.expand : '展开') : (typeof yooneSubsI18n !== 'undefined' ? yooneSubsI18n.collapse : '折叠'));
|
||
$body.toggleClass('collapsed', expanded);
|
||
});
|
||
}
|
||
});
|
||
})(jQuery); |