c19ebf267a
新增撤销功能： - 添加 undoChip 方法，支持撤销当前区域最后一次下注 - 在确认下注组件中新增橙色撤销按钮（箭头图标） - 所有游戏桌组件（百家乐/龙虎/牛牛/色碟/骰宝/轮盘）统一集成撤销功能 竖屏布局优化： - 修复下注盘样式优先级问题，确保平铺全屏显示（移除 left/right 偏移） - 路单区域改为横向布局：路单画布在左，统计信息在右，扑克牌区域独立显示 - 路单高度从 180px 增加到 250px，提升可视性 - 优化牛牛扑克牌布局为 2x2 网格，适配竖屏空间 UI 增强： - 添加红色边框高亮效果（脉冲动画），突出当前选中的下注区域 - 优化按钮布局和间距，提升触控体验 - 调整字体大小和内边距，适配竖屏显示密度 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
406 lines
11 KiB
Vue
406 lines
11 KiB
Vue
<template>
|
|
<div class="baccarat">
|
|
<div class="list top">
|
|
<!-- 小 -->
|
|
<div class="item min" :class="{ unclick: can_bet_big_small != 1 }">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.small_amount,
|
|
show: touch == 'small_amount'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'small_amount')"
|
|
:list="chipArray.small_amount"
|
|
:win="winArray.includes('small')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">{{ Lang[Type].small }}</span>
|
|
<span>1:1.5</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.small_amount || 0 }}</div>
|
|
</div>
|
|
<!-- 闲对 -->
|
|
<div class="item ppair">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.player_pair_amount,
|
|
show: touch == 'player_pair_amount'
|
|
}"
|
|
></confirmBet>
|
|
|
|
<chipView
|
|
@click="downBet($event, 'player_pair_amount')"
|
|
:list="chipArray.player_pair_amount"
|
|
:win="winArray.includes('player_pair')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">{{ Lang[Type].p_player }}</span>
|
|
<span>1:{{ tableData.price_pair }}</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.player_pair_amount }}</div>
|
|
</div>
|
|
<!-- 幸运6 -->
|
|
<div class="item luck" :class="{ unclick: can_bet_luck_six != 1 }">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.luck_six_amount,
|
|
show: touch == 'luck_six_amount'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'luck_six_amount')"
|
|
:list="chipArray.luck_six_amount"
|
|
:win="winArray.includes('luck_six')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">{{ Lang[Type].luckSix }} {{ Lang[Type].max }}</span>
|
|
<span>1:20</span>
|
|
</div>
|
|
|
|
<div class="money">{{ bet_amount_msg.luck_six_amount || 0 }}</div>
|
|
</div>
|
|
<!-- 庄对 -->
|
|
<div class="item bpair">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.banker_pair_amount,
|
|
show: touch == 'banker_pair_amount'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'banker_pair_amount')"
|
|
:list="chipArray.banker_pair_amount"
|
|
:win="winArray.includes('banker_pair')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">{{ Lang[Type].p_banker }}</span>
|
|
<span>1:{{ tableData.price_pair }}</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.banker_pair_amount }}</div>
|
|
</div>
|
|
<!-- 大 -->
|
|
<div class="item max" :class="{ unclick: can_bet_big_small != 1 }">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{ money: downChip.big_amount, show: touch == 'big_amount' }"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'big_amount')"
|
|
:list="chipArray.big_amount"
|
|
:win="winArray.includes('big')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">{{ Lang[Type].big }}</span>
|
|
<span>1:0.5</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.big_amount || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="list bottom">
|
|
<!-- 闲 -->
|
|
<div class="item palyer">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.player_amount,
|
|
show: touch == 'player_amount'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'player_amount')"
|
|
:list="chipArray.player_amount"
|
|
:win="winArray.includes('player')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">{{ Lang[Type].player }}</span>
|
|
<span>1:{{ tableData.price_player }}</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.player_amount }}</div>
|
|
</div>
|
|
<!-- 和 -->
|
|
<div class="item tie">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'tie_amount')"
|
|
:list="chipArray.tie_amount"
|
|
:win="winArray.includes('tie')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">{{ Lang[Type].tie }}</span>
|
|
<span>1:{{ tableData.price_tie_baccarat }}</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.tie_amount }}</div>
|
|
</div>
|
|
<!-- 庄 -->
|
|
<div class="item banker">
|
|
<confirmBet
|
|
@confirm="confirmChip"
|
|
@cancel="cancelChip"
|
|
@undo="undoChip"
|
|
:data="{
|
|
money: downChip.banker_amount,
|
|
show: touch == 'banker_amount'
|
|
}"
|
|
></confirmBet>
|
|
<chipView
|
|
@click="downBet($event, 'banker_amount')"
|
|
:list="chipArray.banker_amount"
|
|
:win="winArray.includes('banker')"
|
|
></chipView>
|
|
<div class="text">
|
|
<span class="big">{{ Lang[Type].banker }}</span>
|
|
<span>
|
|
{{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
|
|
</span>
|
|
</div>
|
|
<div class="money">{{ bet_amount_msg.banker_amount }}</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 { baccaratData } from "@/utils/common"
|
|
export default {
|
|
name: "TableBaccarat",
|
|
components: { confirmBet, chipView },
|
|
props: {
|
|
touch: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
can_bet_big_small: {
|
|
type: [String, Number],
|
|
default: 1
|
|
},
|
|
can_bet_luck_six: {
|
|
type: [String, Number],
|
|
default: 1
|
|
},
|
|
baccarat_type: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
bet_amount_msg: {
|
|
type: Object,
|
|
default: () => ({
|
|
...baccaratData.amount
|
|
})
|
|
},
|
|
winArray: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
downChip: {
|
|
type: Object,
|
|
default: () => ({
|
|
...baccaratData.amount
|
|
})
|
|
},
|
|
chipArray: {
|
|
type: Object,
|
|
default: () => ({ ...baccaratData.array })
|
|
},
|
|
tableData: {
|
|
type: [Object],
|
|
default: () => {}
|
|
}
|
|
},
|
|
setup(prop, context) {
|
|
const store = useStore()
|
|
const Type = computed(() => store.state.config.$Type)
|
|
const Lang = computed(() => store.state.config.$lang)
|
|
const downBet = (e, type) => {
|
|
context.emit("downBet", e, type)
|
|
}
|
|
const confirmChip = () => {
|
|
context.emit("confirmChip")
|
|
}
|
|
const cancelChip = () => {
|
|
context.emit("cancelChip")
|
|
}
|
|
const undoChip = () => {
|
|
context.emit("undoChip")
|
|
}
|
|
return { Type, Lang, downBet, confirmChip, cancelChip, undoChip }
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
/* 深色豪华主题配色 */
|
|
$dark-bg: #0d0d0d;
|
|
$card-bg: #1e1e1e;
|
|
$border-color: #444;
|
|
$gold: #c5a059;
|
|
$text-secondary: #888;
|
|
|
|
.baccarat {
|
|
background: rgba(30, 30, 30, 0.95);
|
|
.list {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
&:first-child {
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
&.top {
|
|
height: 50%;
|
|
.item {
|
|
flex: 1;
|
|
height: 100%;
|
|
&:nth-child(3) {
|
|
min-width: 4.86rem;
|
|
}
|
|
.text {
|
|
margin-top: -2px;
|
|
text-shadow: 1px 1px #050505;
|
|
}
|
|
}
|
|
}
|
|
&.bottom {
|
|
height: 50%;
|
|
.item {
|
|
width: 33.33%;
|
|
height: 100%;
|
|
.text {
|
|
font-size: 0.65rem;
|
|
text-shadow: 1px 1px #050505;
|
|
}
|
|
}
|
|
}
|
|
.item {
|
|
position: relative;
|
|
border-right: 1px solid $border-color;
|
|
font-size: 0.45rem;
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
&.unclick {
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 102%;
|
|
border-bottom: 1px solid $border-color;
|
|
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: rgba(98, 74, 4, 0.4);
|
|
}
|
|
}
|
|
|
|
.chip-box {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
&:active {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
}
|
|
.text {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
line-height: 1;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
color: #fff;
|
|
.big {
|
|
font-weight: bold;
|
|
padding-right: 0.24rem;
|
|
padding-left: 0.2rem;
|
|
}
|
|
}
|
|
.money {
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: -2px;
|
|
font-size: 0.24rem;
|
|
font-weight: normal;
|
|
transform: scale(0.7);
|
|
color: $text-secondary;
|
|
vertical-align: bottom;
|
|
pointer-events: none;
|
|
&::before {
|
|
display: inline-block;
|
|
content: "总";
|
|
background: rgba(255, 255, 255, 0.2);
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.banker .chip-view {
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
.palyer .chip-view {
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
.max .chip-view {
|
|
border-top-right-radius: 10px;
|
|
}
|
|
.min .chip-view {
|
|
border-top-left-radius: 10px;
|
|
}
|
|
.luck .text {
|
|
text-shadow: none !important;
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
#ffcc7d 0%,
|
|
#93dd96 20%,
|
|
#6078d4 50%,
|
|
#f7e96f 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
</style>
|