NoticeIcon.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <!-- <a-popover
  3. v-model="visible"
  4. trigger="click"
  5. placement="bottomRight"
  6. overlayClassName="header-notice-wrapper"
  7. :getPopupContainer="() => $refs.noticeRef.parentElement"
  8. :autoAdjustOverflow="true"
  9. :arrowPointAtCenter="true"
  10. :overlayStyle="{ width: '300px', top: '50px' }"
  11. >
  12. <template slot="content">
  13. <a-spin :spinning="loading">
  14. <a-tabs>
  15. <a-tab-pane tab="公告" key="1">
  16. <a-list>
  17. <a-list-item>
  18. <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
  19. <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
  20. </a-list-item-meta>
  21. </a-list-item>
  22. <a-list-item>
  23. <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
  24. <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
  25. </a-list-item-meta>
  26. </a-list-item>
  27. <a-list-item>
  28. <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
  29. <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
  30. </a-list-item-meta>
  31. </a-list-item>
  32. </a-list>
  33. </a-tab-pane>
  34. <a-tab-pane tab="消息" key="2">
  35. 123
  36. </a-tab-pane>
  37. <a-tab-pane tab="待办" key="3">
  38. 123
  39. </a-tab-pane>
  40. </a-tabs>
  41. </a-spin>
  42. </template>
  43. <span @click="fetchNotice" class="header-notice" ref="noticeRef">
  44. <a-badge count="12">
  45. <a-icon style="font-size: 16px; padding: 4px" type="bell" />
  46. </a-badge>
  47. </span>
  48. </a-popover> -->
  49. <span @click="fetchNotice" class="header-notice" ref="noticeRef">
  50. <a-badge :count="unreadCount">
  51. <a-icon style="font-size: 16px; padding: 0 5px 0 0" type="bell" />
  52. <span>公告</span>
  53. </a-badge>
  54. </span>
  55. </template>
  56. <script>
  57. import { mapGetters, mapActions } from 'vuex'
  58. export default {
  59. name: 'HeaderNotice',
  60. data () {
  61. return {
  62. loading: false,
  63. visible: false
  64. }
  65. },
  66. computed: {
  67. ...mapGetters([
  68. 'unreadCount'
  69. ]),
  70. unreadCount () {
  71. return this.$store.getters.unreadCount
  72. },
  73. // 接受到ws消息
  74. wsMessage () {
  75. return this.$store.getters.wsMessageData()
  76. }
  77. },
  78. mounted () {
  79. // webSocket 连接
  80. this.WEBSOCKET_INIT()
  81. },
  82. destroyed () {
  83. this.WEBSOCKET_CLOSE()
  84. },
  85. methods: {
  86. ...mapActions([
  87. 'WEBSOCKET_INIT',
  88. 'WEBSOCKET_CLOSE',
  89. 'updateUnreadcount'
  90. ]),
  91. fetchNotice () {
  92. // if (!this.visible) {
  93. // this.loading = true
  94. // setTimeout(() => {
  95. // this.loading = false
  96. // }, 2000)
  97. // } else {
  98. // this.loading = false
  99. // }
  100. // this.visible = !this.visible
  101. this.$router.push({ path: '/notice' })
  102. }
  103. },
  104. watch: {
  105. // 监听ws消息通知
  106. wsMessage (a, b) {
  107. if (a !== b && a) {
  108. console.log(a)
  109. // 新未读消息
  110. if (a.type == 'no_read_count') {
  111. this.updateUnreadcount(a.data.no_read_count)
  112. }
  113. }
  114. }
  115. }
  116. }
  117. </script>
  118. <style lang="css">
  119. .header-notice-wrapper {
  120. top: 50px !important;
  121. }
  122. </style>
  123. <style lang="less" scoped>
  124. .header-notice{
  125. display: inline-block;
  126. transition: all 0.3s;
  127. span {
  128. vertical-align: initial;
  129. }
  130. }
  131. </style>