Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
E
eslotsys-game-nuxt
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
毛线
eslotsys-game-nuxt
Commits
65d63ec2
Commit
65d63ec2
authored
Jul 02, 2023
by
毛线
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
自动玩游戏逻辑,其他的一些优化
预加载,loading
parent
43ac9c1b
Changes
12
Hide whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
583 additions
and
21 deletions
+583
-21
index.vue
components/common/header/index.vue
+32
-7
confirm.vue
components/dialog/confirm.vue
+145
-0
auth.js
middleware/auth.js
+2
-2
nuxt.config.js
nuxt.config.js
+7
-1
index.vue
pages/index.vue
+12
-1
device.vue
pages/index/device.vue
+1
-0
_id.vue
pages/index/game/_id.vue
+141
-7
audio.json
pages/loading/data/audio.json
+5
-0
images.json
pages/loading/data/images.json
+39
-0
index.vue
pages/loading/index.vue
+190
-0
login.vue
pages/login.vue
+1
-1
index.js
store/index.js
+8
-2
No files found.
components/common/header/index.vue
View file @
65d63ec2
...
...
@@ -30,24 +30,36 @@
<div
class=
"profile"
>
<img
v-if=
"userInfo.avatar"
:src=
"userInfo.avatar | img"
alt=
""
class=
"profile-img"
>
<img
v-else
src=
"./static/profile/profile-pic.png"
alt=
""
class=
"profile-img"
>
<img
src=
"./static/profile/card.png"
alt=
""
class=
"card-img"
>
<template
v-if=
"userInfo.id"
>
<img
:src=
"cardImg[userInfo.playerLevelName]"
alt=
""
class=
"card-img"
>
</
template
>
<img
v-else
src=
"./static/profile/card.png"
alt=
""
class=
"card-img"
>
</div>
</div>
<div
class=
"right-block"
>
<div
class=
"btn exit"
@
click=
"click().quit()"
>
<div
v-audio
class=
"btn exit"
@
click=
"click().quit()"
>
<img
src=
"./static/exit-button.png"
alt=
""
>
</div>
<div
class=
"btn full-screen"
@
click=
"click().fullScreen()"
>
<img
src=
"./static/full-screen-button.png"
alt=
""
>
<img
v-audio
src=
"./static/full-screen-button.png"
alt=
""
>
</div>
</div>
<Confirm
ref=
"confirm"
title=
"登出"
message=
"您要登出当前账号吗?"
@
confirm=
"() => network().quitAccount()"
/>
<Confirm
ref=
"outGame"
:tip=
"`Location No:${device ? device.assetNumber : ''} - Endless Treasur`"
title=
"退出游戏"
message=
"机器中所有剩余的积分将自动转回您的钱包。"
@
confirm=
"() => quitGame()"
/>
</div>
</template>
<
script
>
import
dayjs
from
'dayjs'
import
screenfull
from
'screenfull'
import
{
mapState
}
from
'vuex'
import
Confirm
from
'@/components/dialog/confirm'
export
default
{
filters
:
{
filterData
(
time
)
{
...
...
@@ -57,14 +69,26 @@ export default {
return
dayjs
(
time
).
format
(
'HH:mm:ss'
)
},
},
components
:
{
Confirm
,
},
data
()
{
// 卡片
const
cardImg
=
{
Red
:
'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Red.png'
,
Gold
:
'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Gold.png'
,
Silver
:
'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Silver.png'
,
Diamond
:
'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Diamond.png'
,
}
return
{
time
:
new
Date
(),
cardImg
,
}
},
computed
:
{
...
mapState
([
'userInfo'
,
'device'
,
]),
},
created
()
{
...
...
@@ -84,10 +108,10 @@ export default {
console
.
log
(
'quit'
,
name
)
switch
(
name
)
{
case
'index-game-id'
:
// 如果是游戏页面
this
.
quitGame
()
this
.
$refs
.
outGame
.
show
()
break
case
'index'
:
this
.
network
().
quitAccount
()
case
'index
-device
'
:
this
.
$refs
.
confirm
.
show
()
break
}
},
...
...
@@ -109,6 +133,7 @@ export default {
network
()
{
return
{
quitAccount
:
()
=>
{
console
.
log
(
'退出登录接口'
)
this
.
$request
({
url
:
'/api/player/logout'
,
method
:
'post'
,
...
...
@@ -129,7 +154,7 @@ export default {
params
,
}).
then
(({
data
})
=>
{
console
.
log
(
'退出游戏页面'
)
this
.
$router
.
replace
(
'/'
)
this
.
$router
.
replace
(
'/
device
'
)
})
},
},
...
...
components/dialog/confirm.vue
0 → 100644
View file @
65d63ec2
<
template
>
<Dialog
:visible
.
sync=
"visible"
:show-close=
"false"
top=
"300px"
custom-class=
"game-dialog"
title=
""
width=
"542px"
append-to-body
modal-append-to-body
>
<div
class=
"bg"
/>
<div
class=
"content"
>
<div
class=
"title"
>
{{
title
}}
</div>
<div
class=
"message"
>
{{
message
}}
</div>
<div
class=
"dialog-footer"
>
<div
v-audio
class=
"btn"
@
click=
"visible = false"
>
取 消
</div>
<div
v-audio
class=
"btn"
type=
"primary"
@
click=
"confirm"
>
确 定
</div>
</div>
<div
class=
"footer-tip"
>
{{
tip
}}
</div>
</div>
</Dialog>
</
template
>
<
script
>
import
{
Dialog
,
}
from
'element-ui'
export
default
{
components
:
{
Dialog
,
},
props
:
{
title
:
{
type
:
String
,
default
:
''
,
},
message
:
{
type
:
String
,
default
:
''
,
},
tip
:
{
type
:
String
,
default
:
''
,
},
},
data
()
{
return
{
visible
:
false
,
}
},
methods
:
{
confirm
()
{
this
.
$emit
(
'confirm'
)
this
.
visible
=
false
},
show
()
{
console
.
log
(
'show'
)
this
.
visible
=
true
},
},
}
</
script
>
<
style
lang=
"scss"
scoped
>
.bg
{
background-image
:
url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/tip/tip_bg_b.png)
;
background-size
:
100%
100%
;
position
:
absolute
;
width
:
100%
;
height
:
100%
;
z-index
:
1
;
top
:
0
;
left
:
0
;
}
.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
:
#f5be5e
;
margin-top
:
30px
;
}
.message
{
text-align
:
center
;
color
:
#f5be5e
;
margin-top
:
48px
;
font-size
:
18px
;
flex
:
1
;
}
.dialog-footer
{
padding-bottom
:
20px
;
display
:
flex
;
justify-content
:
center
;
.btn
{
background-image
:
url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/tip/tip_btn_b.png)
;
background-size
:
100%
100%
;
width
:
150px
;
height
:
40px
;
opacity
:
0
.80
;
text-align
:
center
;
line-height
:
40px
;
color
:
#5e4926
;
font-size
:
18px
;
font-weight
:
bold
;
margin
:
0
36px
;
&
:hover
{
opacity
:
1
;
};
}
}
.footer-tip
{
height
:
30px
;
line-height
:
30px
;
text-align
:
right
;
padding
:
4px
16px
;
font-size
:
12px
;
color
:
#bc9a6c
;
}
}
/
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
>
middleware/auth.js
View file @
65d63ec2
import
{
Message
}
from
'element-ui'
import
{
getToken
}
from
'@/utils/auth'
// 验权
const
whiteList
=
[
'/lo
gin'
,
'
/test'
]
// 不重定向白名单
const
whiteList
=
[
'/lo
ading'
,
'/login'
,
'/test'
,
'/index
/test'
]
// 不重定向白名单
export
default
({
app
,
redirect
,
route
})
=>
{
const
{
fullPath
,
path
}
=
route
...
...
@@ -9,7 +9,7 @@ export default ({ app, redirect, route }) => {
const
token
=
getToken
()
if
(
fullPath
===
'/'
)
{
// 主页重定向到统计页面
// redirect(`/home/index
`)
redirect
(
`/loading
`
)
}
if
(
!
token
||
relist
)
{
if
(
whiteList
.
indexOf
(
path
)
===
-
1
)
{
// 如果当前路由需要鉴权
...
...
nuxt.config.js
View file @
65d63ec2
...
...
@@ -97,10 +97,16 @@ export default {
})
}
},
// axios: {
// // baseURL,
// proxy: true, // 表示开启代理
// prefix: process.env.NODE_ENV === 'development' ? '/api' : baseURL, // 表示给请求url加个前缀 /api
// credentials: true // 表示跨域请求时是否需要使用凭证
// },
axios
:
{
// baseURL,
proxy
:
true
,
// 表示开启代理
prefix
:
process
.
env
.
NODE_ENV
===
'development'
?
'/api'
:
baseURL
,
// 表示给请求url加个前缀 /api
prefix
:
baseURL
,
// 表示给请求url加个前缀 /api
credentials
:
true
// 表示跨域请求时是否需要使用凭证
},
proxy
:
{
...
...
pages/index.vue
View file @
65d63ec2
...
...
@@ -12,7 +12,8 @@
<
script
>
import
Header
from
'@/components/common/header/index'
import
Footer
from
'@/components/common/footer'
import
{
mapActions
,
mapMutations
,
}
from
'vuex'
import
{
mapActions
,
mapMutations
,
mapState
,
}
from
'vuex'
import
{
Message
}
from
'element-ui'
export
default
{
components
:
{
Header
,
...
...
@@ -21,6 +22,16 @@ export default {
data
()
{
return
{}
},
computed
:
{
...
mapState
([
'relist'
,
]),
},
watch
:
{
relist
()
{
this
.
$router
.
replace
(
`/login`
)
},
},
mounted
()
{
this
.
GetBaseInfo
()
this
.
GetDeviceList
()
...
...
pages/index/
index
.vue
→
pages/index/
device
.vue
View file @
65d63ec2
<
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
}}
...
...
pages/index/game/_id.vue
View file @
65d63ec2
...
...
@@ -2,6 +2,7 @@
<div>
<Background/>
<div
class=
"live-play"
>
<div
class=
"asset-number"
>
EGM:
{{
device
?
device
.
assetNumber
:
''
}}
</div>
<img
src=
"@/assets/images/temp/game/video-play.png"
alt=
""
class=
"bg"
>
<img
v-if=
"isPlay"
src=
"@/assets/images/temp/game/video-play-state.png"
alt=
""
class=
"play-state"
>
<div
class=
"box"
>
...
...
@@ -47,11 +48,20 @@
</div>
<!-- play -->
<img
v-audio
src=
"@/assets/images/temp/game/play-button.png"
alt=
""
class=
"play-btn btn"
@
click=
"
network().button(
{ buttonValue: 2 }
)">
<img
v-audio
src=
"@/assets/images/temp/game/play-button.png"
alt=
""
class=
"play-btn btn"
@
click=
"
click().play(
)"
>
<!-- 自动下注 -->
<div
v-audio
class=
"auto"
>
<img
v-show=
"!isAuto"
src=
"@/assets/images/temp/game/auto-spin-button.png"
alt=
""
class=
"auto-btn btn"
@
click=
"isAuto = !isAuto"
>
<img
v-show=
"isAuto"
src=
"@/assets/images/temp/game/auto-time-button.png"
alt=
""
class=
"auto-btn btn"
@
click=
"isAuto = !isAuto"
>
<img
v-show=
"!isAuto"
src=
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/ic_autoChinese.png"
alt=
""
class=
"auto-btn btn"
@
click=
"showTime = !showTime;"
>
<img
v-show=
"isAuto"
src=
"@/assets/images/temp/game/auto-time-button.png"
alt=
""
class=
"auto-btn btn down"
@
click=
"autoTime = 0"
>
<div
v-if=
"isAuto"
:style=
"autoTime === -1 ? 'font-size: 40px;' : ''"
class=
"auto-time-text"
>
{{
autoTime
|
autoTimeFilter
}}
</div>
<div
class=
"auto-time-block"
>
<div
:class=
"showTime ? 'show' : ''"
class=
"auto-time"
>
<div
class=
"auto-time-item btn"
style=
"font-size: 24px"
@
click=
"click().setAutoPlay(-1)"
>
∞
</div>
<div
v-for=
"time in autoTimeList"
:key=
"time"
class=
"auto-time-item btn"
@
click=
"click().setAutoPlay(time)"
>
{{
time
}}
min
</div>
</div>
</div>
</div>
<!-- bonus -->
<img
src=
"@/assets/images/temp/game/bonus.png"
alt=
""
class=
"btn bonus"
>
...
...
@@ -64,9 +74,21 @@
<
script
>
import
Background
from
'@/components/common/bg/index'
import
{
mapActions
,
mapState
,
}
from
'vuex'
import
{
mapActions
,
mapState
,
mapMutations
,
}
from
'vuex'
import
WebRTCPlayer
from
'./components/WebRTCPlayer'
export
default
{
filters
:
{
autoTimeFilter
(
value
)
{
let
text
=
''
if
(
value
===
-
1
)
{
text
=
'∞'
}
else
{
text
=
value
/
60
text
=
Math
.
floor
(
text
)
+
'm'
}
return
text
},
},
components
:
{
WebRTCPlayer
,
Background
,
...
...
@@ -74,11 +96,13 @@ export default {
data
()
{
return
{
player
:
''
,
isAuto
:
false
,
isPlay
:
false
,
// 直播是否在播放
deviceButtonPanel
:
{},
creditInShow
:
false
,
credistList
:
[
50
,
100
,
200
,
500
,
1000
],
autoTimeList
:
[
30
,
20
,
15
,
5
],
showTime
:
false
,
autoTime
:
0
,
// 自动游戏时间,-1表示无穷
}
},
computed
:
{
...
...
@@ -101,16 +125,27 @@ export default {
btnList2
()
{
return
this
.
btnList
.
filter
(
i
=>
i
.
buttonStatus
===
1
&&
i
.
buttonValue
<=
8
)
},
// 当前设备
device
()
{
const
{
deviceList
,
id
}
=
this
let
device
=
''
let
device
=
{}
try
{
device
=
deviceList
.
filter
(
i
=>
i
.
id
===
id
)[
0
]
}
catch
(
e
)
{
console
.
log
(
'error'
,
e
)
}
this
.
SetDevice
(
device
)
return
device
},
// 是否在自动玩游戏
isAuto
()
{
let
isAuto
=
false
const
{
autoTime
}
=
this
if
(
autoTime
>
0
||
autoTime
===
-
1
)
{
isAuto
=
true
}
return
isAuto
},
},
watch
:
{
device
()
{
...
...
@@ -130,6 +165,9 @@ export default {
...
mapActions
([
'GetBaseInfo'
,
]),
...
mapMutations
([
'SetDevice'
,
]),
init
()
{
return
{
play
:
()
=>
{
...
...
@@ -139,6 +177,25 @@ export default {
this
.
$refs
.
webrtc
.
initVideo
(
webrtc
)
this
.
isPlay
=
true
},
// 自动玩游戏时间倒计时逻辑
autoTime
:
()
=>
{
if
(
this
.
autoTime
>
0
)
{
this
.
autoTime
--
setTimeout
(()
=>
{
this
.
init
().
autoTime
()
},
1000
)
}
},
// 自动玩游戏递归调用
autoPlay
:
()
=>
{
const
{
autoTime
}
=
this
if
(
autoTime
>
0
||
autoTime
===
-
1
)
{
this
.
click
().
play
()
setTimeout
(()
=>
{
this
.
init
().
autoPlay
()
},
2000
)
}
},
}
},
network
()
{
...
...
@@ -259,6 +316,20 @@ export default {
allIn
:
()
=>
{
this
.
network
().
upPoint
({
type
:
2
})
},
play
:
()
=>
{
this
.
network
().
button
({
buttonValue
:
2
})
},
// 设置自动play时间
setAutoPlay
:
(
time
)
=>
{
if
(
time
===
-
1
)
{
this
.
autoTime
=
-
1
}
else
{
this
.
autoTime
=
time
*
60
this
.
init
().
autoTime
()
this
.
showTime
=
false
}
this
.
init
().
autoPlay
()
},
}
},
},
...
...
@@ -275,6 +346,15 @@ export default {
left
:
200px
;
top
:
16px
;
background
:
black
;
.asset-number
{
position
:
absolute
;
left
:
12px
;
top
:
4px
;
z-index
:
2
;
color
:
#dbd5d0
;
font-size
:
18px
;
font-weight
:
bold
;
}
.bg
{
width
:
100%
;
height
:
100%
;
...
...
@@ -428,7 +508,6 @@ export default {
}
.auto
{
width
:
70px
;
height
:
700px
;
position
:
absolute
;
/* background: #ccc; */
bottom
:
68px
;
...
...
@@ -437,8 +516,63 @@ export default {
position
:
absolute
;
bottom
:
0
;
width
:
72px
;
z-index
:
2
;
&
.down
{
width
:
78px
;
height
:
77px
;
bottom
:
-4px
;
left
:
-2px
;
}
}
}
.auto-time-text
{
position
:
absolute
;
bottom
:
25px
;
right
:
5px
;
z-index
:
3
;
text-align
:
center
;
color
:
#2f49e9
;
font-weight
:
bold
;
font-size
:
20px
;
width
:
60px
;
line-height
:
20px
;
}
.auto-time-block
{
position
:
absolute
;
bottom
:
49px
;
right
:
5px
;
overflow
:
hidden
;
height
:
164px
;
width
:
60px
;
overflow
:
hidden
;
.auto-time
{
background-image
:
url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-01.png)
;
background-size
:
100%
100%
;
height
:
164px
;
width
:
60px
;
position
:
absolute
;
bottom
:
-164px
;
right
:
0
;
padding-top
:
2px
;
box-sizing
:
border-box
;
&
.show
{
bottom
:
0
;
}
.auto-time-item
{
height
:
24px
;
color
:
#17bac5
;
line-height
:
24px
;
font-size
:
12px
;
text-align
:
center
;
margin
:
2px
2px
;
&
:hover
{
background-image
:
url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-03.png)
;
background-size
:
100%
100%
;
}
}
}
}
.bonus
{
position
:
absolute
;
width
:
34px
;
...
...
pages/loading/data/audio.json
0 → 100644
View file @
65d63ec2
[
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/Awarding%20of%20Winners%20(Intro).mp3"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/ui_click.mp3"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/Innovation.mp3"
]
\ No newline at end of file
pages/loading/data/images.json
0 → 100644
View file @
65d63ec2
[
"https://app-main.eslotsys-ptn1.com/resource/assets/Textures/loading/Hide.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/CheckBox/checkbox_select_disabled.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/CheckBox/checkbox_select_down.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/CheckBox/checkbox_select_up.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/CheckBox/checkbox_unselect.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ItemRenderer/selected.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Panel/border.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Panel/header.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/RadioButton/radiobutton_select_disabled.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/RadioButton/radiobutton_select_down.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/RadioButton/radiobutton_select_up.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/RadioButton/radiobutton_unselect.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ScrollBar/roundthumb.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/thumb.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/track.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/tracklight.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ToggleSwitch/handle.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ToggleSwitch/off.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ToggleSwitch/on.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Button/button_down.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Button/button_up.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ProgressBar/thumb_pb.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ProgressBar/track_pb.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ScrollBar/track_sb.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_l01.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_l02.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_r01.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_r02.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/1.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/7.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/tip/tip_bg_b.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/tip/tip_btn_b.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/ic_autoChinese.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Autospinning%20Count-Down.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-01.png"
,
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-03.png"
]
pages/loading/index.vue
0 → 100644
View file @
65d63ec2
<
template
>
<div
class=
"page"
>
<div
v-if=
"!showLoading"
class=
"first-screen"
>
<img
:src=
"logo"
alt=
""
class=
"logo"
>
</div>
<div
v-if=
"showLoading"
class=
"loading"
@
click=
"toGame"
>
<div
class=
"bg"
/>
<div
class=
"progress-block"
>
<img
class=
"macot"
src=
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/macot.png"
alt=
""
>
<div
class=
"progress"
>
<img
class=
"progress-box"
src=
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/loading%20bar%20bg.png"
alt=
""
>
<div
class=
"filled"
>
<img
v-for=
"(item, index) in filled"
:key=
"index"
src=
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/filled.png"
alt=
""
>
</div>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
import
{
getToken
}
from
'@/utils/auth'
// 验权
import
_images
from
'./data/images.json'
import
_audio
from
'./data/audio.json'
import
{
mapActions
}
from
'vuex'
export
default
{
data
()
{
const
imagesSrcList
=
_images
const
audioSrcList
=
_audio
return
{
showLoading
:
false
,
imagesSrcList
,
audioSrcList
,
downloadTotal
:
100
,
// 需要预加载的资源总数
downloadImage
:
0
,
// 完成加载的总数
downloadAudio
:
0
,
// 完成加载的总数
logo
:
'https://app-main.eslotsys-ptn1.com/resource/assets/Textures/loading/screen_logo.png'
,
}
},
computed
:
{
// 总共完成加载数量
completeDownload
()
{
const
{
downloadImage
,
downloadAudio
}
=
this
return
(
downloadImage
+
downloadAudio
)
},
// 加载进度
loadingProgress
()
{
const
{
downloadTotal
,
completeDownload
}
=
this
let
progress
=
0
progress
=
completeDownload
>
0
?
(
completeDownload
/
downloadTotal
)
:
1
return
progress
},
// 显示小格子的数量
filled
()
{
const
max
=
12
// 最多显示的数量
let
filled
=
0
const
{
loadingProgress
}
=
this
console
.
log
(
'loadingProgress'
,
loadingProgress
)
filled
=
12
*
loadingProgress
return
Math
.
ceil
(
filled
)
},
},
watch
:
{
downloadImage
(
value
)
{
// console.log('完成加图片载数量', value)
},
downloadAudio
(
value
)
{
// console.log('完成加载音频数量', value)
},
completeDownload
(
value
)
{
// console.log('完成加载数量', value)
},
loadingProgress
(
value
)
{
if
(
value
===
1
)
{
// 加载完成
this
.
toGame
()
}
},
},
mounted
()
{
setTimeout
(()
=>
{
this
.
showLoading
=
true
// logo显示1秒
this
.
loadResources
()
},
1000
)
},
methods
:
{
...
mapActions
([
'GetBaseInfo'
,
]),
toGame
()
{
const
token
=
getToken
()
if
(
token
)
{
this
.
GetBaseInfo
().
then
(()
=>
{
this
.
$router
.
replace
(
'/device'
)
}).
catch
(()
=>
{
this
.
$router
.
replace
(
'/login'
)
})
}
else
{
this
.
$router
.
replace
(
'/login'
)
}
},
loadResources
()
{
const
{
imagesSrcList
,
audioSrcList
}
=
this
const
imagesLength
=
imagesSrcList
.
length
const
audioLength
=
audioSrcList
.
length
this
.
downloadTotal
=
imagesLength
+
audioLength
imagesSrcList
.
forEach
(
src
=>
{
const
img
=
new
Image
()
img
.
src
=
src
if
(
img
.
complete
)
{
this
.
downloadImage
++
}
else
{
img
.
onload
=
()
=>
{
this
.
downloadImage
++
}
}
})
audioSrcList
.
forEach
(
src
=>
{
const
audio
=
new
Audio
()
audio
.
src
=
src
audio
.
addEventListener
(
'canplay'
,
()
=>
{
this
.
downloadAudio
++
})
})
},
},
}
</
script
>
<
style
lang=
"scss"
scoped
>
.page
{
height
:
100%
;
position
:
relative
;
}
.first-screen
{
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
height
:
100%
;
.logo
{
width
:
360px
;
margin
:
auto
;
}
}
.loading
{
height
:
100%
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
.bg
{
background-image
:
url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/loadBg.jpg)
;
background-repeat
:
round
;
position
:
absolute
;
height
:
100%
;
width
:
100%
;
z-index
:
0
;
}
.progress-block
{
position
:
relative
;
z-index
:
1
;
text-align
:
center
;
.macot
{
width
:
300px
;
margin
:
auto
;
display
:
block
;
}
.progress
{
display
:
inline-block
;
position
:
relative
;
margin
:
auto
;
margin-top
:
-200px
;
margin-bottom
:
35px
;
.progress-box
{
width
:
304px
;
margin
:
auto
;
display
:
block
;
}
.filled
{
position
:
absolute
;
left
:
28px
;
top
:
14px
;
width
:
100%
;
text-align
:
left
;
img
{
height
:
37px
;
}
}
}
}
}
</
style
>
pages/login.vue
View file @
65d63ec2
...
...
@@ -39,7 +39,7 @@ export default {
// })
this
.
Login
(
data
).
then
((
res
)
=>
{
this
.
GetBaseInfo
().
then
(({
data
})
=>
{
this
.
$router
.
replace
({
path
:
'/'
})
this
.
$router
.
replace
({
path
:
'/
device
'
})
this
.
loading
=
false
}).
catch
(()
=>
{
this
.
loading
=
false
...
...
store/index.js
View file @
65d63ec2
...
...
@@ -31,6 +31,7 @@ export const state = () => ({
authBtnList
:
[],
// 权限按钮列表
authBtnIdList
:
[],
// 权限按钮id列表
deviceList
:
[],
// 设备列表
device
:
{},
// 当前设备
appConfig
:
{
project_name
:
'——'
,
// 项目名称
img_domain
:
''
,
// 图片名称
...
...
@@ -143,9 +144,14 @@ export const mutations = {
state
.
dictionary
=
dictionary
},
set_device_l
ist
(
state
,
data
)
{
SetDeviceL
ist
(
state
,
data
)
{
state
.
deviceList
=
data
},
// 设置当前玩的游戏机
SetDevice
(
state
,
data
)
{
state
.
device
=
data
},
}
export
const
actions
=
{
...
...
@@ -208,7 +214,7 @@ export const actions = {
GetDeviceList
({
commit
})
{
return
new
Promise
((
resolve
,
reject
)
=>
{
this
.
$request
.
get
(
'/api/app/device/list'
).
then
(({
rows
})
=>
{
commit
(
'
set_device_l
ist'
,
rows
)
commit
(
'
SetDeviceL
ist'
,
rows
)
resolve
(
rows
)
}).
catch
(
error
=>
{
reject
(
error
)
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment