410 lines
26 KiB
PHP
410 lines
26 KiB
PHP
{{--
|
||
文件功能：双色球彩票前台弹窗组件
|
||
|
||
选号购票面板：
|
||
- 红球 1~12 选3 + 蓝球 1~6 选1，可机选
|
||
- 支持多注购买（单次最多10注）和追加购买
|
||
- 展示当期奖池、倒计时、本期已购记录
|
||
- 展示最近10期历史开奖号码
|
||
- 规则折叠说明卡片
|
||
|
||
@author ChatRoom Laravel
|
||
@version 1.0.0
|
||
--}}
|
||
|
||
<style>
|
||
/* 彩票选号操作按钮 hover 态，替代内联 onmouseover/onmouseout 样式。 */
|
||
.lottery-quick-pick-one:hover {
|
||
background: #dbeafe !important;
|
||
border-color: #93c5fd !important;
|
||
}
|
||
|
||
.lottery-quick-pick-many:hover {
|
||
box-shadow: 0 5px 14px rgba(217, 119, 6, .35) !important;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.lottery-clear-selection:hover {
|
||
background: #f3f4f6 !important;
|
||
}
|
||
|
||
/* 彩票弹窗通用操作按钮 hover 态，减少模板内联事件。 */
|
||
.lottery-panel-close:hover {
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
.lottery-submit-cart:hover {
|
||
opacity: .88 !important;
|
||
}
|
||
|
||
.lottery-panel-refresh:hover {
|
||
background: #dbeafe !important;
|
||
}
|
||
|
||
.lottery-panel-bottom-close:hover {
|
||
background: #f3f4f6 !important;
|
||
}
|
||
</style>
|
||
|
||
{{-- ─── 彩票面板遮罩 ─── --}}
|
||
<div id="lottery-panel" x-data="lotteryPanel()" x-show="show" x-cloak>
|
||
<div x-transition:enter="transition ease-out duration-250" x-transition:enter-start="opacity-0 scale-95"
|
||
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-180"
|
||
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,.55); z-index:9935;
|
||
display:flex; align-items:center; justify-content:center;">
|
||
|
||
<div
|
||
style="width:480px; max-width:96vw; max-height:92vh; border-radius:10px; overflow:hidden;
|
||
box-shadow:0 8px 32px rgba(0,0,0,.35); font-family:'Microsoft YaHei',SimSun,sans-serif;
|
||
background:#fff; display:flex; flex-direction:column;">
|
||
|
||
{{-- ─── 标题栏 ─── --}}
|
||
<div
|
||
style="background:linear-gradient(135deg,#dc2626,#ef4444); padding:10px 16px;
|
||
display:flex; align-items:center; justify-content:space-between; flex-shrink:0;">
|
||
<div>
|
||
<div style="color:#fff; font-weight:bold; font-size:14px;">🎟️ 双色球彩票</div>
|
||
<div style="color:rgba(255,255,255,.8); font-size:11px; margin-top:1px;">
|
||
第 <span x-text="issueNo">--</span> 期 |
|
||
<span x-text="isOpen ? '🟢 购票中' : (status === 'settled' ? '✅ 已开奖' : '🔴 已停售')"></span>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:right;">
|
||
{{-- 奖池金额 --}}
|
||
<div style="color:#fef08a; font-size:18px; font-weight:900; line-height:1;"
|
||
x-text="'💰 ' + poolAmount.toLocaleString()"></div>
|
||
{{-- 超级期标记 --}}
|
||
<div x-show="isSuperIssue" style="color:#fcd34d; font-size:10px; font-weight:bold; margin-top:2px;">
|
||
🎊
|
||
超级期</div>
|
||
{{-- 距开奖倒计时 --}}
|
||
<div x-show="!isSuperIssue && isOpen"
|
||
style="color:rgba(255,255,255,.8); font-size:10px; margin-top:2px;"
|
||
x-text="'距开奖 ' + countdownText">
|
||
</div>
|
||
</div>
|
||
<span data-lottery-panel-close class="lottery-panel-close"
|
||
style="cursor:pointer; font-size:20px; color:#fff; opacity:.8; line-height:1; margin-left:12px;">×</span>
|
||
</div>
|
||
|
||
{{-- ─── 内容区（可滚动）─── --}}
|
||
<div style="flex:1; overflow-y:auto; background:#fafafa;">
|
||
|
||
{{-- 加载中 --}}
|
||
<div x-show="loading" style="text-align:center; padding:40px 0; color:#dc2626; font-size:13px;">
|
||
<div style="font-size:28px; margin-bottom:8px;">⏳</div>加载中…
|
||
</div>
|
||
|
||
<div x-show="!loading">
|
||
|
||
{{-- ─── 规则说明折叠区 ─── --}}
|
||
<div style="border-bottom:1px solid #fee2e2; background:#fff7f7;">
|
||
<div @click="ruleOpen=!ruleOpen"
|
||
style="padding:8px 14px; display:flex; align-items:center; justify-content:space-between;
|
||
cursor:pointer; font-size:12px; color:#b91c1c; font-weight:bold; user-select:none;">
|
||
<span>📖 玩法规则</span>
|
||
<span x-text="ruleOpen ? '▲ 收起' : '▼ 展开'" style="font-size:10px; opacity:.7;"></span>
|
||
</div>
|
||
<div x-show="ruleOpen"
|
||
style="padding:0 14px 10px; font-size:11px; color:#6b7280; line-height:1.8;">
|
||
<div>🔴 <b>红球</b> 1~12 选3 · 🎲 <b>蓝球</b> 1~6 选1，每注 <b style="color:#dc2626;">100 金币</b>
|
||
</div>
|
||
<div>每期单人最多购 <b>50 注</b>，可随时追加（停售前均可）</div>
|
||
<table style="width:100%; margin-top:6px; border-collapse:collapse;">
|
||
<tr style="background:#fee2e2;">
|
||
<th style="padding:3px 6px; text-align:left; font-size:10px;">奖级</th>
|
||
<th style="padding:3px 6px; text-align:left; font-size:10px;">条件</th>
|
||
<th style="padding:3px 6px; text-align:left; font-size:10px;">奖励</th>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:2px 6px;">🏆 一等奖</td>
|
||
<td>3红+蓝</td>
|
||
<td style="color:#dc2626;">奖池 60% 均分</td>
|
||
</tr>
|
||
<tr style="background:#fff7f7;">
|
||
<td style="padding:2px 6px;">🥇 二等奖</td>
|
||
<td>3红</td>
|
||
<td style="color:#dc2626;">奖池 20% 均分</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:2px 6px;">🥈 三等奖</td>
|
||
<td>2红+蓝</td>
|
||
<td>奖池 10% 均分</td>
|
||
</tr>
|
||
<tr style="background:#fff7f7;">
|
||
<td style="padding:2px 6px;">🥉 四等奖</td>
|
||
<td>2红</td>
|
||
<td>固定 150 金/注</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:2px 6px;">🎫 五等奖</td>
|
||
<td>1红+蓝</td>
|
||
<td>固定 50 金/注</td>
|
||
</tr>
|
||
</table>
|
||
<div style="margin-top:6px; color:#9ca3af;">无一等奖 → 奖池滚存至下期；连续3期无人中 → 超级期系统注入奖池</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 已开奖结果展示 --}}
|
||
<div x-show="status === 'settled' && drawRed1"
|
||
style="padding:10px 14px; background:#fff5f5; border-bottom:1px solid #fee2e2; text-align:center;">
|
||
<div style="font-size:12px; color:#b91c1c; font-weight:bold; margin-bottom:6px;">🎊 开奖结果</div>
|
||
<div style="display:flex; justify-content:center; gap:8px; align-items:center; flex-wrap:wrap;">
|
||
<template x-for="(n, $index) in [drawRed1, drawRed2, drawRed3]" :key="$index">
|
||
<span
|
||
style="width:32px; height:32px; border-radius:50%; background:#dc2626;
|
||
color:#fff; font-weight:bold; font-size:14px;
|
||
display:flex; align-items:center; justify-content:center;"
|
||
x-text="n !== null ? String(n).padStart(2,'0') : '--'"></span>
|
||
</template>
|
||
<span style="color:#6b7280; font-size:18px; font-weight:bold;">+</span>
|
||
<span
|
||
style="width:32px; height:32px; border-radius:50%; background:#2563eb;
|
||
color:#fff; font-weight:bold; font-size:14px;
|
||
display:flex; align-items:center; justify-content:center;"
|
||
x-text="drawBlue"></span>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ─── 选号区 ─── --}}
|
||
<div x-show="isOpen" style="padding:12px 14px;">
|
||
|
||
{{-- 红球选择 --}}
|
||
<div style="margin-bottom:10px;">
|
||
<div style="font-size:12px; font-weight:bold; color:#b91c1c; margin-bottom:6px;">
|
||
🔴 红球（已选 <span x-text="selectedReds.length" style="color:#dc2626;"></span>/3）
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:repeat(6,1fr); gap:5px;">
|
||
<template x-for="n in 12" :key="n">
|
||
<button @click="toggleRed(n)"
|
||
:style="selectedReds.includes(n) ?
|
||
'background:#dc2626; color:#fff; border:2px solid #b91c1c; font-weight:bold;' :
|
||
'background:#fff; color:#dc2626; border:2px solid #fca5a5;'"
|
||
style="border-radius:50%; width:38px; height:38px; font-size:13px;
|
||
cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center;"
|
||
x-text="String(n).padStart(2,'0')">
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 蓝球选择 --}}
|
||
<div style="margin-bottom:12px;">
|
||
<div style="font-size:12px; font-weight:bold; color:#1d4ed8; margin-bottom:6px;">
|
||
🎲 蓝球（骰子点数，已选 <span x-text="selectedBlue ?? '—'" style="color:#2563eb;"></span>）
|
||
</div>
|
||
<div style="display:flex; gap:6px; flex-wrap:wrap;">
|
||
<template x-for="n in 6" :key="n">
|
||
<button @click="selectedBlue = (selectedBlue === n ? null : n)"
|
||
:style="selectedBlue === n ?
|
||
'background:#2563eb; color:#fff; border:2px solid #1d4ed8; font-weight:bold;' :
|
||
'background:#fff; color:#2563eb; border:2px solid #93c5fd;'"
|
||
style="border-radius:50%; width:38px; height:38px; font-size:16px;
|
||
cursor:pointer; transition:all .15s;"
|
||
x-text="['🎲','⚀','⚁','⚂','⚃','⚄','⚅'][n]">
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 当前选号预览 --}}
|
||
<div x-show="selectedReds.length > 0 || selectedBlue"
|
||
style="background:#fff7f7; border:1px dashed #fca5a5; border-radius:8px;
|
||
padding:8px 12px; margin-bottom:10px; font-size:12px; color:#6b7280;">
|
||
已选：
|
||
<template x-for="n in [...selectedReds].sort((a,b)=>a-b)" :key="n">
|
||
<span
|
||
style="display:inline-block; width:26px; height:26px; border-radius:50%; background:#dc2626;
|
||
color:#fff; font-size:11px; font-weight:bold; text-align:center; line-height:26px; margin:0 2px;"
|
||
x-text="String(n).padStart(2,'0')"></span>
|
||
</template>
|
||
<span x-show="selectedBlue"
|
||
style="display:inline-block; width:26px; height:26px; border-radius:50%; background:#2563eb;
|
||
color:#fff; font-size:11px; font-weight:bold; text-align:center; line-height:26px; margin-left:6px;"
|
||
x-text="selectedBlue">
|
||
</span>
|
||
</div>
|
||
|
||
{{-- 操作按钮行（机选1注 + 机选3注 + 清空选号） --}}
|
||
<div style="display:flex; gap:8px; margin-bottom:12px;">
|
||
<button @click="doQuickPick(1)" class="lottery-quick-pick-one"
|
||
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||
background:#f0f6ff; color:#336699; border:1.5px solid #c0d8ef;
|
||
cursor:pointer; transition:all .15s; font-family:inherit;">
|
||
🎲 机选
|
||
</button>
|
||
<button @click="doQuickPick(3)" class="lottery-quick-pick-many"
|
||
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||
background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; border:none;
|
||
box-shadow:0 3px 10px rgba(217,119,6,.25); cursor:pointer;
|
||
transition:all .15s; font-family:inherit;">
|
||
🎰 机选 3 注
|
||
</button>
|
||
<button type="button" @click.prevent="selectedReds=[]; selectedBlue=null; cart=[];" class="lottery-clear-selection"
|
||
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||
background:#f9fafb; color:#6b7280; border:1.5px solid #e5e7eb;
|
||
cursor:pointer; transition:all .15s; font-family:inherit;">
|
||
🗑 清空选号
|
||
</button>
|
||
</div>
|
||
|
||
{{-- 购票结果提示 --}}
|
||
<div id="lottery-buy-msg"
|
||
style="display:none; border-radius:8px; padding:8px 12px; text-align:center;
|
||
margin-bottom:4px; font-size:12px; font-weight:bold;">
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{{-- ─── 购物车（待购清单） ─── --}}
|
||
<div x-show="isOpen && cart.length > 0"
|
||
style="padding:10px 14px; border-top:1px solid #fee2e2;">
|
||
<div style="font-size:12px; font-weight:bold; color:#b91c1c; margin-bottom:6px;">
|
||
🧺 待购清单（<span x-text="cart.length"></span> 注）
|
||
</div>
|
||
<div style="max-height:120px; overflow-y:auto;">
|
||
<template x-for="(item, idx) in cart" :key="idx">
|
||
<div style="display:flex; align-items:center; justify-content:space-between;
|
||
font-size:11px; padding:4px 0; border-bottom:1px dashed #fee2e2;">
|
||
<div style="display:flex; align-items:center; gap:3px;">
|
||
<span style="color:#9ca3af; min-width:28px;" x-text="'注'+(idx+1)"></span>
|
||
<template x-for="(r, $ri) in item.reds" :key="$ri">
|
||
<span
|
||
style="width:18px; height:18px; border-radius:50%; background:#dc2626;
|
||
color:#fff; font-size:9px; text-align:center; line-height:18px;"
|
||
x-text="String(r).padStart(2,'0')"></span>
|
||
</template>
|
||
<span
|
||
style="width:18px; height:18px; border-radius:50%; background:#2563eb;
|
||
color:#fff; font-size:9px; text-align:center; line-height:18px; margin-left:2px;"
|
||
x-text="item.blue"></span>
|
||
<span x-show="item.quick" style="color:#9ca3af; font-size:10px;">机选</span>
|
||
</div>
|
||
{{-- 删除单条 --}}
|
||
<button @click="cart.splice(idx,1)"
|
||
style="background:none; border:none; color:#9ca3af; cursor:pointer;
|
||
font-size:14px; line-height:1; padding:0 2px;"
|
||
title="移除">×</button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
{{-- 确认购买 --}}
|
||
<button @click="submitCart()" class="lottery-submit-cart"
|
||
:disabled="buying"
|
||
style="margin-top:8px; width:100%; padding:10px 0; border-radius:10px; font-size:13px;
|
||
font-weight:bold; background:linear-gradient(135deg,#dc2626,#b91c1c);
|
||
color:#fff; border:none; cursor:pointer; transition:all .15s; font-family:inherit;">
|
||
<span x-text="buying ? '⏳ 购买中…' : '✅ 确认购买（' + cart.length + ' 注）'"></span>
|
||
</button>
|
||
</div>
|
||
|
||
{{-- 停售/已开奖时的提示 --}}
|
||
<div x-show="!isOpen && status !== 'settled'"
|
||
style="padding:16px 14px; text-align:center; color:#b91c1c; font-size:13px;">
|
||
🔴 本期已停售，等待开奖中…
|
||
</div>
|
||
|
||
{{-- ─── 本期我的购票记录 ─── --}}
|
||
<div x-show="myTickets.length > 0" style="padding:10px 14px; border-top:1px solid #fee2e2;">
|
||
<div style="font-size:12px; font-weight:bold; color:#b91c1c; margin-bottom:6px;">
|
||
📋 本期我的购票（<span x-text="myTickets.length"></span> 注）
|
||
</div>
|
||
<div style="max-height:120px; overflow-y:auto;">
|
||
<template x-for="(t, idx) in myTickets" :key="t.id">
|
||
<div
|
||
style="display:flex; align-items:center; justify-content:space-between;
|
||
font-size:11px; padding:4px 0; border-bottom:1px dashed #fee2e2;">
|
||
<div style="display:flex; align-items:center; gap:3px;">
|
||
<span style="color:#9ca3af; min-width:28px;" x-text="'注'+(idx+1)"></span>
|
||
<template x-for="(r, $ri) in [t.red1,t.red2,t.red3]" :key="$ri">
|
||
<span
|
||
style="width:20px; height:20px; border-radius:50%; background:#dc2626;
|
||
color:#fff; font-size:10px; text-align:center; line-height:20px;"
|
||
x-text="String(r).padStart(2,'0')"></span>
|
||
</template>
|
||
<span
|
||
style="width:20px; height:20px; border-radius:50%; background:#2563eb;
|
||
color:#fff; font-size:11px; text-align:center; line-height:20px; margin-left:2px;"
|
||
x-text="t.blue"></span>
|
||
<span x-show="t.is_quick" style="color:#9ca3af; font-size:10px;">机选</span>
|
||
</div>
|
||
{{-- 中奖标记 --}}
|
||
<span x-show="t.prize_level > 0"
|
||
style="color:#dc2626; font-weight:bold; font-size:11px;"
|
||
x-text="['','🏆一等','🥇二等','🥈三等','🥉四等','🎫五等'][t.prize_level] + ' +' + t.payout.toLocaleString()"></span>
|
||
<span x-show="t.prize_level === 0 && status === 'settled'"
|
||
style="color:#9ca3af; font-size:11px;">未中奖</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ─── 历史开奖记录 ─── --}}
|
||
<div style="padding:10px 14px; border-top:1px solid #fee2e2;">
|
||
<div style="font-size:12px; font-weight:bold; color:#b91c1c; margin-bottom:6px;">📜 近期开奖</div>
|
||
<div x-show="history.length === 0"
|
||
style="font-size:11px; color:#9ca3af; text-align:center; padding:8px 0;">
|
||
暂无历史记录
|
||
</div>
|
||
<div style="overflow-x:auto;">
|
||
<table style="width:100%; font-size:10px; border-collapse:collapse; min-width:300px;">
|
||
<tr style="background:#fee2e2; color:#b91c1c;">
|
||
<th style="padding:3px 5px; text-align:left;">期号</th>
|
||
<th style="padding:3px 5px;">开奖号码</th>
|
||
<th style="padding:3px 5px; text-align:right;">奖池</th>
|
||
</tr>
|
||
<template x-for="(h, i) in history.slice(0,8)" :key="h.issue_no">
|
||
<tr :style="i % 2 === 0 ? '' : 'background:#fff7f7;'">
|
||
<td style="padding:3px 5px; color:#6b7280;" x-text="h.issue_no"></td>
|
||
<td style="padding:3px 5px; text-align:center;">
|
||
<template x-for="(r, $ri) in [h.red1,h.red2,h.red3]"
|
||
:key="$ri">
|
||
<span
|
||
style="display:inline-block; width:18px; height:18px; border-radius:50%;
|
||
background:#dc2626; color:#fff; font-size:9px; font-weight:bold;
|
||
text-align:center; line-height:18px; margin:0 1px;"
|
||
x-text="String(r).padStart(2,'0')"></span>
|
||
</template>
|
||
<span
|
||
style="display:inline-block; width:18px; height:18px; border-radius:50%;
|
||
background:#2563eb; color:#fff; font-size:9px; font-weight:bold;
|
||
text-align:center; line-height:18px; margin-left:3px;"
|
||
x-text="h.blue"></span>
|
||
</td>
|
||
<td style="padding:3px 5px; text-align:right; color:#dc2626;"
|
||
x-text="'💰' + Number(h.pool_amount).toLocaleString()"></td>
|
||
</tr>
|
||
</template>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>{{-- /!loading --}}
|
||
</div>{{-- /内容区 --}}
|
||
|
||
{{-- ─── 底部操作栏 ─── --}}
|
||
<div
|
||
style="padding:10px 14px; background:#fff; border-top:1px solid #fee2e2;
|
||
display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
|
||
<button @click="loadData()" class="lottery-panel-refresh"
|
||
style="padding:9px 18px; border-radius:20px; font-size:12px; font-weight:bold;
|
||
background:#f0f6ff; color:#336699; border:1.5px solid #c0d8ef;
|
||
cursor:pointer; transition:all .15s; font-family:inherit;">
|
||
🔄 刷新
|
||
</button>
|
||
<button type="button" data-lottery-panel-close class="lottery-panel-bottom-close"
|
||
style="padding:9px 18px; border-radius:20px; font-size:12px; font-weight:bold;
|
||
background:#f9fafb; color:#6b7280; border:1.5px solid #e5e7eb;
|
||
cursor:pointer; transition:all .15s; font-family:inherit;">
|
||
关闭
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 双色球彩票 Alpine 组件已迁移到 resources/js/chat-room/lottery-panel.js --}}
|