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 @@
<img v-audio src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Full%20Screen%20Button.png" alt="">
</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="outGame"
......@@ -177,7 +178,7 @@ export default {
<style lang="scss" scoped>
.header {
height: 80px;
height: 70px;
position: relative;
z-index: 100;
// 隐藏头部会有诡异bug，先这样处理
......@@ -209,9 +210,10 @@ export default {
color: white;
font-size: 12px;
font-weight: 100;
padding-left: 30px;
padding-left: 10px;
text-transform: uppercase;
zoom: 0.7;
margin-top: 14px;
zoom: 0.9;
}
.time{
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 {
mounted() {
this.GetBaseInfo()
this.GetDeviceList()
this.GetTopDeviceList()
this.network().isGaming()
},
methods: {
...mapActions([
'GetBaseInfo',
'GetDeviceList',
'GetTopDeviceList',
]),
init() {
return {
......@@ -211,6 +213,7 @@ export default {
break
case 10003: // 需要更细设备列表
this.GetDeviceList()
this.GetTopDeviceList()
break
case 10000: // 需要更新用户信息
this.GetBaseInfo()
......
pages/index/device.vue
View file @ fc006c96
<template>
<div>
index
<div v-audio v-for="(item, index) in deviceList" :key="index" class="box btn" @click="click().joinGasme(item)">
<div>
gameNameEn: {{ item.gameNameEn }}
<div class="layout">
<div class="device-list" style="height: 350px;">
<div v-for="(item, index) in topDeviceList" :key="index" class="device">
<Device :data="item" :header="headerType[index]"/>
</div>
<div>
assetNumber: {{ item.assetNumber }}
</div>
<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>
id: {{ item.id }}
<div v-for="(item, index) in showDeviceList" :key="index" class="device">
<Device :data="item" />
</div>
</div>
</div>
......@@ -17,48 +50,49 @@
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import Jackpot from '@/components/common/jackpot/index'
import Device from '@/components/common/device/index'
export default {
components: {
Device,
Jackpot,
},
data() {
return {
headerType: [
'player',
'daily',
'weekly',
'month',
'pick',
],
filter: 'all',
}
},
computed: {
...mapState([
'deviceList',
'topDeviceList',
]),
showDeviceList() {
const { filter } = this
return this.deviceList.filter(i => filter === 'all' || i.pcLobbyFilter === filter)
},
},
watch: {
topDeviceList() {
console.log('topDeviceList', this.topDeviceList, JSON.stringify(this.topDeviceList))
},
},
created() {
},
methods: {
click() {
return {
joinGasme: ({ id }) => {
const data = {
deviceId: id,
}
this.$request({
url: '/api/gaming',
method: 'post',
data,
}).then(({ data }) => {
this.$router.replace(`/game?id=${id}`)
})
},
}
},
network() {
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 {
margin: 10px;
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>
pages/index/game/index.vue
View file @ fc006c96
......@@ -207,7 +207,7 @@ export default {
.player {
display: flex;
left: 250px;
top: 10px;
top: 20px;
position: relative;
.live-play {
width: 536px;
......
pages/loading/data/images.json
View file @ fc006c96
......@@ -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/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/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 = () => ({
authBtnIdList: [], // 权限按钮id列表
deviceList: [], // 设备列表
device: {}, // 当前设备
topDeviceList: [], // 推荐设备列表
token: getToken(),
imToken: getImToken(),
zoom: 1, // 当前屏幕缩放比例
......@@ -169,6 +170,10 @@ export const mutations = {
state.deviceList = data
},
SetTopDeviceList(state, data) {
state.topDeviceList = data
},
// 设置当前玩的游戏机
SetDevice(state, data) {
state.device = data
......@@ -260,5 +265,15 @@ export const actions = {
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