c19ebf267a
新增撤销功能： - 添加 undoChip 方法，支持撤销当前区域最后一次下注 - 在确认下注组件中新增橙色撤销按钮（箭头图标） - 所有游戏桌组件（百家乐/龙虎/牛牛/色碟/骰宝/轮盘）统一集成撤销功能 竖屏布局优化： - 修复下注盘样式优先级问题，确保平铺全屏显示（移除 left/right 偏移） - 路单区域改为横向布局：路单画布在左，统计信息在右，扑克牌区域独立显示 - 路单高度从 180px 增加到 250px，提升可视性 - 优化牛牛扑克牌布局为 2x2 网格，适配竖屏空间 UI 增强： - 添加红色边框高亮效果（脉冲动画），突出当前选中的下注区域 - 优化按钮布局和间距，提升触控体验 - 调整字体大小和内边距，适配竖屏显示密度 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1297 lines
38 KiB
Vue
1297 lines
38 KiB
Vue
<template>
|
|
<div class="roulette">
|
|
<!-- 欧式 -->
|
|
<div class="european">
|
|
<div class="left">
|
|
<div class="item green-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_0,
|
|
show: touch == 'straight_0'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_0')"
|
|
:list="chipArray.straight_0"
|
|
:win="winArray.includes('straight_0')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="list">
|
|
<!-- 3 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_3,
|
|
show: touch == 'straight_3'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_3')"
|
|
:list="chipArray.straight_3"
|
|
:win="winArray.includes('straight_3')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">3</span>
|
|
</div>
|
|
</div>
|
|
<!-- 6 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_6,
|
|
show: touch == 'straight_6'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_6')"
|
|
:list="chipArray.straight_6"
|
|
:win="winArray.includes('straight_6')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">6</span>
|
|
</div>
|
|
</div>
|
|
<!-- 9 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_9,
|
|
show: touch == 'straight_9'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_9')"
|
|
:list="chipArray.straight_9"
|
|
:win="winArray.includes('straight_9')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">9</span>
|
|
</div>
|
|
</div>
|
|
<!-- 12 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_12,
|
|
show: touch == 'straight_12'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_12')"
|
|
:list="chipArray.straight_12"
|
|
:win="winArray.includes('straight_12')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">12</span>
|
|
</div>
|
|
</div>
|
|
<!-- 15 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_15,
|
|
show: touch == 'straight_15'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_15')"
|
|
:list="chipArray.straight_15"
|
|
:win="winArray.includes('straight_15')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">15</span>
|
|
</div>
|
|
</div>
|
|
<!-- 18 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_18,
|
|
show: touch == 'straight_18'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_18')"
|
|
:list="chipArray.straight_18"
|
|
:win="winArray.includes('straight_18')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">18</span>
|
|
</div>
|
|
</div>
|
|
<!-- 21 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_21,
|
|
show: touch == 'straight_21'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_21')"
|
|
:list="chipArray.straight_21"
|
|
:win="winArray.includes('straight_21')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">21</span>
|
|
</div>
|
|
</div>
|
|
<!-- 24 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_24,
|
|
show: touch == 'straight_24'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_24')"
|
|
:list="chipArray.straight_24"
|
|
:win="winArray.includes('straight_24')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">24</span>
|
|
</div>
|
|
</div>
|
|
<!-- 27 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_27,
|
|
show: touch == 'straight_27'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_27')"
|
|
:list="chipArray.straight_27"
|
|
:win="winArray.includes('straight_27')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">27</span>
|
|
</div>
|
|
</div>
|
|
<!-- 30 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_30,
|
|
show: touch == 'straight_30'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_30')"
|
|
:list="chipArray.straight_30"
|
|
:win="winArray.includes('straight_30')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">30</span>
|
|
</div>
|
|
</div>
|
|
<!-- 33 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_33,
|
|
show: touch == 'straight_33'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_33')"
|
|
:list="chipArray.straight_33"
|
|
:win="winArray.includes('straight_33')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">33</span>
|
|
</div>
|
|
</div>
|
|
<!-- 36 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_36,
|
|
show: touch == 'straight_36'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_36')"
|
|
:list="chipArray.straight_36"
|
|
:win="winArray.includes('straight_36')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">36</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<!-- 2 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_2,
|
|
show: touch == 'straight_2'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_2')"
|
|
:list="chipArray.straight_2"
|
|
:win="winArray.includes('straight_2')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">2</span>
|
|
</div>
|
|
</div>
|
|
<!-- 5 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_5,
|
|
show: touch == 'straight_5'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_5')"
|
|
:list="chipArray.straight_5"
|
|
:win="winArray.includes('straight_5')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">5</span>
|
|
</div>
|
|
</div>
|
|
<!-- 8 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_8,
|
|
show: touch == 'straight_8'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_8')"
|
|
:list="chipArray.straight_8"
|
|
:win="winArray.includes('straight_8')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">8</span>
|
|
</div>
|
|
</div>
|
|
<!-- 11 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_11,
|
|
show: touch == 'straight_11'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_11')"
|
|
:list="chipArray.straight_11"
|
|
:win="winArray.includes('straight_11')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">11</span>
|
|
</div>
|
|
</div>
|
|
<!-- 14 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_14,
|
|
show: touch == 'straight_14'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_14')"
|
|
:list="chipArray.straight_14"
|
|
:win="winArray.includes('straight_14')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">14</span>
|
|
</div>
|
|
</div>
|
|
<!-- 17 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_17,
|
|
show: touch == 'straight_17'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_17')"
|
|
:list="chipArray.straight_17"
|
|
:win="winArray.includes('straight_17')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">17</span>
|
|
</div>
|
|
</div>
|
|
<!-- 20 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_20,
|
|
show: touch == 'straight_20'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_20')"
|
|
:list="chipArray.straight_20"
|
|
:win="winArray.includes('straight_20')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">20</span>
|
|
</div>
|
|
</div>
|
|
<!-- 23 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_23,
|
|
show: touch == 'straight_23'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_23')"
|
|
:list="chipArray.straight_23"
|
|
:win="winArray.includes('straight_23')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">23</span>
|
|
</div>
|
|
</div>
|
|
<!-- 26 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_26,
|
|
show: touch == 'straight_26'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_26')"
|
|
:list="chipArray.straight_26"
|
|
:win="winArray.includes('straight_26')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">26</span>
|
|
</div>
|
|
</div>
|
|
<!-- 29 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_29,
|
|
show: touch == 'straight_29'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_29')"
|
|
:list="chipArray.straight_29"
|
|
:win="winArray.includes('straight_29')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">29</span>
|
|
</div>
|
|
</div>
|
|
<!-- 32 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_32,
|
|
show: touch == 'straight_32'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_32')"
|
|
:list="chipArray.straight_32"
|
|
:win="winArray.includes('straight_32')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">32</span>
|
|
</div>
|
|
</div>
|
|
<!-- 35 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_35,
|
|
show: touch == 'straight_35'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_35')"
|
|
:list="chipArray.straight_35"
|
|
:win="winArray.includes('straight_35')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">35</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<!-- 1 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_1,
|
|
show: touch == 'straight_1'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_1')"
|
|
:list="chipArray.straight_1"
|
|
:win="winArray.includes('straight_1')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">1</span>
|
|
</div>
|
|
</div>
|
|
<!-- 4 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_4,
|
|
show: touch == 'straight_4'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_4')"
|
|
:list="chipArray.straight_4"
|
|
:win="winArray.includes('straight_4')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">4</span>
|
|
</div>
|
|
</div>
|
|
<!-- 7 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_7,
|
|
show: touch == 'straight_7'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_7')"
|
|
:list="chipArray.straight_7"
|
|
:win="winArray.includes('straight_7')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">7</span>
|
|
</div>
|
|
</div>
|
|
<!-- 10 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_10,
|
|
show: touch == 'straight_10'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_10')"
|
|
:list="chipArray.straight_10"
|
|
:win="winArray.includes('straight_10')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">10</span>
|
|
</div>
|
|
</div>
|
|
<!-- 13 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_13,
|
|
show: touch == 'straight_13'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_13')"
|
|
:list="chipArray.straight_13"
|
|
:win="winArray.includes('straight_13')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">13</span>
|
|
</div>
|
|
</div>
|
|
<!-- 16 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_16,
|
|
show: touch == 'straight_16'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_16')"
|
|
:list="chipArray.straight_16"
|
|
:win="winArray.includes('straight_16')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">16</span>
|
|
</div>
|
|
</div>
|
|
<!-- 19 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_19,
|
|
show: touch == 'straight_19'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_19')"
|
|
:list="chipArray.straight_19"
|
|
:win="winArray.includes('straight_19')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">19</span>
|
|
</div>
|
|
</div>
|
|
<!-- 22 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_22,
|
|
show: touch == 'straight_22'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_22')"
|
|
:list="chipArray.straight_22"
|
|
:win="winArray.includes('straight_22')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">22</span>
|
|
</div>
|
|
</div>
|
|
<!-- 25 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_25,
|
|
show: touch == 'straight_25'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_25')"
|
|
:list="chipArray.straight_25"
|
|
:win="winArray.includes('straight_25')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">25</span>
|
|
</div>
|
|
</div>
|
|
<!-- 28 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_28,
|
|
show: touch == 'straight_28'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_28')"
|
|
:list="chipArray.straight_28"
|
|
:win="winArray.includes('straight_28')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">28</span>
|
|
</div>
|
|
</div>
|
|
<!-- 31 -->
|
|
<div class="item black-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_31,
|
|
show: touch == 'straight_31'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_31')"
|
|
:list="chipArray.straight_31"
|
|
:win="winArray.includes('straight_31')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">31</span>
|
|
</div>
|
|
</div>
|
|
<!-- 34 -->
|
|
<div class="item red-bg">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.straight_34,
|
|
show: touch == 'straight_34'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'straight_34')"
|
|
:list="chipArray.straight_34"
|
|
:win="winArray.includes('straight_34')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">34</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<!-- 第一打 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.dozen_1,
|
|
show: touch == 'dozen_1'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'dozen_1')"
|
|
:list="chipArray.dozen_1"
|
|
:win="winArray.includes('dozen_1')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].first_dozen }}</span>
|
|
<span class="small">1-12</span>
|
|
</div>
|
|
</div>
|
|
<!-- 第二打 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.dozen_2,
|
|
show: touch == 'dozen_2'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'dozen_2')"
|
|
:list="chipArray.dozen_2"
|
|
:win="winArray.includes('dozen_2')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].second_dozen }}</span>
|
|
<span class="small">13-24</span>
|
|
</div>
|
|
</div>
|
|
<!-- 第三打 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.dozen_3,
|
|
show: touch == 'dozen_3'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'dozen_3')"
|
|
:list="chipArray.dozen_3"
|
|
:win="winArray.includes('dozen_3')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].third_dozen }}</span>
|
|
<span class="small">25-36</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<!-- 小 -->
|
|
<div class="item left-radius">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.low,
|
|
show: touch == 'low'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'low')"
|
|
:list="chipArray.low"
|
|
:win="winArray.includes('low')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="small">1-18</span>
|
|
<span class="points">{{ Lang[Type].small }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 双 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.even,
|
|
show: touch == 'even'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'even')"
|
|
:list="chipArray.even"
|
|
:win="winArray.includes('even')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].even }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 红 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.red,
|
|
show: touch == 'red'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'red')"
|
|
:list="chipArray.red"
|
|
:win="winArray.includes('red')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].red }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 黑 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.black,
|
|
show: touch == 'black'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'black')"
|
|
:list="chipArray.black"
|
|
:win="winArray.includes('black')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].black }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 单 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.odd,
|
|
show: touch == 'odd'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'odd')"
|
|
:list="chipArray.odd"
|
|
:win="winArray.includes('odd')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].odd }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 大 -->
|
|
<div class="item right-radius">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.high,
|
|
show: touch == 'high'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'high')"
|
|
:list="chipArray.high"
|
|
:win="winArray.includes('high')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].big }}</span>
|
|
<span class="small">19-36</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<!-- 第三列 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.column_3,
|
|
show: touch == 'column_3'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'column_3')"
|
|
:list="chipArray.column_3"
|
|
:win="winArray.includes('column_3')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].third_column }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 第二列 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.column_2,
|
|
show: touch == 'column_2'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'column_2')"
|
|
:list="chipArray.column_2"
|
|
:win="winArray.includes('column_2')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].second_column }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 第一列 -->
|
|
<div class="item">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.column_1,
|
|
show: touch == 'column_1'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'column_1')"
|
|
:list="chipArray.column_1"
|
|
:win="winArray.includes('column_1')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="points">{{ Lang[Type].first_column }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from "vue"
|
|
import { useStore } from "vuex"
|
|
import confirmBet from "@/components/confirmBet.vue"
|
|
import chipView from "@/components/chipView.vue"
|
|
import { rouletteData } from "@/utils/common"
|
|
export default {
|
|
name: "TableRoulette",
|
|
components: { confirmBet, chipView },
|
|
props: {
|
|
touch: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
bet_amount_msg: {
|
|
type: Object,
|
|
default: () => ({
|
|
...rouletteData.amount
|
|
})
|
|
},
|
|
winArray: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
downChip: {
|
|
type: Object,
|
|
default: () => ({
|
|
...rouletteData.amount
|
|
})
|
|
},
|
|
chipArray: {
|
|
type: Object,
|
|
default: () => ({ ...rouletteData.array })
|
|
}
|
|
},
|
|
setup(prop, context) {
|
|
const store = useStore()
|
|
const Type = computed(() => store.state.config.$Type)
|
|
const Lang = computed(() => store.state.config.$lang)
|
|
const downBet = (e, type) => {
|
|
// console.log(type)
|
|
context.emit("downBet", e, type)
|
|
}
|
|
const confirmChip = () => {
|
|
context.emit("confirmChip")
|
|
}
|
|
const cancelChip = () => {
|
|
context.emit("cancelChip")
|
|
}
|
|
const undoChip = () => {
|
|
context.emit("undoChip")
|
|
}
|
|
|
|
const testClick = () => {
|
|
console.log("点击有效")
|
|
}
|
|
return { Type, Lang, downBet, confirmChip, cancelChip, undoChip, testClick }
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.roulette {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
// 欧式
|
|
.european {
|
|
position: absolute;
|
|
top: 1.8rem;
|
|
left: 2.8rem;
|
|
right: 3.8rem;
|
|
bottom: 0.25rem;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
transform: rotateX(0deg);
|
|
.left {
|
|
width: 7.14%;
|
|
height: 60%;
|
|
border: 1px solid #898a91;
|
|
border-right: none;
|
|
border-top-left-radius: 0.95rem;
|
|
border-bottom-left-radius: 0.95rem;
|
|
display: flex;
|
|
.item {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-top-left-radius: 0.95rem;
|
|
border-bottom-left-radius: 0.95rem;
|
|
.chip-view {
|
|
border-top-left-radius: 0.95rem;
|
|
border-bottom-left-radius: 0.95rem;
|
|
}
|
|
}
|
|
}
|
|
.center {
|
|
width: 85.72%;
|
|
.list {
|
|
width: 100%;
|
|
height: 20%;
|
|
display: flex;
|
|
border-top: 1px solid #898a91;
|
|
border-right: 1px solid #898a91;
|
|
border-left: 1px solid #898a91;
|
|
box-sizing: border-box;
|
|
&:first-child {
|
|
height: calc(20% + 1px);
|
|
}
|
|
&:last-child {
|
|
border-bottom: 1px solid #898a91;
|
|
border-bottom-left-radius: 0.95rem;
|
|
border-bottom-right-radius: 0.95rem;
|
|
.item {
|
|
&:first-child .chip-view {
|
|
border-bottom-left-radius: 0.95rem;
|
|
}
|
|
&:nth-child(3) {
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f65857;
|
|
clip-path: polygon(50% 15%, 80% 50%, 50% 85%, 20% 50%);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
&:nth-child(4) {
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #333;
|
|
clip-path: polygon(50% 15%, 80% 50%, 50% 85%, 20% 50%);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
&:last-child .chip-view {
|
|
border-bottom-right-radius: 0.95rem;
|
|
}
|
|
}
|
|
}
|
|
.item {
|
|
flex: 1;
|
|
border-left: 1px solid #898a91;
|
|
&:first-child {
|
|
border-left: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
width: 7.14%;
|
|
height: 60%;
|
|
border: 1px solid #898a91;
|
|
border-top-right-radius: 0.95rem;
|
|
border-bottom-right-radius: 0.95rem;
|
|
border-left: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.item {
|
|
width: 100%;
|
|
height: 33.33%;
|
|
border-top: 1px solid #898a91;
|
|
&:first-child {
|
|
border: none;
|
|
height: calc(33.33% + 1px);
|
|
.chip-view {
|
|
border-top-right-radius: 0.95rem;
|
|
}
|
|
}
|
|
&:last-child {
|
|
.chip-view {
|
|
border-bottom-right-radius: 0.95rem;
|
|
}
|
|
}
|
|
.text {
|
|
font-size: 0.38rem;
|
|
.points {
|
|
writing-mode: vertical-lr;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item {
|
|
position: relative;
|
|
&.red-bg {
|
|
background: #f65857;
|
|
}
|
|
&.black-bg {
|
|
background: #333333;
|
|
}
|
|
&.green-bg {
|
|
background: #5cb645;
|
|
}
|
|
.left-radius {
|
|
}
|
|
.right-radius {
|
|
}
|
|
.text {
|
|
.small {
|
|
padding: 0 0.2rem;
|
|
font-size: 0.45rem;
|
|
}
|
|
}
|
|
&.unclick {
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 102%;
|
|
border-bottom: 1px solid #898a91;
|
|
top: 50%;
|
|
transform: rotate(14deg);
|
|
z-index: 6;
|
|
left: -2px;
|
|
}
|
|
&.max:after {
|
|
width: 104%;
|
|
transform: rotate(21deg);
|
|
}
|
|
&.min:after {
|
|
width: 104%;
|
|
transform: rotate(21deg);
|
|
}
|
|
.chip-view {
|
|
background: rgb(98 74 4 / 40%);
|
|
}
|
|
}
|
|
|
|
.chip-box {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
&:active {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
}
|
|
.text {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
line-height: 1;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
font-size: 0.5rem;
|
|
color: #eee;
|
|
}
|
|
.money {
|
|
position: absolute;
|
|
font-size: 0.24rem;
|
|
font-weight: normal;
|
|
left: -3px;
|
|
bottom: -3px;
|
|
transform: scale(0.5);
|
|
pointer-events: none;
|
|
color: #ddd;
|
|
vertical-align: bottom;
|
|
&::before {
|
|
display: inline-block;
|
|
content: "总";
|
|
background: rgba(255, 255, 255, 0.4);
|
|
font-size: 10px;
|
|
border-radius: 0.615rem;
|
|
width: 0.615rem;
|
|
height: 0.615rem;
|
|
text-align: center;
|
|
line-height: 0.615rem;
|
|
font-weight: normal;
|
|
margin-right: 0.06rem;
|
|
transform: scale(0.7);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|