357 lines
12 KiB
PHP
Executable File
357 lines
12 KiB
PHP
Executable File
<?php
|
|
/**
|
|
* Xóc Đĩa 投注面板组件
|
|
* 从 xocdia.php 提取，可在 live.php 中复用
|
|
*
|
|
* 依赖变量：
|
|
* - $oddsList (array): 赔率列表
|
|
* - $game (array): 游戏信息
|
|
* - $currentPeriod (array): 当前期号
|
|
*/
|
|
|
|
// 赔率查找辅助函数
|
|
$getOdds = function($type, $target = 'all') use ($oddsList) {
|
|
if (!empty($oddsList)) {
|
|
foreach ($oddsList as $item) {
|
|
if ($item['type'] == $type && $item['target'] == $target) {
|
|
return (float)$item['odds'] == (int)$item['odds'] ? (int)$item['odds'] : $item['odds'];
|
|
}
|
|
}
|
|
}
|
|
// 默认值（防止赔率未配置）
|
|
if ($type == 'chan' || $type == 'le') return 0.96;
|
|
if ($type == 'exact') {
|
|
if (in_array($target, ['4red', '4white'])) return 10.0;
|
|
if (in_array($target, ['3red1white', '3white1red'])) return 3.5;
|
|
}
|
|
return 1;
|
|
};
|
|
?>
|
|
|
|
<style>
|
|
/* Xoc Dia Specific Styles */
|
|
.xocdia-top-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.xocdia-big-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
border: 2px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.xocdia-big-btn:hover {
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.xocdia-big-btn.bet-chan {
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
|
|
box-shadow: 0 4px 15px rgba(30, 58, 138, 0.4);
|
|
}
|
|
|
|
.xocdia-big-btn.bet-le {
|
|
background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
|
|
box-shadow: 0 4px 15px rgba(185, 28, 28, 0.4);
|
|
}
|
|
|
|
.xocdia-title {
|
|
font-size: 28px;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
|
margin-bottom: 4px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.xocdia-subtitle {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.8);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.xocdia-odds {
|
|
background: rgba(0,0,0,0.3);
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #ffd700;
|
|
border: 1px solid rgba(255,215,0,0.3);
|
|
}
|
|
|
|
.xocdia-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.xocdia-cell {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 12px;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
min-height: 80px;
|
|
position: relative;
|
|
}
|
|
|
|
.xocdia-cell:hover {
|
|
transform: translateY(-2px);
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.xocdia-dots {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 4px;
|
|
width: 28px;
|
|
}
|
|
|
|
.dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
box-shadow: inset 0 -1px 2px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.dot.red {
|
|
background-color: #ef4444;
|
|
border: 1px solid #dc2626;
|
|
}
|
|
|
|
.dot.white {
|
|
background-color: #fff;
|
|
border: 1px solid #cbd5e1;
|
|
}
|
|
|
|
.xocdia-label {
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: #334155;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.xocdia-cell .bet-odds-mini {
|
|
margin-top: 0;
|
|
background: rgba(0,0,0,0.05);
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Mobile Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.xocdia-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.xocdia-top-row {
|
|
min-height: 80px;
|
|
}
|
|
}
|
|
|
|
/* PC Adjustments */
|
|
@media (min-width: 769px) {
|
|
.xocdia-top-row {
|
|
min-height: 120px;
|
|
}
|
|
.xocdia-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Xóc Đĩa 投注面板 -->
|
|
<div class="live-panel bet-panel bet-panel-v2" style="position: relative;">
|
|
<!-- 状态遮罩层 -->
|
|
<div id="betOverlay" class="bet-overlay" style="position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: 50; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 16px;">
|
|
<div id="countdownDisplay" class="countdown-number" style="display: none; font-size: 64px; color: #ffeb3b; font-weight: bold; text-shadow: 0 0 20px rgba(255,235,59,0.8);"></div>
|
|
<div id="statusDisplay" class="status-text" style="color: #fff; font-size: 24px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px;">⏱️ ĐANG TẢI...</div>
|
|
</div>
|
|
|
|
<!-- 倒计时 -->
|
|
<div id="activeCountdown" style="text-align: right; margin-bottom: 10px; font-weight: bold; color: #333;">
|
|
<i class="fa-regular fa-clock"></i> <span id="activeTimer" style="color: #d93025; font-size: 18px;">60</span>s
|
|
</div>
|
|
|
|
<!-- 主要玩法：双/单 -->
|
|
<div class="xocdia-top-row">
|
|
<div class="xocdia-big-btn bet-chan" data-bet-type="chan" data-bet-value="all" data-odds="<?= $getOdds('chan', 'all') ?>">
|
|
<div class="xocdia-title">CHẴN</div>
|
|
<div class="xocdia-subtitle">4 Đỏ, 4 Trắng, 2 Đỏ 2 Trắng</div>
|
|
<div class="xocdia-odds">1:<?= $getOdds('chan', 'all') ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
<div class="xocdia-big-btn bet-le" data-bet-type="le" data-bet-value="all" data-odds="<?= $getOdds('le', 'all') ?>">
|
|
<div class="xocdia-title">LẺ</div>
|
|
<div class="xocdia-subtitle">3 Đỏ 1 Trắng, 3 Trắng 1 Đỏ</div>
|
|
<div class="xocdia-odds">1:<?= $getOdds('le', 'all') ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 精确颜色组合 -->
|
|
<div class="xocdia-grid">
|
|
<div class="xocdia-cell" data-bet-type="exact" data-bet-value="4red" data-odds="<?= $getOdds('exact', '4red') ?>">
|
|
<div class="xocdia-dots">
|
|
<span class="dot red"></span><span class="dot red"></span>
|
|
<span class="dot red"></span><span class="dot red"></span>
|
|
</div>
|
|
<div class="xocdia-label">4 ĐỎ</div>
|
|
<div class="bet-odds-mini">1:<?= $getOdds('exact', '4red') ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
<div class="xocdia-cell" data-bet-type="exact" data-bet-value="3red1white" data-odds="<?= $getOdds('exact', '3red1white') ?>">
|
|
<div class="xocdia-dots">
|
|
<span class="dot red"></span><span class="dot red"></span>
|
|
<span class="dot red"></span><span class="dot white"></span>
|
|
</div>
|
|
<div class="xocdia-label">3 ĐỎ 1 TRẮNG</div>
|
|
<div class="bet-odds-mini">1:<?= $getOdds('exact', '3red1white') ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
<div class="xocdia-cell" data-bet-type="exact" data-bet-value="3white1red" data-odds="<?= $getOdds('exact', '3white1red') ?>">
|
|
<div class="xocdia-dots">
|
|
<span class="dot white"></span><span class="dot white"></span>
|
|
<span class="dot white"></span><span class="dot red"></span>
|
|
</div>
|
|
<div class="xocdia-label">3 TRẮNG 1 ĐỎ</div>
|
|
<div class="bet-odds-mini">1:<?= $getOdds('exact', '3white1red') ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
<div class="xocdia-cell" data-bet-type="exact" data-bet-value="4white" data-odds="<?= $getOdds('exact', '4white') ?>">
|
|
<div class="xocdia-dots">
|
|
<span class="dot white"></span><span class="dot white"></span>
|
|
<span class="dot white"></span><span class="dot white"></span>
|
|
</div>
|
|
<div class="xocdia-label">4 TRẮNG</div>
|
|
<div class="bet-odds-mini">1:<?= $getOdds('exact', '4white') ?></div>
|
|
<div class="bet-amount-display" style="display:none"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="bet-actions bet-actions-v2">
|
|
<button class="bet-action bet-action-green" type="button" id="confirmBetBtn">
|
|
<i class="fa-solid fa-check"></i> <span>ĐẶT CƯỢC</span>
|
|
</button>
|
|
<button class="bet-action bet-action-red" type="button" id="cancelBetBtn">
|
|
<i class="fa-solid fa-xmark"></i> <span>HỦY</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 筹码选择 -->
|
|
<div class="bet-chips bet-chips-v2">
|
|
<button class="bet-chip-btn" data-amount="100000" data-label="100K">
|
|
<div class="bet-chip-display chip-red">100K</div>
|
|
</button>
|
|
<button class="bet-chip-btn" data-amount="500000" data-label="500K">
|
|
<div class="bet-chip-display chip-blue">500K</div>
|
|
</button>
|
|
<button class="bet-chip-btn" data-amount="1000000" data-label="1M">
|
|
<div class="bet-chip-display chip-gold">1M</div>
|
|
</button>
|
|
<button class="bet-chip-btn" data-amount="5000000" data-label="5M">
|
|
<div class="bet-chip-display chip-green">5M</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Xóc Đĩa 投注逻辑（使用全局 betState）
|
|
// 确保这段代码只在 Xóc Đĩa 游戏时执行
|
|
if (typeof window.xocdiaInitialized === 'undefined') {
|
|
window.xocdiaInitialized = true;
|
|
|
|
// 等待 live.php 的主脚本加载完成
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
layui.use(['layer'], function(){
|
|
var layer = layui.layer;
|
|
|
|
// 使用全局 betState（由 live.php 创建）
|
|
// 不要创建新的 betState，避免冲突
|
|
|
|
// 筹码选择已经由 live.php 处理，不需要重复绑定
|
|
|
|
// --- Bet Placement (Xóc Đĩa specific) ---
|
|
document.querySelectorAll('.xocdia-big-btn, .xocdia-cell').forEach(el => {
|
|
el.addEventListener('click', function() {
|
|
// 使用全局 betState
|
|
if(!window.betState || !window.betState.selectedChip) {
|
|
layer.msg('Vui lòng chọn chip (số tiền) trước!');
|
|
return;
|
|
}
|
|
|
|
var type = this.getAttribute('data-bet-type');
|
|
var value = this.getAttribute('data-bet-value');
|
|
var odds = parseFloat(this.getAttribute('data-odds'));
|
|
|
|
var key = type + '_' + value;
|
|
|
|
// Add to global bet state (使用与 live.php 一致的数据结构)
|
|
if(!window.betState.bets[key]) {
|
|
window.betState.bets[key] = {
|
|
amount: 0,
|
|
chipInfo: window.betState.selectedChip,
|
|
betInfo: {
|
|
type: type,
|
|
value: value,
|
|
odds: odds
|
|
}
|
|
};
|
|
}
|
|
window.betState.bets[key].amount += window.betState.selectedChip.amount;
|
|
|
|
// Visual Update
|
|
updateBetVisual(this, window.betState.bets[key].amount, window.betState.selectedChip.color);
|
|
this.classList.add('bet-selected');
|
|
});
|
|
});
|
|
|
|
function updateBetVisual(el, totalAmount, color) {
|
|
var display = el.querySelector('.bet-amount-display');
|
|
display.style.display = 'flex';
|
|
display.innerHTML = `
|
|
<div class="bet-chip-wrapper">
|
|
<div class="bet-chip-icon chip-${color}"></div>
|
|
</div>
|
|
<div class="bet-amount-text">${formatAmount(totalAmount)}</div>
|
|
`;
|
|
}
|
|
|
|
function formatAmount(n) {
|
|
if(n >= 1000000) return (n/1000000) + 'M';
|
|
if(n >= 1000) return (n/1000) + 'K';
|
|
return n;
|
|
}
|
|
|
|
// --- Actions ---
|
|
// 取消按钮已经由 live.php 处理
|
|
// 确认按钮已经由 live.php 处理
|
|
|
|
// 不需要重复绑定确认和取消按钮
|
|
// live.php 的主脚本会处理这些按钮
|
|
});
|
|
});
|
|
}
|
|
</script>
|