123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- <template>
- <!-- <a-popover
- v-model="visible"
- trigger="click"
- placement="bottomRight"
- overlayClassName="header-notice-wrapper"
- :getPopupContainer="() => $refs.noticeRef.parentElement"
- :autoAdjustOverflow="true"
- :arrowPointAtCenter="true"
- :overlayStyle="{ width: '300px', top: '50px' }"
- >
- <template slot="content">
- <a-spin :spinning="loading">
- <a-tabs>
- <a-tab-pane tab="公告" key="1">
- <a-list>
- <a-list-item>
- <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
- <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
- </a-list-item-meta>
- </a-list-item>
- <a-list-item>
- <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
- <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
- </a-list-item-meta>
- </a-list-item>
- <a-list-item>
- <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
- <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
- </a-list-item-meta>
- </a-list-item>
- </a-list>
- </a-tab-pane>
- <a-tab-pane tab="消息" key="2">
- 123
- </a-tab-pane>
- <a-tab-pane tab="待办" key="3">
- 123
- </a-tab-pane>
- </a-tabs>
- </a-spin>
- </template>
- <span @click="fetchNotice" class="header-notice" ref="noticeRef">
- <a-badge count="12">
- <a-icon style="font-size: 16px; padding: 4px" type="bell" />
- </a-badge>
- </span>
- </a-popover> -->
- <span @click="fetchNotice" class="header-notice" ref="noticeRef">
- <a-badge :count="unreadCount">
- <a-icon style="font-size: 16px; padding: 0 5px 0 0" type="bell" />
- <span>公告</span>
- </a-badge>
- </span>
- </template>
- <script>
- import { mapGetters, mapActions } from 'vuex'
- export default {
- name: 'HeaderNotice',
- data () {
- return {
- loading: false,
- visible: false
- }
- },
- computed: {
- ...mapGetters([
- 'unreadCount'
- ]),
- unreadCount () {
- return this.$store.getters.unreadCount
- },
- // 接受到ws消息
- wsMessage () {
- return this.$store.getters.wsMessageData()
- }
- },
- mounted () {
- // webSocket 连接
- this.WEBSOCKET_INIT()
- },
- destroyed () {
- this.WEBSOCKET_CLOSE()
- },
- methods: {
- ...mapActions([
- 'WEBSOCKET_INIT',
- 'WEBSOCKET_CLOSE',
- 'updateUnreadcount'
- ]),
- fetchNotice () {
- // if (!this.visible) {
- // this.loading = true
- // setTimeout(() => {
- // this.loading = false
- // }, 2000)
- // } else {
- // this.loading = false
- // }
- // this.visible = !this.visible
- this.$router.push({ path: '/notice' })
- }
- },
- watch: {
- // 监听ws消息通知
- wsMessage (a, b) {
- if (a !== b && a) {
- console.log(a)
- // 新未读消息
- if (a.type == 'no_read_count') {
- this.updateUnreadcount(a.data.no_read_count)
- }
- }
- }
- }
- }
- </script>
- <style lang="css">
- .header-notice-wrapper {
- top: 50px !important;
- }
- </style>
- <style lang="less" scoped>
- .header-notice{
- display: inline-block;
- transition: all 0.3s;
- span {
- vertical-align: initial;
- }
- }
- </style>
|