fix(pay): 支付方式字样与按钮 UI 三弹窗统一对齐 Zibll

渠道展示名与按钮 UI 与参考主题 zibpay_get_payment_method_args /
zibpay_get_initiate_pay_input 对齐:

- 渠道名:aksrt_list_cash_payment_methods 增加 Zibll 基准展示名映射
  (余额/支付宝/微信/PayPal/Stripe),充值与会员弹窗不再显示网关
  内部名「站内余额」「微信支付」;积分弹窗手写「余额/卡密」与之同源
- 会员按钮字样:cta_label(立即开通/立即续费)→ Zibll 会员弹窗
  initiate_pay_input(4) 默认「立即支付」,与充值/积分弹窗一致
- 无可用支付方式:禁用按钮+自实现文案 → Zibll 同款
  <span class="badg px12 c-yellow-2">暂时无法支付,请与客服联系</span>
- 清理:按钮残留类 aksrt-vip-submit 与对应 CSS,加载/禁用态统一挂
  .initiate-pay(三弹窗按钮共用);renderMethods 空数组重复提示与
  不可达 reason 映射删除
- 契约测试同步锁定(无 cta_label/aksrt-vip-submit、立即支付字样、
  badg 提示、渠道名映射)

弹窗宽度差异(充值/积分 400px modal-mini、会员 600px)为 Zibll
原生设计,已在壳几何对齐时确认一致。
This commit is contained in:
2026-09-18 17:48:54 +08:00
parent ec1107c65a
commit 6075028520
4 changed files with 41 additions and 15 deletions
+2 -2
View File
@@ -147,8 +147,8 @@
display: none !important;
}
.aksrt-vip-submit.is-loading,
.aksrt-vip-submit:disabled {
.initiate-pay.is-loading,
.initiate-pay:disabled {
opacity: 0.7;
cursor: wait;
}
+15 -11
View File
@@ -51,7 +51,6 @@
}
function actionReason(reason) {
if (reason === "no_payment_method") return "暂无可用支付方式";
if (reason === "no_package") return "暂无可用套餐";
if (reason === "not_available") return "当前不可用";
return "";
@@ -127,10 +126,7 @@
function renderMethods(parent, methods, cardPass, wallet) {
methods = Array.isArray(methods) ? methods : [];
if (!methods.length) {
append(parent, node("div", "muted-2-color text-center padding-10", "暂无可用支付方式"));
return;
}
if (!methods.length) return; // 无可用支付方式:由按钮区渲染 Zibll 同款 badg 提示。
wallet = wallet || {};
var defaultMethod = text(methods[0].id || "balance");
@@ -479,13 +475,21 @@
renderMethods(products, methods, cardPass, wallet);
var actionName = actionKey(action);
var actionAllowed = allowed[actionName] === true;
var noMethod = methods.length === 0;
var reason = actionReason(reasons[actionName]);
var canPurchase = actionAllowed && methods.length > 0;
var submit = node("button", "mt6 but jb-red initiate-pay btn-block radius aksrt-vip-submit", canPurchase ? (group.items[0].cta_label || actionLabel(action)) : (reason || "暂无可用支付方式"));
submit.type = "button";
submit.disabled = !canPurchase;
submit.setAttribute("data-vip-submit", "");
append(products, submit);
var canPurchase = actionAllowed && !noMethod;
// 按钮字样对齐参考主题:会员弹窗即 zibpay_get_initiate_pay_input(4)
// 默认文案「立即支付」(开通/续费场景一致);无可用支付方式时渲染
// Zibll 同款 badg 提示,而非禁用按钮。
if (noMethod) {
append(products, node("span", "badg px12 c-yellow-2", "暂时无法支付,请与客服联系"));
} else {
var submit = node("button", "mt6 but jb-red initiate-pay btn-block radius", canPurchase ? "立即支付" : (reason || "暂不可购买"));
submit.type = "button";
submit.disabled = !canPurchase;
submit.setAttribute("data-vip-submit", "");
append(products, submit);
}
append(row, products);
append(form, row);
append(pane, form);
+14 -1
View File
@@ -105,6 +105,19 @@ if (!function_exists('aksrt_list_cash_payment_methods')) {
return [];
}
// 渠道展示名对齐参考主题 zibpay_get_payment_method_args:
// 微信 / 支付宝 / 余额 / 卡密 / PayPal / Stripe(网关 get_name 仅供
// 订单等内部场景,支付方式 UI 统一用本映射)。
$labels = [
'balance' => __('余额', 'aksrt'),
'alipay' => __('支付宝', 'aksrt'),
'epay_alipay' => __('支付宝', 'aksrt'),
'wechatpay' => __('微信', 'aksrt'),
'epay_wxpay' => __('微信', 'aksrt'),
'paypal' => 'PayPal',
'stripe' => 'Stripe',
];
$methods = [];
$gw = \AKSRT\Payment\Gateway::get_instance();
foreach ($ids as $id) {
@@ -117,7 +130,7 @@ if (!function_exists('aksrt_list_cash_payment_methods')) {
}
$methods[] = [
'id' => $id,
'name' => method_exists($g, 'get_name') ? (string) $g->get_name() : $id,
'name' => $labels[$id] ?? (method_exists($g, 'get_name') ? (string) $g->get_name() : $id),
];
}
@@ -30,6 +30,7 @@ const payVipJs = read('assets', 'js', 'pay-vip.js');
const chargeCard = read('src', 'Payment', 'ChargeCard.php');
const userOrders = read('src', 'Payment', 'UserOrders.php');
const vipPackages = read('src', 'Content', 'VipServicePackages.php');
const aksrtPay = read('inc', 'helpers', 'aksrt-pay.php');
const vipPurchase = read('src', 'Content', 'VipServicePurchase.php');
const vipModal = read('src', 'Content', 'VipServiceModal.php');
const schemaPhp = read('src', 'Admin', 'Schema', 'SchemaPayment.php');
@@ -123,7 +124,15 @@ test('会员弹窗:卡密渠道注入与直兑分流(不创建支付订单
assert.match(payVipJs, /"data-value", "card_pass"/);
assert.match(payVipJs, /hidden\.name = "payment_method"/);
assert.match(payVipJs, /mt6 but jb-red initiate-pay btn-block radius/);
assert.doesNotMatch(payVipJs, /uc-vip-shop__method|aksrt_vip_pay_method/);
assert.doesNotMatch(payVipJs, /uc-vip-shop__method|aksrt_vip_pay_method|aksrt-vip-submit/);
// 按钮字样对齐参考主题:会员弹窗即 initiate_pay_input(4) 默认「立即支付」;
// 无可用支付方式渲染 Zibll 同款 badg 提示(而非禁用按钮/自实现文案)。
assert.doesNotMatch(payVipJs, /cta_label/);
assert.match(payVipJs, /canPurchase \? "立即支付"/);
assert.match(payVipJs, /badg px12 c-yellow-2/, "暂时无法支付,请与客服联系");
// 渠道展示名对齐参考主题 zibpay_get_payment_method_args(余额/微信/支付宝)。
assert.match(aksrtPay, /'balance'\s+=> __\('余额', 'aksrt'\)/);
assert.match(aksrtPay, /'wechatpay'\s+=> __\('微信', 'aksrt'\)/);
// 显隐:通用 data-controller(==/!=)匹配 + 卡密选中隐藏套餐。
assert.match(payVipJs, /function applyVipMethodVisibility\(/);
assert.match(payVipJs, /querySelectorAll\('\[data-controller="payment_method"\]'\)/);