Skip to content

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

save

parent 1be52495
Hide whitespace changes
Inline Side-by-side
Showing with 372 additions and 36 deletions
components/common/device/index.vue 0 → 100644
View file @ fc006c96
<template>
<div v-audio :class="{btn: !data.playerId}" class="device-box" @click="click().joinGasme(data)">
<div class="header">
<div v-if="header === 'title'" class="game-name">{{ data.gameNameEn }}</div>
<div v-if="header === 'player'">
<img class="img player" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_play_again.png" alt="">
</div>
</div>
<div class="device-content">
<img :src="data.lobbyImg | img" alt="" class="game-img">
<img v-if="data.playerId" :src="userImg[0]" alt="" class="user">
</div>
<!-- <div>
gameNameEn: {{ data.gameNameEn }}
</div>
<div>
assetNumber: {{ data.assetNumber }}
</div>
<div>
id: {{ data.id }}
</div> -->
<div class="num-box">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_ellipse_03.png" alt="">
<div class="num">{{ data.egmId }}</div>
</div>
<DeviceDialog ref="dialog"/>
</div>
</template>
<script>
import DeviceDialog from '@/components/dialog/device'
export default {
components: {
DeviceDialog,
},
props: {
data: {
type: Object,
default: () => {
return {}
},
},
header: {
type: String,
default: 'title',
},
},
data() {
const userImg = [
'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/people_5.png',
'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/4.png',
'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/2.png',
'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/3.png',
'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/6.png',
]
return {
userImg,
}
},
methods: {
click() {
return {
joinGasme: ({ id, playerId }) => {
if (playerId) {
return
}
const data = {
deviceId: id,
}
this.$request({
url: '/api/gaming',
method: 'post',
data,
}).then(({ data }) => {
this.$router.replace(`/game?id=${id}`)
})
},
showJoinGasme: () => {
this.$refs.dialog.show()
},
}
},
},
}
</script>
<style lang="scss" scoped>
.device-box {
width: 170px;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
.header{
position: relative;
height: 60px;
.game-name {
margin-top: 10px;
text-align: center;
font-size: 15px;
color: #f7ff00;
font-weight: bold;
}
.player {
width: 80%;
display: block;
margin: -6px auto;
}
}
.device-content {
flex: 1;
/* background: red; */
width: 80%;
margin: auto;
position: relative;
.game-img {
max-width: 100%;
max-height: 100%;
/* height: 100%; */
height: 200px;
margin: auto;
display: block;
}
.user {
position: absolute;
bottom: 20px;
width: 120px;
left: 8px;
}
}
.num-box {
position: absolute;
right: -12px;
bottom: -8px;
width: 60px;
height: 60px;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.num {
text-align: center;
position: relative;
z-index: 1;
margin-top: 22px;
font-size: 14px;
text-shadow: 0px 0px 6px black;
}
}
}
</style>
components/common/header/index.vue
View file @ fc006c96
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
<img v-audio src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Full%20Screen%20Button.png" alt=""> <img v-audio src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Full%20Screen%20Button.png" alt="">
</div> </div>
</div> </div>
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Rectangle.png" style="height: 30px; width: 100%; margin: 70px -10px;" alt="">
<Confirm ref="confirm" title="登出" message="您要登出当前账号吗？" @confirm="() => network().quitAccount()"/> <Confirm ref="confirm" title="登出" message="您要登出当前账号吗？" @confirm="() => network().quitAccount()"/>
<Confirm <Confirm
ref="outGame" ref="outGame"
...@@ -177,7 +178,7 @@ export default { ...@@ -177,7 +178,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.header { .header {
height: 80px; height: 70px;
position: relative; position: relative;
z-index: 100; z-index: 100;
// 隐藏头部会有诡异bug，先这样处理 // 隐藏头部会有诡异bug，先这样处理
...@@ -209,9 +210,10 @@ export default { ...@@ -209,9 +210,10 @@ export default {
color: white; color: white;
font-size: 12px; font-size: 12px;
font-weight: 100; font-weight: 100;
padding-left: 30px; padding-left: 10px;
text-transform: uppercase; text-transform: uppercase;
zoom: 0.7; margin-top: 14px;
zoom: 0.9;
} }
.time{ .time{
color: white; color: white;
......
components/dialog/device.vue 0 → 100644
View file @ fc006c96
<template>
<Dialog
ref="dialog"
width="502px"
height="300px"
>
<div class="bg"/>
<div class="content">
cibtebt
</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: {
data: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
visible: false,
}
},
computed: {
...mapState([
'zoom',
'userInfo',
]),
},
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-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop.png);
background-size: 100% 100%;
}
.close {
position: absolute;
right: -20px;
top: -16px;
width: 38px;
z-index: 10;
}
.content {
}
</style>
pages/index.vue
View file @ fc006c96
...@@ -64,12 +64,14 @@ export default { ...@@ -64,12 +64,14 @@ export default {
mounted() { mounted() {
this.GetBaseInfo() this.GetBaseInfo()
this.GetDeviceList() this.GetDeviceList()
this.GetTopDeviceList()
this.network().isGaming() this.network().isGaming()
}, },
methods: { methods: {
...mapActions([ ...mapActions([
'GetBaseInfo', 'GetBaseInfo',
'GetDeviceList', 'GetDeviceList',
'GetTopDeviceList',
]), ]),
init() { init() {
return { return {
...@@ -211,6 +213,7 @@ export default { ...@@ -211,6 +213,7 @@ export default {
break break
case 10003: // 需要更细设备列表 case 10003: // 需要更细设备列表
this.GetDeviceList() this.GetDeviceList()
this.GetTopDeviceList()
break break
case 10000: // 需要更新用户信息 case 10000: // 需要更新用户信息
this.GetBaseInfo() this.GetBaseInfo()
......
pages/index/device.vue
View file @ fc006c96
<template> <template>
<div> <div class="layout">
index <div class="device-list" style="height: 350px;">
<div v-audio v-for="(item, index) in deviceList" :key="index" class="box btn" @click="click().joinGasme(item)"> <div v-for="(item, index) in topDeviceList" :key="index" class="device">
<div> <Device :data="item" :header="headerType[index]"/>
gameNameEn: {{ item.gameNameEn }}
</div> </div>
<div> </div>
assetNumber: {{ item.assetNumber }} <div class="device-header">
<div class="menu">
<div class="btn" @click="filter = 'all'">
<img v-if="filter === 'all'" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/filter_01bright%20.png" alt="">
<img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_01.png" alt="">
</div>
<div class="btn" @click="filter = 'Jackpot'">
<img v-if="filter === 'Jackpot'" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_02bright.png" alt="">
<img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_02.png" alt="">
</div>
<div class="btn" @click="filter = 'dragons'">
<img v-if="filter === 'dragons'" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_03bright.png" alt="">
<img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_03.png" alt="">
</div>
<div class="btn" @click="filter = 'sigma'">
<img v-if="filter === 'sigma'" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_04bright.png" alt="">
<img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_04.png" alt="">
</div>
<div class="btn" @click="filter = 'duo fu duo cai'">
<img v-if="filter === 'duo fu duo cai'" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_05bright.png" alt="">
<img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_05.png" alt="">
</div>
<div class="btn" @click="filter = 'table game'">
<img v-if="filter === 'table game'" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_06bright.png" alt="">
<img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_06.png" alt="">
</div>
<div class="btn" @click="filter = '???'">
<img v-if="filter === '???'" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_07bright.png" alt="">
<img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_07.png" alt="">
</div>
</div>
</div>
<div class="device-list">
<div class="jackpot-box">
<Jackpot class="jackpot"/>
</div> </div>
<div> <div v-for="(item, index) in showDeviceList" :key="index" class="device">
id: {{ item.id }} <Device :data="item" />
</div> </div>
</div> </div>
</div> </div>
...@@ -17,48 +50,49 @@ ...@@ -17,48 +50,49 @@
<script> <script>
import { mapState, mapActions, mapMutations } from 'vuex' import { mapState, mapActions, mapMutations } from 'vuex'
import Jackpot from '@/components/common/jackpot/index'
import Device from '@/components/common/device/index'
export default { export default {
components: {
Device,
Jackpot,
},
data() { data() {
return { return {
headerType: [
'player',
'daily',
'weekly',
'month',
'pick',
],
filter: 'all',
} }
}, },
computed: { computed: {
...mapState([ ...mapState([
'deviceList', 'deviceList',
'topDeviceList',
]), ]),
showDeviceList() {
const { filter } = this
return this.deviceList.filter(i => filter === 'all' || i.pcLobbyFilter === filter)
},
}, },
watch: { watch: {
topDeviceList() {
console.log('topDeviceList', this.topDeviceList, JSON.stringify(this.topDeviceList))
},
}, },
created() { created() {
}, },
methods: { methods: {
click() { click() {
return { return {
joinGasme: ({ id }) => {
const data = {
deviceId: id,
}
this.$request({
url: '/api/gaming',
method: 'post',
data,
}).then(({ data }) => {
this.$router.replace(`/game?id=${id}`)
})
},
} }
}, },
network() { network() {
return { return {
getData: () => {
this.$request({
url: '/api/app/device/list',
method: 'get',
}).then(({ rows }) => {
console.log('list', rows)
this.list = rows
})
},
} }
}, },
}, },
...@@ -72,4 +106,48 @@ export default { ...@@ -72,4 +106,48 @@ export default {
margin: 10px; margin: 10px;
color: white; color: white;
} }
.layout {
color: white;
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/bg_01.jpg);
background-size: 100%;
background-repeat: no-repeat;
overflow: auto;
height: 100%;
.device-list {
/* float: left; */
padding: 0 30px;
.jackpot-box {
width: 186px;
height: 200px;
display: inline-block;
position: relative;
.jackpot {
margin-left: -30px;
margin-top: -50px;
}
}
.device {
display: inline-block;
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Background.png);
background-size: 100% 100%;
vertical-align: top;
margin: 20px 10px;
}
}
.device-header {
background-image: linear-gradient(rgba(255, 0, 0, 0.285), rgba(255, 0, 0, 0));
.menu {
margin-left: 280px;
display: flex;
gap: 8px;
.btn {
height: 50px;
width: 50px;
img{
width: 100%;
}
}
}
}
}
</style> </style>
pages/index/game/index.vue
View file @ fc006c96
...@@ -207,7 +207,7 @@ export default { ...@@ -207,7 +207,7 @@ export default {
.player { .player {
display: flex; display: flex;
left: 250px; left: 250px;
top: 10px; top: 20px;
position: relative; position: relative;
.live-play { .live-play {
width: 536px; width: 536px;
......
pages/loading/data/images.json
View file @ fc006c96
...@@ -94,5 +94,7 @@ ...@@ -94,5 +94,7 @@
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png", "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop_up_bg.png", "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop_up_bg.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/logout_sel_zh.png", "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/logout_sel_zh.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/loginBg1.png" "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/loginBg1.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Background.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_ellipse_03.png"
] ]
store/index.js
View file @ fc006c96
...@@ -32,6 +32,7 @@ export const state = () => ({ ...@@ -32,6 +32,7 @@ export const state = () => ({
authBtnIdList: [], // 权限按钮id列表 authBtnIdList: [], // 权限按钮id列表
deviceList: [], // 设备列表 deviceList: [], // 设备列表
device: {}, // 当前设备 device: {}, // 当前设备
topDeviceList: [], // 推荐设备列表
token: getToken(), token: getToken(),
imToken: getImToken(), imToken: getImToken(),
zoom: 1, // 当前屏幕缩放比例 zoom: 1, // 当前屏幕缩放比例
...@@ -169,6 +170,10 @@ export const mutations = { ...@@ -169,6 +170,10 @@ export const mutations = {
state.deviceList = data state.deviceList = data
}, },
SetTopDeviceList(state, data) {
state.topDeviceList = data
},
// 设置当前玩的游戏机 // 设置当前玩的游戏机
SetDevice(state, data) { SetDevice(state, data) {
state.device = data state.device = data
...@@ -260,5 +265,15 @@ export const actions = { ...@@ -260,5 +265,15 @@ export const actions = {
reject(error) reject(error)
}) })
}) })
} },
GetTopDeviceList({ commit }) {
return new Promise((resolve, reject) => {
this.$request.get('/api/app/device/topDeviceList').then(({ data }) => {
commit('SetTopDeviceList', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
} }
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