实现全局通知组件，多个标签页只出现一个通知组件的思路：1.localstorage中存贮一个变量，每次通知前去拿这个变量，和当前要实例化的通知的数据进行对比，如果id一致说明某一标签页中已经存在改通知，则不需要再次实例化通知组件，如果不存在，则实例化通知组件，这样就保证了多个标签页中不存在相同的通知，每个通知都只通知一次。
相关代码如下：
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
}
}}`