|
|
@@ -1,63 +1,77 @@
|
|
|
-<!-- 根据市场板块动态配置(未完成) -->
|
|
|
+<!-- 根据市场板块动态配置 -->
|
|
|
<template>
|
|
|
- <app-tabs class="app-tabs--primary" :data-list="dataList" prop-label="marketsectionname" @change="onTabChange">
|
|
|
+ <app-tabs class="app-tabs--primary" :data-list="tabList" prop-label="marketsectionname" @change="onTabChange">
|
|
|
<app-tabs class="app-tabs--primary" :data-list="marketList" v-model:data-index="marketIndex" direction="bottom"
|
|
|
prop-label="displayname" @change="onMarketChange">
|
|
|
- <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ marketids }"
|
|
|
- @closed="closeComponent" v-if="componentId" />
|
|
|
+ <component :is="componentMap.get(componentId)" v-if="componentId" />
|
|
|
</app-tabs>
|
|
|
</app-tabs>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, defineAsyncComponent } from 'vue'
|
|
|
-import { useComponent } from '@/hooks/component'
|
|
|
+import { shallowRef, defineAsyncComponent, computed } from 'vue'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
import { getMarketSections } from '@/services/api/market'
|
|
|
+import { useFuturesStore, useUserStore } from '@/stores'
|
|
|
import AppTabs from '@/components/base/tabs/index.vue'
|
|
|
|
|
|
-const componentMap = new Map<string, unknown>([
|
|
|
- ['orderList', defineAsyncComponent(() => import('./goods/list/index.vue'))], // 订单挂牌
|
|
|
- ['99201', defineAsyncComponent(() => import('./market/index.vue'))], // 参考行情
|
|
|
+const componentMap = new Map([
|
|
|
+ ['goodsList', defineAsyncComponent(() => import('./goods/list/index.vue'))], // 订单挂牌
|
|
|
+ ['tradeModel_51', defineAsyncComponent(() => import('./presell/ballot/index.vue'))], // 预售中签
|
|
|
+ ['tradeModel_49', defineAsyncComponent(() => import('./presell/transfer/index.vue'))], // 定金转让
|
|
|
+ ['tradeModel_17', defineAsyncComponent(() => import('./spot/index.vue'))], // 现货挂牌
|
|
|
+ ['tradeModel_46', defineAsyncComponent(() => import('./swap/index.vue'))], // 掉期市场
|
|
|
+ ['tradeModel_99', defineAsyncComponent(() => import('./market/index.vue'))], // 参考行情
|
|
|
])
|
|
|
|
|
|
-const { componentRef, componentId, openComponent, closeComponent } = useComponent()
|
|
|
+const userStore = useUserStore()
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
const marketList = shallowRef<Model.GetMarketSectionsRsp['marketsectionconfignews']>([])
|
|
|
-const marketIndex = shallowRef(-1)
|
|
|
-const marketids = shallowRef<number[]>([])
|
|
|
+const marketIndex = shallowRef(0)
|
|
|
+const componentId = shallowRef('')
|
|
|
|
|
|
const { dataList } = useRequest(getMarketSections, {
|
|
|
- onSuccess: (res) => {
|
|
|
- const [firstTab] = res.data
|
|
|
- const [firstMarket] = firstTab?.marketsectionconfignews ?? []
|
|
|
- if (firstMarket) {
|
|
|
+ onFinally: () => {
|
|
|
+ const [firstTab] = tabList.value
|
|
|
+ if (firstTab) {
|
|
|
onTabChange(0)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+// 板块标签列表
|
|
|
+const tabList = computed(() => {
|
|
|
+ const ids = userStore.userData.markets.map((e) => e.marketid.toString())
|
|
|
+ // 过滤掉没有市场权限的板块
|
|
|
+ return dataList.value.filter((item) => item.marketsectionconfignews.some((e) => {
|
|
|
+ const arr = e.marketids.split(',')
|
|
|
+ e.marketids = arr.filter((id) => ids.includes(id)).join(',')
|
|
|
+ return e.marketids
|
|
|
+ }))
|
|
|
+})
|
|
|
+
|
|
|
+// 切换板块
|
|
|
const onTabChange = (index: number) => {
|
|
|
- const item = dataList.value[index]
|
|
|
+ const item = tabList.value[index]
|
|
|
marketList.value = item.marketsectionconfignews
|
|
|
- componentId.value = undefined
|
|
|
-
|
|
|
- if (marketList.value.length) {
|
|
|
- marketIndex.value = 0
|
|
|
- onMarketChange(0)
|
|
|
- }
|
|
|
+ marketIndex.value = 0
|
|
|
+ componentId.value = ''
|
|
|
+ onMarketChange(0)
|
|
|
}
|
|
|
|
|
|
+// 切换市场
|
|
|
const onMarketChange = (index: number) => {
|
|
|
const item = marketList.value[index]
|
|
|
if (item) {
|
|
|
- marketids.value = item.marketids.split(',').map((val) => Number(val))
|
|
|
+ const marketids = item.marketids.split(',').map((val) => Number(val))
|
|
|
+ futuresStore.setMarketId(...marketids)
|
|
|
switch (true) {
|
|
|
case [50, 16].includes(item.trademode): {
|
|
|
- openComponent('orderList')
|
|
|
+ componentId.value = 'goodsList'
|
|
|
break
|
|
|
}
|
|
|
default: {
|
|
|
- openComponent(item.marketids)
|
|
|
+ componentId.value = 'tradeModel_' + item.trademode
|
|
|
}
|
|
|
}
|
|
|
}
|