Skip to content

E
eslotsys-game-nuxt
Commit a0a1c3f7 authored by 毛线's avatar 毛线
Browse files
Options

jackpot

parent 507dcbd6
Hide whitespace changes
Inline Side-by-side
Showing with 503 additions and 5 deletions
components/common/jackpot/index.vue 0 → 100644
View file @ a0a1c3f7
<template>
<!-- 此页面图片没有加入预加载 -->
<div v-if="list.length" class="jackpot">
<img class="title-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/MysteryChinese.png" alt="">
<div class="grand">
<img class="bg" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/%E7%BB%84%201(2).png " alt="">
<div class="box">
<div class="label-box">
<div class="name">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Grand%20Mystery.png" alt="">
</div>
<div><img class="img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/rangeChinese.png" alt=""></div>
</div>
<div class="value-box">
<div class="value">{{ list[0].currentAmount }}</div>
<div class="size">{{ list[0].minAmount }} ~ {{ list[0].maxAmount }}</div>
</div>
</div>
</div>
<div class="mega">
<img class="bg" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Vector%20Smart%20Object%20copy%205.png" alt="">
<div class="box">
<div class="label-box">
<div class="name">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/MEGA.png" alt="">
</div>
<div><img class="img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/range2Chinese.png" alt=""></div>
</div>
<div class="value-box">
<div class="value">{{ list[1].currentAmount }}</div>
<div class="size">{{ list[1].minAmount }} ~ {{ list[1].maxAmount }}</div>
</div>
</div>
</div>
<div class="list">
<img class="bg" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Vector%20Smart%20Object.png" alt="">
<template v-for="(item, index) in list">
<div v-if="index > 1" :key="index">
<div class="item">
<img v-if="item.currentAmount > item.fireTrigger" :style="{width: `${(190 - index * 2)}px`}" class="fire" src="https://kuawai.s3.ap-east-1.amazonaws.com/gif/fire.gif" alt="">
<div class="label-box">
<div class="name">{{ item.levelName }}</div>
</div>
<div class="value-box">
<div class="value">{{ item.currentAmount }}</div>
<div class="size">{{ item.minAmount }} ~ {{ item.maxAmount }}</div>
</div>
</div>
<img v-if="index < 5" class="line" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Rectangle%204%20copy%205.png" alt="">
</div>
</template>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
}
},
created() {
this.network().jackpot()
},
methods: {
network() {
return {
jackpot: () => {
this.$request({
url: '/api/app/jackpot/list',
method: 'get',
}).then(({ data }) => {
const list = data.filter(i => i.isMulti === 0)
const compare = (property) => {
return function(a, b) {
var value1 = a[property]
var value2 = b[property]
return value2 - value1
}
}
list.sort(compare('minAmount'))
this.list = list
setTimeout(() => {
this.network().jackpot()
}, 1000)
})
},
}
},
},
}
</script>
<style lang="scss" scoped>
.jackpot {
position: relative;
.title-img {
height: 28px;
margin-left: 10px;
}
.grand {
height: 54px;
width: 210px;
position: relative;
.bg {
position: absolute;
right: 0;
top: -6px;
height: 64px;
z-index: 20;
}
.box {
display: flex;
color: white;
position: relative;
z-index: 50;
padding: 4px 0 6px;
/* padding-bottom: 8px; */
height: 50px;
box-sizing: border-box;
.label-box {
width: 70px;
font-size: 10px;
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: space-evenly;
text-align: right;
margin-right: 10px;
.name {
font-size: 14px;
img {
height: 17px;
}
}
.img {
height: 14px;
}
}
.value-box {
display: flex;
font-size: 14px;
flex-direction: column;
justify-content: space-evenly;
text-shadow: 1px 1px 1px black;
.size {
zoom: 0.92;
font: 12px;
}
}
}
}
.mega {
height: 54px;
width: 190px;
position: relative;
margin-top: -6px;
.bg {
position: absolute;
right: 0;
top: 0px;
height: 54px;
z-index: 10;
}
.box {
display: flex;
color: white;
position: relative;
z-index: 50;
padding: 0px;
padding-top: 4px;
height: 50px;
box-sizing: border-box;
.label-box {
width: 66px;
font-size: 10px;
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: space-evenly;
text-align: right;
margin-right: 10px;
.name {
font-size: 14px;
img {
height: 17px;
}
}
.img {
height: 14px;
}
}
.value-box {
display: flex;
flex-direction: column;
justify-content: space-evenly;
font-weight: bold;
font-size: 14px;
line-height: 16px;
font-weight: bold;
.size {
zoom: 0.94;
margin-top: -2px;
font-size: 12px;
}
> div {
background-image: -webkit-linear-gradient(bottom,#d9b204,#d9b204,white);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.list {
width: 170px;
height: 222px;
top: -10px;
padding: 16px 0 8px 0;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
.bg {
position: absolute;
right: 0;
top: 0;
width: 190px;
}
.item {
position: relative;
z-index: 60;
display: flex;
font-size: 12px;
color: white;
padding: 4px 10px;
height: 32px;
.fire {
position: absolute;
left: -10px;
top: -14px;
height: 68px;
}
.label-box {
margin-right: 10px;
width: 55px;
font-size: 12px;
zoom: 0.9;
}
.value-box {
color: #e3bb04;
display: flex;
flex-direction: column;
justify-content: space-between;
/* text-shadow: 1px 1px 1px black; */
font-size: 14px;
line-height: 16px;
.size {
zoom: 0.9;
font-size: 12px;
}
> div {
background-image: -webkit-linear-gradient(bottom,#d9b204,#d9b204,white);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
}
}
.line {
height: 2px;
display: block;
position: relative;
z-index: 50;
margin-top: 5px;
}
}
}
</style>
components/common/menu.vue
View file @ a0a1c3f7
<template>
<div>
<div class="layout-menu">
<div :class="{is_mobile: is_mobile}" class="layout-menu">
<div class="menu-item">
<img v-audio class="btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png" alt="" @click="$refs.audioSettingDialog.show()">
</div>
......@@ -10,6 +10,7 @@
</template>
<script>
import { mapGetters } from 'vuex'
import AudioSettingDialog from '@/components/dialog/audio/index'
export default {
components: {
......@@ -18,6 +19,11 @@ export default {
data() {
return {}
},
computed: {
...mapGetters([
'is_mobile',
]),
},
}
</script>
......@@ -40,5 +46,8 @@ export default {
margin: auto;
}
}
&.is_mobile {
right: -20px;
}
}
</style>
components/dialog/index.vue
View file @ a0a1c3f7
<template>
<div v-show="visible" class="dialog-layout" >
<div class="mark"/>
<div :style="{ height, }" class="dlalog">
<div :style="{ height, width, }" class="dlalog">
<slot/>
</div>
</div>
......@@ -16,6 +16,10 @@ export default {
type: [String],
default: '350px',
},
width: {
type: [String],
default: '620px',
},
},
data() {
return {
......
components/dialog/jackpot.vue 0 → 100644
View file @ a0a1c3f7
<template>
<Dialog
ref="dialog"
width="502px"
height="300px"
>
<img v-audio class="close btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png" alt="" @click="visible = false">
<div class="bg"/>
<div class="content">
<div class="title">{{ title }}</div>
<div class="message">
<div class="info"><strong>Jackpot</strong>: {{ data.levelName }}</div>
<div class="info"><strong>Amount</strong>:
<img v-if="data.creditType === 1" class="red-coin" src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/header/gold-coin.png" alt="">
<img v-if="data.creditType === 2" class="red-coin" src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/header/red-coin.png" alt="">
{{ data.amount }}
</div>
<div style="margin-top: 30px;">
<template v-if="selfWin">
<div class="p">
${{ data.amount }} credits has been added to your account.
</div>
</template>
<template v-else>
<div class="p">
Another {{ data.levelName }} Jackpot has just been WON! Congratulations to Player {{ data.nickName }} for winning ${{ data.amount }} credits!!
</div>
</template>
<div class="p">
{{ data.levelName }} Jackpot has been reset.
</div>
</div>
</div>
<div class="footer-tip">
<div>Location No: {{ data.egmId }} - {{ data.egmName }}</div>
<div>Time: {{ data.winTime | filterTime }}</div>
</div>
</div>
</Dialog>
</template>
<script>
import Dialog from '@/components/dialog/index'
import { mapState } from 'vuex'
import dayjs from 'dayjs'
export default {
components: {
Dialog,
},
filters: {
filterTime(value) {
return dayjs(value).format('YYYY-MMMM-DD HH:mm:ss')
},
},
props: {
message: {
type: String,
default: '',
},
tip: {
type: String,
default: '',
},
data: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
visible: false,
}
},
computed: {
...mapState([
'zoom',
'userInfo',
]),
// 自己赢得
selfWin() {
const { data, userInfo } = this
return data.playerId === userInfo.id
},
title() {
const { data, selfWin } = this
const title = selfWin ? 'You are the Jackpot Winner!' : 'A Jackpot Is Won!'
return title
},
},
watch: {
visible(value) {
if (value) {
this.$refs.dialog.show()
} else {
this.$refs.dialog.close()
}
},
},
methods: {
confirm() {
this.$emit('confirm')
this.visible = false
},
show() {
this.visible = true
},
},
}
</script>
<style lang="scss" scoped>
.bg {
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
top: 0;
left: 0;
border-radius: 12px;
background: linear-gradient(30deg,#6d542c,#b78e47, #6d542c);
}
.close {
position: absolute;
right: -20px;
top: -16px;
width: 38px;
z-index: 10;
}
.content {
position: relative;
z-index: 2;
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
.title {
text-align: center;
font-size: 28px;
font-weight: bold;
color: #241804;
margin-top: 30px;
}
.message {
color: #241804;
padding: 16px 38px;
flex: 1;
.info {
margin: 8px;
}
.red-coin {
width: 50px;
margin-block: -24px;
margin-left: -4px;
}
.p {
margin-top: 10px;
}
}
.footer-tip {
line-height: 18px;
text-align: right;
padding: 4px 16px;
font-size: 12px;
color: #241804;
}
}
/deep/ .game-dialog {
position: relative;
background: transparent;
height: 320px;
padding: 0;
.el-dialog__header {
padding: 0;
}
.el-dialog__body {
max-height: inherit;
padding: 0;
overflow: hidden;
height: 100%;
box-sizing: border-box;
}
}
</style>
components/dialog/user-dialog/tab.vue
View file @ a0a1c3f7
......@@ -5,7 +5,7 @@
<img v-if="tabIndex === index" class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png" alt="">
<img v-else class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png" alt="">
<div class="text">{{ text }}</div>
<div v-if="index === 0" class="version">{{ `1.0.023` }}</div>
<div v-if="index === 0" class="version">{{ `1.0.024` }}</div>
</div>
</div>
</div>
......
pages/index.vue
View file @ a0a1c3f7
......@@ -10,6 +10,7 @@
<Menu />
<!-- 个人中心弹窗 -->
<UserDialog ref="userDialog"/>
<JackpotDialog ref="jackpotDialog" :data="jackpotData" />
</div>
</template>
......@@ -23,17 +24,20 @@ import openIM from '@/plugins/openIM'
import { CbEvents } from 'open-im-sdk'
import UserDialog from '@/components/dialog/user-dialog/index'
import { redirectBDUrl } from '@/utils/tool'
import JackpotDialog from '@/components/dialog/jackpot'
export default {
components: {
Header,
Footer,
Menu,
UserDialog,
JackpotDialog,
},
data() {
return {
imLoginStatus: false,
quitLoading: false,
jackpotData: {},
}
},
computed: {
......@@ -186,6 +190,10 @@ export default {
const { eventCode, data: message, } = content
console.log('newMessageCome', content)
switch (eventCode) {
case 10012:
this.jackpotData = JSON.parse(message)
this.$refs.jackpotDialog.show()
break
case 10008: // Credit-in success
case 10006: // Credit-out success
console.log('message', message)
......
pages/index/game/index.vue
View file @ a0a1c3f7
<template>
<div>
<div class="jackpot">
<Jackpot/>
</div>
<Background/>
<div :class="{is_mobile: is_mobile, 'hide-header': hideHeader, }" class="player">
<div ref="livePlay" class="live-play">
......@@ -26,6 +29,7 @@
</template>
<script>
import Jackpot from '@/components/common/jackpot/index'
import Background from '@/components/common/bg/index'
import { mapActions, mapState, mapMutations, mapGetters, } from 'vuex'
import WebRTCPlayer from '@/components/common/WebRTCPlayer'
......@@ -39,6 +43,7 @@ export default {
RightPlayer, // 右侧的直播板块
Keyboard, // 键盘组件
AudioCtrl, // 音量控制
Jackpot,
},
data() {
return {
......@@ -193,9 +198,15 @@ export default {
</script>
<style lang="scss" scoped>
.jackpot {
position: absolute;
left: 0;
top: 50px;
z-index: 1;
}
.player {
display: flex;
left: 200px;
left: 210px;
top: 10px;
position: relative;
.live-play {
......@@ -259,7 +270,7 @@ export default {
}
}
.right-player {
margin-left: 30px;
margin-left: 20px;
}
&.is_mobile {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment