Skip to content

B
beyond-clouds-front
Commit 750a1127 by Administrator
Options

Merge branch 'add-message-tip' into 'master' 

消息提醒

See merge request pigbigbig/beyond-clouds-front!111
parents 475a5398 66ab98cb
Showing with 51 additions and 20 deletions
action/config.js
...@@ -123,7 +123,8 @@ export default { ...@@ -123,7 +123,8 @@ export default {
}, },
Message:{ Message:{
detail:'/api/message/',//消息详情+{messageId} detail:'/api/message/',//消息详情+{messageId}
list:'/api/my/messages'//我的消息列表 list:'/api/my/messages',//我的消息列表
count:'/api/message/count'//消息数量
} }
}, },
post:{ post:{
......
components/pc/pageHeader.vue
<template> <template>
<div class="bc-layout-container-header"> <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="nuxt-progress" v-if="progressShow"></div>
<div class="container-header" v-if="!showDetailHead"> <div class="container-header" v-if="!showDetailHead">
<div class="header-center"> <div class="header-center">
...@@ -67,7 +69,7 @@ ...@@ -67,7 +69,7 @@
<yun-icon style="height:16px;width:16px;line-height:16px" name="add" color="#ccc" hoverColor="#8CD88C" <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> @mouseover.native="changeStateShowBox(1)" @mouseleave.native="changeStateHideBox(1)"></yun-icon>
<div class="notice-box"> <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" <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> @mouseover.native="changeStateShowBox(3)" @mouseleave.native="changeStateHideBox(3)"></yun-icon>
...@@ -217,11 +219,11 @@ ...@@ -217,11 +219,11 @@
}, },
sockets: { sockets: {
connect(data) { connect(data) {
this.alert = true; /*this.alert = true;
clearTimeout(this.alertTimer) clearTimeout(this.alertTimer)
this.alertTimer = setTimeout(()=>{ this.alertTimer = setTimeout(()=>{
this.alert = false; this.alert = false;
},1000) },1000)*/
}, },
push_event(data) { push_event(data) {
this.alert = true; this.alert = true;
...@@ -229,6 +231,11 @@ ...@@ -229,6 +231,11 @@
this.alertTimer = setTimeout(()=>{ this.alertTimer = setTimeout(()=>{
this.alert = false; this.alert = false;
},1000) },1000)
this.$notify({
title: '新消息',
message: data.msgContent
})
} }
}, },
methods:{ methods:{
...@@ -397,30 +404,48 @@ ...@@ -397,30 +404,48 @@
<style lang="scss"> <style lang="scss">
.bc-layout-container-header{ .bc-layout-container-header{
.message-tip-box { .message-tip-box {
// Style of the notification itself
position: fixed; position: fixed;
z-index: 9999; z-index: 9999;
top: 10px !important; font-size: 16px;
right: 6px !important; top: 50px !important;
right: 2px !important;
.vue-notification-wrapper { .vue-notification-wrapper {
margin-bottom: 10px; margin-bottom: 10px;
.vue-notification { .vue-notification {
position: relative;
padding: 20px 16px;
color: #333333; color: #333333;
background-color: #F4F8FA; background: #FFFFFF;
border: 1px solid #eeeeee; border: 1px solid #f6f6f6;
border-radius: 6px; border-radius: 6px;
opacity: .9;
transition: all .3s; transition: all .3s;
box-shadow: 0 0 6px rgba(100, 100, 100, 0.2);
.notification-title { .notification-title {
// Style for title line font-size: 14px;
padding: 2px 6px; 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 { .notification-content {
padding: 2px 6px; margin-top: 16px;
font-size: 14px;
line-height: 16px;
a {
color: #00AAE6;
}
} }
} }
......
pages/users/login.vue
...@@ -201,6 +201,10 @@ export default { ...@@ -201,6 +201,10 @@ export default {
// 若登录和获取用户信息都成功，则存储认证信息到cookie // 若登录和获取用户信息都成功，则存储认证信息到cookie
Cookie.set(config.default_data.KEY_COOKIE_TOKEN, token); 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({ this.$message({
type: 'success', type: 'success',
......
store/index.js
...@@ -13,6 +13,10 @@ export const actions = { ...@@ -13,6 +13,10 @@ export const actions = {
if (response.code === 0) { if (response.code === 0) {
// 设置用户信息 // 设置用户信息
commit('userProfile/setUser', response.data) commit('userProfile/setUser', response.data)
// 获取未读消息数量
const messageResponse = await $axios.$get(config.api.get.Message.count);
commit('message/setUnReadCount', messageResponse.data.unReadCount)
} }
} catch (e) { } catch (e) {
// 请求出错，删除认证信息 // 请求出错，删除认证信息
......
store/message.js
const defaultUser = {
}
export const state = () => ({ export const state = () => ({
unReadCount: null, unReadCount: 0,
}) })
export const mutations = { export const mutations = {
......
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