587 lines
16 KiB
JavaScript
587 lines
16 KiB
JavaScript
// 紧凑商店面板模块，兼容旧右侧嵌入式 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();
|
||
}
|
||
});
|
||
}
|