MTP2.0_WEB/src/views/market/market-spot/index.vue

<template>
  <div class="exposure">
    <mtp-tabbar class="mtp-tabbar--top" :data-source="marketsSetion" label="marketsectionname" @change="selectSection" />
    <component :is="componentId" v-if="componentId"></component>
    <mtp-tabbar class="mtp-tabbar--bottom" :data-source="markets" v-model:selectedIndex="selctedMarketIndex" label="marketname" @change="onSelectMarket" />
  </div>
</template>

<script lang="ts">
import { TradeMode, ListingMode, AuctionwrType } from '@/common/constants/enumCommon';
import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
import { initData } from '@/common/methods';
import APP from '@/services';
import { TjmdMarketSection, TjmdMarketSectionConfig } from '@/services/go/Tjmd/interface';
import { ref } from 'vue';
import { setMarketId } from './setup'
import MtpTabbar from '@/@next/components/base/tabbar/index.vue'

export default defineComponent({
  components: {
    MtpTabbar,
    contextMenu,
    // 仓单贸易 有仓单 一口价
    [`${TradeMode.WarehouseReceiptTrade}-${AuctionwrType.hasWr}-${ListingMode.fix}`]: defineAsyncComponent(() => import('./warehouse_receipt_trade/warehouse_receipt_trade_price/index.vue')),
    // 仓单贸易 有仓单 浮动价
    [`${TradeMode.WarehouseReceiptTrade}-${AuctionwrType.hasWr}-${ListingMode.float}`]: defineAsyncComponent(() => import('./warehouse_receipt_trade/warehouse_receipt_trade_floating_price/index.vue')),
    // 仓单贸易 有仓单 贸易圈
    [`${TradeMode.WarehouseReceiptTrade}-${AuctionwrType.hasWr}-${ListingMode.blocs}`]: defineAsyncComponent(() => import('./warehouse_receipt_trade/warehouse_receipt_trade_blocs/index.vue')),
    // 仓单贸易 有仓单 协议指定
    [`${TradeMode.WarehouseReceiptTrade}-${AuctionwrType.hasWr}-${ListingMode.designate}`]: defineAsyncComponent(() => import('./warehouse_receipt_trade/warehouse_receipt_trade_designate/index.vue')),
    // 仓单贸易 无仓单 一口价
    [`${TradeMode.WarehouseReceiptTrade}-${AuctionwrType.noWr}-${ListingMode.fix}`]: defineAsyncComponent(() => import('./warehouse_pre_sale/warehouse_pre_sale_price/index.vue')),
    // 仓单贸易 无仓单 浮动价
    [`${TradeMode.WarehouseReceiptTrade}-${AuctionwrType.noWr}-${ListingMode.float}`]: defineAsyncComponent(() => import('./warehouse_pre_sale/warehouse_pre_sale_floating_price/index.vue')),
    // 仓单贸易 无仓单 贸易圈
    [`${TradeMode.WarehouseReceiptTrade}-${AuctionwrType.noWr}-${ListingMode.blocs}`]: defineAsyncComponent(() => import('./warehouse_pre_sale/warehouse_pre_sale_blocs/index.vue')),
    // 仓单贸易 无仓单 协议指定
    [`${TradeMode.WarehouseReceiptTrade}-${AuctionwrType.noWr}-${ListingMode.designate}`]: defineAsyncComponent(() => import('./warehouse_pre_sale/warehouse_pre_sale_designate/index.vue')),
    // 参考行情
    [TradeMode.quote99]: defineAsyncComponent(() => import('./spot_trade_reference_market/index.vue')),
    // 挂牌点选
    [TradeMode.ListingAndSelection]: defineAsyncComponent(() => import('./spot_trade_order_transaction/spot_trade_order_transaction_basis_difference/index.vue')),
    // 掉期贸易
    [TradeMode.DiaoQi]: defineAsyncComponent(() => import('./spot_trade_order_transaction/spot_trade_order_transaction_swap/index.vue')),
  },
  setup() {
    // 市场板块
    const marketsSetion = APP.getRef('marketsSection')
    // 市场
    const markets = ref<TjmdMarketSectionConfig[]>([])
    // 选中的市场
    const selctedMarketIndex = ref(0)

    const componentId = ref<string>('')
    initData(() => {
      if (marketsSetion.value.length) {
        selectSection(marketsSetion.value[0])
      }
    })

    // 切换市场板块
    function selectSection(value: TjmdMarketSection) {
      markets.value = value.mlist
      const index = marketsSetion.value.findIndex((el: TjmdMarketSection) => el.marketsectionid === value.marketsectionid)
      if (index > -1 && value.mlist.length) {
        selctedMarketIndex.value = 0
        onSelectMarket(value.mlist[0])
      }
    }

    // 切换市场
    function onSelectMarket(value: TjmdMarketSectionConfig) {
      const { trademode, auctionwrtype, listingmode } = value
      // 仓单贸易
      if (value.trademode === TradeMode.WarehouseReceiptTrade) {
        componentId.value = `${trademode}-${auctionwrtype}-${listingmode}`
      } else {
        componentId.value = value.trademode.toString()
      }
      // 缓存 当前市场 交易模式 是否有仓单，挂牌方式信息
      setMarketId(componentId.value)
    }

    return {
      marketsSetion,
      selectSection,
      markets,
      selctedMarketIndex,
      onSelectMarket,
      componentId
    }
  }
})
</script>

<style lang="less">
.home {
    .withus {
        cursor: pointer;
        margin-top: 35px;
        padding-bottom: 25px;
    }
}
</style>