MTP20_WEB_GLOBAL/src/packages/mobile/views/home/Index.vue

<template>
  <div class="home g-flex">
    <router-view v-slot="{ Component }">
      <RouterTransition :css="cssTransition">
        <!-- 缓存所有组件 -->
        <keep-alive>
          <component class="g-flex__body" :is="Component" v-bind="{ marketSection }" />
        </keep-alive>
      </RouterTransition>
    </router-view>
    <app-tabbar :data-list="tabList" :data-index="currentTab" @click="onTabClick" />
    <app-updater :ios-update-url="iosUpdateUrl" />
  </div>
</template>

<script lang="ts" setup>
import { shallowRef, nextTick, watch, onMounted, onActivated, computed } from 'vue'
import { Tabbar } from '@mobile/components/base/tabbar/types'
import { useNavigation } from '@mobile/router/navigation'
import { useMarketSection } from '@/business/market'
import { useLoginStore, useFuturesStore } from '@/stores'
import { i18n } from '@/stores'
import { displayname } from "@/filters"
import AppTabbar from '@mobile/components/base/tabbar/index.vue'
import AppUpdater from '@mobile/components/base/updater/index.vue'
import RouterTransition from '@mobile/components/base/router-transition/index.vue'

const { global: { t } } = i18n

defineProps({
  iosUpdateUrl: String
})

const { route, routerTo } = useNavigation()
const loginStore = useLoginStore()
const futuresStore = useFuturesStore()
const cssTransition = shallowRef(true) // 是否使用css动画
const currentTab = shallowRef(0)
const marketSection = shallowRef() // 当前选中的板块

const tabIndex = computed(() => {
  const value = window.sessionStorage.getItem('currentTab')
  if (value) {
    const parsedValue = JSON.parse(value)
    if (parsedValue.name === route.name) {
      return parsedValue.index
    }
  }
  return tabList.value.findIndex((e) => e.name === route.name)
})

// 获取市场板块
const { allMarket } = useMarketSection(() => {
  const tab = tabList.value[tabIndex.value]
  marketSection.value = tab?.params
  currentTab.value = tabIndex.value
})

// 动态添加导航标签页
const addTab = (item: Model.Marketsectionconfignew) => {
  const tab: Tabbar = {
    name: 'home-404',
    label: displayname(item),
    icon: 'g-icon-listing--line',
    activeIcon: 'g-icon-listing--fill',
    params: item
  }
  switch (item.trademode) {
    case 10:
      tab.name = 'home-pricing'
      tab.icon = 'g-icon-pricing--line'
      tab.activeIcon = 'g-icon-pricing--fill'
      break
    case 17:
      tab.name = 'home-spot'
      tab.icon = 'g-icon-spot--line'
      tab.activeIcon = 'g-icon-spot--fill'
      break
    case 46:
      tab.name = 'home-swap'
      tab.icon = 'g-icon-swap--line'
      tab.activeIcon = 'g-icon-swap--fill'
      break
    case 48:
      tab.name = 'home-presale'
      tab.icon = 'g-icon-presale--line'
      tab.activeIcon = 'g-icon-presale--fill'
      break
    case 49:
      tab.name = 'home-transfer'
      tab.icon = 'g-icon-transfer--line'
      tab.activeIcon = 'g-icon-transfer--fill'
      break
    case 16:
    case 50:
      tab.name = 'home-goods'
      tab.icon = 'g-icon-listing--line'
      tab.activeIcon = 'g-icon-listing--fill'
      break
    case 51:
      tab.name = 'home-ballot'
      tab.icon = 'g-icon-presale--line'
      tab.activeIcon = 'g-icon-presale--fill'
      break
    case 53:
      tab.name = 'home-mall'
      tab.icon = 'g-icon-quote--line'
      tab.activeIcon = 'g-icon-quote--fill'
      break
    case 54:
      tab.name = 'home-score'
      tab.icon = 'g-icon-quote--line'
      tab.activeIcon = 'g-icon-quote--fill'
      break
    case 99:
      tab.name = 'home-market'
      tab.icon = 'g-icon-quote--line'
      tab.activeIcon = 'g-icon-quote--fill'
      break
  }
  return tab
}

// 导航标签列表
const tabList = computed(() => {
  const result: Tabbar[] = [
    {
      name: 'home-index',
      label: t('tabbar.home'),
      icon: 'g-icon-home--line',
      activeIcon: 'g-icon-home--fill',
    },
    {
      name: 'home-mine',
      label: t('tabbar.mine'),
      icon: 'g-icon-mine--line',
      activeIcon: 'g-icon-mine--fill',
    }
  ]
  if (loginStore.token) {
    allMarket.value.forEach((item, index) => {
      const startIndex = index + 1
      if (startIndex < 4) {
        result.splice(startIndex, 0, addTab(item))
      }
    })
  } else {
    result.splice(1, 0, {
      name: '#',
      label: t('tabbar.trade'),
      icon: 'g-icon-quote--line',
      activeIcon: 'g-icon-quote--fill',
    })
  }
  return result
})

const onTabClick = (index: number) => {
  const { name, params } = tabList.value[index]
  marketSection.value = params
  if (index === 0 || loginStore.token) {
    // 缓存当前选中的标签位置，防止 F5 刷新页面后无法定位到当前标签
    window.sessionStorage.setItem('currentTab', JSON.stringify({
      index,
      name
    }))
    currentTab.value = index
    routerTo(name, true)
  } else {
    window.sessionStorage.removeItem('currentTab')
    routerTo('user-login')
  }
}

watch(() => route.name, () => {
  if (tabIndex.value > -1) {
    cssTransition.value = false
    currentTab.value = tabIndex.value
  }
  nextTick(() => {
    cssTransition.value = true
  })
})

onMounted(() => {
  currentTab.value = tabIndex.value
})

onActivated(() => {
  // 页面显示时刷新盘面(待优化)
  if (loginStore.token && futuresStore.goodsList.length) {
    futuresStore.getQuoteDay()
  }  
})
</script>
  
<style lang="less">
@import './index.less';
</style>