新增节日福利系统：①数据库表+模型 ②TriggerHolidayEventJob队列任务(在线用户筛选/金额分配/WebSocket广播) ③后台管理页面(列表/创建/手动触发) ④前台领取弹窗+WebSocket监听 ⑤定时调度每分钟扫描 ⑥CurrencySource补充HOLIDAY_BONUS
This commit is contained in:
@@ -94,6 +94,13 @@ export function initChat(roomId) {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("chat:wedding-celebration", { detail: e }),
|
||||
);
|
||||
})
|
||||
// ─── 节日福利：系统定时发放 ────────────────────────────────
|
||||
.listen(".holiday.started", (e) => {
|
||||
console.log("节日福利开始:", e);
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("chat:holiday.started", { detail: e }),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
191
resources/views/admin/holiday-events/create.blade.php
Normal file
191
resources/views/admin/holiday-events/create.blade.php
Normal file
@@ -0,0 +1,191 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '创建节日福利活动')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<a href="{{ route('admin.holiday-events.index') }}" class="text-gray-400 hover:text-gray-600">← 返回列表</a>
|
||||
<h2 class="text-lg font-bold text-gray-800">🎊 创建节日福利活动</h2>
|
||||
</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||||
<ul class="list-disc list-inside text-sm text-red-700 space-y-1">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('admin.holiday-events.store') }}" method="POST" x-data="holidayForm()">
|
||||
@csrf
|
||||
|
||||
{{-- 基础信息 --}}
|
||||
<div class="mb-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 mb-3 pb-2 border-b">📋 基础信息</h3>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">活动名称 <span
|
||||
class="text-red-500">*</span></label>
|
||||
<input type="text" name="name" value="{{ old('name') }}" required placeholder="例：元旦快乐🎊"
|
||||
class="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:border-amber-400 focus:ring-amber-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">活动描述 <span
|
||||
class="text-gray-400 font-normal">（可选，公屏广播时显示）</span></label>
|
||||
<textarea name="description" rows="2" placeholder="例：新年快乐！感谢大家一直以来的陪伴，送上新年礼物！"
|
||||
class="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:border-amber-400 focus:ring-amber-400">{{ old('description') }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 奖励配置 --}}
|
||||
<div class="mb-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 mb-3 pb-2 border-b">🪙 奖励配置</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">总金币奖池 <span
|
||||
class="text-red-500">*</span></label>
|
||||
<input type="number" name="total_amount" value="{{ old('total_amount', 100000) }}" required
|
||||
min="1" class="w-full border border-gray-300 rounded-lg p-2.5 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">可领取人数上限 <span
|
||||
class="text-gray-400 font-normal">（0=不限）</span></label>
|
||||
<input type="number" name="max_claimants" value="{{ old('max_claimants', 0) }}" min="0"
|
||||
class="w-full border border-gray-300 rounded-lg p-2.5 text-sm">
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-bold text-gray-600 mb-2">分配方式 <span
|
||||
class="text-red-500">*</span></label>
|
||||
<div class="flex gap-4">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="distribute_type" value="random" x-model="distributeType"
|
||||
{{ old('distribute_type', 'random') === 'random' ? 'checked' : '' }}>
|
||||
<span class="text-sm font-bold">🎲 随机分配</span>
|
||||
<span class="text-xs text-gray-400">（二倍均值算法，每人金额不同）</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="distribute_type" value="fixed" x-model="distributeType"
|
||||
{{ old('distribute_type') === 'fixed' ? 'checked' : '' }}>
|
||||
<span class="text-sm font-bold">📏 定额发放</span>
|
||||
<span class="text-xs text-gray-400">（每人相同金额）</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 随机模式配置 --}}
|
||||
<div x-show="distributeType === 'random'" class="col-span-2">
|
||||
<div class="grid grid-cols-2 gap-4 bg-purple-50 rounded-lg p-4">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">最低保底金额</label>
|
||||
<input type="number" name="min_amount" value="{{ old('min_amount', 100) }}"
|
||||
min="1" class="w-full border border-gray-300 rounded-lg p-2.5 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">单人最高上限 <span
|
||||
class="text-gray-400 font-normal">（可选）</span></label>
|
||||
<input type="number" name="max_amount" value="{{ old('max_amount') }}" min="1"
|
||||
class="w-full border border-gray-300 rounded-lg p-2.5 text-sm"
|
||||
placeholder="不填则自动计算">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 定额模式配置 --}}
|
||||
<div x-show="distributeType === 'fixed'" class="col-span-2">
|
||||
<div class="bg-blue-50 rounded-lg p-4">
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">每人固定金额 <span
|
||||
class="text-red-500">*</span></label>
|
||||
<input type="number" name="fixed_amount" value="{{ old('fixed_amount', 500) }}"
|
||||
min="1" class="w-full border border-gray-300 rounded-lg p-2.5 text-sm">
|
||||
<p class="text-xs text-gray-400 mt-1">💡 总发放 = 固定金额 × 在线人数（受最大领取人数限制）</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 时间配置 --}}
|
||||
<div class="mb-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 mb-3 pb-2 border-b">⏰ 时间配置</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">触发时间 <span
|
||||
class="text-red-500">*</span></label>
|
||||
<input type="datetime-local" name="send_at" value="{{ old('send_at') }}" required
|
||||
class="w-full border border-gray-300 rounded-lg p-2.5 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">领取有效期（分钟）</label>
|
||||
<input type="number" name="expire_minutes" value="{{ old('expire_minutes', 30) }}"
|
||||
min="1" max="1440"
|
||||
class="w-full border border-gray-300 rounded-lg p-2.5 text-sm">
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">重复方式</label>
|
||||
<select name="repeat_type" class="w-full border border-gray-300 rounded-lg p-2.5 text-sm">
|
||||
<option value="once" {{ old('repeat_type', 'once') === 'once' ? 'selected' : '' }}>仅一次
|
||||
</option>
|
||||
<option value="daily" {{ old('repeat_type') === 'daily' ? 'selected' : '' }}>每天（相同时间）
|
||||
</option>
|
||||
<option value="weekly" {{ old('repeat_type') === 'weekly' ? 'selected' : '' }}>每周（相同时间）
|
||||
</option>
|
||||
<option value="monthly" {{ old('repeat_type') === 'monthly' ? 'selected' : '' }}>
|
||||
每月（相同日期时间）</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 目标用户 --}}
|
||||
<div class="mb-6">
|
||||
<h3 class="text-sm font-bold text-gray-700 mb-3 pb-2 border-b">🎯 目标用户</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">用户范围</label>
|
||||
<select name="target_type" x-model="targetType"
|
||||
class="w-full border border-gray-300 rounded-lg p-2.5 text-sm">
|
||||
<option value="all">全部在线用户</option>
|
||||
<option value="vip">仅 VIP 用户</option>
|
||||
<option value="level">指定等级以上</option>
|
||||
</select>
|
||||
</div>
|
||||
<div x-show="targetType === 'level'">
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">最低用户等级</label>
|
||||
<input type="number" name="target_value" value="{{ old('target_value', 1) }}"
|
||||
min="1" class="w-full border border-gray-300 rounded-lg p-2.5 text-sm"
|
||||
placeholder="例：10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 提交 --}}
|
||||
<div class="flex gap-3 pt-4 border-t">
|
||||
<button type="submit"
|
||||
class="px-8 py-2.5 bg-amber-500 text-white rounded-lg font-bold hover:bg-amber-600 transition shadow-sm">
|
||||
🎊 创建活动
|
||||
</button>
|
||||
<a href="{{ route('admin.holiday-events.index') }}"
|
||||
class="px-6 py-2.5 bg-gray-100 text-gray-600 rounded-lg font-bold hover:bg-gray-200 transition">
|
||||
取消
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 节日福利创建表单 Alpine 组件
|
||||
*/
|
||||
function holidayForm() {
|
||||
return {
|
||||
distributeType: '{{ old('distribute_type', 'random') }}',
|
||||
targetType: '{{ old('target_type', 'all') }}',
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
177
resources/views/admin/holiday-events/index.blade.php
Normal file
177
resources/views/admin/holiday-events/index.blade.php
Normal file
@@ -0,0 +1,177 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '节日福利管理')
|
||||
|
||||
@section('content')
|
||||
<div class="space-y-6">
|
||||
{{-- 页头 --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex justify-between items-center">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-800">🎊 节日福利管理</h2>
|
||||
<p class="text-xs text-gray-500 mt-1">配置定时发放的节日金币福利，系统自动触发广播并分配红包。</p>
|
||||
</div>
|
||||
<a href="{{ route('admin.holiday-events.create') }}"
|
||||
class="px-5 py-2 bg-amber-500 text-white rounded-lg font-bold hover:bg-amber-600 transition text-sm shadow-sm">
|
||||
➕ 创建活动
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- 成功/错误提示 --}}
|
||||
@if (session('success'))
|
||||
<div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
|
||||
✅ {{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
@if (session('error'))
|
||||
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
|
||||
❌ {{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- 活动列表 --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 text-gray-600 text-left border-b text-xs font-bold">
|
||||
<th class="p-3 w-10">ID</th>
|
||||
<th class="p-3">活动名称</th>
|
||||
<th class="p-3 w-24">奖池</th>
|
||||
<th class="p-3 w-20">分配方式</th>
|
||||
<th class="p-3 w-20">限额人数</th>
|
||||
<th class="p-3 w-36">触发时间</th>
|
||||
<th class="p-3 w-16">重复</th>
|
||||
<th class="p-3 w-16">状态</th>
|
||||
<th class="p-3 w-16">启用</th>
|
||||
<th class="p-3 w-40 text-right">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($events as $event)
|
||||
<tr class="border-b hover:bg-gray-50 {{ !$event->enabled ? 'opacity-50' : '' }}">
|
||||
<td class="p-3 text-gray-400">{{ $event->id }}</td>
|
||||
<td class="p-3">
|
||||
<div class="font-bold text-gray-800">{{ $event->name }}</div>
|
||||
@if ($event->description)
|
||||
<div class="text-xs text-gray-400 mt-0.5">{{ Str::limit($event->description, 40) }}
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
<td class="p-3 font-bold text-amber-600">
|
||||
🪙 {{ number_format($event->total_amount) }}
|
||||
</td>
|
||||
<td class="p-3">
|
||||
@if ($event->distribute_type === 'random')
|
||||
<span
|
||||
class="px-2 py-0.5 rounded-full bg-purple-100 text-purple-700 text-xs">随机</span>
|
||||
@else
|
||||
<span class="px-2 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs">定额
|
||||
{{ number_format($event->fixed_amount) }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="p-3 text-gray-600">
|
||||
{{ $event->max_claimants === 0 ? '不限' : $event->max_claimants . ' 人' }}
|
||||
</td>
|
||||
<td class="p-3 text-gray-600 text-xs">
|
||||
{{ $event->send_at->format('m-d H:i') }}
|
||||
</td>
|
||||
<td class="p-3">
|
||||
@php
|
||||
$repeatLabels = [
|
||||
'once' => '一次',
|
||||
'daily' => '每天',
|
||||
'weekly' => '每周',
|
||||
'monthly' => '每月',
|
||||
'cron' => 'CRON',
|
||||
];
|
||||
@endphp
|
||||
<span
|
||||
class="text-xs text-gray-500">{{ $repeatLabels[$event->repeat_type] ?? '-' }}</span>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
@php
|
||||
$statusMap = [
|
||||
'pending' => ['待触发', 'bg-yellow-100 text-yellow-700'],
|
||||
'active' => ['领取中', 'bg-green-100 text-green-700'],
|
||||
'completed' => ['已结束', 'bg-gray-100 text-gray-500'],
|
||||
'cancelled' => ['已取消', 'bg-red-100 text-red-600'],
|
||||
];
|
||||
[$label, $cls] = $statusMap[$event->status] ?? [
|
||||
'未知',
|
||||
'bg-gray-100 text-gray-500',
|
||||
];
|
||||
@endphp
|
||||
<span
|
||||
class="px-2 py-0.5 rounded-full text-xs {{ $cls }}">{{ $label }}</span>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<button onclick="toggleHoliday({{ $event->id }}, this)"
|
||||
class="text-xs px-2 py-1 rounded {{ $event->enabled ? 'bg-green-100 text-green-700' : 'bg-gray-200 text-gray-500' }} cursor-pointer">
|
||||
{{ $event->enabled ? '启用' : '禁用' }}
|
||||
</button>
|
||||
</td>
|
||||
<td class="p-3 text-right space-x-2">
|
||||
{{-- 手动触发 --}}
|
||||
@if ($event->status === 'pending')
|
||||
<form action="{{ route('admin.holiday-events.trigger-now', $event) }}"
|
||||
method="POST" class="inline" onsubmit="return confirm('确定立即触发此活动吗？')">
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="text-xs px-3 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 font-bold">
|
||||
▶ 立即触发
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
<a href="{{ route('admin.holiday-events.edit', $event) }}"
|
||||
class="text-xs px-3 py-1 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 font-bold">编辑</a>
|
||||
<form action="{{ route('admin.holiday-events.destroy', $event) }}" method="POST"
|
||||
class="inline" onsubmit="return confirm('确定删除此活动吗？')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit"
|
||||
class="text-xs px-3 py-1 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 font-bold">删除</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="10" class="p-10 text-center text-gray-400">
|
||||
暂无节日福利活动，<a href="{{ route('admin.holiday-events.create') }}"
|
||||
class="text-amber-500 font-bold">立即创建一个</a>？
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@if ($events->hasPages())
|
||||
<div class="p-4 border-t">{{ $events->links() }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换节日活动启用/禁用状态
|
||||
*/
|
||||
function toggleHoliday(id, btn) {
|
||||
fetch(`/admin/holiday-events/${id}/toggle`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.ok) {
|
||||
btn.textContent = data.enabled ? '启用' : '禁用';
|
||||
btn.className = data.enabled ?
|
||||
'text-xs px-2 py-1 rounded bg-green-100 text-green-700 cursor-pointer' :
|
||||
'text-xs px-2 py-1 rounded bg-gray-200 text-gray-500 cursor-pointer';
|
||||
btn.closest('tr').classList.toggle('opacity-50', !data.enabled);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@@ -135,6 +135,8 @@
|
||||
@include('chat.partials.user-actions')
|
||||
{{-- ═══════════ 婚姻系统弹窗组件 ═══════════ --}}
|
||||
@include('chat.partials.marriage-modals')
|
||||
{{-- ═══════════ 节日福利弹窗组件 ═══════════ --}}
|
||||
@include('chat.partials.holiday-modal')
|
||||
|
||||
{{-- 全屏特效系统：管理员烟花/下雨/雷电/下雪 --}}
|
||||
<script src="/js/effects/effect-sounds.js"></script>
|
||||
|
||||
225
resources/views/chat/partials/holiday-modal.blade.php
Normal file
225
resources/views/chat/partials/holiday-modal.blade.php
Normal file
@@ -0,0 +1,225 @@
|
||||
{{--
|
||||
文件功能：节日福利弹窗组件
|
||||
|
||||
后台配置的节日活动触发时，通过 WebSocket 广播到达前端，
|
||||
弹出全屏福利领取弹窗，用户点击领取后金币自动入账。
|
||||
|
||||
WebSocket 监听：chat:holiday.started
|
||||
领取接口：POST /holiday/{event}/claim
|
||||
--}}
|
||||
|
||||
{{-- ─── 节日福利领取弹窗 ─── --}}
|
||||
<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 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>
|
||||
|
||||
{{-- 有效期 --}}
|
||||
<div style="color:rgba(254,243,199,.55); font-size:11px; margin-bottom:14px;">
|
||||
领取有效期 <strong style="color:#fcd34d;" x-text="expiresIn"></strong>，过期作废
|
||||
</div>
|
||||
|
||||
{{-- 领取按钮 --}}
|
||||
<div x-show="!claimed">
|
||||
<div style="background:rgba(0,0,0,.3); border-radius:16px; padding:5px;">
|
||||
<button x-on:click="doClaim()" :disabled="claiming"
|
||||
style="display:block; width:100%; padding:14px 0; border:none; border-radius:12px;
|
||||
font-size:16px; font-weight:bold; cursor:pointer; transition:all .15s;
|
||||
letter-spacing:1px; color:#fff;"
|
||||
: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>
|
||||
</button>
|
||||
</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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 节日福利弹窗组件
|
||||
* 监听 WebSocket 事件 holiday.started，弹出领取弹窗
|
||||
*/
|
||||
function holidayEventModal() {
|
||||
return {
|
||||
show: false,
|
||||
claiming: false,
|
||||
claimed: false,
|
||||
|
||||
// 活动数据
|
||||
eventId: null,
|
||||
eventName: '',
|
||||
eventDesc: '',
|
||||
totalAmount: 0,
|
||||
maxClaimants: 0,
|
||||
distributeType: 'random',
|
||||
fixedAmount: null,
|
||||
expiresAt: null,
|
||||
expiresIn: '',
|
||||
claimedAmount: 0,
|
||||
|
||||
/**
|
||||
* 打开弹窗并填充活动数据
|
||||
*/
|
||||
open(detail) {
|
||||
this.eventId = detail.event_id;
|
||||
this.eventName = detail.name ?? '节日福利';
|
||||
this.eventDesc = detail.description ?? '';
|
||||
this.totalAmount = detail.total_amount ?? 0;
|
||||
this.maxClaimants = detail.max_claimants ?? 0;
|
||||
this.distributeType = detail.distribute_type ?? 'random';
|
||||
this.fixedAmount = detail.fixed_amount;
|
||||
this.expiresAt = detail.expires_at ? new Date(detail.expires_at) : null;
|
||||
this.claimed = false;
|
||||
this.claiming = false;
|
||||
this.claimedAmount = 0;
|
||||
this.updateExpiresIn();
|
||||
this.show = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭弹窗
|
||||
*/
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新有效期显示文字
|
||||
*/
|
||||
updateExpiresIn() {
|
||||
if (!this.expiresAt) {
|
||||
this.expiresIn = '30 分钟';
|
||||
return;
|
||||
}
|
||||
const diff = Math.max(0, Math.round((this.expiresAt - Date.now()) / 60000));
|
||||
this.expiresIn = diff > 0 ? diff + ' 分钟' : '即将过期';
|
||||
},
|
||||
|
||||
/**
|
||||
* 发起领取请求
|
||||
*/
|
||||
async doClaim() {
|
||||
if (this.claiming || this.claimed || !this.eventId) return;
|
||||
this.claiming = true;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/holiday/${this.eventId}/claim`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
|
||||
},
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
this.claimed = true;
|
||||
this.claimedAmount = data.amount || 0;
|
||||
} else {
|
||||
window.chatDialog?.alert(data.message || '领取失败，请稍后重试。', '提示', '#f59e0b');
|
||||
if (data.message?.includes('已结束') || data.message?.includes('过期')) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
window.chatDialog?.alert('网络异常，请稍后重试。', '错误', '#cc4444');
|
||||
}
|
||||
|
||||
this.claiming = false;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// ─── WebSocket 事件监听：节日福利开始 ─────────────────────────
|
||||
window.addEventListener('chat:holiday.started', (e) => {
|
||||
const detail = e.detail;
|
||||
|
||||
// 公屏追加系统消息
|
||||
if (typeof appendSystemMessage === 'function') {
|
||||
const typeLabel = detail.distribute_type === 'fixed' ?
|
||||
`每人固定 ${Number(detail.fixed_amount).toLocaleString()} 金币` :
|
||||
'随机金额';
|
||||
const quotaText = detail.max_claimants > 0 ? `前 ${detail.max_claimants} 名` : '全体';
|
||||
appendSystemMessage(
|
||||
`🎊 【${detail.name}】节日福利开始啦！总奖池 🪙${Number(detail.total_amount).toLocaleString()} 金币，${typeLabel}，${quotaText}在线用户可领取！`
|
||||
);
|
||||
}
|
||||
|
||||
// 弹出全屏领取弹窗
|
||||
const el = document.getElementById('holiday-event-modal');
|
||||
if (el) Alpine.$data(el).open(detail);
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user