c19ebf267a
新增撤销功能： - 添加 undoChip 方法，支持撤销当前区域最后一次下注 - 在确认下注组件中新增橙色撤销按钮（箭头图标） - 所有游戏桌组件（百家乐/龙虎/牛牛/色碟/骰宝/轮盘）统一集成撤销功能 竖屏布局优化： - 修复下注盘样式优先级问题，确保平铺全屏显示（移除 left/right 偏移） - 路单区域改为横向布局：路单画布在左，统计信息在右，扑克牌区域独立显示 - 路单高度从 180px 增加到 250px，提升可视性 - 优化牛牛扑克牌布局为 2x2 网格，适配竖屏空间 UI 增强： - 添加红色边框高亮效果（脉冲动画），突出当前选中的下注区域 - 优化按钮布局和间距，提升触控体验 - 调整字体大小和内边距，适配竖屏显示密度 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1062 lines
30 KiB
Vue
1062 lines
30 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 百家乐 -->
|
|
<section class="poker-box baccarat" v-if="game_id == 1 && isPoker == true">
|
|
<transition
|
|
name="custom-classes-transition"
|
|
enter-active-class="animate__animated animate__bounceInLeft"
|
|
leave-active-class="animate__animated animate__bounceOutLeft"
|
|
>
|
|
<div class="list player" v-if="show" :class="{ win: playerIsWin }">
|
|
<div class="item" ref="position_13">
|
|
<span class="card" ref="pocker_13"></span>
|
|
</div>
|
|
<div class="item" ref="position_11">
|
|
<span class="card" ref="pocker_11"></span>
|
|
</div>
|
|
<div class="item" ref="position_12">
|
|
<span class="card" ref="pocker_12"></span>
|
|
</div>
|
|
<p class="font">
|
|
{{ $lang[$Type].player }}
|
|
<br />
|
|
{{ playernum }}
|
|
</p>
|
|
</div>
|
|
</transition>
|
|
<transition
|
|
name="custom-classes-transition"
|
|
enter-active-class="animate__animated animate__bounceInRight"
|
|
leave-active-class="animate__animated animate__bounceOutRight"
|
|
>
|
|
<div class="list banker" v-if="show" :class="{ win: bankerIsWin }">
|
|
<p class="font">
|
|
{{ $lang[$Type].banker }}
|
|
<br />
|
|
{{ bankernum }}
|
|
</p>
|
|
<div class="item" ref="position_21">
|
|
<span class="card" ref="pocker_21"></span>
|
|
</div>
|
|
<div class="item" ref="position_22">
|
|
<span class="card" ref="pocker_22"></span>
|
|
</div>
|
|
<div class="item" ref="position_23">
|
|
<span class="card" ref="pocker_23"></span>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</section>
|
|
<!-- 龙虎 -->
|
|
<section class="poker-box longhu" v-if="game_id == 2 && isPoker == true">
|
|
<transition
|
|
name="custom-classes-transition"
|
|
enter-active-class="animate__animated animate__bounceInLeft"
|
|
leave-active-class="animate__animated animate__bounceOutLeft"
|
|
>
|
|
<div class="list banker" v-if="show" :class="{ win: bankerIsWin }">
|
|
<div class="item" ref="position_21">
|
|
<span class="card" ref="pocker_21"></span>
|
|
</div>
|
|
<p class="font">
|
|
{{ $lang[$Type].dragon }}
|
|
<br />
|
|
{{ bankernum }}
|
|
</p>
|
|
</div>
|
|
</transition>
|
|
<transition
|
|
name="custom-classes-transition"
|
|
enter-active-class="animate__animated animate__bounceInRight"
|
|
leave-active-class="animate__animated animate__bounceOutRight"
|
|
>
|
|
<div class="list player" v-if="show" :class="{ win: playerIsWin }">
|
|
<p class="font">
|
|
{{ $lang[$Type].tiger }}
|
|
<br />
|
|
{{ playernum }}
|
|
</p>
|
|
<div class="item" ref="position_11">
|
|
<span class="card" ref="pocker_11"></span>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</section>
|
|
<!-- 牛牛 -->
|
|
<div class="nn_position" v-if="game_id == 4 && routeName == 'multiple'">
|
|
<strong>{{ $lang[$Type].position }}</strong>
|
|
<div class="item" ref="position_0">
|
|
<span class="card" ref="pocker_0"></span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="nn_position"
|
|
name="custom-classes-transition"
|
|
enter-active-class="animate__animated bounceInUp"
|
|
leave-active-class="animate__animated bounceOutDown"
|
|
v-if="game_id == 4 && routeName == 'play' && isPoker == true"
|
|
>
|
|
<strong>{{ $lang[$Type].position }}</strong>
|
|
<div class="item" ref="position_0">
|
|
<span class="card" ref="pocker_0"></span>
|
|
</div>
|
|
</div>
|
|
<transition
|
|
name="custom-classes-transition"
|
|
enter-active-class="animate__animated animate__bounceInUp"
|
|
leave-active-class="animate__animated animate__bounceOutDown"
|
|
>
|
|
<section
|
|
class="poker-box nn pt_nn"
|
|
v-if="game_id == 4 && isPoker == true"
|
|
>
|
|
<div
|
|
class="list"
|
|
:class="{
|
|
win: win_player_1 == 0 && win_player_2 == 0 && win_player_3 == 0
|
|
}"
|
|
>
|
|
<p class="title red">
|
|
<template v-if="$Type == 'en'"> </template>
|
|
{{ $lang[$Type].banker }}
|
|
<template v-if="$Type != 'en'">家</template>
|
|
<template v-if="$Type == 'en'"> </template>
|
|
</p>
|
|
<span class="role" v-show="role4">{{ role4 }}</span>
|
|
<div class="item" ref="position_41">
|
|
<span class="card" ref="pocker_41"></span>
|
|
</div>
|
|
<div class="item" ref="position_42">
|
|
<span class="card" ref="pocker_42"></span>
|
|
</div>
|
|
<div class="item" ref="position_43">
|
|
<span class="card" ref="pocker_43"></span>
|
|
</div>
|
|
<div class="item" ref="position_44">
|
|
<span class="card" ref="pocker_44"></span>
|
|
</div>
|
|
<div class="item" ref="position_45">
|
|
<span class="card" ref="pocker_45"></span>
|
|
</div>
|
|
</div>
|
|
<div class="list" :class="{ win: win_player_1 == 1 }">
|
|
<p class="title blue">
|
|
{{ $lang[$Type].player1 }}
|
|
</p>
|
|
<span class="role" v-show="role1">{{ role1 }}</span>
|
|
|
|
<div class="item" ref="position_11">
|
|
<span class="card" ref="pocker_11"></span>
|
|
</div>
|
|
<div class="item" ref="position_12">
|
|
<span class="card" ref="pocker_12"></span>
|
|
</div>
|
|
<div class="item" ref="position_13">
|
|
<span class="card" ref="pocker_13"></span>
|
|
</div>
|
|
<div class="item" ref="position_14">
|
|
<span class="card" ref="pocker_14"></span>
|
|
</div>
|
|
<div class="item" ref="position_15">
|
|
<span class="card" ref="pocker_15"></span>
|
|
</div>
|
|
</div>
|
|
<div class="list" :class="{ win: win_player_2 == 1 }">
|
|
<p class="title blue">
|
|
{{ $lang[$Type].player2 }}
|
|
</p>
|
|
<span class="role" v-show="role2">{{ role2 }}</span>
|
|
<div class="item" ref="position_21">
|
|
<span class="card" ref="pocker_21"></span>
|
|
</div>
|
|
<div class="item" ref="position_22">
|
|
<span class="card" ref="pocker_22"></span>
|
|
</div>
|
|
<div class="item" ref="position_23">
|
|
<span class="card" ref="pocker_23"></span>
|
|
</div>
|
|
<div class="item" ref="position_24">
|
|
<span class="card" ref="pocker_24"></span>
|
|
</div>
|
|
<div class="item" ref="position_25">
|
|
<span class="card" ref="pocker_25"></span>
|
|
</div>
|
|
</div>
|
|
<div class="list" :class="{ win: win_player_3 == 1 }">
|
|
<p class="title blue">
|
|
{{ $lang[$Type].player3 }}
|
|
</p>
|
|
<span class="role" v-show="role3">{{ role3 }}</span>
|
|
<div class="item" ref="position_31">
|
|
<span class="card" ref="pocker_31"></span>
|
|
</div>
|
|
<div class="item" ref="position_32">
|
|
<span class="card" ref="pocker_32"></span>
|
|
</div>
|
|
<div class="item" ref="position_33">
|
|
<span class="card" ref="pocker_33"></span>
|
|
</div>
|
|
<div class="item" ref="position_34">
|
|
<span class="card" ref="pocker_34"></span>
|
|
</div>
|
|
<div class="item" ref="position_35">
|
|
<span class="card" ref="pocker_35"></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</transition>
|
|
<!-- 三卡牛牛 -->
|
|
<div class="nn_position" v-if="game_id == 5 && routeName == 'multiple'">
|
|
<strong>{{ $lang[$Type].position }}</strong>
|
|
<div class="item" ref="position_0">
|
|
<span class="card" ref="pocker_0"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<transition
|
|
name="custom-classes-transition"
|
|
enter-active-class="animate__animated animate__bounceInUp"
|
|
leave-active-class="animate__animated animate__bounceOutDown"
|
|
>
|
|
<section
|
|
class="poker-box nn sanka tr_nn"
|
|
v-if="game_id == 5 && isPoker == true"
|
|
>
|
|
<div
|
|
class="nn_position"
|
|
v-if="game_id == 5 && routeName == 'play' && isPoker == true"
|
|
>
|
|
<strong>{{ $lang[$Type].position }}</strong>
|
|
<div class="item" ref="position_0">
|
|
<span class="card" ref="pocker_0"></span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="list"
|
|
:class="{
|
|
win: win_player_1 == 0 && win_player_2 == 0 && win_player_3 == 0
|
|
}"
|
|
>
|
|
<p class="title red">
|
|
<template v-if="$Type == 'en'"> </template>
|
|
{{ $lang[$Type].banker }}
|
|
<template v-if="$Type != 'en'">家</template>
|
|
<template v-if="$Type == 'en'"> </template>
|
|
</p>
|
|
<span class="role" v-show="role4">{{ role4 }}</span>
|
|
<div class="item" ref="position_41">
|
|
<span class="card" ref="pocker_41"></span>
|
|
</div>
|
|
<div class="item" ref="position_42">
|
|
<span class="card" ref="pocker_42"></span>
|
|
</div>
|
|
<div class="item" ref="position_43">
|
|
<span class="card" ref="pocker_43"></span>
|
|
</div>
|
|
</div>
|
|
<div class="list" :class="{ win: win_player_1 == 1 }">
|
|
<p class="title blue">
|
|
{{ $lang[$Type].player1 }}
|
|
</p>
|
|
<span class="role" v-show="role1">{{ role1 }}</span>
|
|
<div class="item" ref="position_11">
|
|
<span class="card" ref="pocker_11"></span>
|
|
</div>
|
|
<div class="item" ref="position_12">
|
|
<span class="card" ref="pocker_12"></span>
|
|
</div>
|
|
<div class="item" ref="position_13">
|
|
<span class="card" ref="pocker_13"></span>
|
|
</div>
|
|
</div>
|
|
<div class="list" :class="{ win: win_player_2 == 1 }">
|
|
<p class="title blue">
|
|
{{ $lang[$Type].player2 }}
|
|
</p>
|
|
<span class="role" v-show="role2">
|
|
{{ role2 }}
|
|
</span>
|
|
<div class="item" ref="position_21">
|
|
<span class="card" ref="pocker_21"></span>
|
|
</div>
|
|
<div class="item" ref="position_22">
|
|
<span class="card" ref="pocker_22"></span>
|
|
</div>
|
|
<div class="item" ref="position_23">
|
|
<span class="card" ref="pocker_23"></span>
|
|
</div>
|
|
</div>
|
|
<div class="list" :class="{ win: win_player_3 == 1 }">
|
|
<p class="title blue">
|
|
{{ $lang[$Type].player3 }}
|
|
</p>
|
|
<span class="role" v-show="role3">{{ role3 }}</span>
|
|
<div class="item" ref="position_31">
|
|
<span class="card" ref="pocker_31"></span>
|
|
</div>
|
|
<div class="item" ref="position_32">
|
|
<span class="card" ref="pocker_32"></span>
|
|
</div>
|
|
<div class="item" ref="position_33">
|
|
<span class="card" ref="pocker_33"></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex"
|
|
export default {
|
|
name: "PokerView",
|
|
data() {
|
|
return {
|
|
routeName: null,
|
|
isfrist: true,
|
|
show: false, //false
|
|
game_id: "",
|
|
isPoker: false, //false
|
|
bankerIsWin: false,
|
|
playerIsWin: false,
|
|
win_player_1: null,
|
|
win_player_2: null,
|
|
win_player_3: null,
|
|
bankernum: "",
|
|
playernum: "",
|
|
role4: "",
|
|
role1: "",
|
|
role2: "",
|
|
role3: "",
|
|
timeResult1: null,
|
|
timeResult2: null
|
|
}
|
|
},
|
|
created: function () {
|
|
this.routeName = this.$route.name
|
|
},
|
|
methods: {
|
|
showCard(data) {
|
|
var game_id = this.game_id
|
|
var card = data.card_info
|
|
if (game_id == 1) {
|
|
if (card.banker_1 != 0) {
|
|
this.cardreform(21, card.banker_1)
|
|
}
|
|
if (card.banker_2 != 0) {
|
|
this.cardreform(22, card.banker_2)
|
|
}
|
|
if (card.banker_3 != 0) {
|
|
this.cardreform(23, card.banker_3)
|
|
}
|
|
if (card.player_1 != 0) {
|
|
this.cardreform(11, card.player_1)
|
|
}
|
|
if (card.player_2 != 0) {
|
|
this.cardreform(12, card.player_2)
|
|
}
|
|
if (card.player_3 != 0) {
|
|
this.cardreform(13, card.player_3)
|
|
}
|
|
} else if (game_id == 2) {
|
|
if (card.player_1 != 0) {
|
|
this.cardreform(11, card.player_1)
|
|
}
|
|
if (card.banker_1 != 0) {
|
|
this.cardreform(21, card.banker_1)
|
|
}
|
|
} else if (game_id == 4 || game_id == 5) {
|
|
if (card.card_first != 0) {
|
|
this.cardreform(0, card.card_first)
|
|
}
|
|
if (card.banker_card_1 != 0) {
|
|
this.cardreform(41, card.banker_card_1)
|
|
}
|
|
if (card.banker_card_2 != 0) {
|
|
this.cardreform(42, card.banker_card_2)
|
|
}
|
|
if (card.banker_card_3 != 0) {
|
|
if (game_id == 5) {
|
|
this.cardreform(
|
|
43,
|
|
card.banker_card_3,
|
|
data.tc_result.banker_result
|
|
)
|
|
} else {
|
|
this.cardreform(43, card.banker_card_3)
|
|
}
|
|
}
|
|
if (card.banker_card_4 != 0 && game_id == 4) {
|
|
this.cardreform(44, card.banker_card_4)
|
|
}
|
|
if (card.banker_card_5 != 0 && game_id == 4) {
|
|
this.cardreform(45, card.banker_card_5, data.nn_result.banker_result)
|
|
}
|
|
|
|
if (card.player_1_card_1 != 0) {
|
|
this.cardreform(11, card.player_1_card_1)
|
|
}
|
|
if (card.player_1_card_2 != 0) {
|
|
this.cardreform(12, card.player_1_card_2)
|
|
}
|
|
if (card.player_1_card_3 != 0) {
|
|
if (game_id == 5) {
|
|
this.cardreform(
|
|
13,
|
|
card.player_1_card_3,
|
|
data.tc_result.player_1_result
|
|
)
|
|
} else {
|
|
this.cardreform(13, card.player_1_card_3)
|
|
}
|
|
}
|
|
if (card.player_1_card_4 != 0 && game_id == 4) {
|
|
this.cardreform(14, card.player_1_card_4)
|
|
}
|
|
if (card.player_1_card_5 != 0 && game_id == 4) {
|
|
this.cardreform(
|
|
15,
|
|
card.player_1_card_5,
|
|
data.nn_result.player_1_result
|
|
)
|
|
}
|
|
|
|
if (card.player_2_card_1 != 0) {
|
|
this.cardreform(21, card.player_2_card_1)
|
|
}
|
|
if (card.player_2_card_2 != 0) {
|
|
this.cardreform(22, card.player_2_card_2)
|
|
}
|
|
if (card.player_2_card_3 != 0) {
|
|
if (game_id == 5) {
|
|
this.cardreform(
|
|
23,
|
|
card.player_2_card_3,
|
|
data.tc_result.player_2_result
|
|
)
|
|
} else {
|
|
this.cardreform(23, card.player_2_card_3)
|
|
}
|
|
}
|
|
if (card.player_2_card_4 != 0 && game_id == 4) {
|
|
this.cardreform(24, card.player_2_card_4)
|
|
}
|
|
if (card.player_2_card_5 != 0 && game_id == 4) {
|
|
this.cardreform(
|
|
25,
|
|
card.player_2_card_5,
|
|
data.nn_result.player_2_result
|
|
)
|
|
}
|
|
|
|
if (card.player_3_card_1 != 0) {
|
|
this.cardreform(31, card.player_3_card_1)
|
|
}
|
|
if (card.player_3_card_2 != 0) {
|
|
this.cardreform(32, card.player_3_card_2)
|
|
}
|
|
if (card.player_3_card_3 != 0) {
|
|
if (game_id == 5) {
|
|
this.cardreform(
|
|
33,
|
|
card.player_3_card_3,
|
|
data.tc_result.player_3_result
|
|
)
|
|
} else {
|
|
this.cardreform(33, card.player_3_card_3)
|
|
}
|
|
}
|
|
if (card.player_3_card_4 != 0 && game_id == 4) {
|
|
this.cardreform(34, card.player_3_card_4)
|
|
}
|
|
if (card.player_3_card_5 != 0 && game_id == 4) {
|
|
this.cardreform(
|
|
35,
|
|
card.player_3_card_5,
|
|
data.nn_result.player_3_result
|
|
)
|
|
}
|
|
}
|
|
},
|
|
cardreform(position, num, result) {
|
|
this.card = {}
|
|
this.card.status = true
|
|
this.card.round = {}
|
|
this.card.round.card = num
|
|
if (this.game_id == 1 || this.game_id == 2) {
|
|
this.card.round.position = position
|
|
} else if (this.game_id == 4 || this.game_id == 5) {
|
|
if (result != undefined) {
|
|
this.card.round.result = result
|
|
console.log(result)
|
|
}
|
|
this.card.round.order_num = position
|
|
}
|
|
this.Flop(this.card)
|
|
},
|
|
|
|
Flop(data) {
|
|
let which, position, pokerindex
|
|
if (data.status == true) {
|
|
if (this.game_id == 1 || this.game_id == 2) {
|
|
which = data.round.position.toString()
|
|
} else if (this.game_id == 4) {
|
|
which = data.round.order_num.toString()
|
|
position = parseInt(which / 10)
|
|
pokerindex = which % 10
|
|
if (pokerindex == 5) {
|
|
this["role" + position] = data.round.result
|
|
}
|
|
} else if (this.game_id == 5) {
|
|
which = data.round.order_num.toString()
|
|
position = parseInt(which / 10)
|
|
pokerindex = which % 10
|
|
if (pokerindex == 3) {
|
|
this["role" + position] = data.round.result
|
|
}
|
|
}
|
|
|
|
var pokercard = data.round.card
|
|
var pokersrc = require("../assets/images/poker/" + pokercard + ".png")
|
|
setTimeout(() => {
|
|
var $position = this.$refs["position_" + which]
|
|
var $poker = this.$refs["pocker_" + which]
|
|
if (this.game_id == 1) {
|
|
if (which == 13) {
|
|
if (this.$refs.position_13) {
|
|
this.$refs.position_13.style.display = "inline-block"
|
|
}
|
|
}
|
|
if (which == 23) {
|
|
if (this.$refs.position_23) {
|
|
this.$refs.position_23.style.display = "inline-block"
|
|
}
|
|
}
|
|
}
|
|
if ($position) {
|
|
$position.classList.add("active")
|
|
$poker.style.backgroundImage = "url('" + pokersrc + "')"
|
|
}
|
|
}, 100)
|
|
}
|
|
},
|
|
openResult(data) {
|
|
// console.log("openResult", data)
|
|
if (this.game_id == 1 || this.game_id == 2) {
|
|
if (data.round.opening == 1) {
|
|
this.bankerIsWin = true
|
|
} else if (data.round.opening == 2) {
|
|
this.playerIsWin = true
|
|
}
|
|
this.bankernum = data.round.banker
|
|
this.playernum = data.round.player
|
|
} else if (this.game_id == 4 || this.game_id == 5) {
|
|
this.win_player_1 = data.round.win_player_1
|
|
this.win_player_2 = data.round.win_player_2
|
|
this.win_player_3 = data.round.win_player_3
|
|
}
|
|
|
|
var that = this
|
|
this.timeResult1 = setTimeout(() => {
|
|
that.show = false
|
|
that.bankerIsWin = false
|
|
that.playerIsWin = false
|
|
that.win_player_1 = null
|
|
that.win_player_2 = null
|
|
that.win_player_3 = null
|
|
that.bankernum = ""
|
|
that.playernum = ""
|
|
that.role4 = ""
|
|
that.role1 = ""
|
|
that.role2 = ""
|
|
that.role3 = ""
|
|
if (that.game_id == 4 || that.game_id == 5) {
|
|
var firstfaces = require("../assets/images/poker/faces.png")
|
|
if (that.$refs.pocker_0) {
|
|
that.$refs.pocker_0.style.backgroundImage =
|
|
"url(" + firstfaces + ")"
|
|
}
|
|
}
|
|
}, 7000)
|
|
this.timeResult2 = setTimeout(() => {
|
|
that.isPoker = false
|
|
}, 7500)
|
|
},
|
|
resetPock() {
|
|
this.bankerIsWin = false
|
|
this.playerIsWin = false
|
|
this.win_player_1 = null
|
|
this.win_player_2 = null
|
|
this.win_player_3 = null
|
|
this.bankernum = ""
|
|
this.playernum = ""
|
|
this.role4 = ""
|
|
this.role1 = ""
|
|
this.role2 = ""
|
|
this.role3 = ""
|
|
if (this.game_id == 4 || this.game_id == 5) {
|
|
var firstfaces = require("../assets/images/poker/faces.png")
|
|
if (this.$refs.pocker_0) {
|
|
this.$refs.pocker_0.style.backgroundImage = "url(" + firstfaces + ")"
|
|
}
|
|
}
|
|
this.show = false
|
|
this.isPoker = false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
$Type: (state) => state.config.$Type,
|
|
$lang: (state) => state.config.$lang,
|
|
online: (state) => state.config.online
|
|
})
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler() {
|
|
clearTimeout(this.timeResult1)
|
|
clearTimeout(this.timeResult2)
|
|
this.timeResult1 = null
|
|
this.timeResult2 = null
|
|
this.bankerIsWin = false
|
|
this.playerIsWin = false
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
online: {
|
|
handler(online) {
|
|
if (online == true) {
|
|
if (this.thisData.bet_status == 2) {
|
|
var that = this
|
|
setTimeout(() => {
|
|
that.show = true
|
|
}, 100)
|
|
// 已翻牌
|
|
this.$nextTick(() => {
|
|
this.showCard(this.thisData)
|
|
})
|
|
} else {
|
|
this.resetPock()
|
|
}
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
thisData: {
|
|
handler(newData) {
|
|
if (newData && newData.game_id) {
|
|
const that = this
|
|
// 第一次赋值判断
|
|
if (this.isfrist == true || newData.sendMode == "getState") {
|
|
this.isfrist = false
|
|
this.game_id = newData.game_id
|
|
if (newData.bet_status == 2) {
|
|
that.isPoker = true
|
|
setTimeout(() => {
|
|
that.show = true
|
|
}, 100)
|
|
// 已翻牌
|
|
this.$nextTick(() => {
|
|
this.showCard(newData)
|
|
})
|
|
} else if (newData.bet_status == 0) {
|
|
this.isPoker = false
|
|
}
|
|
if (newData.sendMode == "startBetCountDown") {
|
|
if (this.show == true) {
|
|
this.resetPock()
|
|
}
|
|
}
|
|
}
|
|
// 翻牌 开结果
|
|
if (newData.sendMode != "" && newData.sendMode != undefined) {
|
|
if (newData.sendMode == "endBet") {
|
|
const that = this
|
|
that.isPoker = true
|
|
setTimeout(() => {
|
|
that.show = true
|
|
}, 100)
|
|
} else if (newData.sendMode == "sendScanResult") {
|
|
this.Flop(newData)
|
|
} else if (newData.sendMode == "openingBaccaratResult") {
|
|
this.openResult(newData)
|
|
} else if (newData.sendMode == "openingDtResult") {
|
|
this.openResult(newData)
|
|
} else if (newData.sendMode == "openingNnResult") {
|
|
this.openResult(newData)
|
|
} else if (newData.sendMode == "openingTcResult") {
|
|
this.openResult(newData)
|
|
} else if (newData.sendMode == "resetNumberTab") {
|
|
this.bankerIsWin = false
|
|
this.playerIsWin = false
|
|
this.win_player_1 = null
|
|
this.win_player_2 = null
|
|
this.win_player_3 = null
|
|
this.bankernum = ""
|
|
this.playernum = ""
|
|
this.role4 = ""
|
|
this.role1 = ""
|
|
this.role2 = ""
|
|
this.role3 = ""
|
|
if (this.game_id == 4 || this.game_id == 5) {
|
|
var firstfaces = require("../assets/images/poker/faces.png")
|
|
if (this.$refs.pocker_0) {
|
|
this.$refs.pocker_0.style.backgroundImage =
|
|
"url(" + firstfaces + ")"
|
|
}
|
|
}
|
|
this.show = false
|
|
this.isPoker = false
|
|
} else if (
|
|
newData.sendMode == "startBet" ||
|
|
newData.sendMode == "startBetCountDown"
|
|
) {
|
|
if (this.show == true) {
|
|
this.resetPock()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
props: {
|
|
thisData: Object
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.poker-box {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 10;
|
|
align-items: center;
|
|
transform: rotateX(0deg);
|
|
}
|
|
|
|
.poker-box .list {
|
|
width: 50%;
|
|
height: 100%;
|
|
-webkit-background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
align-items: center;
|
|
flex: 1;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.baccarat .banker {
|
|
background-image: url("~@/assets/images/card_banker_bg.png");
|
|
margin-left: -0.6rem;
|
|
}
|
|
.baccarat .player {
|
|
background-image: url("~@/assets/images/cards_player_bg.png");
|
|
margin-right: -0.6rem;
|
|
}
|
|
|
|
.longhu .banker {
|
|
background-image: url("~@/assets/images/card_long_bg.png");
|
|
margin-right: -0.6rem;
|
|
}
|
|
.longhu .player {
|
|
background-image: url("~@/assets/images/cards_hu_bg.png");
|
|
margin-left: -0.6rem;
|
|
}
|
|
|
|
.poker-box .font {
|
|
// display: inline-block;
|
|
// vertical-align: middle;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.baccarat .banker .font {
|
|
padding-right: 0.2rem;
|
|
color: #fff9f9;
|
|
}
|
|
.baccarat .player .font {
|
|
padding-left: 0.2rem;
|
|
color: #fff9f9;
|
|
}
|
|
|
|
.longhu .banker .font {
|
|
padding-left: 0.2rem;
|
|
color: #fff9f9;
|
|
}
|
|
.longhu .player .font {
|
|
padding-right: 0.2rem;
|
|
color: #fff9f9;
|
|
}
|
|
|
|
.poker-box .item {
|
|
width: 1.45rem;
|
|
height: 2rem;
|
|
padding: 0 0.1rem;
|
|
transform: rotateX(0deg);
|
|
}
|
|
|
|
.poker-box .item .card {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("~@/assets/images/poker/faces.png") no-repeat;
|
|
-webkit-background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.baccarat .player .item:first-child {
|
|
transform: rotate(90deg);
|
|
margin-right: 0.15rem;
|
|
display: none;
|
|
}
|
|
|
|
.baccarat .banker .item:last-child {
|
|
transform: rotate(90deg);
|
|
margin-left: 0.15rem;
|
|
display: none;
|
|
}
|
|
|
|
.poker-box .list .item.active span {
|
|
-webkit-backface-visibility: visible;
|
|
backface-visibility: visible;
|
|
-webkit-animation-name: flipIn_Y;
|
|
animation-name: flipIn_Y;
|
|
-webkit-animation-iteration-count: initial;
|
|
animation-iteration-count: initial;
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.poker-box .list.win span:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: rgba(255, 235, 59, 0.1);
|
|
animation-timing-function: ease-in-out;
|
|
animation-name: breathe;
|
|
animation-duration: 500ms;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
z-index: -1;
|
|
}
|
|
.poker-box.nn {
|
|
height: 3.1rem;
|
|
}
|
|
.poker-box.nn .list:first-child {
|
|
border: none;
|
|
}
|
|
.poker-box.nn .list {
|
|
border-left: 1px solid #565555;
|
|
position: relative;
|
|
}
|
|
.poker-box.nn .list .title {
|
|
font-size: 0.48rem;
|
|
font-weight: bold;
|
|
display: block;
|
|
text-shadow: 0px 0px 0px #2d2d2d;
|
|
padding-top: 0.1rem;
|
|
}
|
|
|
|
.nn_position {
|
|
font-size: 0.28rem;
|
|
font-weight: bold;
|
|
height: 0.55rem;
|
|
}
|
|
.nn_position strong {
|
|
padding-right: 0.4rem;
|
|
color: #fff;
|
|
transform: rotateX(1deg);
|
|
}
|
|
|
|
.nn_position .item {
|
|
width: 0.55 * 1.7rem;
|
|
height: 0.75 * 1.7rem;
|
|
transform: rotate(90deg);
|
|
}
|
|
.nn_position .item .card {
|
|
background: url("~@/assets/images/poker/faces.png") no-repeat;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.nn_position .item.active span {
|
|
-webkit-backface-visibility: visible;
|
|
backface-visibility: visible;
|
|
-webkit-animation-name: flipIn_Y;
|
|
animation-name: flipIn_Y;
|
|
-webkit-animation-iteration-count: initial;
|
|
animation-iteration-count: initial;
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
.blue {
|
|
color: #00a8ff;
|
|
}
|
|
.red {
|
|
color: #ff494b;
|
|
}
|
|
</style>
|
|
<style type="text/css">
|
|
.play .nn_position {
|
|
z-index: 1000;
|
|
font-size: 0.45rem;
|
|
padding: 0 0.4rem;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: -8.5rem;
|
|
left: 0.5rem;
|
|
transform: rotateX(0deg);
|
|
}
|
|
|
|
.play .poker-box.nn {
|
|
width: 100%;
|
|
height: 100%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.play .poker-box.nn.sanka {
|
|
min-width: 4.5rem;
|
|
}
|
|
.play .poker-box.nn .list {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.play .poker-box.nn .list .title {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 0.2rem;
|
|
}
|
|
.play .poker-box.nn .list .title span {
|
|
display: block;
|
|
font-size: 0.5rem;
|
|
}
|
|
|
|
.play .nn.poker-box .list .top,
|
|
.play .nn.poker-box .list .bottom {
|
|
/* display: inline-block; */
|
|
/* vertical-align: middle; */
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.multiple .nn.poker-box .list {
|
|
height: 3.65rem;
|
|
width: 25%;
|
|
}
|
|
.multiple .nn.poker-box .list .top,
|
|
.multiple .nn.poker-box .list .bottom {
|
|
overflow: hidden;
|
|
height: 1.2rem;
|
|
}
|
|
.multiple .nn.poker-box .list .item {
|
|
vertical-align: top;
|
|
margin-top: 0.1rem;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.poker-box.pt_nn,
|
|
.poker-box.tr_nn {
|
|
.list {
|
|
position: relative;
|
|
height: 100%;
|
|
padding-left: 0.3rem;
|
|
border: none;
|
|
.title {
|
|
position: absolute;
|
|
top: -0.4rem;
|
|
font-size: 0.4rem;
|
|
padding: 0.03rem 0.2rem;
|
|
border-radius: 0.05rem;
|
|
&.blue {
|
|
background: #00a8ff;
|
|
color: #fff;
|
|
}
|
|
&.red {
|
|
background: #ff494b;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.role {
|
|
position: absolute;
|
|
width: 85%;
|
|
left: 50%;
|
|
top: 50%;
|
|
z-index: 10;
|
|
font-size: 0.6rem;
|
|
color: #fff;
|
|
padding: 0.1rem 0;
|
|
margin-left: -2.35rem;
|
|
margin-top: -0.2rem;
|
|
background: -webkit-linear-gradient(
|
|
left,
|
|
rgba(38, 38, 38, 0.1) 0%,
|
|
rgba(38, 38, 38, 0.35) 22%,
|
|
rgba(38, 38, 38, 0.6) 43%,
|
|
rgba(38, 38, 38, 0.6) 62%,
|
|
rgba(38, 38, 38, 0.35) 80%,
|
|
rgba(38, 38, 38, 0.1) 100%
|
|
);
|
|
}
|
|
.item {
|
|
width: 0.75 * 1.6rem;
|
|
height: 1 * 1.6rem;
|
|
margin-left: -0.45rem;
|
|
margin-top: 0.55rem;
|
|
&:nth-of-type(1) {
|
|
z-index: 1;
|
|
}
|
|
&:nth-of-type(2) {
|
|
z-index: 2;
|
|
}
|
|
&:nth-of-type(3) {
|
|
z-index: 3;
|
|
}
|
|
&:nth-of-type(4) {
|
|
z-index: 4;
|
|
}
|
|
&:nth-of-type(5) {
|
|
z-index: 5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.poker-box.tr_nn .list .role {
|
|
width: 52%;
|
|
margin-left: -1.7rem;
|
|
transform: rotateX(0deg);
|
|
}
|
|
.poker-box.pt_nn .list .role {
|
|
transform: rotateX(0deg);
|
|
}
|
|
|
|
</style>
|