迁移紧凑商店面板脚本
This commit is contained in:
@@ -40,6 +40,7 @@
|
||||
* - fortune-panel.js：提供神秘占卜 fortunePanel Alpine 组件。
|
||||
* - profile-controls.js：处理头像选择、个人资料、密码、邮箱验证码和微信绑定入口。
|
||||
* - shop-controls.js：处理商店弹窗、商品加载、购买、赠礼和改名卡入口。
|
||||
* - compact-shop-panel.js：兼容旧右侧紧凑商店面板，按需挂载旧全局函数。
|
||||
* - slot-machine.js：提供老虎机 slotPanel/slotFab Alpine 组件。
|
||||
* - vip-controls.js：处理 VIP 中心弹窗、会员数据渲染、支付跳转和专属进退场设置。
|
||||
* - preferences-status.js：处理聊天偏好、屏蔽系统播报和静音状态。
|
||||
@@ -170,6 +171,17 @@ export {
|
||||
showShopToast,
|
||||
submitRename,
|
||||
} from "./chat-room/shop-controls.js";
|
||||
export {
|
||||
bindCompactShopPanelControls,
|
||||
buyCompactShopItem,
|
||||
closeCompactRenameModal,
|
||||
fetchCompactShopData,
|
||||
loadCompactShop,
|
||||
openCompactRenameModal,
|
||||
renderCompactShop,
|
||||
showCompactShopToast,
|
||||
submitCompactRename,
|
||||
} from "./chat-room/compact-shop-panel.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 {
|
||||
@@ -326,6 +338,17 @@ import {
|
||||
showShopToast,
|
||||
submitRename,
|
||||
} from "./chat-room/shop-controls.js";
|
||||
import {
|
||||
bindCompactShopPanelControls,
|
||||
buyCompactShopItem,
|
||||
closeCompactRenameModal,
|
||||
fetchCompactShopData,
|
||||
loadCompactShop,
|
||||
openCompactRenameModal,
|
||||
renderCompactShop,
|
||||
showCompactShopToast,
|
||||
submitCompactRename,
|
||||
} from "./chat-room/compact-shop-panel.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 {
|
||||
@@ -505,6 +528,15 @@ if (typeof window !== "undefined") {
|
||||
renderShop,
|
||||
showShopToast,
|
||||
submitRename,
|
||||
bindCompactShopPanelControls,
|
||||
buyCompactShopItem,
|
||||
closeCompactRenameModal,
|
||||
fetchCompactShopData,
|
||||
loadCompactShop,
|
||||
openCompactRenameModal,
|
||||
renderCompactShop,
|
||||
showCompactShopToast,
|
||||
submitCompactRename,
|
||||
bindSlotMachineControls,
|
||||
slotFab,
|
||||
slotPanel,
|
||||
@@ -700,6 +732,7 @@ if (typeof window !== "undefined") {
|
||||
bindMarriageStatusControls();
|
||||
bindProfileControls();
|
||||
bindShopControls();
|
||||
bindCompactShopPanelControls();
|
||||
bindSlotMachineControls();
|
||||
bindVipControls();
|
||||
bindChatRightPanelControls();
|
||||
|
||||
@@ -0,0 +1,586 @@
|
||||
// 紧凑商店面板模块，兼容旧右侧嵌入式 shop-panel 视图。
|
||||
|
||||
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 COMPACT_SHOP_GROUPS = [
|
||||
{
|
||||
label: "⚡ 单次特效卡",
|
||||
desc: "立即播放一次",
|
||||
type: "instant",
|
||||
},
|
||||
{
|
||||
label: "📅 周卡・7天登录自动播放",
|
||||
desc: "同时只能激活一种，购新旧失效无退款",
|
||||
type: "duration",
|
||||
},
|
||||
{
|
||||
label: "💍 求婚戒指",
|
||||
desc: "购买后存入背包，求婚时消耗（若被拒绝则遗失）",
|
||||
type: "ring",
|
||||
},
|
||||
{
|
||||
label: "🎭 道具",
|
||||
desc: "",
|
||||
type: "tools",
|
||||
},
|
||||
];
|
||||
|
||||
let compactShopLoaded = false;
|
||||
let compactShopEventsBound = false;
|
||||
|
||||
/**
|
||||
* 判断当前页面是否存在旧紧凑商店面板。
|
||||
*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function hasCompactShopPanel() {
|
||||
return Boolean(document.getElementById("shop-panel"));
|
||||
}
|
||||
|
||||
/**
|
||||
* 读取紧凑商店面板接口地址，优先使用 Blade 写入的命名路由。
|
||||
*
|
||||
* @returns {{items: string, buy: string, rename: string}}
|
||||
*/
|
||||
function compactShopUrls() {
|
||||
const panel = document.getElementById("shop-panel");
|
||||
|
||||
return {
|
||||
items: panel?.dataset.shopItemsUrl || DEFAULT_SHOP_ITEMS_URL,
|
||||
buy: panel?.dataset.shopBuyUrl || DEFAULT_SHOP_BUY_URL,
|
||||
rename: panel?.dataset.shopRenameUrl || DEFAULT_SHOP_RENAME_URL,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 读取 CSRF Token。
|
||||
*
|
||||
* @returns {string}
|
||||
*/
|
||||
function csrfToken() {
|
||||
return document.querySelector('meta[name="csrf-token"]')?.content ?? "";
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成商店接口请求头。
|
||||
*
|
||||
* @param {boolean} withJson 是否声明 JSON 请求体
|
||||
* @returns {Record<string, string>}
|
||||
*/
|
||||
function shopHeaders(withJson = false) {
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
"X-CSRF-TOKEN": csrfToken(),
|
||||
};
|
||||
|
||||
if (withJson) {
|
||||
headers["Content-Type"] = "application/json";
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开商店 Tab 时按需加载商品。
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
export function loadCompactShop() {
|
||||
if (!hasCompactShopPanel() || compactShopLoaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
compactShopLoaded = true;
|
||||
fetchCompactShopData();
|
||||
}
|
||||
|
||||
/**
|
||||
* 拉取紧凑商店商品数据。
|
||||
*
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
export async function fetchCompactShopData() {
|
||||
try {
|
||||
const response = await fetch(compactShopUrls().items, {
|
||||
headers: shopHeaders(),
|
||||
});
|
||||
const data = await response.json();
|
||||
renderCompactShop(data);
|
||||
} catch (error) {
|
||||
showCompactShopToast("⚠ 加载失败，请刷新重试", false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染紧凑商店商品列表。
|
||||
*
|
||||
* @param {Record<string, any>} data 商店接口数据
|
||||
* @returns {void}
|
||||
*/
|
||||
export function renderCompactShop(data) {
|
||||
const balance = document.getElementById("shop-jjb");
|
||||
const badge = document.getElementById("shop-week-badge");
|
||||
const itemsElement = document.getElementById("shop-items-list");
|
||||
|
||||
if (!itemsElement) {
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
itemsElement.textContent = "";
|
||||
|
||||
COMPACT_SHOP_GROUPS.forEach((group) => {
|
||||
const groupItems = filterCompactShopGroup(group, data.items || []);
|
||||
|
||||
if (!groupItems.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const section = document.createElement("div");
|
||||
section.style.marginBottom = "10px";
|
||||
section.appendChild(createCompactShopGroupLabel(group));
|
||||
|
||||
if (group.desc) {
|
||||
const description = document.createElement("div");
|
||||
description.className = "shop-group-desc";
|
||||
description.textContent = group.desc;
|
||||
section.appendChild(description);
|
||||
}
|
||||
|
||||
groupItems.forEach((item) => {
|
||||
section.appendChild(createCompactShopCard(item, data));
|
||||
});
|
||||
|
||||
itemsElement.appendChild(section);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 筛选分组商品。
|
||||
*
|
||||
* @param {Record<string, any>} group 分组配置
|
||||
* @param {Array<Record<string, any>>} items 商品列表
|
||||
* @returns {Array<Record<string, any>>}
|
||||
*/
|
||||
function filterCompactShopGroup(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<string, any>} group 分组配置
|
||||
* @returns {HTMLDivElement}
|
||||
*/
|
||||
function createCompactShopGroupLabel(group) {
|
||||
const label = document.createElement("div");
|
||||
label.className = "shop-group-label";
|
||||
label.textContent = group.label;
|
||||
|
||||
return label;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建紧凑商品卡片。
|
||||
*
|
||||
* @param {Record<string, any>} item 商品数据
|
||||
* @param {Record<string, any>} data 商店接口数据
|
||||
* @returns {HTMLDivElement}
|
||||
*/
|
||||
function createCompactShopCard(item, data) {
|
||||
const isRename = item.slug === "rename_card";
|
||||
const canUseRename = isRename && data.has_rename_card;
|
||||
const isRing = item.type === "ring";
|
||||
const ownedQty = isRing ? Number((data.ring_counts || {})[item.id] || 0) : 0;
|
||||
const card = document.createElement("div");
|
||||
const row = document.createElement("div");
|
||||
const button = document.createElement("button");
|
||||
|
||||
card.className = "shop-card";
|
||||
row.className = "shop-card-row";
|
||||
row.appendChild(createCompactShopIcon(item, isRing, ownedQty));
|
||||
row.appendChild(createCompactShopName(item));
|
||||
|
||||
if (canUseRename) {
|
||||
button.className = "shop-btn shop-btn-use";
|
||||
button.textContent = "使用";
|
||||
button.addEventListener("click", openCompactRenameModal);
|
||||
} else {
|
||||
button.className = "shop-btn";
|
||||
button.textContent = `💰 ${Number(item.price || 0).toLocaleString()}`;
|
||||
button.addEventListener("click", () => buyCompactShopItem(item.id, item.name, item.price, item.type));
|
||||
}
|
||||
|
||||
row.appendChild(button);
|
||||
card.appendChild(row);
|
||||
|
||||
if (item.description) {
|
||||
const description = document.createElement("div");
|
||||
description.className = "shop-card-desc";
|
||||
description.textContent = item.description;
|
||||
card.appendChild(description);
|
||||
}
|
||||
|
||||
if (isRing && (Number(item.intimacy_bonus || 0) > 0 || Number(item.charm_bonus || 0) > 0)) {
|
||||
card.appendChild(createCompactRingBonus(item));
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建商品图标区域，戒指商品会显示持有数量。
|
||||
*
|
||||
* @param {Record<string, any>} item 商品数据
|
||||
* @param {boolean} isRing 是否戒指商品
|
||||
* @param {number} ownedQty 已持有数量
|
||||
* @returns {HTMLSpanElement}
|
||||
*/
|
||||
function createCompactShopIcon(item, isRing, ownedQty) {
|
||||
const wrapper = document.createElement("span");
|
||||
const icon = document.createElement("span");
|
||||
|
||||
wrapper.style.cssText = "position:relative; flex-shrink:0; width:28px; text-align:center;";
|
||||
icon.className = "shop-card-icon";
|
||||
icon.textContent = item.icon;
|
||||
wrapper.appendChild(icon);
|
||||
|
||||
if (isRing && ownedQty > 0) {
|
||||
const badge = document.createElement("span");
|
||||
badge.style.cssText = "position:absolute; top:-4px; right:-4px; background:#f43f5e; color:#fff; font-size:8px; font-weight:800; min-width:14px; height:14px; border-radius:7px; text-align:center; line-height:14px; padding:0 2px;";
|
||||
badge.textContent = ownedQty;
|
||||
wrapper.appendChild(badge);
|
||||
}
|
||||
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建商品名称节点。
|
||||
*
|
||||
* @param {Record<string, any>} item 商品数据
|
||||
* @returns {HTMLSpanElement}
|
||||
*/
|
||||
function createCompactShopName(item) {
|
||||
const name = document.createElement("span");
|
||||
name.className = "shop-card-name";
|
||||
name.title = item.name;
|
||||
name.textContent = item.name;
|
||||
|
||||
return name;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建戒指加成信息。
|
||||
*
|
||||
* @param {Record<string, any>} item 商品数据
|
||||
* @returns {HTMLDivElement}
|
||||
*/
|
||||
function createCompactRingBonus(item) {
|
||||
const bonus = document.createElement("div");
|
||||
bonus.style.cssText = "font-size:9px; color:#f43f5e; margin-top:3px; display:flex; gap:8px;";
|
||||
|
||||
if (Number(item.intimacy_bonus || 0) > 0) {
|
||||
const intimacy = document.createElement("span");
|
||||
intimacy.textContent = `💞 亲密 +${item.intimacy_bonus}`;
|
||||
bonus.appendChild(intimacy);
|
||||
}
|
||||
|
||||
if (Number(item.charm_bonus || 0) > 0) {
|
||||
const charm = document.createElement("span");
|
||||
charm.style.color = "#a855f7";
|
||||
charm.textContent = `✨ 魅力 +${item.charm_bonus}`;
|
||||
bonus.appendChild(charm);
|
||||
}
|
||||
|
||||
return bonus;
|
||||
}
|
||||
|
||||
/**
|
||||
* 购买紧凑商店商品。
|
||||
*
|
||||
* @param {number|string} itemId 商品 ID
|
||||
* @param {string} name 商品名称
|
||||
* @param {number|string} price 商品单价
|
||||
* @param {string} typeOrRecipient 商品类型或接收人
|
||||
* @param {string} message 赠言
|
||||
* @param {number|null} presetQuantity 预设数量
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
export async function buyCompactShopItem(itemId, name, price, typeOrRecipient = "", message = "", presetQuantity = null) {
|
||||
const knownTypes = ["instant", "duration", "one_time", "ring", "auto_fishing", "sign_repair"];
|
||||
const type = knownTypes.includes(typeOrRecipient) ? typeOrRecipient : "";
|
||||
const recipient = type === "" ? (typeOrRecipient || "all") : "all";
|
||||
let quantity = Number(presetQuantity || 1);
|
||||
|
||||
if (type === "sign_repair") {
|
||||
quantity = await window.promptSignRepairQuantity?.({
|
||||
name,
|
||||
price,
|
||||
description: "补签卡只能补签本月漏掉的未签到日期，不能补签上月或更早日期。",
|
||||
});
|
||||
if (quantity === null || quantity === undefined) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (presetQuantity !== null) {
|
||||
submitCompactShopPurchase(itemId, recipient, message, quantity);
|
||||
return;
|
||||
}
|
||||
|
||||
const notice = type === "sign_repair" ? "\n说明：补签卡只能补签本月未签到日期。" : "";
|
||||
const confirmed = await window.chatDialog.confirm(
|
||||
`确定花费 ${Number(Number(price || 0) * quantity).toLocaleString()} 金币购买【${name}】${quantity > 1 ? ` × ${quantity}` : ""} 吗？${notice}`,
|
||||
"确认购买",
|
||||
"#336699",
|
||||
);
|
||||
|
||||
if (confirmed) {
|
||||
submitCompactShopPurchase(itemId, recipient, message, quantity);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交紧凑商店购买请求并刷新状态。
|
||||
*
|
||||
* @param {number|string} itemId 商品 ID
|
||||
* @param {string} recipient 接收人
|
||||
* @param {string} message 赠言
|
||||
* @param {number} quantity 数量
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async function submitCompactShopPurchase(itemId, recipient, message, quantity) {
|
||||
try {
|
||||
const response = await fetch(compactShopUrls().buy, {
|
||||
method: "POST",
|
||||
headers: shopHeaders(true),
|
||||
body: JSON.stringify({
|
||||
item_id: itemId,
|
||||
room_id: window.chatContext?.roomId ?? 0,
|
||||
recipient,
|
||||
message: message || "",
|
||||
quantity: quantity || 1,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
showCompactShopToast(data.message, data.status === "success");
|
||||
if (data.status === "success") {
|
||||
handleCompactShopPurchaseSuccess(data);
|
||||
}
|
||||
} catch (error) {
|
||||
showCompactShopToast("⚠ 网络异常，请重试", false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理购买成功后的金币、特效和列表刷新。
|
||||
*
|
||||
* @param {Record<string, any>} data 接口返回
|
||||
* @returns {void}
|
||||
*/
|
||||
function handleCompactShopPurchaseSuccess(data) {
|
||||
const balance = document.getElementById("shop-jjb");
|
||||
|
||||
if (data.jjb !== undefined && balance) {
|
||||
balance.textContent = Number(data.jjb).toLocaleString();
|
||||
}
|
||||
|
||||
if (data.play_effect && window.EffectManager) {
|
||||
window.EffectManager.play(data.play_effect);
|
||||
}
|
||||
|
||||
compactShopLoaded = false;
|
||||
setTimeout(() => {
|
||||
fetchCompactShopData();
|
||||
compactShopLoaded = true;
|
||||
}, 800);
|
||||
}
|
||||
|
||||
/**
|
||||
* 展示紧凑商店 Toast。
|
||||
*
|
||||
* @param {string} message 提示文案
|
||||
* @param {boolean} ok 是否成功
|
||||
* @returns {void}
|
||||
*/
|
||||
export function showCompactShopToast(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._compactShopTimer);
|
||||
element._compactShopTimer = setTimeout(() => {
|
||||
element.style.display = "none";
|
||||
}, 3500);
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开改名卡弹窗。
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
export function openCompactRenameModal() {
|
||||
const modal = document.getElementById("rename-modal");
|
||||
const input = document.getElementById("rename-input");
|
||||
const error = document.getElementById("rename-err");
|
||||
|
||||
if (modal) {
|
||||
modal.style.display = "flex";
|
||||
}
|
||||
|
||||
input?.focus();
|
||||
|
||||
if (error) {
|
||||
error.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭改名卡弹窗。
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
export function closeCompactRenameModal() {
|
||||
const modal = document.getElementById("rename-modal");
|
||||
if (modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交改名卡请求。
|
||||
*
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
export async function submitCompactRename() {
|
||||
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(compactShopUrls().rename, {
|
||||
method: "POST",
|
||||
headers: shopHeaders(true),
|
||||
body: JSON.stringify({
|
||||
new_name: newName,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === "success") {
|
||||
closeCompactRenameModal();
|
||||
showCompactShopToast(data.message, true);
|
||||
compactShopLoaded = false;
|
||||
setTimeout(() => window.location.reload(), 2000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
error.textContent = data.message;
|
||||
}
|
||||
} catch (requestError) {
|
||||
if (error) {
|
||||
error.textContent = "网络异常，请重试";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 仅当旧紧凑商店面板存在时挂载旧全局函数，避免覆盖当前主商店弹窗。
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
function exposeCompactShopGlobals() {
|
||||
if (!hasCompactShopPanel()) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.loadShop = loadCompactShop;
|
||||
window.buyItem = buyCompactShopItem;
|
||||
window.showShopToast = showCompactShopToast;
|
||||
window.openRenameModal = openCompactRenameModal;
|
||||
window.closeRenameModal = closeCompactRenameModal;
|
||||
window.submitRename = submitCompactRename;
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定紧凑商店按钮事件。
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
export function bindCompactShopPanelControls() {
|
||||
if (typeof window === "undefined" || typeof document === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
exposeCompactShopGlobals();
|
||||
|
||||
if (!hasCompactShopPanel() || compactShopEventsBound) {
|
||||
return;
|
||||
}
|
||||
|
||||
compactShopEventsBound = true;
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!(event.target instanceof Element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.target.closest("[data-shop-rename-confirm]")) {
|
||||
event.preventDefault();
|
||||
submitCompactRename();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.target.closest("[data-shop-rename-cancel]")) {
|
||||
event.preventDefault();
|
||||
closeCompactRenameModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -243,7 +243,10 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="shop-panel">
|
||||
<div id="shop-panel"
|
||||
data-shop-items-url="{{ route('shop.items') }}"
|
||||
data-shop-buy-url="{{ route('shop.buy') }}"
|
||||
data-shop-rename-url="{{ route('shop.rename') }}">
|
||||
|
||||
{{-- 余额栏 --}}
|
||||
<div id="shop-balance-bar">
|
||||
@@ -273,320 +276,5 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 商店面板前端逻辑
|
||||
*/
|
||||
(function() {
|
||||
let shopLoaded = false;
|
||||
|
||||
/** 打开商店 Tab 时调用 */
|
||||
window.loadShop = function() {
|
||||
if (shopLoaded) return;
|
||||
shopLoaded = true;
|
||||
fetchShopData();
|
||||
};
|
||||
|
||||
/** 拉取商品数据 */
|
||||
function fetchShopData() {
|
||||
fetch('{{ route('shop.items') }}', {
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': _csrf()
|
||||
}
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => renderShop(data))
|
||||
.catch(() => showShopToast('⚠ 加载失败，请刷新重试', false));
|
||||
}
|
||||
|
||||
/** 渲染商品列表 */
|
||||
function renderShop(data) {
|
||||
// 更新金币
|
||||
document.getElementById('shop-jjb').textContent = Number(data.user_jjb).toLocaleString();
|
||||
|
||||
// 周卡状态徽章
|
||||
const badge = document.getElementById('shop-week-badge');
|
||||
if (data.active_week_effect) {
|
||||
const icons = {
|
||||
fireworks: '🎆',
|
||||
rain: '🌧',
|
||||
lightning: '⚡',
|
||||
snow: '❄️',
|
||||
sakura: '🌸',
|
||||
meteors: '🌠',
|
||||
'gold-rain': '🪙',
|
||||
hearts: '💖',
|
||||
confetti: '🎊',
|
||||
fireflies: '✨'
|
||||
};
|
||||
badge.textContent = (icons[data.active_week_effect] ?? '') + ' 周卡生效中';
|
||||
badge.style.display = 'inline-block';
|
||||
}
|
||||
|
||||
const ringCounts = data.ring_counts || {};
|
||||
|
||||
const groups = [{
|
||||
label: '⚡ 单次特效卡',
|
||||
desc: '立即播放一次',
|
||||
type: 'instant'
|
||||
},
|
||||
{
|
||||
label: '📅 周卡・7天登录自动播放',
|
||||
desc: '同时只能激活一种，购新旧失效无退款',
|
||||
type: 'duration'
|
||||
},
|
||||
{
|
||||
label: '💍 求婚戒指',
|
||||
desc: '购买后存入背包，求婚时消耗（若被拒绝则遗失）',
|
||||
type: 'ring'
|
||||
},
|
||||
{
|
||||
label: '🎭 道具',
|
||||
desc: '',
|
||||
type: 'tools'
|
||||
},
|
||||
];
|
||||
|
||||
const itemsEl = document.getElementById('shop-items-list');
|
||||
itemsEl.innerHTML = '';
|
||||
|
||||
groups.forEach(g => {
|
||||
const items = data.items.filter(i => g.type === 'tools' ? ['one_time', 'sign_repair'].includes(i.type) : i.type === g.type);
|
||||
if (!items.length) return;
|
||||
|
||||
const section = document.createElement('div');
|
||||
section.style.marginBottom = '10px';
|
||||
|
||||
// 分组标题
|
||||
const label = document.createElement('div');
|
||||
label.className = 'shop-group-label';
|
||||
label.textContent = g.label;
|
||||
section.appendChild(label);
|
||||
|
||||
if (g.desc) {
|
||||
const desc = document.createElement('div');
|
||||
desc.className = 'shop-group-desc';
|
||||
desc.textContent = g.desc;
|
||||
section.appendChild(desc);
|
||||
}
|
||||
|
||||
items.forEach(item => {
|
||||
const isRename = item.slug === 'rename_card';
|
||||
const canUseRename = isRename && data.has_rename_card;
|
||||
const isRing = item.type === 'ring';
|
||||
const ownedQty = isRing ? (ringCounts[item.id] || 0) : 0;
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'shop-card';
|
||||
|
||||
// 行：图标 + 名称 + 按钮
|
||||
const row = document.createElement('div');
|
||||
row.className = 'shop-card-row';
|
||||
|
||||
// 图标区（戒指加持有数徽标）
|
||||
const iconWrap = document.createElement('span');
|
||||
iconWrap.style.cssText =
|
||||
'position:relative; flex-shrink:0; width:28px; text-align:center;';
|
||||
const icon = document.createElement('span');
|
||||
icon.className = 'shop-card-icon';
|
||||
icon.textContent = item.icon;
|
||||
iconWrap.appendChild(icon);
|
||||
if (isRing && ownedQty > 0) {
|
||||
const badge = document.createElement('span');
|
||||
badge.style.cssText =
|
||||
'position:absolute; top:-4px; right:-4px; background:#f43f5e; color:#fff; font-size:8px; font-weight:800; min-width:14px; height:14px; border-radius:7px; text-align:center; line-height:14px; padding:0 2px;';
|
||||
badge.textContent = ownedQty;
|
||||
iconWrap.appendChild(badge);
|
||||
}
|
||||
row.appendChild(iconWrap);
|
||||
|
||||
// 名称
|
||||
const name = document.createElement('span');
|
||||
name.className = 'shop-card-name';
|
||||
name.title = item.name;
|
||||
name.textContent = item.name;
|
||||
row.appendChild(name);
|
||||
|
||||
// 按钮
|
||||
const btn = document.createElement('button');
|
||||
if (canUseRename) {
|
||||
btn.className = 'shop-btn shop-btn-use';
|
||||
btn.textContent = '使用';
|
||||
btn.onclick = openRenameModal;
|
||||
} else {
|
||||
btn.className = 'shop-btn';
|
||||
btn.innerHTML = `💰 ${Number(item.price).toLocaleString()}`;
|
||||
btn.onclick = () => buyItem(item.id, item.name, item.price, item.type);
|
||||
}
|
||||
row.appendChild(btn);
|
||||
card.appendChild(row);
|
||||
|
||||
// 简介
|
||||
if (item.description) {
|
||||
const desc = document.createElement('div');
|
||||
desc.className = 'shop-card-desc';
|
||||
desc.textContent = item.description;
|
||||
card.appendChild(desc);
|
||||
}
|
||||
|
||||
// 戒指：加成信息行
|
||||
if (isRing && (item.intimacy_bonus > 0 || item.charm_bonus > 0)) {
|
||||
const bonus = document.createElement('div');
|
||||
bonus.style.cssText =
|
||||
'font-size:9px; color:#f43f5e; margin-top:3px; display:flex; gap:8px;';
|
||||
if (item.intimacy_bonus > 0) {
|
||||
const b1 = document.createElement('span');
|
||||
b1.textContent = `💞 亲密 +${item.intimacy_bonus}`;
|
||||
bonus.appendChild(b1);
|
||||
}
|
||||
if (item.charm_bonus > 0) {
|
||||
const b2 = document.createElement('span');
|
||||
b2.style.color = '#a855f7';
|
||||
b2.textContent = `✨ 魅力 +${item.charm_bonus}`;
|
||||
bonus.appendChild(b2);
|
||||
}
|
||||
card.appendChild(bonus);
|
||||
}
|
||||
|
||||
section.appendChild(card);
|
||||
});
|
||||
|
||||
itemsEl.appendChild(section);
|
||||
});
|
||||
}
|
||||
|
||||
/** 购买商品 */
|
||||
window.buyItem = async function(itemId, name, price, typeOrRecipient = '', message = '', presetQuantity = null) {
|
||||
const knownTypes = ['instant', 'duration', 'one_time', 'ring', 'auto_fishing', 'sign_repair'];
|
||||
const type = knownTypes.includes(typeOrRecipient) ? typeOrRecipient : '';
|
||||
const recipient = type === '' ? (typeOrRecipient || 'all') : 'all';
|
||||
let quantity = Number(presetQuantity || 1);
|
||||
|
||||
if (type === 'sign_repair') {
|
||||
quantity = await window.promptSignRepairQuantity?.({
|
||||
name,
|
||||
price,
|
||||
description: '补签卡只能补签本月漏掉的未签到日期，不能补签上月或更早日期。',
|
||||
});
|
||||
if (quantity === null || quantity === undefined) return;
|
||||
}
|
||||
|
||||
const signRepairNotice = type === 'sign_repair' ? '\n说明：补签卡只能补签本月未签到日期。' : '';
|
||||
const submitPurchase = () => {
|
||||
fetch('{{ route('shop.buy') }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': _csrf()
|
||||
},
|
||||
body: JSON.stringify({
|
||||
item_id: itemId,
|
||||
room_id: window.chatContext?.roomId ?? 0,
|
||||
recipient,
|
||||
message: message || '',
|
||||
quantity: quantity || 1
|
||||
}),
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
showShopToast(data.message, data.status === 'success');
|
||||
if (data.status === 'success') {
|
||||
if (data.jjb !== undefined)
|
||||
document.getElementById('shop-jjb').textContent = Number(data.jjb)
|
||||
.toLocaleString();
|
||||
if (data.play_effect && window.EffectManager)
|
||||
window.EffectManager.play(data.play_effect);
|
||||
// 刷新商品状态
|
||||
shopLoaded = false;
|
||||
setTimeout(() => {
|
||||
fetchShopData();
|
||||
shopLoaded = true;
|
||||
}, 800);
|
||||
}
|
||||
})
|
||||
.catch(() => showShopToast('⚠ 网络异常，请重试', false));
|
||||
};
|
||||
|
||||
if (presetQuantity !== null) {
|
||||
submitPurchase();
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用全局弹窗替代原生 confirm()，通过 .then() 注册回调确保事件正确触发
|
||||
window.chatDialog.confirm(
|
||||
`确定花费 ${Number(price * quantity).toLocaleString()} 金币购买【${name}】${quantity > 1 ? ' × ' + quantity : ''} 吗？${signRepairNotice}`,
|
||||
'确认购买',
|
||||
'#336699'
|
||||
).then(ok => {
|
||||
if (!ok) return;
|
||||
submitPurchase();
|
||||
});
|
||||
};
|
||||
|
||||
/** Toast 通知 */
|
||||
window.showShopToast = function(msg, ok) {
|
||||
const el = document.getElementById('shop-toast');
|
||||
el.textContent = msg;
|
||||
el.style.display = 'block';
|
||||
el.style.background = ok ? '#064e3b' : '#7f1d1d';
|
||||
el.style.color = ok ? '#6ee7b7' : '#fca5a5';
|
||||
clearTimeout(el._t);
|
||||
el._t = setTimeout(() => {
|
||||
el.style.display = 'none';
|
||||
}, 3500);
|
||||
};
|
||||
|
||||
/** 打开改名框 */
|
||||
window.openRenameModal = function() {
|
||||
const m = document.getElementById('rename-modal');
|
||||
m.style.display = 'flex';
|
||||
document.getElementById('rename-input').focus();
|
||||
document.getElementById('rename-err').textContent = '';
|
||||
};
|
||||
|
||||
/** 关闭改名框 */
|
||||
window.closeRenameModal = function() {
|
||||
document.getElementById('rename-modal').style.display = 'none';
|
||||
};
|
||||
|
||||
/** 提交改名 */
|
||||
window.submitRename = function() {
|
||||
const newName = document.getElementById('rename-input').value.trim();
|
||||
if (!newName) {
|
||||
document.getElementById('rename-err').textContent = '请输入新昵称';
|
||||
return;
|
||||
}
|
||||
fetch('{{ route('shop.rename') }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': _csrf()
|
||||
},
|
||||
body: JSON.stringify({
|
||||
new_name: newName
|
||||
}),
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
closeRenameModal();
|
||||
showShopToast(data.message, true);
|
||||
shopLoaded = false;
|
||||
setTimeout(() => window.location.reload(), 2000);
|
||||
} else {
|
||||
document.getElementById('rename-err').textContent = data.message;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
document.getElementById('rename-err').textContent = '网络异常，请重试';
|
||||
});
|
||||
};
|
||||
|
||||
function _csrf() {
|
||||
return document.querySelector('meta[name="csrf-token"]')?.content ?? '';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{{-- 紧凑商店面板脚本已迁移到 resources/js/chat-room/compact-shop-panel.js --}}
|
||||
|
||||
Reference in New Issue
Block a user