Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
beyond-clouds-front
Overview
Overview
Details
Activity
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
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
beyond-clouds-front
Commits
66ab98cb
Commit
66ab98cb
authored
Feb 22, 2020
by
段启岩
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
消息提醒
parent
f35a42b3
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
51 additions
and
20 deletions
+51
-20
action/config.js
+2
-1
components/pc/pageHeader.vue
+40
-15
pages/users/login.vue
+4
-0
store/index.js
+4
-0
store/message.js
+1
-4
No files found.
action/config.js
View file @
66ab98cb
...
...
@@ -123,7 +123,8 @@ export default {
},
Message
:{
detail
:
'/api/message/'
,
//消息详情+{messageId}
list
:
'/api/my/messages'
//我的消息列表
list
:
'/api/my/messages'
,
//我的消息列表
count
:
'/api/message/count'
//消息数量
}
},
post
:{
...
...
components/pc/pageHeader.vue
View file @
66ab98cb
<
template
>
<div
class=
"bc-layout-container-header"
>
<notifications
class=
"message-tip-box"
/>
<client-only>
<notifications
class=
"message-tip-box"
/>
</client-only>
<div
class=
"nuxt-progress"
v-if=
"progressShow"
></div>
<div
class=
"container-header"
v-if=
"!showDetailHead"
>
<div
class=
"header-center"
>
...
...
@@ -67,7 +69,7 @@
<yun-icon
style=
"height:16px;width:16px;line-height:16px"
name=
"add"
color=
"#ccc"
hoverColor=
"#8CD88C"
@
mouseover
.
native=
"changeStateShowBox(1)"
@
mouseleave
.
native=
"changeStateHideBox(1)"
></yun-icon>
<div
class=
"notice-box"
>
<div
class=
"red-dot"
v-if=
"
alert
"
></div>
<div
class=
"red-dot"
v-if=
"
this.$store.state.message.unReadCount > 0
"
></div>
<yun-icon
:class=
"alert?'notice-icon-active':'notice-icon'"
@
click
.
native=
"$router.push('/personal-center/message/all')"
name=
"notification"
hoverColor=
"#F8A06F"
@
mouseover
.
native=
"changeStateShowBox(3)"
@
mouseleave
.
native=
"changeStateHideBox(3)"
></yun-icon>
...
...
@@ -217,11 +219,11 @@
},
sockets
:
{
connect
(
data
)
{
this
.
alert
=
true
;
/*
this.alert = true;
clearTimeout(this.alertTimer)
this.alertTimer = setTimeout(()=>{
this.alert = false;
},
1000
)
},1000)
*/
},
push_event
(
data
)
{
this
.
alert
=
true
;
...
...
@@ -229,6 +231,11 @@
this
.
alertTimer
=
setTimeout
(()
=>
{
this
.
alert
=
false
;
},
1000
)
this
.
$notify
({
title
:
'新消息'
,
message
:
data
.
msgContent
})
}
},
methods
:{
...
...
@@ -397,30 +404,48 @@
<
style
lang=
"scss"
>
.bc-layout-container-header
{
.message-tip-box
{
//
Style
of
the
notification
itself
position
:
fixed
;
z-index
:
9999
;
top
:
10px
!important
;
right
:
6
px
!important
;
font-size
:
16px
;
top
:
50
px
!important
;
right
:
2px
!important
;
.vue-notification-wrapper
{
margin-bottom
:
10px
;
.vue-notification
{
position
:
relative
;
padding
:
20px
16px
;
color
:
#333333
;
background
-color
:
#F4F8FA
;
border
:
1px
solid
#
eeeeee
;
background
:
#FFFFFF
;
border
:
1px
solid
#
f6f6f6
;
border-radius
:
6px
;
opacity
:
.9
;
transition
:
all
.3s
;
box-shadow
:
0
0
6px
rgba
(
100
,
100
,
100
,
0.2
);
.notification-title
{
//
Style
for
title
line
padding
:
2px
6px
;
font-size
:
14px
;
font-weight
:
500
;
line-height
:
16px
;
}
.notification-title
::before
{
position
:
absolute
;
content
:
''
;
background
:
#00AAE6
;
display
:
inline-block
;
width
:
4px
;
height
:
20px
;
border-radius
:
0
3px
3px
0
;
font-size
:
14px
;
left
:
-1px
;
top
:
20px
;
}
.notification-content
{
padding
:
2px
6px
;
margin-top
:
16px
;
font-size
:
14px
;
line-height
:
16px
;
a
{
color
:
#00AAE6
;
}
}
}
...
...
pages/users/login.vue
View file @
66ab98cb
...
...
@@ -201,6 +201,10 @@ export default {
// 若登录和获取用户信息都成功,则存储认证信息到cookie
Cookie
.
set
(
config
.
default_data
.
KEY_COOKIE_TOKEN
,
token
);
// 获取未读消息数量
const
messageResponse
=
await
this
.
$axios
.
$get
(
config
.
api
.
get
.
Message
.
count
);
store
.
commit
(
'message/setUnReadCount'
,
messageResponse
.
data
.
unReadCount
)
// 跳转到主页
this
.
$message
({
type
:
'success'
,
...
...
store/index.js
View file @
66ab98cb
...
...
@@ -13,6 +13,10 @@ export const actions = {
if
(
response
.
code
===
0
)
{
// 设置用户信息
commit
(
'userProfile/setUser'
,
response
.
data
)
// 获取未读消息数量
const
messageResponse
=
await
$axios
.
$get
(
config
.
api
.
get
.
Message
.
count
);
commit
(
'message/setUnReadCount'
,
messageResponse
.
data
.
unReadCount
)
}
}
catch
(
e
)
{
// 请求出错,删除认证信息
...
...
store/message.js
View file @
66ab98cb
const
defaultUser
=
{
}
export
const
state
=
()
=>
({
unReadCount
:
null
,
unReadCount
:
0
,
})
export
const
mutations
=
{
...
...
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