fix(frontend): 余额充值弹窗 1:1 对齐 Zibll
- credits-wallet.php:弹窗重写为 Zibll refresh_modal 壳(.modal.flex.jc.fade > .modal-dialog.modal-mini.full-sm)+ zibpay_get_balance_charge_modal 同构内容(balance-charge-form / vip-product.product-box / payment-method-radio hollow-radio / but jb-red initiate-pay),档位与支付方式改为 data-for/data-value 选中模型
- credits.js:initBalanceCharge 改由 Bootstrap modal 运行时驱动(modal('show') + data-dismiss + hidden.bs.modal 中止轮询);选中为程序赋值 hidden input,selectProduct/selectMethod 内显式 resetOperationKey 保证幂等键随选中内容刷新;提交契约不变
- credits.css:删除 uc-charge-* 全部死样式;新增 .balance-charge-form 作用域内 .zib-widget 基础卡与 .vip-product/.vip-tag 的 Zibll 原值回位(vip-modal.css 全局同名覆盖需在此回位)
验证:php -l 通过;toast-contract + card-pass-universal-redeem + card-pass-order-numbers 契约 26/26;uc-charge/balance_package/data-aksrt-charge-close/旧弹窗 id 引用清零
This commit is contained in:
+60
-15
@@ -393,19 +393,63 @@
|
||||
modal.dataset.aksrtChargeInitialized = '1';
|
||||
var form = modal.querySelector('[data-aksrt-charge-form]');
|
||||
var busy = false;
|
||||
var jq = window.jQuery;
|
||||
|
||||
document.querySelectorAll('[data-aksrt-charge-open]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () { openModal(modal); });
|
||||
});
|
||||
modal.querySelectorAll('[data-aksrt-charge-close]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
closeModal(modal);
|
||||
// Zibll 弹窗壳(.modal.fade)走 Bootstrap modal 运行时(zibll 的 refresh_modal 同源行为)。
|
||||
if (jq && jq.fn && jq.fn.modal) {
|
||||
jq(modal).modal('show');
|
||||
} else {
|
||||
modal.style.display = 'block';
|
||||
modal.classList.add('in');
|
||||
}
|
||||
});
|
||||
});
|
||||
modal.querySelectorAll('.uc-charge-package input').forEach(function (inp) {
|
||||
inp.addEventListener('change', function () {
|
||||
modal.querySelectorAll('.uc-charge-package').forEach(function (el) {
|
||||
el.classList.toggle('is-active', el.contains(inp) && inp.checked);
|
||||
});
|
||||
if (jq && jq.fn && jq.fn.modal) {
|
||||
jq(modal).on('hidden.bs.modal', function () {
|
||||
if (activePoll && typeof activePoll.abort === 'function') {
|
||||
activePoll.abort();
|
||||
notyf('已停止查询支付状态', 'warning', 3, 'aksrt-balance-charge-payment-toast');
|
||||
}
|
||||
activePoll = null;
|
||||
});
|
||||
}
|
||||
// Zibll data-for/data-value 选中模型:余额档位(.vip-product.product-box)
|
||||
// 选中变化不产生 change 事件(隐藏 input 由程序赋值),需显式重置幂等键。
|
||||
function selectProduct(value) {
|
||||
modal.querySelectorAll('[data-for="balance_product"]').forEach(function (el) {
|
||||
el.classList.toggle('active', el.getAttribute('data-value') === value);
|
||||
});
|
||||
var hidden = modal.querySelector('input[name="balance_product"]');
|
||||
if (hidden) hidden.value = value;
|
||||
if (form) resetOperationKey(form);
|
||||
}
|
||||
modal.querySelectorAll('[data-for="balance_product"]').forEach(function (el) {
|
||||
el.addEventListener('click', function () {
|
||||
selectProduct(el.getAttribute('data-value'));
|
||||
});
|
||||
});
|
||||
var customInput = modal.querySelector('input[name="custom_price"]');
|
||||
if (customInput) {
|
||||
customInput.addEventListener('input', function () {
|
||||
if (String(customInput.value || '').trim() !== '') {
|
||||
selectProduct('custom');
|
||||
}
|
||||
});
|
||||
}
|
||||
// 支付方式(.payment-method-radio)
|
||||
function selectMethod(value) {
|
||||
modal.querySelectorAll('[data-for="payment_method"]').forEach(function (el) {
|
||||
el.classList.toggle('active', el.getAttribute('data-value') === value);
|
||||
});
|
||||
var hidden = modal.querySelector('input[name="payment_method"]');
|
||||
if (hidden) hidden.value = value;
|
||||
if (form) resetOperationKey(form);
|
||||
}
|
||||
modal.querySelectorAll('[data-for="payment_method"]').forEach(function (el) {
|
||||
el.addEventListener('click', function () {
|
||||
selectMethod(el.getAttribute('data-value'));
|
||||
});
|
||||
});
|
||||
if (!form) return;
|
||||
@@ -413,24 +457,25 @@
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
if (busy) return;
|
||||
var pkgInput = form.querySelector('input[name="balance_package"]:checked') || form.querySelector('input[name="balance_package"]');
|
||||
var pkgInput = form.querySelector('input[name="balance_product"]');
|
||||
var pkg = pkgInput ? pkgInput.value : 'custom';
|
||||
var customEl = form.querySelector('input[name="custom_price"]');
|
||||
var custom = customEl ? String(customEl.value || '').trim() : '';
|
||||
var validCustom = /^(0|[1-9]\d*)(?:\.\d{1,2})?$/.test(custom) && custom !== '0' && custom !== '0.0' && custom !== '0.00';
|
||||
if (validCustom) {
|
||||
pkg = 'custom';
|
||||
selectProduct('custom');
|
||||
}
|
||||
if ((!pkg || pkg === 'custom') && !validCustom && !pkgInput) {
|
||||
if ((!pkg || pkg === 'custom') && !validCustom) {
|
||||
notyf('请选择或输入充值金额', 'danger');
|
||||
return;
|
||||
}
|
||||
if (pkg === 'custom' && !validCustom) {
|
||||
notyf('请输入有效充值金额', 'danger');
|
||||
var methodEl = form.querySelector('input[name="payment_method"]');
|
||||
var method = methodEl ? methodEl.value : '';
|
||||
if (!method) {
|
||||
notyf('暂无可用支付方式', 'danger');
|
||||
return;
|
||||
}
|
||||
var methodEl = form.querySelector('input[name="payment_method"]:checked');
|
||||
var method = methodEl ? methodEl.value : 'alipay';
|
||||
busy = true;
|
||||
notyf('正在创建充值订单…', 'load', '', 'aksrt-balance-charge-toast');
|
||||
api('/pay/balance/charge', {
|
||||
|
||||
Reference in New Issue
Block a user