|
@@ -1,7 +1,13 @@
|
|
|
<template>
|
|
<template>
|
|
|
<app-view>
|
|
<app-view>
|
|
|
<template #header>
|
|
<template #header>
|
|
|
- <app-navbar title="我的持仓" />
|
|
|
|
|
|
|
+ <app-navbar title="我的持仓">
|
|
|
|
|
+ <template #right v-if="selectedComponent.detail">
|
|
|
|
|
+ <div class="button-more" @click="openComponent(selectedComponent.name)">
|
|
|
|
|
+ <span>明细</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </app-navbar>
|
|
|
</template>
|
|
</template>
|
|
|
<Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
|
|
<Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
|
|
|
<template v-for="(item, index) in components" :key="index">
|
|
<template v-for="(item, index) in components" :key="index">
|
|
@@ -10,18 +16,22 @@
|
|
|
</Tab>
|
|
</Tab>
|
|
|
</template>
|
|
</template>
|
|
|
</Tabs>
|
|
</Tabs>
|
|
|
|
|
+ <component ref="componentRef" :is="selectedComponent.detail" @closed="closeComponent"
|
|
|
|
|
+ v-if="componentId && selectedComponent.detail" />
|
|
|
</app-view>
|
|
</app-view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, defineAsyncComponent } from 'vue'
|
|
|
|
|
|
|
+import { shallowRef, computed, defineAsyncComponent } from 'vue'
|
|
|
import { Tab, Tabs } from 'vant'
|
|
import { Tab, Tabs } from 'vant'
|
|
|
|
|
+import { useComponent } from '@/hooks/component'
|
|
|
|
|
|
|
|
const components = [
|
|
const components = [
|
|
|
{
|
|
{
|
|
|
name: 'goods',
|
|
name: 'goods',
|
|
|
title: '订单持仓',
|
|
title: '订单持仓',
|
|
|
component: defineAsyncComponent(() => import('@mobile/views/order/position/components/goods/list/Index.vue')),
|
|
component: defineAsyncComponent(() => import('@mobile/views/order/position/components/goods/list/Index.vue')),
|
|
|
|
|
+ detail: defineAsyncComponent(() => import('@mobile/views/order/position/components/goods/detail/Index.vue')),
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
name: 'spot',
|
|
name: 'spot',
|
|
@@ -31,4 +41,6 @@ const components = [
|
|
|
]
|
|
]
|
|
|
|
|
|
|
|
const active = shallowRef(0)
|
|
const active = shallowRef(0)
|
|
|
|
|
+const selectedComponent = computed(() => components[active.value])
|
|
|
|
|
+const { componentRef, componentId, openComponent, closeComponent } = useComponent()
|
|
|
</script>
|
|
</script>
|