store.ts 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import type { CustomTabBarItem, CustomTabBarItemBadge } from './types'
  2. import { reactive } from 'vue'
  3. import { isNeedLoginMode } from '@/router/config'
  4. import { FG_LOG_ENABLE, judgeIsExcludePath } from '@/router/interceptor'
  5. import { useTokenStore } from '@/store/token'
  6. import { tabbarList as _tabbarList, customTabbarEnable, selectedTabbarStrategy, TABBAR_STRATEGY_MAP } from './config'
  7. // TODO 1/2: 中间的鼓包tabbarItem的开关
  8. const BULGE_ENABLE = false
  9. /** tabbarList 里面的 path 从 pages.config.ts 得到 */
  10. const tabbarList = reactive<CustomTabBarItem[]>(_tabbarList.map(item => ({
  11. ...item,
  12. pagePath: item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}`,
  13. })))
  14. if (customTabbarEnable && BULGE_ENABLE) {
  15. if (tabbarList.length % 2) {
  16. console.error('有鼓包时 tabbar 数量必须是偶数,否则样式很奇怪!!')
  17. }
  18. tabbarList.splice(tabbarList.length / 2, 0, {
  19. isBulge: true,
  20. } as CustomTabBarItem)
  21. }
  22. export function isPageTabbar(path: string) {
  23. if (selectedTabbarStrategy === TABBAR_STRATEGY_MAP.NO_TABBAR) {
  24. return false
  25. }
  26. const _path = path.split('?')[0]
  27. return tabbarList.some(item => item.pagePath === _path)
  28. }
  29. /**
  30. * 自定义 tabbar 的状态管理,原生 tabbar 无需关注本文件
  31. * tabbar 状态,增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
  32. * 使用reactive简单状态,而不是 pinia 全局状态
  33. */
  34. const tabbarStore = reactive({
  35. curIdx: uni.getStorageSync('app-tabbar-index') || 0,
  36. prevIdx: uni.getStorageSync('app-tabbar-index') || 0,
  37. setCurIdx(idx: number) {
  38. const tokenStore = useTokenStore()
  39. // 已登录 或 (url 需要登录 && 在白名单 || 不需要登录 && 不在黑名单) (关于 白名单|黑名单 逻辑: src/router/interceptor.ts)
  40. if (tokenStore.hasLogin || (isNeedLoginMode && judgeIsExcludePath(tabbarList[idx].pagePath)) || (!isNeedLoginMode && !judgeIsExcludePath(tabbarList[idx].pagePath))) {
  41. this.curIdx = idx
  42. uni.setStorageSync('app-tabbar-index', idx)
  43. }
  44. },
  45. setTabbarItemBadge(idx: number, badge: CustomTabBarItemBadge) {
  46. if (tabbarList[idx]) {
  47. tabbarList[idx].badge = badge
  48. }
  49. },
  50. setAutoCurIdx(path: string) {
  51. // '/' 当做首页
  52. if (path === '/') {
  53. this.setCurIdx(0)
  54. return
  55. }
  56. const index = tabbarList.findIndex(item => item.pagePath === path)
  57. FG_LOG_ENABLE && console.log('index:', index, path)
  58. // console.log('tabbarList:', tabbarList)
  59. if (index === -1) {
  60. const pagesPathList = getCurrentPages().map(item => item.route.startsWith('/') ? item.route : `/${item.route}`)
  61. // console.log(pagesPathList)
  62. const flag = tabbarList.some(item => pagesPathList.includes(item.pagePath))
  63. if (!flag) {
  64. this.setCurIdx(0)
  65. return
  66. }
  67. }
  68. else {
  69. this.setCurIdx(index)
  70. }
  71. },
  72. restorePrevIdx() {
  73. if (this.prevIdx === this.curIdx)
  74. return
  75. this.setCurIdx(this.prevIdx)
  76. this.prevIdx = uni.getStorageSync('app-tabbar-index') || 0
  77. },
  78. })
  79. export { tabbarList, tabbarStore }