MTP20_WEB_GLOBAL/src/packages/mobile/components/layouts/home/index.vue

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

<script lang="ts" setup>
import { shallowRef, nextTick, watch, onMounted, onUnmounted, computed, PropType } from 'vue'
import { closeToast } from 'vant'
import { showLoading, fullloading } from '@/utils/vant'
import { Tabbar } from '@mobile/components/base/tabbar/types'
import { useNavigation } from '@mobile/router/navigation'
import { useLogin } from '@/business/login'
import { useLoginStore } from '@/stores'
import eventBus from '@/services/bus'
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 props = defineProps({
  tabs: {
    type: Array as PropType<Tabbar[]>,
    required: true
  },
  iosUpdateUrl: String
})

const { route, routerTo, getGlobalUrlParams, setGlobalUrlParams } = useNavigation()
const { userLogin } = useLogin()
const loginStore = useLoginStore()
const cssTransition = shallowRef(true) // 是否使用css动画
const currentTab = shallowRef(0)

const tabIndex = computed(() => props.tabs.findIndex((e) => e.name === route.name))

const onTabClick = (index: number) => {
  const { name } = props.tabs[index]
  cssTransition.value = false

  if (name === 'home-index' || loginStore.token) {
    currentTab.value = index
    routerTo(name, true)
  } else {
    fullloading((hideLoading) => {
      userLogin(true).then(() => {
        currentTab.value = index
        routerTo(name, true)
      }).catch(() => {
        routerTo('user-login')
      }).finally(() => {
        hideLoading()
      })
    }, '加载中...')
  }
}

// 接收交易服务重连通知
const tradeServerReconnectNotify = eventBus.$on('TradeServerReconnectNotify', () => {
  showLoading('服务连接中...')
})

// 接收交易服务重连成功通知
const tradeServerReconnectSuccessNotify = eventBus.$on('TradeServerReconnectSuccessNotify', () => {
  closeToast()
})

watch(() => route.name, () => {
  const params = getGlobalUrlParams()
  if (params.tabIndex > -1) {
    onTabClick(params.tabIndex)
  } else if (tabIndex.value > -1) {
    onTabClick(tabIndex.value)
  } else {
    // 如果参数不是 tabIndex ，需要保留到下一个路由
    setGlobalUrlParams(params)
  }
  nextTick(() => {
    cssTransition.value = true
  })
})

onMounted(() => {
  // 页面初始化时判断底部导航位置
  const params = getGlobalUrlParams()
  if (params.tabIndex > -1) {
    onTabClick(params.tabIndex)
  } else {
    currentTab.value = tabIndex.value
  }
})

onUnmounted(() => {
  tradeServerReconnectNotify.cancel()
  tradeServerReconnectSuccessNotify.cancel()
})
</script>
  
<style lang="less">
@import './index.less';
</style>