perf(modal): unify cancellable frontend modal flows

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-05 02:04:55 +08:00
co-authored by Claude Fable 5
parent 25ce1d8f43
commit 5375ad6429
36 changed files with 2623 additions and 1806 deletions
+124 -262
View File
@@ -1,6 +1,6 @@
<?php
/**
* VIP modal + card HTML (zibll pay-vip modal / vip-card parity).
* VIP modal view model + card HTML (zibll pay-vip modal / vip-card parity).
*
* @package AKSRT
*/
@@ -12,32 +12,133 @@ defined('ABSPATH') || exit;
trait VipServiceModal {
/**
* Build pay / renew / upgrade modal HTML for a user.
* Build the minimal JSON view model consumed by pay-vip.js.
*
* The catalog, member state, package prices, payment methods, and allowed
* actions are all calculated server-side. No payment gateway response or
* server-rendered modal HTML is included in this payload.
*
* @return array<string,mixed>
*/
public function render_modal_html(int $user_id, int $prefer_level = 1): string {
if ($user_id <= 0) {
return '<div class="box-body payvip-modal text-center padding-20">'
. esc_html__('请先登录后再开通会员。', 'aksrt')
. '</div>';
}
$vip = class_exists('\AKSRT\Settings\Settings')
? \AKSRT\Settings\Settings::get_payment_vip_settings()
: ['enabled' => false];
if (empty($vip['enabled'])) {
return '<div class="box-body payvip-modal text-center padding-20">'
. esc_html__('会员功能未启用。', 'aksrt')
. '</div>';
}
public function get_modal_view_model(int $user_id, int $prefer_level = 1): array {
$catalog = $this->get_catalog($user_id);
$user_level = (int) ($catalog['user_level'] ?? 0);
$vip = $this->get_vip_settings_context();
$member = $this->get_vip_member_context($user_id);
$levels = is_array($vip['levels'] ?? null) ? $vip['levels'] : [];
$prefer_level = max(1, min(2, $prefer_level));
if ($user_level > 0) {
return $this->render_modal_viped($user_id, $catalog, $vip, $prefer_level);
$level_view = [];
foreach ([1, 2] as $level) {
if (empty($levels[$level]['enabled'])) {
continue;
}
$equity = (string) ($levels[$level]['equity'] ?? '');
$equity = function_exists('aksrt_format_vip_equity_html')
? (string) aksrt_format_vip_equity_html($equity)
: wp_kses_post($equity);
$level_view[] = [
'level' => $level,
'name' => (string) ($levels[$level]['name'] ?? ('VIP' . $level)),
'desc' => (string) ($levels[$level]['desc'] ?? ''),
'equity' => $equity,
];
}
return $this->render_modal_pay($user_id, $catalog, $vip, $prefer_level);
$package_ids = [];
$has_renew = false;
$has_upgrade = false;
$groups = is_array($catalog['level_packages'] ?? null) ? $catalog['level_packages'] : [];
foreach ($groups as $group) {
if (!is_array($group)) {
continue;
}
$action = sanitize_key((string) ($group['action'] ?? 'pay'));
$has_renew = $has_renew || $action === 'renew';
$has_upgrade = $has_upgrade || $action === 'upgrade';
foreach ((array) ($group['items'] ?? []) as $item) {
if (is_array($item) && (int) ($item['package_id'] ?? 0) > 0) {
$package_ids[] = (int) $item['package_id'];
}
}
}
$points_exchange = is_array($catalog['points_exchange'] ?? null) ? $catalog['points_exchange'] : [];
$methods = is_array($catalog['payment_methods'] ?? null) ? $catalog['payment_methods'] : [];
$no_payment_method = $methods === [];
$action_reasons = [
'purchase' => $no_payment_method
? 'no_payment_method'
: ($package_ids === [] ? 'no_package' : ''),
'renew' => $no_payment_method
? 'no_payment_method'
: ($has_renew ? '' : 'not_available'),
'upgrade' => $no_payment_method
? 'no_payment_method'
: ($has_upgrade ? '' : 'not_available'),
'points_exchange' => !empty($points_exchange['enabled']) && !empty($points_exchange['packages'])
? ''
: 'not_available',
];
$member_state = (string) ($member['state'] ?? 'unopened');
$member_version = substr(hash('sha256', (string) wp_json_encode([
'level' => (int) ($member['level'] ?? 0),
'expires' => (int) ($member['expires'] ?? 0),
'state' => $member_state,
])), 0, 16);
$catalog_version = substr(hash('sha256', (string) wp_json_encode([
'packages' => $groups,
'points' => $points_exchange,
'methods' => $methods,
'levels' => $level_view,
])), 0, 16);
$user = get_userdata($user_id);
$avatar_url = function_exists('get_avatar_url')
? (string) get_avatar_url($user_id, ['size' => 42])
: '';
return [
'enabled' => !empty($catalog['enabled']),
'prefer_level' => $prefer_level,
'catalog' => [
'desc' => (string) ($catalog['desc'] ?? ''),
'help_text' => (string) ($catalog['help_text'] ?? ''),
'more' => (string) ($vip['more'] ?? ''),
'currency_name' => (string) ($catalog['currency_name'] ?? ''),
'level_packages' => $groups,
'points_exchange' => $points_exchange,
'vip_url' => (string) ($catalog['vip_url'] ?? ''),
],
'member' => [
'id' => $user_id,
'name' => $user ? (string) $user->display_name : '',
'avatar_url' => $avatar_url,
'level' => (int) ($member['level'] ?? 0),
'expires' => (int) ($member['expires'] ?? 0),
'expires_label' => (string) ($member['expires_label'] ?? ''),
'state' => (string) ($member['state'] ?? 'unopened'),
'is_permanent' => !empty($member['is_permanent']),
'points' => (int) ($catalog['user_points'] ?? 0),
'logged_in' => $user_id > 0,
],
'levels' => $level_view,
'payment_methods' => $methods,
'allowed_actions' => [
'purchase' => $package_ids !== [] && $methods !== [],
'renew' => $has_renew && $methods !== [],
'upgrade' => $has_upgrade && $methods !== [],
'points_exchange' => !empty($points_exchange['enabled']) && !empty($points_exchange['packages']),
],
'action_reasons' => $action_reasons,
'version' => [
'schema' => 1,
'member' => $member_version,
'catalog' => $catalog_version,
// Stable revision token; do not use request time and bust short cache.
'updated_at' => $member_version . ':' . $catalog_version,
'tags' => ['vip', 'orders'],
],
];
}
/**
@@ -45,9 +146,7 @@ trait VipServiceModal {
*/
public function render_vip_card(int $level, int $user_id = 0): string {
$level = max(1, min(2, $level));
$vip = class_exists('\AKSRT\Settings\Settings')
? \AKSRT\Settings\Settings::get_payment_vip_settings()
: [];
$vip = $this->get_vip_settings_context();
$levels = is_array($vip['levels'] ?? null) ? $vip['levels'] : [];
if (empty($levels[$level]['enabled'])) {
return '';
@@ -78,241 +177,4 @@ trait VipServiceModal {
$html .= '</div></div>';
return $html;
}
private function render_modal_pay(int $user_id, array $catalog, array $vip, int $prefer_level): string {
$user = get_userdata($user_id);
$name = $user ? $user->display_name : '';
$avatar = get_avatar($user_id, 42);
$desc = (string) ($vip['desc'] ?? $catalog['desc'] ?? '');
$more = (string) ($vip['more'] ?? '');
$groups = is_array($catalog['level_packages'] ?? null) ? $catalog['level_packages'] : [];
$methods = is_array($catalog['payment_methods'] ?? null) ? $catalog['payment_methods'] : [];
$levels = is_array($vip['levels'] ?? null) ? $vip['levels'] : [];
$active_lv = !empty($levels[$prefer_level]['enabled']) ? $prefer_level : 0;
if ($active_lv <= 0) {
foreach ([1, 2] as $lv) {
if (!empty($levels[$lv]['enabled'])) {
$active_lv = $lv;
break;
}
}
}
$tabs = '';
$panes = '';
foreach ([1, 2] as $lv) {
if (empty($levels[$lv]['enabled'])) {
continue;
}
$is_active = ($lv === $active_lv);
$lv_name = (string) ($levels[$lv]['name'] ?? ('VIP' . $lv));
$tabs .= '<li class="relative' . ($is_active ? ' active' : '') . '">'
. '<a class="aksrt-vip-tab" href="javascript:;" data-vip-tab="tab-payvip-' . $lv . '">'
. esc_html($lv_name)
. '</a></li>';
$group_items = [];
foreach ($groups as $g) {
if ((int) ($g['level'] ?? 0) === $lv) {
$group_items = is_array($g['items'] ?? null) ? $g['items'] : [];
break;
}
}
$products = $this->render_product_radios($group_items);
$equity = (string) ($levels[$lv]['equity'] ?? '');
$lv_desc = (string) ($levels[$lv]['desc'] ?? '');
$panes .= '<div class="tab-pane aksrt-vip-pane' . ($is_active ? ' active' : '') . '" id="tab-payvip-' . $lv . '"' . ($is_active ? '' : ' hidden') . '>';
$panes .= '<div class="pay-vip-form-row">';
$panes .= '<div class="pay-vip-info level-' . $lv . '">';
$panes .= '<div class="v-name font-bold">' . esc_html($lv_name) . '</div>';
if ($lv_desc !== '') {
$panes .= '<div class="muted-2-color em09 mb6">' . esc_html($lv_desc) . '</div>';
}
if ($equity !== '') {
$panes .= function_exists('aksrt_format_vip_equity_html')
? aksrt_format_vip_equity_html($equity)
: '<div class="v-equity">' . wp_kses_post($equity) . '</div>';
}
$panes .= '</div><div class="pay-vip-products">';
$panes .= $products;
$panes .= $this->render_pay_methods($methods);
$panes .= '<button type="button" class="but jb-red btn-block padding-lg radius aksrt-vip-submit" data-vip-submit>'
. esc_html__('立即开通', 'aksrt') . '</button>';
$panes .= '<p class="aksrt-vip-modal-tip muted-2-color em09 mt10" data-aksrt-vip-tip></p>';
$panes .= '</div></div></div>';
}
$points = '';
if (!empty($catalog['points_exchange']['enabled']) && !empty($catalog['points_exchange']['packages'])) {
$points = '<div class="mt10"><a class="but c-green btn-block" href="'
. esc_url(function_exists('aksrt_get_user_center_url') ? aksrt_get_user_center_url('vip') : '#')
. '">' . esc_html__('积分兑换会员', 'aksrt') . '</a></div>';
}
$html = '<div class="box-body payvip-modal" data-aksrt-vip-modal>';
$html .= '<button type="button" class="aksrt-modal-close" data-aksrt-modal-close aria-label="Close">&times;</button>';
$html .= '<ul class="list-inline user-box flex ac mb10"><li class="avatar-img">' . $avatar . '</li>';
$html .= '<li><b class="em12">' . esc_html($name) . '</b>';
if ($desc !== '') {
$html .= '<div class="muted-2-color em09">' . esc_html($desc) . '</div>';
}
$html .= '</li></ul>';
$html .= '<ul class="flex jsb mt10 mb20 vip-cardminis gutters-5 nav">' . $tabs . '</ul>';
$html .= '<div class="tab-content mt10">' . $panes . '</div>';
if ($more !== '') {
$html .= '<div class="muted-2-color mb10 em09 muted-box padding-10 mini-radius">' . $more . '</div>';
}
$html .= $points;
$html .= '</div>';
return $html;
}
/**
* @param array<string,mixed> $catalog
* @param array<string,mixed> $vip
*/
private function render_modal_viped(int $user_id, array $catalog, array $vip, int $prefer_level): string {
$user = get_userdata($user_id);
$name = $user ? $user->display_name : '';
$avatar = get_avatar($user_id, 42);
$exp_label = (string) ($catalog['user_expires_label'] ?? '');
$groups = is_array($catalog['level_packages'] ?? null) ? $catalog['level_packages'] : [];
$methods = is_array($catalog['payment_methods'] ?? null) ? $catalog['payment_methods'] : [];
$levels = is_array($vip['levels'] ?? null) ? $vip['levels'] : [];
$more = (string) ($vip['more'] ?? '');
$tabs = '';
$panes = '';
$active_set = false;
foreach ($groups as $g) {
$lv = (int) ($g['level'] ?? 0);
$action = (string) ($g['action'] ?? 'renew');
$items = is_array($g['items'] ?? null) ? $g['items'] : [];
if ($lv <= 0 || $items === []) {
continue;
}
$is_active = !$active_set;
if ($is_active) {
$active_set = true;
}
$lv_name = (string) ($g['name'] ?? ($levels[$lv]['name'] ?? ('VIP' . $lv)));
$badge = $action === 'upgrade' ? __('升级', 'aksrt') : __('续费', 'aksrt');
$tab_id = 'tab-payvip-' . $lv . '-' . $action;
$tabs .= '<li class="relative' . ($is_active ? ' active' : '') . '">'
. '<a class="aksrt-vip-tab" href="javascript:;" data-vip-tab="' . esc_attr($tab_id) . '">'
. esc_html($badge . $lv_name)
. '</a></li>';
$products = $this->render_product_radios($items);
$equity = (string) ($levels[$lv]['equity'] ?? '');
$panes .= '<div class="tab-pane aksrt-vip-pane' . ($is_active ? ' active' : '') . '" id="' . esc_attr($tab_id) . '"' . ($is_active ? '' : ' hidden') . '>';
$panes .= '<div class="pay-vip-form-row">';
$panes .= '<div class="pay-vip-info level-' . $lv . '">';
$panes .= '<div class="v-name font-bold">' . esc_html($lv_name) . '</div>';
if ($equity !== '') {
$panes .= function_exists('aksrt_format_vip_equity_html')
? aksrt_format_vip_equity_html($equity)
: '<div class="v-equity">' . wp_kses_post($equity) . '</div>';
}
$panes .= '</div><div class="pay-vip-products">';
$panes .= $products;
$panes .= $this->render_pay_methods($methods);
$cta = $action === 'upgrade' ? __('立即升级', 'aksrt') : __('立即续费', 'aksrt');
$panes .= '<button type="button" class="but jb-red btn-block padding-lg radius aksrt-vip-submit" data-vip-submit>'
. esc_html($cta) . '</button>';
$panes .= '<p class="aksrt-vip-modal-tip muted-2-color em09 mt10" data-aksrt-vip-tip></p>';
$panes .= '</div></div></div>';
}
if ($tabs === '') {
return '<div class="box-body payvip-modal text-center padding-20">'
. esc_html__('当前没有可续费或升级的套餐。', 'aksrt')
. '</div>';
}
$html = '<div class="box-body payvip-modal" data-aksrt-vip-modal>';
$html .= '<button type="button" class="aksrt-modal-close" data-aksrt-modal-close aria-label="Close">&times;</button>';
$html .= '<ul class="list-inline user-box flex ac mb10"><li class="avatar-img">' . $avatar . '</li>';
$html .= '<li><b class="em12">' . esc_html($name) . '</b>';
$html .= '<div class="muted-2-color em09"><span class="badg c-yellow vip-expdate-tag">'
. esc_html($exp_label) . '</span></div></li></ul>';
$html .= '<ul class="flex jsb mt10 mb20 vip-cardminis gutters-5 nav">' . $tabs . '</ul>';
$html .= '<div class="tab-content mt10">' . $panes . '</div>';
if ($more !== '') {
$html .= '<div class="muted-2-color mb10 em09 muted-box padding-10 mini-radius">' . $more . '</div>';
}
$html .= '</div>';
return $html;
}
/**
* @param array<int,array<string,mixed>> $items
*/
private function render_product_radios(array $items): string {
if ($items === []) {
return '<div class="muted-2-color text-center padding-10">'
. esc_html__('暂无可用套餐', 'aksrt') . '</div>';
}
$html = '<div class="mb10 label-box charge-box aksrt-vip-products">';
$i = 0;
foreach ($items as $item) {
$pid = (int) ($item['package_id'] ?? 0);
if ($pid <= 0) {
continue;
}
$i++;
$price = (string) ($item['price_label'] ?? '');
$show = (string) ($item['show_price_label'] ?? '');
$tag = (string) ($item['discount_tag'] ?? '');
$time = (string) ($item['days_label'] ?? '');
$title = (string) ($item['title'] ?? '');
$checked = $i === 1 ? ' checked' : '';
$html .= '<label class="aksrt-vip-product-label">';
$html .= '<input class="hide vip-product-input" type="radio" name="vip_product_id" value="'
. esc_attr((string) $pid) . '"' . $checked . '>';
$html .= '<div class="zib-widget vip-product relative text-center product-box">';
if ($tag !== '') {
$html .= '<div class="abs-right vip-tag badg jb-yellow">' . esc_html($tag) . '</div>';
}
if ($title !== '') {
$html .= '<div class="em09 mb3">' . esc_html($title) . '</div>';
}
$html .= '<div class="flex abl gap6 jc"><div class="product-price c-red">' . esc_html($price) . '</div>';
if ($show !== '') {
$html .= '<div class="original-price relative muted-2-color"><s>' . esc_html($show) . '</s></div>';
}
$html .= '</div>';
if ($time !== '') {
$html .= '<div class="muted-2-color c-blue em09 p2-10 badg radius">' . esc_html($time) . '</div>';
}
$html .= '</div></label>';
}
$html .= '</div>';
return $html;
}
/**
* @param array<int,array{id?:string,name?:string}> $methods
*/
private function render_pay_methods(array $methods): string {
if ($methods === []) {
return '<input type="hidden" name="aksrt_vip_pay_method" value="balance" data-aksrt-vip-method-fixed>';
}
if (count($methods) === 1) {
$id = (string) ($methods[0]['id'] ?? 'balance');
return '<input type="hidden" name="aksrt_vip_pay_method" value="' . esc_attr($id) . '" data-aksrt-vip-method-fixed>';
}
$html = '<div class="uc-vip-shop__methods mb10" data-aksrt-vip-methods>';
$html .= '<span class="uc-vip-shop__methods-label">' . esc_html__('支付方式', 'aksrt') . '</span>';
foreach ($methods as $i => $m) {
$mid = (string) ($m['id'] ?? '');
$mname = (string) ($m['name'] ?? $mid);
$html .= '<label class="uc-vip-shop__method"><input type="radio" name="aksrt_vip_pay_method" value="'
. esc_attr($mid) . '"' . ($i === 0 ? ' checked' : '') . '> <span>'
. esc_html($mname) . '</span></label>';
}
$html .= '</div>';
return $html;
}
}