tabbar.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import { mapGetters } from 'vuex'
  2. export default {
  3. data() {
  4. return {
  5. mixinFooterNav: [],
  6. footerIndex: null
  7. }
  8. },
  9. computed: {
  10. ...mapGetters({
  11. backlogTotal: 'base/backlogTotal',
  12. serviceNav: 'user/serviceNav',
  13. navConfig: 'user/navConfig'
  14. }),
  15. msgTabIndex() {
  16. return this.mixinFooterNav.findIndex(item => item.hasOwnProperty('badge'))
  17. },
  18. activeTabItem() {
  19. if (this.$isEmpty(this.footerIndex)) {
  20. return null
  21. }
  22. return this.mixinFooterNav[this.footerIndex] || null
  23. },
  24. showTabbar() {
  25. const arr = this.navConfig.nav || []
  26. return this.activeTabItem && arr.includes(this.activeTabItem.typeNum)
  27. }
  28. },
  29. watch: {
  30. backlogTotal: {
  31. handler() {
  32. this.setFooterTabBadge()
  33. },
  34. immediate: true
  35. },
  36. msgTabIndex: {
  37. handler() {
  38. this.setFooterTabBadge()
  39. },
  40. immediate: true
  41. },
  42. serviceNav: {
  43. handler() {
  44. this.mixinFooterNav = [].concat(this.serviceNav)
  45. this.setFooterTabBadge()
  46. this.setFooterIndex()
  47. },
  48. deep: true,
  49. immediate: true
  50. }
  51. },
  52. mounted() {
  53. this.setFooterIndex()
  54. },
  55. onShow() {
  56. this.setFooterIndex()
  57. },
  58. methods: {
  59. // 待办事项总数标记
  60. setFooterTabBadge() {
  61. if (!this.msgTabIndex || !this.mixinFooterNav[this.msgTabIndex]) return
  62. this.mixinFooterNav[this.msgTabIndex].badge = this.backlogTotal > 99 ? '99+' : this.backlogTotal
  63. this.$set(this.mixinFooterNav, this.msgTabIndex, this.mixinFooterNav[this.msgTabIndex])
  64. // console.log('set footer nav: ', this.mixinFooterNav)
  65. // console.log('set footer msgTabIndex: ', this.msgTabIndex)
  66. // console.log('set footer backlogTotal: ', this.backlogTotal)
  67. },
  68. /**
  69. * 设置默认选中的项
  70. */
  71. setFooterIndex() {
  72. const pages = getCurrentPages()
  73. if (pages.length > 0) {
  74. const currentPage = pages[pages.length - 1]
  75. const path = currentPage.route
  76. this.footerIndex = this.mixinFooterNav.findIndex(item => item.path.startsWith('/' + path))
  77. } else {
  78. this.footerIndex = -1
  79. }
  80. }
  81. }
  82. }