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

消息提醒

See merge request pigbigbig/beyond-clouds-front!111

action/config.js

@@ -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

 <template>
   <div class="bc-layout-container-header">
+    <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: 6px !important;
-
+      font-size: 16px;
+      top: 50px !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

@@ -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

@@ -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

-const defaultUser = {
-
-}
 export const state = () => ({
-  unReadCount: null,
+  unReadCount: 0,
 })
 
 export const mutations = {