395 lines
10 KiB
Vue
395 lines
10 KiB
Vue
<template>
|
|
<div class="baccarat" :class="Type">
|
|
<!-- 第一行: 小 | 闲对 | 庄对 | 大 -->
|
|
<div class="list top">
|
|
<!-- 小 -->
|
|
<div class="item grid-item" :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="label text-blue">{{ Lang[Type].small }}</span>
|
|
<span class="odds">1:1.5</span>
|
|
</div>
|
|
<div class="money" v-if="bet_amount_msg.small_amount">
|
|
<i class="coin-icon"></i>
|
|
{{ bet_amount_msg.small_amount }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 闲对 -->
|
|
<div class="item grid-item">
|
|
<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="label text-blue">{{ Lang[Type].msg_player_pair }}</span>
|
|
<span class="odds">1:11</span>
|
|
</div>
|
|
<div class="money" v-if="bet_amount_msg.player_pair_amount">
|
|
<i class="coin-icon"></i>
|
|
{{ bet_amount_msg.player_pair_amount }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 庄对 -->
|
|
<div class="item grid-item">
|
|
<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="label text-red">{{ Lang[Type].msg_banker_pair }}</span>
|
|
<span class="odds">1:11</span>
|
|
</div>
|
|
<div class="money" v-if="bet_amount_msg.banker_pair_amount">
|
|
<i class="coin-icon"></i>
|
|
{{ bet_amount_msg.banker_pair_amount }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 大 -->
|
|
<div class="item grid-item" :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="label text-red">{{ Lang[Type].big }}</span>
|
|
<span class="odds">1:0.5</span>
|
|
</div>
|
|
<div class="money" v-if="bet_amount_msg.big_amount">
|
|
<i class="coin-icon"></i>
|
|
{{ bet_amount_msg.big_amount }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第二行: 闲 | 和 | 庄 -->
|
|
<div class="list bottom">
|
|
<!-- 闲 -->
|
|
<div class="item grid-item">
|
|
<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="label-large text-blue">{{ Lang[Type].player }}</span>
|
|
<span class="odds">1:{{ tableData.price_player }}</span>
|
|
</div>
|
|
<div class="money" v-if="bet_amount_msg.player_amount">
|
|
<i class="coin-icon"></i>
|
|
{{ bet_amount_msg.player_amount }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 和 -->
|
|
<div class="item grid-item">
|
|
<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="label-large text-green">{{ Lang[Type].tie }}</span>
|
|
<span class="odds">1:{{ tableData.price_tie_baccarat }}</span>
|
|
</div>
|
|
<div class="money" v-if="bet_amount_msg.tie_amount">
|
|
<i class="coin-icon"></i>
|
|
{{ bet_amount_msg.tie_amount }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 庄 -->
|
|
<div class="item grid-item">
|
|
<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="label-large text-red">{{ Lang[Type].banker }}</span>
|
|
<span class="odds">
|
|
{{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
|
|
</span>
|
|
</div>
|
|
<div class="money" v-if="bet_amount_msg.banker_amount">
|
|
<i class="coin-icon"></i>
|
|
{{ 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>
|
|
.baccarat {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
|
|
&.yn {
|
|
.list .item .text {
|
|
.label {
|
|
font-size: 10px;
|
|
transform: scale(0.9); /* Further reduce visual size if needed */
|
|
}
|
|
.label-large {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
&.top {
|
|
flex: 3; // Top row height ratio
|
|
.item {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
&.bottom {
|
|
flex: 5; // Bottom row height ratio
|
|
.item {
|
|
flex: 1;
|
|
}
|
|
// Removed specific flex for green-main as per instruction, assuming it's not needed for the new look.
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
overflow: hidden;
|
|
|
|
// Unclick state
|
|
&.unclick {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
filter: grayscale(0.8);
|
|
}
|
|
|
|
// Text Styles
|
|
.text {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
|
|
.label {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 2px;
|
|
white-space: nowrap;
|
|
}
|
|
.label-large {
|
|
font-size: 30px;
|
|
font-weight: 800;
|
|
margin-bottom: 2px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.odds {
|
|
font-size: 14px; /* Increased from 12px */
|
|
color: #FFD700; /* Gold */
|
|
font-weight: 600;
|
|
display: block; /* Ensure formatting */
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
|
}
|
|
|
|
.text-blue { color: #29abe2; }
|
|
.text-red { color: #ed1c24; }
|
|
.text-green { color: #22ac38; }
|
|
}
|
|
|
|
// Money display
|
|
.money {
|
|
position: absolute;
|
|
bottom: 6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
color: #ffd700;
|
|
font-size: 12px;
|
|
z-index: 3;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
|
|
.coin-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #ffd700;
|
|
border-radius: 50%;
|
|
border: 1px solid #fff;
|
|
box-shadow: 0 0 2px rgba(0,0,0,0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Grid Item Style (Digital Table Look)
|
|
.grid-item {
|
|
background: rgba(9, 60, 50, 0.7); // Deep Teal Transparent
|
|
border: 1px solid #59cfa8; // Cyan/Green Border
|
|
box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
|
|
|
|
&:active {
|
|
background: rgba(9, 60, 50, 0.9);
|
|
border-color: #7fffd4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|