fengshao1227/pk10
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: 投注游戏平台初始化

Browse Source
This commit is contained in:
li
2026-02-25 01:26:58 +08:00
commit 77ca2cc8b3
275 changed files with 237479 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/Views/Web/components/xocdia-bet-panel.php
Executable
+356
View File
@@ -0,0 +1,356 @@
<?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>