99 lines
6.5 KiB
PHP
99 lines
6.5 KiB
PHP
{{--
|
||
文件功能：观看广告赚钱面板
|
||
包含 ExoClick 广告展示和倒计时领奖逻辑，基于 Alpine.js
|
||
|
||
@author ChatRoom Laravel
|
||
@version 1.0.0
|
||
--}}
|
||
<div x-data="earnPanelData()"
|
||
@open-earn-panel.window="openPanel()"
|
||
class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50"
|
||
x-show="isOpen"
|
||
x-transition.opacity
|
||
style="display: none;">
|
||
|
||
<div style="background-color: #ffffff; border-radius: 8px; width: 800px; max-width: 95vw; max-height: 84vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; position: relative;"
|
||
@click.outside="closePanel()">
|
||
|
||
{{-- 标题栏 — 与设置/商店/头像弹窗一致 --}}
|
||
<div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 8px 16px; color: white; background: linear-gradient(135deg, #336699, #5a8fc0);">
|
||
<div style="font-size: 14px; font-weight: bold; flex: 1;">💰 赚钱 - 看视频得金币经验</div>
|
||
<button @click="closePanel()" style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; line-height: 1; opacity: 0.8;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.8">×</button>
|
||
</div>
|
||
|
||
{{-- 面板内容区域 --}}
|
||
<div style="padding: 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center;">
|
||
|
||
{{-- 信息说明区域 --}}
|
||
<div style="background-color: #f0f6ff; border: 1px solid #cce0f5; border-radius: 4px; padding: 12px; margin-bottom: 16px; width: 100%; text-align: center;">
|
||
<div style="color: #336699; font-weight: bold; margin-bottom: 8px; font-size: 14px;">
|
||
完整观看视频后，即可获得 <span style="color: #d97706;">5000 金币</span> 和 <span style="color: #16a34a;">500 经验</span> 奖励！<br>
|
||
</div>
|
||
<div style="font-size: 12px; color: #6b7280;">
|
||
中途关闭视作放弃，不会扣除观影次数。每日最多获取 3 次。
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 视频广告容器 --}}
|
||
<div style="width: 100%; aspect-ratio: 16/9; background-color: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-bottom: 16px;">
|
||
|
||
{{-- video 元素常驻 DOM，preload=none 防止空闲时预加载。
|
||
必须保留 fallback source：VAST 失败时 FluidPlayer 会调用 playMainVideoWhenVastFails(),
|
||
它会 load() 到此 source，若 source 为空则找不到目标，仍会触发 AbortError。 --}}
|
||
<div id="video-wrapper" style="width: 100%; height: 100%; background-color: #000; display: flex; align-items: center; justify-content: center;">
|
||
<video id="exoclick-video" style="width: 100%; height: 100%;" playsinline preload="none">
|
||
<source src="https://cdn.fluidplayer.com/videos/valerian-1080p.mkv" type="video/mp4" />
|
||
</video>
|
||
</div>
|
||
|
||
{{-- Idle Overlay (空闲时覆盖在视频之上) --}}
|
||
{{-- 注意：不用 display:flex 居中，因为 Alpine x-show 恢复时只设 display:block 会覆盖 flex --}}
|
||
<div x-show="status === 'idle'" style="position: absolute; inset: 0; background-color: #e2e8f0; z-index: 10;">
|
||
<button @click="startWatching()" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #336699, #5a8fc0); color: #ffffff; padding: 12px 32px; border-radius: 4px; font-weight: bold; border: none; font-size: 15px; cursor: pointer; white-space: nowrap;">
|
||
▶ 开始观看
|
||
</button>
|
||
</div>
|
||
|
||
{{-- Completed Overlay (完毕覆盖层) --}}
|
||
<div x-show="status === 'completed'" style="position: absolute; inset: 0; background-color: #f0fdf4; z-index: 10;">
|
||
<span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #16a34a; font-weight: bold; font-size: 28px; white-space: nowrap;">✅ 观看完毕！</span>
|
||
</div>
|
||
|
||
{{-- Claiming Overlay (领奖覆盖层) --}}
|
||
<div x-show="status === 'claiming' || status === 'claimed'" style="position: absolute; inset: 0; background-color: #fefce8; z-index: 10;">
|
||
<div x-show="status === 'claiming'" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #d97706; font-weight: bold; font-size: 16px; white-space: nowrap;">
|
||
⏳ 正在发放奖励...
|
||
</div>
|
||
<div x-show="status === 'claimed'" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
|
||
<div style="color: #d97706; font-weight: bold; font-size: 24px;">🎉 奖励已到账</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 浮动倒计时器 --}}
|
||
<div x-show="status === 'watching'" style="position: absolute; bottom: 8px; right: 8px; background-color: rgba(0,0,0,0.6); color: white; font-family: monospace; padding: 4px 12px; border-radius: 4px; font-size: 12px; z-index: 50;">
|
||
进度: <span x-text="countdown"></span>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 底部按钮区域 --}}
|
||
<div style="width: 100%;">
|
||
<template x-if="status === 'completed'">
|
||
<button @click="claimReward()" style="width: 100%; background-color: #16a34a; color: #ffffff; padding: 10px 24px; border-radius: 4px; font-weight: bold; border: none; font-size: 14px; cursor: pointer;">
|
||
点击领取奖励
|
||
</button>
|
||
</template>
|
||
|
||
<template x-if="status === 'claimed'">
|
||
<button @click="resetPanel()" style="width: 100%; background-color: #64748b; color: #ffffff; padding: 10px 24px; border-radius: 4px; font-weight: bold; border: none; font-size: 14px; cursor: pointer;">
|
||
关闭面板
|
||
</button>
|
||
</template>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{{-- 赚钱面板 Alpine 组件与 FluidPlayer 加载已迁移到 resources/js/chat-room/earn-panel.js --}}
|