|
|
@@ -1,41 +1,185 @@
|
|
|
<template>
|
|
|
- <LayoutHome :tabs="tabList" />
|
|
|
+ <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 LayoutHome from '@mobile/components/layouts/home/index.vue'
|
|
|
-
|
|
|
-const tabList: Tabbar[] = [
|
|
|
- {
|
|
|
- name: 'home-index',
|
|
|
- label: '首页',
|
|
|
- icon: 'g-icon-home--line',
|
|
|
- activeIcon: 'g-icon-home--fill',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'home-ballot',
|
|
|
- label: '预售中签',
|
|
|
- icon: 'g-icon-presale--line',
|
|
|
- activeIcon: 'g-icon-presale--fill',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'home-transfer',
|
|
|
- label: '定金转让',
|
|
|
- icon: 'g-icon-transfer--line',
|
|
|
- activeIcon: 'g-icon-transfer--fill',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'home-16201',
|
|
|
- label: '全款挂牌',
|
|
|
+import { useNavigation } from '@mobile/router/navigation'
|
|
|
+import { useMarketSection } from '@/business/market'
|
|
|
+import { useLoginStore, useFuturesStore } from '@/stores'
|
|
|
+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'
|
|
|
+
|
|
|
+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: item.displayname,
|
|
|
icon: 'g-icon-listing--line',
|
|
|
activeIcon: 'g-icon-listing--fill',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'home-mine',
|
|
|
- label: '我的',
|
|
|
- icon: 'g-icon-mine--line',
|
|
|
- activeIcon: 'g-icon-mine--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 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: '首页',
|
|
|
+ icon: 'g-icon-home--line',
|
|
|
+ activeIcon: 'g-icon-home--fill',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'home-mine',
|
|
|
+ label: '我的',
|
|
|
+ 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: '交易',
|
|
|
+ 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>
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|