lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

迁移婚姻广播弹窗脚本

Browse Source
This commit is contained in:
流星
2026-04-25 19:13:40 +08:00
parent ee4abdff85
commit e53f2f5d9d
3 changed files with 197 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/partials/marriage-modals.blade.php
-171
View File
@@ -1232,175 +1232,4 @@
}
};
}
// ───────── WebSocket 事件处理 ───────────────────────────
/** 收到全局结婚公告：弹出全屏通知 + 追加公屏文字 */
window.addEventListener('chat:marriage-accepted', (e) => {
const detail = e.detail;
const groomName = detail.user?.username ?? detail.groom_name ?? '??';
const brideName = detail.partner?.username ?? detail.bride_name ?? '??';
// 追加公屏消息
if (typeof window.appendSystemMessage === 'function') {
window.appendSystemMessage(`💑 ${groomName} 与 ${brideName} 喜结连理！`);
}
// 弹出全屏公告（fireworks 效果）
const el = document.getElementById('marriage-accepted-modal');
if (el) Alpine.$data(el).open(detail);
});
/** 收到求婚通知（私人频道，目标方） */
window.addEventListener('chat:marriage-proposed', (e) => {
const detail = e.detail;
const el = document.getElementById('marriage-incoming-modal');
if (el) Alpine.$data(el).open(detail);
});
/** 收到婚礼庆典（全局，显示红包 + 公屏系统消息） */
window.addEventListener('chat:wedding-celebration', (e) => {
const detail = e.detail;
const groomName = detail.user?.username ?? '??';
const brideName = detail.partner?.username ?? '??';
const tierIcon = detail.tier_icon ?? '🎊';
const tierName = detail.tier_name ?? '婚礼';
const amount = detail.total_amount ? Number(detail.total_amount).toLocaleString() : '?';
const ceremonyId = detail.ceremony_id;
// 将 detail 存入全局 Map，避免 onclick 属性内嵌 JSON 被双引号破坏
if (!window._weddingEnvelopes) window._weddingEnvelopes = {};
window._weddingEnvelopes[ceremonyId] = detail;
// 公屏追加带按钮的系统消息（按钮通过 ceremonyId 引用全局 Map）
if (typeof window.appendSystemMessage === 'function') {
const claimBtn = `<button data-wedding-envelope-claim="${Number(ceremonyId)}"
style="display:inline-block; margin-left:10px; padding:4px 14px; border-radius:20px;
background:#d97706; color:#fff;
border:none; font-size:12px; font-weight:bold; cursor:pointer;
vertical-align:middle; line-height:1.8; box-shadow:0 2px 8px rgba(0,0,0,.3);"
title="点击领取婚礼红包">🧧 点击领取红包</button>`;
window.appendSystemMessage(
`${tierIcon} ${groomName} 与 ${brideName} 举办了【${tierName}】！总金额 💰${amount} 金币，快来抢红包！${claimBtn}`
);
}
// 同时弹出全屏红包弹窗
const el = document.getElementById('wedding-envelope-modal');
if (el) Alpine.$data(el).open(detail);
});
/** 求婚被拒（私人频道，发起方） */
window.addEventListener('chat:marriage-rejected', (e) => {
const {
proposer_name,
partner_name
} = e.detail;
window.chatDialog?.alert(
`${partner_name} 婉拒了你的求婚，戒指随之遗失… 💔`,
'求婚被拒绝',
'#6b7280'
);
});
/** 求婚超时（私人频道，发起方） */
window.addEventListener('chat:marriage-expired', (e) => {
window.chatDialog?.alert(
'你的求婚超时未获回应，戒指已消失… ⏰',
'求婚已过期',
'#9ca3af'
);
});
/** 接到协议离婚申请（私人频道，对方）→ 打开专属三选弹窗 */
window.addEventListener('chat:divorce-requested', (e) => {
const detail = e.detail;
const el = document.getElementById('divorce-request-modal');
if (el) Alpine.$data(el).open(detail);
});
/** 红包领取成功通知（私人频道） */
window.addEventListener('chat:envelope-claimed', (e) => {
const {
amount
} = e.detail;
window.chatDialog?.alert(`+${amount.toLocaleString()} 金币已到账 🎉`, '红包到手！', '#f59e0b');
});
window.addEventListener('chat:marriage-divorced', (e) => {
const detail = e.detail;
const userName = detail.user_username ?? detail.user?.username ?? '??';
const partnerName = detail.partner_username ?? detail.partner?.username ?? '??';
// 追加公屏文字
if (typeof window.appendSystemMessage === 'function') {
window.appendSystemMessage(`💔 ${userName} 与 ${partnerName} 解除了婚姻关系。`);
}
// 触发全屏离婚公告弹窗（暗色阴郁风格 + 雷雨特效）
const modal = document.getElementById('marriage-divorced-modal')?._x_dataStack?.[0];
if (modal && typeof modal.open === 'function') modal.open(detail);
});
/** 页面加载完成后初始化私人频道监听 */
document.addEventListener('DOMContentLoaded', () => {
const userId = window.chatContext?.userId;
if (userId && typeof window.initMarriagePrivateChannel === 'function') {
// 延迟初始化，确保 Echo 已就绪
setTimeout(() => window.initMarriagePrivateChannel(userId), 1500);
}
// ── 页面刷新后恢复婚礼红包领取按钮 ─────────────────────────
// 空闲时再查待领取红包，避免和聊天室首屏消息/名单初始化抢网络。
window.deferChatGameBootstrap(async () => {
try {
const res = await fetch('/wedding/pending-envelopes', {
headers: {
'Accept': 'application/json'
}
});
const data = await res.json();
if (!res.ok || !data.envelopes?.length) return;
// 初始化全局缓存
if (!window._weddingEnvelopes) window._weddingEnvelopes = {};
data.envelopes.forEach(env => {
const ceremonyId = env.ceremony_id;
// 注入 detail 到全局 Map，供领取弹窗使用
window._weddingEnvelopes[ceremonyId] = {
ceremony_id: ceremonyId,
total_amount: env.total_amount,
tier_name: env.tier_name,
tier_icon: env.tier_icon,
user: {
username: env.groom
},
partner: {
username: env.bride
},
};
// 在包厢窗口追加提示 + 领取按钮
if (typeof window.appendSystemMessage === 'function') {
const claimBtn = `<button data-wedding-envelope-claim="${Number(ceremonyId)}"
style="display:inline-block; margin-left:10px; padding:4px 14px; border-radius:20px;
background:#d97706; color:#fff;
border:none; font-size:12px; font-weight:bold; cursor:pointer;
vertical-align:middle; line-height:1.8; box-shadow:0 2px 8px rgba(0,0,0,.3);"
title="点击领取婚礼红包">🧧 点击领取红包</button>`;
window.appendSystemMessage(
`⚠️ 您有来自 ${env.tier_icon} ${env.groom} 与 ${env.bride}【${env.tier_name}】的婚礼红包未领取！${claimBtn}`
);
}
});
} catch (e) {
console.warn('[婚礼红包] 恢复待领取按钮失败', e);
}
}, 3000);
});
</script>