迁移会员中心基础按钮事件绑定

resources/js/chat-room.js

@@ -22,6 +22,7 @@ export {
 export { bindFishingControls } from "./chat-room/fishing.js";
 export { bindProfileControls } from "./chat-room/profile-controls.js";
 export { bindShopControls } from "./chat-room/shop-controls.js";
+export { bindVipControls } from "./chat-room/vip-controls.js";
 export {
     BLOCKABLE_SYSTEM_SENDERS,
     BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
@@ -68,6 +69,7 @@ import {
 import { bindFishingControls } from "./chat-room/fishing.js";
 import { bindProfileControls } from "./chat-room/profile-controls.js";
 import { bindShopControls } from "./chat-room/shop-controls.js";
+import { bindVipControls } from "./chat-room/vip-controls.js";
 import {
     BLOCKABLE_SYSTEM_SENDERS,
     BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
@@ -120,6 +122,7 @@ if (typeof window !== "undefined") {
         bindFishingControls,
         bindProfileControls,
         bindShopControls,
+        bindVipControls,
         CHAT_FONT_SIZE_STORAGE_KEY,
         restoreChatFontSize,
         closeChatImageLightbox,
@@ -170,6 +173,7 @@ if (typeof window !== "undefined") {
     bindFishingControls();
     bindProfileControls();
     bindShopControls();
+    bindVipControls();
     bindChatRightPanelControls();
     bindMobileDrawerControls();
     bindWelcomeMenuControls();

resources/js/chat-room/vip-controls.js

@@ -0,0 +1,66 @@
+// 会员中心基础按钮事件绑定，替代 toolbar VIP 区域内联 onclick。
+
+let vipControlEventsBound = false;
+
+/**
+ * 调用会员中心存量全局函数。
+ *
+ * @param {string} functionName 全局函数名
+ * @param {...unknown} args 参数
+ * @returns {void}
+ */
+function callVipGlobal(functionName, ...args) {
+    if (typeof window[functionName] === "function") {
+        window[functionName](...args);
+    }
+}
+
+/**
+ * 绑定会员中心 tab、关闭、购买与个性化保存事件。
+ *
+ * @returns {void}
+ */
+export function bindVipControls() {
+    if (vipControlEventsBound || typeof document === "undefined") {
+        return;
+    }
+
+    vipControlEventsBound = true;
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        const tabButton = event.target.closest("[data-vip-tab]");
+        if (tabButton) {
+            event.preventDefault();
+            callVipGlobal("switchVipTab", tabButton.getAttribute("data-vip-tab") || "");
+            return;
+        }
+
+        if (event.target.closest("[data-vip-modal-close]")) {
+            event.preventDefault();
+            callVipGlobal("closeVipModal");
+            return;
+        }
+
+        const buyButton = event.target.closest("[data-vip-buy-level]");
+        if (buyButton) {
+            event.preventDefault();
+
+            // 购买按钮由 VIP 数据动态渲染，等级和支付渠道从 data 属性读取。
+            const levelId = Number.parseInt(buyButton.getAttribute("data-vip-buy-level") || "", 10);
+            const provider = buyButton.getAttribute("data-vip-buy-provider") || "alipay";
+            if (Number.isInteger(levelId)) {
+                callVipGlobal("buyVip", levelId, provider);
+            }
+
+            return;
+        }
+
+        if (event.target.closest("[data-vip-save-presence]")) {
+            event.preventDefault();
+            callVipGlobal("saveVipPresenceSettings");
+        }
+    });
+}

resources/views/chat/partials/layout/toolbar.blade.php

@@ -1493,11 +1493,11 @@ async function generateWechatBindCode() {
         <div id="vip-modal-header">
             <div style="font-size:16px; font-weight:bold; margin-right:24px;">👑 会员中心</div>
             <div style="display:flex; gap:10px; flex:1;">
-                <button id="vip-tabbtn-center" class="vip-tab-btn active" onclick="switchVipTab('center')">会员中心</button>
+                <button id="vip-tabbtn-center" class="vip-tab-btn active" data-vip-tab="center">会员中心</button>
-                <button id="vip-tabbtn-settings" class="vip-tab-btn" onclick="switchVipTab('settings')" style="display:none;">会员相关设置</button>
+                <button id="vip-tabbtn-settings" class="vip-tab-btn" data-vip-tab="settings" style="display:none;">会员相关设置</button>
-                <button id="vip-tabbtn-logs" class="vip-tab-btn" onclick="switchVipTab('logs')">购买记录</button>
+                <button id="vip-tabbtn-logs" class="vip-tab-btn" data-vip-tab="logs">购买记录</button>
             </div>
-            <span style="cursor:pointer; font-size:24px; opacity:.7; transition:opacity .15s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.7" onclick="closeVipModal()">&times;</span>
+            <span style="cursor:pointer; font-size:24px; opacity:.7; transition:opacity .15s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.7" data-vip-modal-close>&times;</span>
         </div>
 
         {{-- 会员中心面板 --}}
@@ -1589,7 +1589,7 @@ async function generateWechatBindCode() {
                             <label class="vip-setting-label">我的离开语</label>
                             <textarea id="vip-custom-leave" class="vip-setting-input vip-setting-textarea" placeholder="例：{username} 优雅离场..."></textarea>
                         </div>
-                        <button onclick="saveVipPresenceSettings()" class="vip-btn-save" style="width:100%;">保存我的专属设置</button>
+                        <button data-vip-save-presence class="vip-btn-save" style="width:100%;">保存我的专属设置</button>
                     </div>
 
                     <div id="vip-customize-notice" style="display:none; padding:15px; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:10px; font-size:12px; color:#64748b; line-height:1.8;">
@@ -1724,11 +1724,11 @@ async function generateWechatBindCode() {
                                     ${!d.vipPaymentEnabled && !isLower ? '支付暂未开启' : btnText}
                                 </button>`
                                 : `<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
-                                    <button onclick="buyVip(${v.id}, 'alipay')" 
+                                    <button data-vip-buy-level="${v.id}" data-vip-buy-provider="alipay"
                                         style="border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:bold; cursor:pointer; transition:all .2s; background:${btnColor}; color:${btnTextColor};">
                                         支付宝
                                     </button>
-                                    <button onclick="buyVip(${v.id}, 'wechat')" 
+                                    <button data-vip-buy-level="${v.id}" data-vip-buy-provider="wechat"
                                         style="border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:bold; cursor:pointer; transition:all .2s; background:#16a34a; color:#fff;">
                                         微信
                                     </button>