迁移婚姻弹窗全局入口

This commit is contained in:
2026-04-25 19:11:07 +08:00
parent 925f2498c5
commit ee4abdff85
3 changed files with 112 additions and 75 deletions
@@ -683,21 +683,6 @@
{{-- ═══════════ Alpine.js 组件脚本 ═══════════ --}}
<script>
/**
* 全局辅助:向聊天主窗口追加一条婚姻系统公告(支持 HTML 内容,如按钮)
* 使用 innerHTML 而非 textContent,以支持内嵌的领取按钮等交互元素。
*/
window.appendSystemMessage = function(html) {
const container = document.getElementById('chat-messages-container');
if (!container) return;
const div = document.createElement('div');
div.style.cssText =
'background:linear-gradient(135deg,#fdf4ff,#fce7f3); border-left:3px solid #ec4899; border-radius:6px; padding:5px 12px; margin:3px 0; font-size:13px; line-height:1.6;';
div.innerHTML = `<span style="color:#9d174d;">${html}</span>`;
container.appendChild(div);
container.scrollTop = container.scrollHeight;
};
/**
* 求婚弹窗组件
*/
@@ -917,7 +902,7 @@
},
openWeddingSetup() {
openWeddingSetupModal(this.marriageId);
window.openWeddingSetupModal?.(this.marriageId);
}
};
}
@@ -1248,57 +1233,6 @@
};
}
// ───────── 全局入口函数 ─────────────────────────────────
/**
* 打开求婚弹窗(从名片按钮调用)。
* 先检查背包是否有戒指:
* - 直接开弹窗(戒指列表已预加载,无需二次请求)
* - 提示用户前往商店购买
*/
async function openProposeModal(username) {
// 显示加载中(通过按钮禁用已阻止,这里只做静默检查)
let rings = [];
try {
const res = await fetch(window.chatContext.marriage.myRingsUrl, {
headers: {
'Accept': 'application/json'
}
});
const data = await res.json();
if (data.status === 'success') {
rings = data.rings || [];
}
} catch {
/* 网络异常时继续走有戒指逻辑(后端再兜底) */
}
if (rings.length === 0) {
// 没有戒指:弹确认框引导购买
const goShop = await window.chatDialog?.confirm(
'求婚需要一枚💍结婚戒指,你的背包里还没有。\n\n要前往商店购买吗?',
'需要结婚戒指'
);
if (goShop) {
// 直接打开当前页面的商店浮窗(toolbar 中的 openShopModal
if (typeof window.openShopModal === 'function') {
window.openShopModal();
}
}
return;
}
// 有戒指:打开弹窗,将已加载的列表传入(避免二次请求)
const el = document.getElementById('marriage-propose-modal');
if (el) Alpine.$data(el).openWithRings(username, rings);
}
/** 打开婚礼设置弹窗 */
function openWeddingSetupModal(marriageId) {
const el = document.getElementById('wedding-setup-modal');
if (el) Alpine.$data(el).open(marriageId);
}
// ───────── WebSocket 事件处理 ───────────────────────────
/** 收到全局结婚公告:弹出全屏通知 + 追加公屏文字 */
@@ -1307,8 +1241,8 @@
const groomName = detail.user?.username ?? detail.groom_name ?? '??';
const brideName = detail.partner?.username ?? detail.bride_name ?? '??';
// 追加公屏消息
if (typeof appendSystemMessage === 'function') {
appendSystemMessage(`💑 ${groomName} 与 ${brideName} 喜结连理!`);
if (typeof window.appendSystemMessage === 'function') {
window.appendSystemMessage(`💑 ${groomName} 与 ${brideName} 喜结连理!`);
}
// 弹出全屏公告(fireworks 效果)
const el = document.getElementById('marriage-accepted-modal');
@@ -1338,14 +1272,14 @@
window._weddingEnvelopes[ceremonyId] = detail;
// 公屏追加带按钮的系统消息(按钮通过 ceremonyId 引用全局 Map
if (typeof appendSystemMessage === 'function') {
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>`;
appendSystemMessage(
window.appendSystemMessage(
`${tierIcon} ${groomName} 与 ${brideName} 举办了【${tierName}】!总金额 💰${amount} 金币,快来抢红包!${claimBtn}`
);
}
@@ -1402,8 +1336,8 @@
const userName = detail.user_username ?? detail.user?.username ?? '??';
const partnerName = detail.partner_username ?? detail.partner?.username ?? '??';
// 追加公屏文字
if (typeof appendSystemMessage === 'function') {
appendSystemMessage(`💔 ${userName} 与 ${partnerName} 解除了婚姻关系。`);
if (typeof window.appendSystemMessage === 'function') {
window.appendSystemMessage(`💔 ${userName} 与 ${partnerName} 解除了婚姻关系。`);
}
// 触发全屏离婚公告弹窗(暗色阴郁风格 + 雷雨特效)
const modal = document.getElementById('marriage-divorced-modal')?._x_dataStack?.[0];
@@ -1452,14 +1386,14 @@
};
// 在包厢窗口追加提示 + 领取按钮
if (typeof appendSystemMessage === 'function') {
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>`;
appendSystemMessage(
window.appendSystemMessage(
`⚠️ 您有来自 ${env.tier_icon} ${env.groom} 与 ${env.bride}【${env.tier_name}】的婚礼红包未领取!${claimBtn}`
);
}