1

李

7 days ago 4f9044ae2a9f2db03bbb916bc5f6dfd12916361d

 src/views/trade/Options.vue

@@ -33,7 +33,7 @@
            close-icon-position="top-right">
            <div class="symbol-modal">
                <!-- Modal Tabs：同一 activeTab 的 label 与 value 统一配置 -->
                <div class="modal-tabs">
                <div v-if="modalTabs.length > 1" class="modal-tabs">
                    <div class="tab-item" v-for="tab in modalTabs" :key="tab.value"
                        :class="{ active: activeTab === tab.value }" @click="activeTab = tab.value">
                        {{ $t(tab.label) }}
@@ -77,17 +77,13 @@
import OptionsContract from './components/OptionsContract.vue'
import { _getHomeList } from '@/service/home.api'
import { _getRealtimeByType, _isItemHasAddGlobal } from '@/service/quotes.api'
import { _listItemsById, _itemUserOptionalList, _getQuotes } from '@/service/quotes.api'
import { _collect, _deleteCollect } from '@/service/cryptos.api'
import { useUserStore } from '@/store/user'
import { useQuotesStore } from '@/store/quotes.store'
import { OPCIONA_LIST } from '@/store/types.store'
import { HOST_URL } from '@/config'

const route = useRoute()
const { t } = useI18n()
const useStore = useUserStore()
const quotesStore = useQuotesStore()

const tradeType = ref('options') // 'options' 期权 / 'contract' 合约，默认期权交易
const currentSymbol = ref('btc')
@@ -103,30 +99,19 @@
const symbolInitialLoading = ref(false) // tab 切换时首屏请求中，避免 @load 重复请求 pageNo=1
const SYMBOL_PAGE_SIZE = 10

// 允许的 activeTab 值（与 modalTabs.value 一致）
const VALID_ACTIVE_TABS = ['optional', 'forex', 'cryptos', 'US-stocks', 'indices']

// 从路由 path(params) 或 query 同步 symbol 与 activeTab
// 从路由 path(params) 或 query 同步 symbol（品种固定为数字货币）
function applyFromRoute() {
    const p = route.params || {}
    const q = route.query || {}
    const symbol = q.symbol ?? p.symbol
    const tab = q.activeTab ?? q.tab ?? p.activeTab ?? p.tab
    if (symbol != null && String(symbol).trim()) {
        currentSymbol.value = String(symbol).trim()
    }
    if (tab != null && VALID_ACTIVE_TABS.includes(String(tab))) {
        activeTab.value = tab
    }
    activeTab.value = 'cryptos'
}

// 弹窗 Tab：label 为多语言 key，value 与接口类型统一（optional 仅自选列表用）
const modalTabs = [
    // { label: '自选', value: 'optional' },
    { label: '外汇', value: 'forex' },
    { label: '加密货币', value: 'cryptos' },
    { label: '股票', value: 'US-stocks' },
    { label: 'ETF', value: 'indices' }
]

// 头部显示：关联选择项的 name，无则用 symbol
@@ -140,9 +125,7 @@
// 嵌入合约：1=永续(合约交易)，2=交割(期权交易)
const embedSelectIndex = computed(() => tradeType.value === 'contract' ? 1 : 2)
// 嵌入合约品种类型（value 已与接口类型统一，仅 optional 需映射）
const embedType = computed(() => {
    return activeTab.value === 'optional' ? 'forex' : activeTab.value
})
const embedType = computed(() => 'cryptos')

// 图标路径
const starIcon = new URL('@/assets/image/icon-star.png', import.meta.url).href
@@ -155,59 +138,13 @@
    return `${HOST_URL}/symbol/${baseSymbol.toLowerCase()}.png`
}

// 获取自选数据
const fetchOptionalData = async () => {
    try {
        if (!useStore.userInfo.token) {
            symbolList.value = []
            return
        }

        const listData = await _itemUserOptionalList()
        if (listData && listData.list && listData.list.length > 0) {
            const firstList = listData.list[0]
            const itemsData = await _listItemsById({ id: firstList.listId })

            if (itemsData && Array.isArray(itemsData)) {
                const symbols = itemsData.map(item => ({ symbol: item.symbol }))
                quotesStore[OPCIONA_LIST](symbols)

                if (symbols.length > 0) {
                    const symbolStr = symbols.map(s => s.symbol).join(',')
                    const data = await _getHomeList(symbolStr)
                    if (data && Array.isArray(data)) {
                        symbolList.value = data
                    } else {
                        symbolList.value = []
                    }
                } else {
                    symbolList.value = []
                }
            } else {
                symbolList.value = []
            }
        } else {
            symbolList.value = []
        }
    } catch (error) {
        console.error('获取自选数据失败:', error)
        symbolList.value = []
    }
}

// 获取交易数据（activeTab.value 已与接口 type 统一）；pageNo 页码，append 是否追加
// 获取交易数据；pageNo 页码，append 是否追加
const fetchTradingData = async (pageNo = 1, append = false) => {
    const type = activeTab.value === 'optional' ? 'forex' : activeTab.value
    const category = type === 'forex' ? 'forex' : null

    try {
        const params = {
            type: type,
            type: 'cryptos',
            pageNo: pageNo,
            pageSize: SYMBOL_PAGE_SIZE
        }
        if (category) {
            params.category = category
        }

        const data = await _getRealtimeByType(params)
@@ -244,11 +181,6 @@

// 上拉触底加载更多（仅非自选 tab 分页，pageSize=10）
const loadMoreSymbols = async () => {
    if (activeTab.value === 'optional') {
        symbolFinished.value = true
        symbolLoading.value = false
        return
    }
    if (symbolInitialLoading.value) {
        symbolLoading.value = false
        return
@@ -269,13 +201,8 @@
    symbolFinished.value = false
    symbolInitialLoading.value = true
    try {
        if (activeTab.value === 'optional') {
            await fetchOptionalData()
            symbolFinished.value = true
        } else {
            await fetchTradingData(1, false)
            symbolPage.value = 2
        }
        await fetchTradingData(1, false)
        symbolPage.value = 2
        // tab 切换后列表滚动回顶部
        await nextTick()
        if (symbolListRef.value) symbolListRef.value.scrollTop = 0
@@ -337,11 +264,6 @@
        showToast(e?.msg || t('操作失败'))
    }
}

// 监听 tab 切换
watch(activeTab, () => {
    fetchData()
})

// 当前交易对变化时刷新收藏状态
watch(currentSymbol, () => {