實現全局通知組件,多個標籤頁只出現一個通知組件的思路:1.localstorage中存貯一個變量,每次通知前去拿這個變量,和當前要實例化的通知的數據進行對比,若是id一致說明某一標籤頁中已經存在改通知,則不須要再次實例化通知組件,若是不存在,則實例化通知組件,這樣就保證了多個標籤頁中不存在相同的通知,每一個通知都只通知一次。
相關代碼以下:chrome
methods: { showNotify(message) { if (message.duration !== 0 && !message.isSelfSend) { // 當前發送消息的用戶正在諮詢中,再也不轉診中,則此消息只推送給健康管理師 const messageSessionInd = _.findIndex(this.hmsAllSession, function(o) { return o.last_ask.family_member === message.mymessage.family_member; }); if (messageSessionInd !== -1) { if ((!this.hmsAllSession[messageSessionInd].last_ask.has_transfer && this.bus_role === 'hm') || (this.hmsAllSession[messageSessionInd].last_ask.has_transfer && this.bus_role === this.hmsAllSession[messageSessionInd].last_ask.transfer_role)) { this.$notify.info({ title: '新消息提示', message: message.msgOptions.type === 'text' ? message.msgOptions.text : message.msgTextPrefix, duration: message.duration }); this.msgAudio = new Audio(); this.msgAudio.src = 'https://pic1.baobaohehu.com/static/mp-ask/new-msg.mp3'; this.msgAudio.play(); return } } } if (message.duration !== 0) { return } // 只有健康管理師角色才更新轉診按鈕的狀態,才拉取當前的currentSession && this.bus_role === 'hm' // console.log(this.$route.path) const routePath = this.$route.path if (routePath.indexOf('diagnose') !== -1) { if (this.currentSession && message.message_body.fd_session === this.currentSession.session_id) { this.$store.dispatch('chat/getCustomerTree', '', { root: true }) // 刷線當前列表的用戶狀態 } } const h = this.$createElement; let tip = '您的轉診請求已經被' + message.message_body.user.name + '拒絕,若有必要,請與' + message.message_body.user.name + '溝通後再次發起轉診請求' if (message.message_body.event_type === 'transfer_apply') { tip = message.message_body.user.name + '發起轉診請求' + '請及時處理,5分鐘內未響應,系統將自動贊成' const notifyApplyMsgId = window.localStorage.getItem('notifyApplyMsgId') if (!notifyApplyMsgId || notifyApplyMsgId !== message.message_body.message_id) { window.localStorage.setItem('notifyApplyMsgId', message.message_body.message_id) Notification({ iconClass: 'el-icon-bell my-bell', title: '轉診申請', dangerouslyUseHTMLString: true, duration: 0, message: h('div', { class: 'clearfix' }, [ h('p', { class: 'title' }, tip), h('button', { class: 'detail_btn', attrs: { fd_ask: message.message_body.fd_ask, message_id: message.message_body.message_id, fd_session: message.message_body.fd_session, family_member: message.message_body.family_member }, on: { click: this.showMsg.bind(this) } }, '查看詳情') ]), onClose: function(val) { console.log('關閉notify的回調') console.log(val) console.log(val.id) } }) } } else if (message.message_body.event_type === 'transfer_accept') { tip = '您的轉診請求已經被' + message.message_body.user.name + '贊成,請與用戶確認後請單擊【發起轉診】按鈕' Notification.success({ title: '轉診請求被贊成', dangerouslyUseHTMLString: true, duration: 0, message: h('div', { class: 'clearfix' }, [ h('p', { class: 'title' }, tip), h('button', { class: 'detail_btn', attrs: { fd_ask: message.message_body.fd_ask, message_id: message.message_body.message_id, fd_session: message.message_body.fd_session, family_member: message.message_body.family_member }, on: { click: this.showMsg.bind(this) } }, '查看詳情') ]), onClose: function(val) { console.log('關閉notify的回調') console.log(val) } }) } else if (message.message_body.event_type === 'transfer_reject') { Notification.error({ title: '轉診請求被拒絕', dangerouslyUseHTMLString: true, duration: 0, message: h('div', { class: 'clearfix' }, [ h('p', { class: 'title' }, tip), h('button', { class: 'detail_btn', attrs: { fd_ask: message.message_body.fd_ask, message_id: message.message_body.message_id, fd_session: message.message_body.fd_session, family_member: message.message_body.family_member }, on: { click: this.showMsg.bind(this) } }, '查看詳情') ]), onClose: function(val) { console.log('關閉notify的回調') console.log(val) } }) } }, showMsg(fdaskid) { const routePath = this.$route.path if (routePath.indexOf('diagnose') === -1) { this.$router.push({ path: '/medical-service/diagnose' }) } const target = fdaskid.target const message_id = target.getAttribute('message_id') const fd_session = target.getAttribute('fd_session') const family_member = target.getAttribute('family_member') // 跳轉到當前消息的位置 message_id if (this.currentSession && this.currentSession.session_id && this.currentSession.session_id === fd_session && this.activedBaby && family_member === this.activedBaby._id) { this.goMessageDetail(message_id) } else { // 當前對話用戶不是系統通知的用戶-寶寶的對話 setTimeout(res => { let currentSessionObj = '' if (fd_session) { currentSessionObj = _.find(this.hmsAllSession, function(o) { return o.session_id === fd_session }) } if (currentSessionObj) { this.$store.dispatch('chat/setCurrentSession', currentSessionObj, { root: true }) } // 當前顯示寶寶的規則爲:系統通知對話的寶寶、諮詢中的寶寶、第一個寶寶 const baby = _.find(this.currentBabyList, function(o) { return o._id === family_member }) if (baby) { this.$store.dispatch('chat/setActivedBaby', baby, { root: true }) } this.goMessageDetail(message_id) }, 300) } }, goMessageDetail(message_id) { let existMesssage = {} // eslint-disable-next-line no-unused-vars const currentMegList = this.getCurrentIMInfoMessages if (currentMegList) { existMesssage = _.find(currentMegList, function(o) { return o._id === message_id }) } if (existMesssage) { // 定位到當前錨點消息 this.goAnchor(message_id) } else { this.$store.dispatch('chat/messageLocation', message_id, { root: true }) setTimeout(() => { this.goAnchor(message_id) }, 700) } }, goAnchor(selector) { var parentbox = document.getElementById('chatBox') var anchor = document.getElementById(selector) // 參數爲要跳轉到的元素id if (anchor && anchor.offsetTop) { parentbox.scrollTop = anchor.offsetTop - 150 // chrome } }
}`session