功能更新与UI优化：游戏图标移除、用户名片修复、婚礼红包界面重设计
- 移除聊天室右下角浮动游戏图标（占卜、百家乐、赛马、老虎机） - 用户名片按钮区：修复已婚/已好友时按钮换行问题，统一单行显示 - 婚礼红包弹窗：重设计为喜庆鲜红背景，领取按钮改为圆形米黄样式 - 新增婚礼红包恢复接口（/wedding/pending-envelopes），刷新后自动恢复领取按钮 - 修复 Alpine :style 字符串覆盖静态 style 导致圆形按钮失效的问题 - 撤职后用户等级改为根据经验值重新计算，不再无条件重置为1 - 管理员修改用户经验值后自动重算等级，有职务用户等级锁定 - 娱乐大厅钓鱼游戏按钮直接调用 startFishing() 简化操作流程 - 新增赛马、占卜、百家乐游戏及相关后端逻辑
This commit is contained in:
@@ -611,49 +611,54 @@
|
||||
style="position:fixed; inset:0; background:rgba(0,0,0,.6);
|
||||
z-index:9910; display:flex; align-items:center; justify-content:center;">
|
||||
<div
|
||||
style="width:380px; max-width:95vw; background:linear-gradient(160deg,#7c2d12,#9a3412);
|
||||
border-radius:20px; box-shadow:0 24px 80px rgba(220,38,38,.5); overflow:hidden; text-align:center;
|
||||
border:1px solid rgba(251,146,60,.3);">
|
||||
<div style="padding:24px 20px 16px;">
|
||||
<div style="font-size:52px; margin-bottom:8px; animation:pulse 1.5s infinite;">🧧</div>
|
||||
<div style="color:#fef3c7; font-weight:bold; font-size:18px; margin-bottom:4px;" x-text="title"></div>
|
||||
<div style="color:rgba(254,243,199,.7); font-size:12px; margin-bottom:16px;" x-text="subTitle"></div>
|
||||
style="width:380px; max-width:95vw;
|
||||
background:linear-gradient(160deg,#c0392b,#e74c3c,#c0392b);
|
||||
border-radius:20px; overflow:hidden; text-align:center;
|
||||
box-shadow:0 24px 80px rgba(231,76,60,.65), 0 0 0 1px rgba(255,210,100,.25);
|
||||
border:1px solid rgba(255,210,100,.3);">
|
||||
<div style="padding:28px 20px 12px;">
|
||||
<div style="font-size:56px; margin-bottom:8px; animation:pulse 1.5s infinite;">🧧</div>
|
||||
<div style="color:#fff8dc; font-weight:bold; font-size:18px; margin-bottom:4px; text-shadow:0 1px 4px rgba(0,0,0,.3);"
|
||||
x-text="title"></div>
|
||||
<div style="color:rgba(255,248,220,.75); font-size:12px; margin-bottom:8px;" x-text="subTitle"></div>
|
||||
|
||||
{{-- 未领取 --}}
|
||||
<div x-show="!claimed" style="display:none;">
|
||||
<div style="color:rgba(254,243,199,.5); font-size:11px; margin-bottom:14px;">
|
||||
<div style="color:rgba(255,248,220,.55); font-size:11px; margin-bottom:20px;">
|
||||
红包有效期 <strong style="color:#fcd34d;">24小时</strong>，过期自动消失
|
||||
</div>
|
||||
{{-- 仿"同意离婚"按钮：深色外框 + 内部实心颜色按钮 --}}
|
||||
<div style="background:rgba(0,0,0,.35); border-radius:18px; padding:6px; margin-bottom:4px;">
|
||||
|
||||
{{-- 圆形领取按钮（仿「開」按钮，全样式写入 :style 避免 Alpine 覆盖） --}}
|
||||
<div style="display:flex; justify-content:center; margin-bottom:20px;">
|
||||
<button x-on:click="doClaim()" :disabled="claiming"
|
||||
style="display:block; width:100%; padding:14px 0; border:none;
|
||||
border-radius:13px; font-size:16px; font-weight:bold;
|
||||
cursor:pointer; transition:all .15s; letter-spacing:1px; color:#fff;"
|
||||
onmouseover="if(!this.disabled)this.style.transform='scale(1.08)'"
|
||||
onmouseout="this.style.transform=''"
|
||||
:style="claiming
|
||||
?
|
||||
'background:#b45309; opacity:.65; cursor:not-allowed;' :
|
||||
'background:#d97706; box-shadow:0 2px 12px rgba(0,0,0,.4);'"
|
||||
onmouseover="if(!this.disabled) this.style.filter='brightness(1.12)'"
|
||||
onmouseout="this.style.filter=''">
|
||||
<span x-text="claiming ? '领取中…' : '🧧 点击领取红包'"></span>
|
||||
'width:130px; height:130px; border-radius:50%; border:none; cursor:not-allowed; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-sizing:border-box; transition:all .25s; font-size:28px; font-weight:900; letter-spacing:2px; background:#c8b89a; color:rgba(100,50,20,.45); box-shadow:none;' :
|
||||
'width:130px; height:130px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-sizing:border-box; transition:all .25s; font-size:28px; font-weight:900; letter-spacing:2px; background:#f5e6c8; color:#8b3a1a; box-shadow:0 6px 28px rgba(0,0,0,.35), inset 0 -4px 10px rgba(139,58,26,.12); animation:grab-btn-pulse 1.8s ease-in-out infinite;'">
|
||||
<span x-text="claiming ? '…' : '领取'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{-- 已领取 --}}
|
||||
<div x-show="claimed" style="display:none;">
|
||||
<div style="font-size:36px; margin-bottom:6px; color:#fcd34d; font-weight:bold;"
|
||||
<div x-show="claimed" style="display:none; padding-bottom:8px;">
|
||||
<div style="font-size:40px; margin-bottom:6px; color:#fcd34d; font-weight:bold;"
|
||||
x-text="'+' + claimedAmount.toLocaleString() + ' 金'"></div>
|
||||
<div style="color:#fef3c7; font-size:13px;">🎉 恭喜你领取了红包！</div>
|
||||
<div style="color:rgba(254,243,199,.6); font-size:11px; margin-top:4px;">金币已自动到账</div>
|
||||
<div style="color:#fff8dc; font-size:13px;">🎉 恭喜你领取了红包！</div>
|
||||
<div style="color:rgba(255,248,220,.6); font-size:11px; margin-top:4px;">金币已自动到账</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 20px 20px;">
|
||||
|
||||
{{-- 关闭按钮 --}}
|
||||
<div style="padding:0 20px 24px; display:flex; justify-content:center;">
|
||||
<button x-on:click="close()"
|
||||
style="padding:10px 32px; background:rgba(0,0,0,.3); border:none; border-radius:30px;
|
||||
font-size:12px; color:rgba(254,243,199,.7); cursor:pointer;">
|
||||
style="width:200px; padding:12px 0; background:rgba(0,0,0,.3); border:none; border-radius:30px;
|
||||
font-size:13px; color:rgba(255,248,220,.8); cursor:pointer; letter-spacing:1px;
|
||||
transition:background .15s;"
|
||||
onmouseover="this.style.background='rgba(0,0,0,.48)'"
|
||||
onmouseout="this.style.background='rgba(0,0,0,.3)'">
|
||||
<span x-text="claimed ? '收下啦 ✨' : '关闭'"></span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -661,6 +666,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
@keyframes pulse {
|
||||
|
||||
@@ -1412,5 +1418,55 @@
|
||||
// 延迟初始化，确保 Echo 已就绪
|
||||
setTimeout(() => window.initMarriagePrivateChannel(userId), 1500);
|
||||
}
|
||||
|
||||
// ── 页面刷新后恢复婚礼红包领取按钮 ─────────────────────────
|
||||
// 延迟 2 秒以确保聊天框和 Alpine 均已完成初始化
|
||||
setTimeout(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 appendSystemMessage === 'function') {
|
||||
const claimBtn = `<button onclick="(function(){var d=window._weddingEnvelopes[${ceremonyId}];var el=document.getElementById('wedding-envelope-modal');if(el&&d)Alpine.$data(el).open(d);})()"
|
||||
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(
|
||||
`⚠️ 您有来自 ${env.tier_icon} ${env.groom} 与 ${env.bride}【${env.tier_name}】的婚礼红包未领取！${claimBtn}`
|
||||
);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('[婚礼红包] 恢复待领取按钮失败', e);
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user