From b622053bc2a5d1df95b448e45cb88275a32f61a1 Mon Sep 17 00:00:00 2001 From: lkddi Date: Sat, 25 Apr 2026 14:56:04 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=81=E7=A7=BB=E5=95=86=E5=BA=97=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/js/chat-room.js | 62 +- resources/js/chat-room/shop-controls.js | 662 +++++++++++++++++- .../chat/partials/layout/toolbar.blade.php | 346 +-------- 3 files changed, 706 insertions(+), 364 deletions(-) diff --git a/resources/js/chat-room.js b/resources/js/chat-room.js index 67a412a..11105ba 100644 --- a/resources/js/chat-room.js +++ b/resources/js/chat-room.js @@ -34,7 +34,7 @@ * - fishing.js：处理钓鱼抛竿、收竿、浮漂和自动钓鱼循环。 * - fortune-panel.js：提供神秘占卜 fortunePanel Alpine 组件。 * - profile-controls.js：处理头像选择、个人资料、密码、邮箱验证码和微信绑定入口。 - * - shop-controls.js：处理商店弹窗的基础按钮事件。 + * - shop-controls.js：处理商店弹窗、商品加载、购买、赠礼和改名卡入口。 * - slot-machine.js：提供老虎机 slotPanel/slotFab Alpine 组件。 * - vip-controls.js：处理 VIP 中心弹窗、会员数据渲染、支付跳转和专属进退场设置。 * - preferences-status.js：处理聊天偏好、屏蔽系统播报和静音状态。 @@ -132,7 +132,22 @@ export { showInlineMsg, unbindWechat, } from "./chat-room/profile-controls.js"; -export { bindShopControls } from "./chat-room/shop-controls.js"; +export { + bindShopControls, + buyItem, + closeGiftDialog, + closeRenameModal, + closeShopModal, + confirmGift, + fetchShopData, + loadShop, + openGiftDialog, + openRenameModal, + openShopModal, + renderShop, + showShopToast, + submitRename, +} from "./chat-room/shop-controls.js"; export { bindSlotMachineControls, slotFab, slotPanel } from "./chat-room/slot-machine.js"; export { bindVipControls, buyVip, closeVipModal, openVipModal, saveVipPresenceSettings, switchVipTab } from "./chat-room/vip-controls.js"; export { @@ -249,7 +264,22 @@ import { showInlineMsg, unbindWechat, } from "./chat-room/profile-controls.js"; -import { bindShopControls } from "./chat-room/shop-controls.js"; +import { + bindShopControls, + buyItem, + closeGiftDialog, + closeRenameModal, + closeShopModal, + confirmGift, + fetchShopData, + loadShop, + openGiftDialog, + openRenameModal, + openShopModal, + renderShop, + showShopToast, + submitRename, +} from "./chat-room/shop-controls.js"; import { bindSlotMachineControls, slotFab, slotPanel } from "./chat-room/slot-machine.js"; import { bindVipControls, buyVip, closeVipModal, openVipModal, saveVipPresenceSettings, switchVipTab } from "./chat-room/vip-controls.js"; import { @@ -390,6 +420,19 @@ if (typeof window !== "undefined") { showInlineMsg, unbindWechat, bindShopControls, + buyItem, + closeGiftDialog, + closeRenameModal, + closeShopModal, + confirmGift, + fetchShopData, + loadShop, + openGiftDialog, + openRenameModal, + openShopModal, + renderShop, + showShopToast, + submitRename, bindSlotMachineControls, slotFab, slotPanel, @@ -512,6 +555,19 @@ if (typeof window !== "undefined") { window.sendEmailCode = sendEmailCode; window.showInlineMsg = showInlineMsg; window.unbindWechat = unbindWechat; + window.buyItem = buyItem; + window.closeGiftDialog = closeGiftDialog; + window.closeRenameModal = closeRenameModal; + window.closeShopModal = closeShopModal; + window.confirmGift = confirmGift; + window.fetchShopData = fetchShopData; + window.loadShop = loadShop; + window.openGiftDialog = openGiftDialog; + window.openRenameModal = openRenameModal; + window.openShopModal = openShopModal; + window.renderShop = renderShop; + window.showShopToast = showShopToast; + window.submitRename = submitRename; // 页面加载后立即注册事件委托，具体业务逻辑仍由各子模块负责。 bindChatBanner(); diff --git a/resources/js/chat-room/shop-controls.js b/resources/js/chat-room/shop-controls.js index 6128087..8ec1f9a 100644 --- a/resources/js/chat-room/shop-controls.js +++ b/resources/js/chat-room/shop-controls.js @@ -1,27 +1,653 @@ -// 商店弹窗基础按钮事件绑定，替代 toolbar 商店区域内联 onclick。 +// 商店弹窗业务模块，负责商品加载、购买、赠礼、改名卡和商店按钮事件。 + +import { escapeHtml } from "./html.js"; + +const DEFAULT_SHOP_ITEMS_URL = "/shop/items"; +const DEFAULT_SHOP_BUY_URL = "/shop/buy"; +const DEFAULT_SHOP_RENAME_URL = "/shop/rename"; + +const WEEK_EFFECT_ICONS = { + fireworks: "🎆", + rain: "🌧", + lightning: "⚡", + snow: "❄️", + sakura: "🌸", + meteors: "🌠", + "gold-rain": "🪙", + hearts: "💖", + confetti: "🎊", + fireflies: "✨", +}; + +const SHOP_GROUPS = [ + { + label: "⚡ 单次特效卡", + desc: "立即播放一次", + type: "instant", + }, + { + label: "📅 周卡 7天登录自动播放", + desc: "同时只能激活一种，购新旧失效不退款", + type: "duration", + }, + { + label: "💍 求婚戒指", + desc: "存入背包，求婚时消耗（被拒则遗失）", + type: "ring", + }, + { + label: "🎣 自动钓鱼卡", + desc: "激活后自动收篼，无需手动点击浮漂", + type: "auto_fishing", + }, + { + label: "🎭 道具", + desc: "", + type: "tools", + }, +]; let shopControlEventsBound = false; +let shopLoaded = false; +let giftItem = null; /** - * 调用商店存量全局函数。 + * 读取商店根节点上由 Blade 注入的接口地址。 + * + * @returns {{items: string, buy: string, rename: string}} + */ +function getShopUrls() { + const modal = document.getElementById("shop-modal"); + + return { + items: modal?.dataset.shopItemsUrl || DEFAULT_SHOP_ITEMS_URL, + buy: modal?.dataset.shopBuyUrl || DEFAULT_SHOP_BUY_URL, + rename: modal?.dataset.shopRenameUrl || DEFAULT_SHOP_RENAME_URL, + }; +} + +/** + * 读取 CSRF Token，给 fetch 请求统一使用。 + * + * @returns {string} + */ +function csrfToken() { + return document.querySelector('meta[name="csrf-token"]')?.content ?? ""; +} + +/** + * 生成 fetch 请求头。 + * + * @param {boolean} withJson 是否声明 JSON 请求体 + * @returns {Record} + */ +function jsonHeaders(withJson = false) { + const headers = { + Accept: "application/json", + "X-CSRF-TOKEN": csrfToken(), + }; + + if (withJson) { + headers["Content-Type"] = "application/json"; + } + + return headers; +} + +/** + * 打开商店弹窗，首次打开时拉取商品列表。 * - * @param {string} functionName 全局函数名 * @returns {void} */ -function callShopGlobal(functionName) { - // 商店主体逻辑仍在 Blade 全局函数内，这里只把 data 事件桥接到旧函数。 - if (typeof window[functionName] === "function") { - window[functionName](); +export function openShopModal() { + const modal = document.getElementById("shop-modal"); + if (!modal) { + return; + } + + modal.style.display = "flex"; + if (!shopLoaded) { + shopLoaded = true; + fetchShopData(); } } /** - * 绑定商店关闭、改名和赠礼对话框按钮事件。 + * 关闭商店弹窗。 + * + * @returns {void} + */ +export function closeShopModal() { + const modal = document.getElementById("shop-modal"); + if (modal) { + modal.style.display = "none"; + } +} + +/** + * 拉取商品数据并渲染列表。 + * + * @returns {Promise} + */ +export async function fetchShopData() { + try { + const response = await fetch(getShopUrls().items, { + headers: jsonHeaders(), + }); + const data = await response.json(); + renderShop(data); + } catch (error) { + showShopToast("⚠ 加载失败，请重试", false); + } +} + +/** + * 兼容旧入口，给未迁移脚本按原函数名刷新商店。 + * + * @returns {Promise} + */ +export function loadShop() { + return fetchShopData(); +} + +/** + * 构建分组标题旁边的状态徽章。 + * + * @param {Record} group 商品分组 + * @param {Record} data 商店接口数据 + * @returns {string} + */ +function buildGroupSuffix(group, data) { + if (group.type === "auto_fishing" && Number(data.auto_fishing_minutes_left || 0) > 0) { + const left = Number(data.auto_fishing_minutes_left || 0); + const leftStr = left >= 60 ? `${Math.floor(left / 60)} 小时` : `${left} 分钟`; + + return ` ⏳ 剩余 ${escapeHtml(leftStr)}`; + } + + if (group.type === "duration" && data.active_week_effect) { + const effectKey = String(data.active_week_effect); + const effectItem = (data.items || []).find((item) => item.type === "duration" && String(item.slug || "").includes(effectKey)); + const effectName = effectItem ? effectItem.name : effectKey; + + return ` ✅ 已激活：${escapeHtml(effectName)}`; + } + + if (group.type === "tools" && Number(data.sign_repair_card_count || 0) > 0) { + return ` 🎫 可用 ${Number(data.sign_repair_card_count || 0)} 张`; + } + + return ""; +} + +/** + * 按商品类型筛选当前分组要展示的商品。 + * + * @param {Record} group 商品分组 + * @param {Array>} items 商品列表 + * @returns {Array>} + */ +function filterGroupItems(group, items) { + if (group.type === "tools") { + return items.filter((item) => ["one_time", "sign_repair"].includes(item.type)); + } + + return items.filter((item) => item.type === group.type); +} + +/** + * 渲染商店商品列表和余额状态。 + * + * @param {Record} data 商店接口数据 + * @returns {void} + */ +export function renderShop(data) { + const balance = document.getElementById("shop-jjb"); + const badge = document.getElementById("shop-week-badge"); + const list = document.getElementById("shop-items-list"); + + if (!list) { + return; + } + + if (balance) { + balance.textContent = Number(data.user_jjb || 0).toLocaleString(); + } + + if (badge) { + if (data.active_week_effect) { + badge.textContent = `${WEEK_EFFECT_ICONS[data.active_week_effect] ?? ""} 周卡生效中`; + badge.style.display = "inline-block"; + } else { + badge.textContent = ""; + badge.style.display = "none"; + } + } + + const items = Array.isArray(data.items) ? data.items : []; + const ringCounts = data.ring_counts || {}; + list.innerHTML = ""; + + SHOP_GROUPS.forEach((group) => { + const groupItems = filterGroupItems(group, items); + if (!groupItems.length) { + return; + } + + const header = document.createElement("div"); + header.className = "shop-group-header"; + header.innerHTML = `${escapeHtml(group.label)}${buildGroupSuffix(group, { ...data, items })}${group.desc ? ` ${escapeHtml(group.desc)}` : ""}`; + list.appendChild(header); + + groupItems.forEach((item) => { + list.appendChild(createShopCard(item, data, ringCounts)); + }); + }); +} + +/** + * 创建单个商品卡片，并挂载购买或使用按钮事件。 + * + * @param {Record} item 商品数据 + * @param {Record} data 商店接口数据 + * @param {Record} ringCounts 戒指持有数量 + * @returns {HTMLDivElement} + */ +function createShopCard(item, data, ringCounts) { + const isRename = item.slug === "rename_card"; + const canUseRename = isRename && data.has_rename_card; + const isRing = item.type === "ring"; + const ownedQty = isRing ? Number(ringCounts[item.id] || 0) : 0; + const isAutoFishing = item.type === "auto_fishing"; + const card = document.createElement("div"); + const button = document.createElement("button"); + + card.className = "shop-card"; + card.innerHTML = buildShopCardHtml(item, { + isRing, + ownedQty, + isAutoFishing, + }); + + if (canUseRename) { + button.className = "shop-btn shop-btn-use"; + button.textContent = "✦ 使用改名卡"; + button.addEventListener("click", openRenameModal); + } else if (item.type === "instant") { + button.className = "shop-btn"; + button.textContent = `💰 ${Number(item.price || 0).toLocaleString()}`; + button.addEventListener("click", () => openGiftDialog(item)); + } else { + button.className = "shop-btn"; + button.textContent = `💰 ${Number(item.price || 0).toLocaleString()}`; + button.addEventListener("click", () => confirmAndBuyItem(item)); + } + + card.appendChild(button); + + return card; +} + +/** + * 拼接商品卡片 HTML，所有接口字段都先转义再进入 innerHTML。 + * + * @param {Record} item 商品数据 + * @param {{isRing: boolean, ownedQty: number, isAutoFishing: boolean}} options 渲染选项 + * @returns {string} + */ +function buildShopCardHtml(item, options) { + const iconHtml = options.isRing && options.ownedQty > 0 + ? ` + ${escapeHtml(item.icon)} + ${options.ownedQty} + ` + : `${escapeHtml(item.icon)}`; + const durationLabel = options.isAutoFishing && Number(item.duration_minutes || 0) > 0 + ? `
⏱ 有效期 ${escapeHtml(formatMinutes(item.duration_minutes))}
` + : ""; + const ringBonus = options.isRing && (Number(item.intimacy_bonus || 0) > 0 || Number(item.charm_bonus || 0) > 0) + ? `
+ ${Number(item.intimacy_bonus || 0) > 0 ? `💞 亲密 +${Number(item.intimacy_bonus || 0)}` : ""} + ${Number(item.charm_bonus || 0) > 0 ? `✨ 魅力 +${Number(item.charm_bonus || 0)}` : ""} +
` + : ""; + + return ` +
+ ${iconHtml} + ${escapeHtml(item.name)} +
+
${escapeHtml(item.description ?? "")}
+ ${ringBonus} + ${durationLabel} + `; +} + +/** + * 格式化分钟数，供自动钓鱼卡有效期展示。 + * + * @param {number|string} minutes 有效分钟数 + * @returns {string} + */ +function formatMinutes(minutes) { + const value = Number(minutes || 0); + + return value >= 60 ? `${Math.floor(value / 60)} 小时` : `${value} 分钟`; +} + +/** + * 购买前弹出确认框，补签卡需要先询问数量。 + * + * @param {Record} item 商品数据 + * @returns {Promise} + */ +async function confirmAndBuyItem(item) { + let quantity = 1; + + if (item.type === "sign_repair") { + quantity = await window.promptSignRepairQuantity?.(item); + if (quantity === null || quantity === undefined) { + return; + } + } + + const confirmMessage = `确认花费 💰 ${Number(Number(item.price || 0) * quantity).toLocaleString()} 金币购买\n【${item.name}】${quantity > 1 ? ` × ${quantity}` : ""} 吗？`; + const confirmed = await confirmShopPurchase(confirmMessage); + + if (confirmed) { + buyItem(item.id, item.name, item.price, "all", "", quantity); + } +} + +/** + * 兼容全局弹窗组件缺失时的原生确认。 + * + * @param {string} message 确认文案 + * @returns {Promise} + */ +async function confirmShopPurchase(message) { + if (window.chatDialog?.confirm) { + return Boolean(await window.chatDialog.confirm(message, "确认购买")); + } + + return window.confirm(message); +} + +/** + * 打开赠礼对话框，缓存当前要赠出的单次特效卡。 + * + * @param {Record} item 商品数据 + * @returns {void} + */ +export function openGiftDialog(item) { + giftItem = item; + + const recipient = document.getElementById("gift-recipient"); + const message = document.getElementById("gift-message"); + const error = document.getElementById("gift-err"); + const itemName = document.getElementById("gift-item-name"); + const dialog = document.getElementById("gift-dialog"); + + if (recipient) { + recipient.value = ""; + } + + if (message) { + message.value = ""; + } + + if (error) { + error.textContent = ""; + } + + if (itemName) { + itemName.textContent = `${item.icon} ${item.name}（💰 ${Number(item.price || 0).toLocaleString()}）`; + } + + if (dialog) { + dialog.style.display = "flex"; + } +} + +/** + * 关闭赠礼对话框并清理当前商品缓存。 + * + * @returns {void} + */ +export function closeGiftDialog() { + const dialog = document.getElementById("gift-dialog"); + if (dialog) { + dialog.style.display = "none"; + } + + giftItem = null; +} + +/** + * 确认赠礼，按旧签名调用购买接口。 + * + * @returns {void} + */ +export function confirmGift() { + if (!giftItem) { + return; + } + + const recipient = document.getElementById("gift-recipient")?.value.trim() ?? ""; + const message = document.getElementById("gift-message")?.value.trim() ?? ""; + const item = giftItem; + const error = document.getElementById("gift-err"); + + if (error) { + error.textContent = ""; + } + + closeGiftDialog(); + buyItem(item.id, item.name, item.price, recipient, message); +} + +/** + * 购买商品，保留旧全局签名供补签卡等存量脚本复用。 + * + * @param {number|string} itemId 商品 ID + * @param {string} name 商品名称 + * @param {number|string} price 商品价格 + * @param {string} recipient 接收人，空值表示全场 + * @param {string} message 赠言 + * @param {number} quantity 购买数量 + * @returns {Promise} + */ +export async function buyItem(itemId, name, price, recipient, message, quantity = 1) { + try { + const response = await fetch(getShopUrls().buy, { + method: "POST", + headers: jsonHeaders(true), + body: JSON.stringify({ + item_id: itemId, + recipient: recipient || "all", + message: message || "", + quantity: quantity || 1, + room_id: window.chatContext?.roomId ?? 0, + }), + }); + const data = await response.json(); + + if (data.status === "success") { + handleBuySuccess(data, name); + return; + } + + showShopToast(data.message, false); + } catch (error) { + showShopToast("⚠ 网络异常，请重试", false); + } +} + +/** + * 购买成功后同步金币、播放本地特效并刷新商店状态。 + * + * @param {Record} data 购买接口返回 + * @param {string} itemName 商品名称 + * @returns {void} + */ +function handleBuySuccess(data, itemName) { + const balance = document.getElementById("shop-jjb"); + + if (data.jjb !== undefined && balance) { + balance.textContent = Number(data.jjb).toLocaleString(); + } + + showShopToast(`✅ ${itemName} 购买成功！`, true); + + // 购买者本地也要立即看到特效，广播只负责其他在线用户。 + if (data.play_effect && window.EffectManager) { + window.EffectManager.play(data.play_effect); + } + + shopLoaded = false; + setTimeout(() => { + fetchShopData(); + shopLoaded = true; + }, 1000); +} + +/** + * 显示商店内部 Toast。 + * + * @param {string} message 提示内容 + * @param {boolean} ok 是否成功 + * @returns {void} + */ +export function showShopToast(message, ok) { + const element = document.getElementById("shop-toast"); + if (!element) { + return; + } + + element.textContent = message; + element.style.display = "block"; + element.style.background = ok ? "#064e3b" : "#7f1d1d"; + element.style.color = ok ? "#6ee7b7" : "#fca5a5"; + clearTimeout(element._shopToastTimer); + element._shopToastTimer = setTimeout(() => { + element.style.display = "none"; + }, 3500); +} + +/** + * 打开改名卡输入框。 + * + * @returns {void} + */ +export function openRenameModal() { + const modal = document.getElementById("shop-rename-overlay"); + const input = document.getElementById("rename-input"); + const error = document.getElementById("rename-err"); + + if (modal) { + modal.style.display = "flex"; + } + + if (input) { + input.focus(); + } + + if (error) { + error.textContent = ""; + } +} + +/** + * 关闭改名卡输入框。 + * + * @returns {void} + */ +export function closeRenameModal() { + const modal = document.getElementById("shop-rename-overlay"); + if (modal) { + modal.style.display = "none"; + } +} + +/** + * 提交改名卡请求，成功后刷新页面同步昵称。 + * + * @returns {Promise} + */ +export async function submitRename() { + const input = document.getElementById("rename-input"); + const error = document.getElementById("rename-err"); + const newName = input?.value.trim() ?? ""; + + if (!newName) { + if (error) { + error.textContent = "请输入新昵称"; + } + return; + } + + try { + const response = await fetch(getShopUrls().rename, { + method: "POST", + headers: jsonHeaders(true), + body: JSON.stringify({ + new_name: newName, + }), + }); + const data = await response.json(); + + if (data.status === "success") { + closeRenameModal(); + showShopToast(data.message, true); + shopLoaded = false; + setTimeout(() => window.location.reload(), 2000); + return; + } + + if (error) { + error.textContent = data.message; + } + } catch (requestError) { + if (error) { + error.textContent = "网络异常，请重试"; + } + } +} + +/** + * 把模块函数挂到 window，兼容仍在 Blade 内的调用点。 + * + * @returns {void} + */ +function exposeShopGlobals() { + window.openShopModal = openShopModal; + window.closeShopModal = closeShopModal; + window.loadShop = loadShop; + window.fetchShopData = fetchShopData; + window.renderShop = renderShop; + window.openGiftDialog = openGiftDialog; + window.closeGiftDialog = closeGiftDialog; + window.confirmGift = confirmGift; + window.buyItem = buyItem; + window.showShopToast = showShopToast; + window.openRenameModal = openRenameModal; + window.closeRenameModal = closeRenameModal; + window.submitRename = submitRename; +} + +/** + * 绑定商店按钮、对话框按钮与遮罩关闭事件。 * * @returns {void} */ export function bindShopControls() { - if (shopControlEventsBound || typeof document === "undefined") { + if (typeof window === "undefined" || typeof document === "undefined") { + return; + } + + exposeShopGlobals(); + + if (shopControlEventsBound) { return; } @@ -31,36 +657,36 @@ export function bindShopControls() { return; } - // 商店弹窗关闭入口与遮罩关闭逻辑保持同一个旧函数。 - if (event.target.closest("[data-shop-modal-close]")) { + const modal = document.getElementById("shop-modal"); + + // 点击商店遮罩或关闭按钮都走同一个关闭入口。 + if (event.target.closest("[data-shop-modal-close]") || (modal && event.target === modal)) { event.preventDefault(); - callShopGlobal("closeShopModal"); + closeShopModal(); return; } - // 改名确认/取消只转发按钮意图，接口请求仍由 Blade 内的 submitRename 处理。 if (event.target.closest("[data-shop-rename-confirm]")) { event.preventDefault(); - callShopGlobal("submitRename"); + submitRename(); return; } if (event.target.closest("[data-shop-rename-cancel]")) { event.preventDefault(); - callShopGlobal("closeRenameModal"); + closeRenameModal(); return; } - // 赠礼确认/取消对应单次特效卡流程，先保留旧的弹窗状态管理函数。 if (event.target.closest("[data-shop-gift-confirm]")) { event.preventDefault(); - callShopGlobal("confirmGift"); + confirmGift(); return; } if (event.target.closest("[data-shop-gift-cancel]")) { event.preventDefault(); - callShopGlobal("closeGiftDialog"); + closeGiftDialog(); } }); } diff --git a/resources/views/chat/partials/layout/toolbar.blade.php b/resources/views/chat/partials/layout/toolbar.blade.php index 3fee69b..4cf2f82 100644 --- a/resources/views/chat/partials/layout/toolbar.blade.php +++ b/resources/views/chat/partials/layout/toolbar.blade.php @@ -583,7 +583,8 @@ } -
+
{{-- 标题栏 --}} @@ -638,348 +639,7 @@
- +{{-- 商店弹窗业务脚本已迁移到 resources/js/chat-room/shop-controls.js --}} {{-- ═══════════ 会员中心弹窗 ═══════════ --}}