136 lines
7.6 KiB
PHP
136 lines
7.6 KiB
PHP
{{--
|
|
文件功能：节日福利弹窗组件
|
|
|
|
后台配置的节日福利批次触发时，通过 WebSocket 广播到达前端，
|
|
弹出全屏福利领取弹窗，用户点击领取后金币自动入账。
|
|
|
|
WebSocket 监听：chat:holiday.started
|
|
领取接口：POST /holiday/runs/{run}/claim
|
|
状态接口：GET /holiday/runs/{run}/status
|
|
--}}
|
|
|
|
{{-- ─── 节日福利领取弹窗 ─── --}}
|
|
<div id="holiday-event-modal" x-data="holidayEventModal()" x-show="show" x-cloak>
|
|
<div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
|
|
style="position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:9950; display:flex; align-items:center; justify-content:center;">
|
|
|
|
<div
|
|
style="width:400px; max-width:95vw; border-radius:24px; overflow:hidden; text-align:center;
|
|
box-shadow:0 24px 80px rgba(245,158,11,.4);">
|
|
|
|
{{-- 顶部渐变区域 --}}
|
|
<div style="background:linear-gradient(145deg,#92400e,#b45309,#d97706); padding:28px 24px 20px;">
|
|
{{-- 主图标动效 --}}
|
|
<div style="font-size:56px; margin-bottom:10px; animation:holiday-bounce 1.2s infinite;">🎊</div>
|
|
<div x-show="roundLabel"
|
|
style="display:none; margin-bottom:10px; color:#fde68a; font-size:11px; font-weight:bold; letter-spacing:1px;"
|
|
x-text="roundLabel"></div>
|
|
<div style="color:#fef3c7; font-weight:bold; font-size:20px; margin-bottom:4px;" x-text="eventName">
|
|
</div>
|
|
<div style="color:rgba(254,243,199,.8); font-size:13px;" x-text="eventDesc"></div>
|
|
</div>
|
|
|
|
{{-- 主体内容 --}}
|
|
<div style="background:linear-gradient(160deg,#7c2d12,#9a3412); padding:20px 24px;">
|
|
|
|
{{-- 奖池信息 --}}
|
|
<div style="background:rgba(0,0,0,.25); border-radius:14px; padding:12px 16px; margin-bottom:16px;">
|
|
<div style="color:rgba(254,243,199,.6); font-size:11px; margin-bottom:4px;">💰 本轮节日奖池</div>
|
|
<div style="color:#fcd34d; font-size:24px; font-weight:bold;"
|
|
x-text="totalAmount.toLocaleString() + ' 金币'"></div>
|
|
<div style="color:rgba(254,243,199,.5); font-size:11px; margin-top:4px;">
|
|
<span x-show="maxClaimants > 0" x-text="'前 ' + maxClaimants + ' 名在线用户可领取'"></span>
|
|
<span x-show="maxClaimants === 0">全体在线用户均可领取</span>
|
|
</div>
|
|
<div style="color:rgba(254,243,199,.5); font-size:11px; margin-top:4px;">
|
|
<span x-show="distributeType === 'fixed' && fixedAmount !== null"
|
|
x-text="'每人固定 ' + Number(fixedAmount).toLocaleString() + ' 金币'"></span>
|
|
<span x-show="distributeType !== 'fixed' || fixedAmount === null">本轮按随机金额发放</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 有效期 --}}
|
|
<div style="color:rgba(254,243,199,.55); font-size:11px; margin-bottom:14px;">
|
|
<div x-show="scheduledForText" style="display:none; margin-bottom:4px;">
|
|
发放时间 <strong style="color:#fcd34d;" x-text="scheduledForText"></strong>
|
|
</div>
|
|
领取有效期 <strong style="color:#fcd34d;" x-text="expiresIn"></strong>，过期作废
|
|
<div x-show="statusHint" style="display:none; margin-top:6px;" x-text="statusHint"></div>
|
|
</div>
|
|
|
|
{{-- 领取按钮 --}}
|
|
<div x-show="!claimed">
|
|
<div style="background:rgba(0,0,0,.26); border-radius:999px; padding:10px 16px; margin-top:6px;">
|
|
<div style="display:flex; justify-content:center;">
|
|
<button x-on:click="doClaim()" :disabled="claiming || loadingStatus || !claimable"
|
|
onmouseover="if(!this.disabled)this.style.transform='translateY(-2px) scale(1.04)'"
|
|
onmouseout="this.style.transform=''"
|
|
:style="claiming || loadingStatus || !claimable
|
|
?
|
|
'min-width:220px; padding:12px 28px; border-radius:999px; border:none; cursor:not-allowed; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; transition:all .25s; font-size:18px; font-weight:900; letter-spacing:1px; background:#c8b89a; color:rgba(100,50,20,.45); box-shadow:none;'
|
|
:
|
|
'min-width:220px; padding:12px 28px; border-radius:999px; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; transition:all .25s; font-size:18px; font-weight:900; letter-spacing:1px; background:#f5e6c8; color:#8b3a1a; box-shadow:0 8px 28px rgba(0,0,0,.28), inset 0 -4px 10px rgba(139,58,26,.12); animation:holiday-claim-pulse 1.8s ease-in-out infinite;'">
|
|
<span style="font-size:22px; line-height:1;">🎁</span>
|
|
<span x-text="claimButtonText()"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 已领取 --}}
|
|
<div x-show="claimed" style="display:none;">
|
|
<div style="font-size:36px; 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>
|
|
</div>
|
|
|
|
{{-- 关闭按钮 --}}
|
|
<div style="background:rgba(120,40,10,.95); padding:14px 20px;">
|
|
<button x-on:click="close()"
|
|
style="padding:9px 32px; background:rgba(0,0,0,.35); border:none; border-radius:30px;
|
|
font-size:12px; color:rgba(254,243,199,.7); cursor:pointer; transition:all .2s;"
|
|
onmouseover="this.style.background='rgba(0,0,0,.5)'"
|
|
onmouseout="this.style.background='rgba(0,0,0,.35)'">
|
|
<span x-text="claimed ? '收好了 ✨' : '关闭'"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes holiday-bounce {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
|
|
25% {
|
|
transform: scale(1.1) rotate(-5deg);
|
|
}
|
|
|
|
75% {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
}
|
|
|
|
@keyframes holiday-claim-pulse {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 8px 28px rgba(0, 0, 0, .28), inset 0 -4px 10px rgba(139, 58, 26, .12);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 10px 34px rgba(245, 230, 200, .18), 0 12px 30px rgba(0, 0, 0, .32), inset 0 -4px 10px rgba(139, 58, 26, .16);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
{{-- 节日福利弹窗 Alpine 组件和广播监听已迁移到 resources/js/chat-room/holiday-modal.js --}}
|