迁移买单活动管理弹层脚本

2026-04-25 04:05:32 +08:00
parent 4df557bb9e
commit 247283a282
3 changed files with 321 additions and 134 deletions
@@ -11,6 +11,14 @@ export { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
 export { bindToolbarControls } from "./chat-room/toolbar.js";
 export { bindWelcomeMenuControls } from "./chat-room/welcome-menu.js";
 export { bindAdminMenuControls } from "./chat-room/admin-menu.js";
+export {
+    bindBaccaratLossCoverAdminControls,
+    closeAdminBaccaratLossCoverModal,
+    closeCurrentBaccaratLossCoverEvent,
+    loadAdminCurrentLossCoverEvent,
+    openAdminBaccaratLossCoverModal,
+    submitBaccaratLossCoverEvent,
+} from "./chat-room/baccarat-loss-cover-admin.js";
 export { bindFishingControls } from "./chat-room/fishing.js";
 export {
    BLOCKABLE_SYSTEM_SENDERS,
@@ -47,6 +55,14 @@ import { bindMobileDrawerControls } from "./chat-room/mobile-drawer.js";
 import { bindToolbarControls } from "./chat-room/toolbar.js";
 import { bindWelcomeMenuControls } from "./chat-room/welcome-menu.js";
 import { bindAdminMenuControls } from "./chat-room/admin-menu.js";
+import {
+    bindBaccaratLossCoverAdminControls,
+    closeAdminBaccaratLossCoverModal,
+    closeCurrentBaccaratLossCoverEvent,
+    loadAdminCurrentLossCoverEvent,
+    openAdminBaccaratLossCoverModal,
+    submitBaccaratLossCoverEvent,
+} from "./chat-room/baccarat-loss-cover-admin.js";
 import { bindFishingControls } from "./chat-room/fishing.js";
 import {
    BLOCKABLE_SYSTEM_SENDERS,
@@ -91,6 +107,12 @@ if (typeof window !== "undefined") {
        bindToolbarControls,
        bindWelcomeMenuControls,
        bindAdminMenuControls,
+        bindBaccaratLossCoverAdminControls,
+        closeAdminBaccaratLossCoverModal,
+        closeCurrentBaccaratLossCoverEvent,
+        loadAdminCurrentLossCoverEvent,
+        openAdminBaccaratLossCoverModal,
+        submitBaccaratLossCoverEvent,
        bindFishingControls,
        CHAT_FONT_SIZE_STORAGE_KEY,
        restoreChatFontSize,
@@ -125,6 +147,10 @@ if (typeof window !== "undefined") {
    window.closeFriendPanel = closeFriendPanel;
    window.friendSearch = friendSearch;
    window.openFriendPanel = openFriendPanel;
+    window.closeAdminBaccaratLossCoverModal = closeAdminBaccaratLossCoverModal;
+    window.closeCurrentBaccaratLossCoverEvent = closeCurrentBaccaratLossCoverEvent;
+    window.openAdminBaccaratLossCoverModal = openAdminBaccaratLossCoverModal;
+    window.submitBaccaratLossCoverEvent = submitBaccaratLossCoverEvent;
    window.applyFontSize = applyFontSize;

    // 页面加载后立即注册事件委托，具体业务逻辑仍由各子模块负责。
@@ -134,6 +160,7 @@ if (typeof window !== "undefined") {
    bindFriendPanelControls();
    bindToolbarControls();
    bindAdminMenuControls();
+    bindBaccaratLossCoverAdminControls();
    bindFishingControls();
    bindChatRightPanelControls();
    bindMobileDrawerControls();
@@ -0,0 +1,288 @@
+// 百乐加强买单活动管理弹层，替代 input-bar 中的内联管理脚本。
+
+import { escapeHtml } from "./html.js";
+
+let baccaratLossCoverAdminEventsBound = false;
+
+/**
+ * 获取买单活动管理弹层元素。
+ *
+ * @returns {HTMLElement|null}
+ */
+function getModal() {
+    return document.getElementById("baccarat-loss-cover-admin-modal");
+}
+
+/**
+ * 获取 CSRF Token。
+ *
+ * @returns {string}
+ */
+function csrf() {
+    return document.querySelector('meta[name="csrf-token"]')?.content || "";
+}
+
+/**
+ * 将日期格式化为 datetime-local 输入框需要的值。
+ *
+ * @param {Date} date 日期对象
+ * @returns {string}
+ */
+function formatDateInput(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hour = String(date.getHours()).padStart(2, "0");
+    const minute = String(date.getMinutes()).padStart(2, "0");
+
+    return `${year}-${month}-${day}T${hour}:${minute}`;
+}
+
+/**
+ * 读取弹层 data 属性中由 Blade 注入的接口 URL。
+ *
+ * @returns {{summaryUrl:string,storeUrl:string,closeUrlTemplate:string}|null}
+ */
+function resolveAdminUrls() {
+    const modal = getModal();
+    if (!modal) {
+        return null;
+    }
+
+    return {
+        summaryUrl: modal.dataset.blcSummaryUrl || "",
+        storeUrl: modal.dataset.blcStoreUrl || "",
+        closeUrlTemplate: modal.dataset.blcCloseUrlTemplate || "",
+    };
+}
+
+/**
+ * 生成关闭活动接口地址。
+ *
+ * @param {number|string} eventId 活动 ID
+ * @returns {string}
+ */
+function resolveCloseUrl(eventId) {
+    const urls = resolveAdminUrls();
+
+    return urls?.closeUrlTemplate.replace("__EVENT__", encodeURIComponent(String(eventId))) || "";
+}
+
+/**
+ * 安全格式化服务端日期。
+ *
+ * @param {string|null|undefined} value 日期字符串
+ * @returns {string}
+ */
+function formatServerDate(value) {
+    const date = value ? new Date(value) : null;
+
+    return date && !Number.isNaN(date.getTime()) ? date.toLocaleString("zh-CN") : "";
+}
+
+/**
+ * 加载并渲染当前买单活动状态。
+ *
+ * @returns {Promise<void>}
+ */
+export async function loadAdminCurrentLossCoverEvent() {
+    const box = document.getElementById("blc-admin-current");
+    const urls = resolveAdminUrls();
+    if (!box || !urls?.summaryUrl) {
+        return;
+    }
+
+    box.innerHTML = "正在加载当前活动…";
+
+    try {
+        const response = await fetch(urls.summaryUrl, {
+            headers: {
+                Accept: "application/json",
+            },
+        });
+        const data = await response.json();
+        const event = data.event;
+
+        if (!event) {
+            box.innerHTML = '<div style="font-size:12px; color:#4b5563;">当前没有进行中、待开始或待领取的买单活动。</div>';
+            return;
+        }
+
+        const canClose = ["scheduled", "active", "settlement_pending"].includes(event.status);
+        const closeButton = canClose
+            ? `<button type="button" data-blc-close-current="${Number(event.id)}" style="margin-top:10px; padding:7px 14px; border:none; border-radius:999px; background:#dc2626; color:#fff; font-size:12px; font-weight:bold; cursor:pointer;">立即结束</button>`
+            : "";
+
+        // 服务端字段进入 innerHTML 前统一转义，避免活动标题或开启人污染 DOM。
+        box.innerHTML = `
+            <div style="display:flex; justify-content:space-between; gap:10px; align-items:flex-start;">
+                <div style="flex:1;">
+                    <div style="font-size:15px; font-weight:bold; color:#166534;">${escapeHtml(String(event.title || ""))}</div>
+                    <div style="font-size:12px; color:#4b5563; margin-top:4px;">开启人：${escapeHtml(String(event.creator_username || ""))}</div>
+                </div>
+                <span style="padding:4px 10px; border-radius:999px; background:#dcfce7; color:#166534; font-size:12px; font-weight:bold;">${escapeHtml(String(event.status_label || ""))}</span>
+            </div>
+            <div style="margin-top:10px; font-size:12px; color:#4b5563; line-height:1.7;">
+                活动时间：${escapeHtml(formatServerDate(event.starts_at))} - ${escapeHtml(formatServerDate(event.ends_at))}<br>
+                最终已发补偿：${Number(event.total_claimed_amount || 0).toLocaleString()} 金币
+            </div>
+            ${closeButton}
+        `;
+    } catch (error) {
+        box.innerHTML = '<div style="font-size:12px; color:#dc2626;">当前活动加载失败，请稍后再试。</div>';
+    }
+}
+
+/**
+ * 打开管理弹层，并填入默认活动时间。
+ *
+ * @returns {Promise<void>}
+ */
+export async function openAdminBaccaratLossCoverModal() {
+    const modal = getModal();
+    if (!modal) {
+        return;
+    }
+
+    const now = new Date();
+    const end = new Date(now.getTime() + 30 * 60 * 1000);
+    const claimDeadline = new Date(end.getTime() + 24 * 60 * 60 * 1000);
+
+    document.getElementById("blc-admin-starts-at").value = formatDateInput(now);
+    document.getElementById("blc-admin-ends-at").value = formatDateInput(end);
+    document.getElementById("blc-admin-claim-deadline-at").value = formatDateInput(claimDeadline);
+    modal.style.display = "flex";
+
+    await loadAdminCurrentLossCoverEvent();
+}
+
+/**
+ * 关闭管理弹层。
+ *
+ * @returns {void}
+ */
+export function closeAdminBaccaratLossCoverModal() {
+    const modal = getModal();
+    if (modal) {
+        modal.style.display = "none";
+    }
+}
+
+/**
+ * 提交创建买单活动请求。
+ *
+ * @param {Event} event 表单提交事件
+ * @returns {Promise<void>}
+ */
+export async function submitBaccaratLossCoverEvent(event) {
+    event.preventDefault();
+
+    const urls = resolveAdminUrls();
+    if (!urls?.storeUrl) {
+        return;
+    }
+
+    const payload = {
+        title: document.getElementById("blc-admin-title")?.value || "",
+        description: document.getElementById("blc-admin-description")?.value || "",
+        starts_at: document.getElementById("blc-admin-starts-at")?.value || "",
+        ends_at: document.getElementById("blc-admin-ends-at")?.value || "",
+        claim_deadline_at: document.getElementById("blc-admin-claim-deadline-at")?.value || "",
+    };
+
+    try {
+        const response = await fetch(urls.storeUrl, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+                "X-CSRF-TOKEN": csrf(),
+            },
+            body: JSON.stringify(payload),
+        });
+        const data = await response.json();
+
+        if (data.ok) {
+            await window.chatDialog?.alert(data.message || "活动创建成功", "系统通知", "#16a34a");
+            await loadAdminCurrentLossCoverEvent();
+            return;
+        }
+
+        await window.chatDialog?.alert(data.message || "活动创建失败", "提示", "#f59e0b");
+    } catch (error) {
+        await window.chatDialog?.alert("活动创建失败，请稍后重试。", "提示", "#dc2626");
+    }
+}
+
+/**
+ * 关闭当前买单活动。
+ *
+ * @param {number|string} eventId 活动 ID
+ * @returns {Promise<void>}
+ */
+export async function closeCurrentBaccaratLossCoverEvent(eventId) {
+    const closeUrl = resolveCloseUrl(eventId);
+    if (!closeUrl) {
+        return;
+    }
+
+    try {
+        const response = await fetch(closeUrl, {
+            method: "POST",
+            headers: {
+                Accept: "application/json",
+                "X-CSRF-TOKEN": csrf(),
+            },
+        });
+        const data = await response.json();
+        await window.chatDialog?.alert(data.message || "活动状态已更新", "系统通知", "#16a34a");
+        await loadAdminCurrentLossCoverEvent();
+    } catch (error) {
+        await window.chatDialog?.alert("活动关闭失败，请稍后重试。", "提示", "#dc2626");
+    }
+}
+
+/**
+ * 绑定买单活动管理弹层事件。
+ *
+ * @returns {void}
+ */
+export function bindBaccaratLossCoverAdminControls() {
+    if (baccaratLossCoverAdminEventsBound || typeof document === "undefined") {
+        return;
+    }
+
+    baccaratLossCoverAdminEventsBound = true;
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+
+        if (event.target.closest("[data-blc-admin-close]")) {
+            event.preventDefault();
+            closeAdminBaccaratLossCoverModal();
+            return;
+        }
+
+        const closeCurrentButton = event.target.closest("[data-blc-close-current]");
+        if (closeCurrentButton) {
+            event.preventDefault();
+            void closeCurrentBaccaratLossCoverEvent(closeCurrentButton.getAttribute("data-blc-close-current") || "");
+            return;
+        }
+
+        const modal = event.target.closest("#baccarat-loss-cover-admin-modal");
+        // 遮罩点击关闭只响应背景层，避免误关内容区。
+        if (modal && event.target === modal) {
+            closeAdminBaccaratLossCoverModal();
+        }
+    });
+
+    document.addEventListener("submit", (event) => {
+        if (!(event.target instanceof HTMLFormElement) || !event.target.matches("[data-blc-admin-form]")) {
+            return;
+        }
+
+        void submitBaccaratLossCoverEvent(event);
+    });
+}
@@ -327,6 +327,9 @@ $welcomeMessages = [

@if ($canManageLossCover)
    <div id="baccarat-loss-cover-admin-modal"
+        data-blc-summary-url="{{ route('baccarat-loss-cover.summary') }}"
+        data-blc-store-url="{{ route('command.baccarat_loss_cover.store') }}"
+        data-blc-close-url-template="{{ route('command.baccarat_loss_cover.close', ['event' => '__EVENT__']) }}"
        style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:10010; justify-content:center; align-items:center;">
        <div
            style="width:560px; max-width:96vw; max-height:88vh; overflow:hidden; border-radius:8px; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,.3); display:flex; flex-direction:column;">
@@ -336,7 +339,7 @@ $welcomeMessages = [
                    <div style="font-size:14px; font-weight:bold;">🎁 买单活动设置</div>
                    <div style="font-size:11px; color:rgba(255,255,255,.85); margin-top:2px;">创建百家乐“你玩游戏我买单”活动，并查看当前状态</div>
                </div>
-                <span onclick="closeAdminBaccaratLossCoverModal()"
+                <span data-blc-admin-close
                    style="cursor:pointer; font-size:18px; opacity:.85;">&times;</span>
            </div>

@@ -346,7 +349,7 @@ $welcomeMessages = [
                    正在加载当前活动…
                </div>

-                <form id="baccarat-loss-cover-admin-form" onsubmit="submitBaccaratLossCoverEvent(event)"
+                <form id="baccarat-loss-cover-admin-form" data-blc-admin-form
                    style="background:#fff; border:1px solid #dcfce7; border-radius:10px; padding:14px;">
                    <div style="font-size:13px; font-weight:bold; color:#166534; margin-bottom:12px;">新建活动</div>

@@ -381,7 +384,7 @@ $welcomeMessages = [
                    </div>

                    <div style="display:flex; gap:8px; justify-content:flex-end; margin-top:14px;">
-                        <button type="button" onclick="closeAdminBaccaratLossCoverModal()"
+                        <button type="button" data-blc-admin-close
                            style="padding:8px 16px; border:none; border-radius:8px; background:#dcfce7; color:#166534; font-size:12px; font-weight:bold; cursor:pointer;">
                            关闭
                        </button>
@@ -394,135 +397,4 @@ $welcomeMessages = [
            </div>
        </div>
    </div>
-
-    <script>
-        (function() {
-            const SUMMARY_URL = '{{ route('baccarat-loss-cover.summary') }}';
-            const STORE_URL = '{{ route('command.baccarat_loss_cover.store') }}';
-
-            function formatDateInput(date) {
-                const year = date.getFullYear();
-                const month = String(date.getMonth() + 1).padStart(2, '0');
-                const day = String(date.getDate()).padStart(2, '0');
-                const hour = String(date.getHours()).padStart(2, '0');
-                const minute = String(date.getMinutes()).padStart(2, '0');
-                return `${year}-${month}-${day}T${hour}:${minute}`;
-            }
-
-            async function loadAdminCurrentLossCoverEvent() {
-                const box = document.getElementById('blc-admin-current');
-                box.innerHTML = '正在加载当前活动…';
-
-                try {
-                    const response = await fetch(SUMMARY_URL, {
-                        headers: {
-                            'Accept': 'application/json'
-                        }
-                    });
-                    const data = await response.json();
-                    const event = data.event;
-
-                    if (!event) {
-                        box.innerHTML = '<div style="font-size:12px; color:#4b5563;">当前没有进行中、待开始或待领取的买单活动。</div>';
-                        return;
-                    }
-
-                    const closeButton = ['scheduled', 'active', 'settlement_pending'].includes(event.status) ?
-                        `<button type="button" onclick="closeCurrentBaccaratLossCoverEvent(${event.id})" style="margin-top:10px; padding:7px 14px; border:none; border-radius:999px; background:#dc2626; color:#fff; font-size:12px; font-weight:bold; cursor:pointer;">立即结束</button>` :
-                        '';
-
-                    box.innerHTML = `
-                        <div style="display:flex; justify-content:space-between; gap:10px; align-items:flex-start;">
-                            <div style="flex:1;">
-                                <div style="font-size:15px; font-weight:bold; color:#166534;">${event.title}</div>
-                                <div style="font-size:12px; color:#4b5563; margin-top:4px;">开启人：${event.creator_username}</div>
-                            </div>
-                            <span style="padding:4px 10px; border-radius:999px; background:#dcfce7; color:#166534; font-size:12px; font-weight:bold;">${event.status_label}</span>
-                        </div>
-                        <div style="margin-top:10px; font-size:12px; color:#4b5563; line-height:1.7;">
-                            活动时间：${new Date(event.starts_at).toLocaleString('zh-CN')} - ${new Date(event.ends_at).toLocaleString('zh-CN')}<br>
-                            最终已发补偿：${Number(event.total_claimed_amount || 0).toLocaleString()} 金币
-                        </div>
-                        ${closeButton}
-                    `;
-                } catch (error) {
-                    box.innerHTML = '<div style="font-size:12px; color:#dc2626;">当前活动加载失败，请稍后再试。</div>';
-                }
-            }
-
-            window.openAdminBaccaratLossCoverModal = async function() {
-                const now = new Date();
-                const end = new Date(now.getTime() + 30 * 60 * 1000);
-                const claimDeadline = new Date(end.getTime() + 24 * 60 * 60 * 1000);
-
-                document.getElementById('blc-admin-starts-at').value = formatDateInput(now);
-                document.getElementById('blc-admin-ends-at').value = formatDateInput(end);
-                document.getElementById('blc-admin-claim-deadline-at').value = formatDateInput(claimDeadline);
-                document.getElementById('baccarat-loss-cover-admin-modal').style.display = 'flex';
-                await loadAdminCurrentLossCoverEvent();
-            };
-
-            window.closeAdminBaccaratLossCoverModal = function() {
-                document.getElementById('baccarat-loss-cover-admin-modal').style.display = 'none';
-            };
-
-            window.submitBaccaratLossCoverEvent = async function(event) {
-                event.preventDefault();
-
-                const payload = {
-                    title: document.getElementById('blc-admin-title').value,
-                    description: document.getElementById('blc-admin-description').value,
-                    starts_at: document.getElementById('blc-admin-starts-at').value,
-                    ends_at: document.getElementById('blc-admin-ends-at').value,
-                    claim_deadline_at: document.getElementById('blc-admin-claim-deadline-at').value,
-                };
-
-                try {
-                    const response = await fetch(STORE_URL, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'Accept': 'application/json',
-                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
-                        },
-                        body: JSON.stringify(payload)
-                    });
-                    const data = await response.json();
-
-                    if (data.ok) {
-                        await window.chatDialog?.alert(data.message || '活动创建成功', '系统通知', '#16a34a');
-                        await loadAdminCurrentLossCoverEvent();
-                        return;
-                    }
-
-                    await window.chatDialog?.alert(data.message || '活动创建失败', '提示', '#f59e0b');
-                } catch (error) {
-                    await window.chatDialog?.alert('活动创建失败，请稍后重试。', '提示', '#dc2626');
-                }
-            };
-
-            window.closeCurrentBaccaratLossCoverEvent = async function(eventId) {
-                try {
-                    const response = await fetch(`/command/baccarat-loss-cover/${eventId}/close`, {
-                        method: 'POST',
-                        headers: {
-                            'Accept': 'application/json',
-                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
-                        }
-                    });
-                    const data = await response.json();
-                    await window.chatDialog?.alert(data.message || '活动状态已更新', '系统通知', '#16a34a');
-                    await loadAdminCurrentLossCoverEvent();
-                } catch (error) {
-                    await window.chatDialog?.alert('活动关闭失败，请稍后重试。', '提示', '#dc2626');
-                }
-            };
-
-            document.getElementById('baccarat-loss-cover-admin-modal').addEventListener('click', function(event) {
-                if (event.target === this) {
-                    closeAdminBaccaratLossCoverModal();
-                }
-            });
-        })();
-    </script>
@endif