1

李

7 days ago 543735d5141ce80b5f48c1a0d777fc29b0b34c86

 src/views/trade/Options.vue

@@ -35,7 +35,7 @@
                <!-- Modal Tabs：同一 activeTab 的 label 与 value 统一配置 -->
                <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">
                        :class="{ active: activeTab === tab.value }" @click="switchTab(tab.value)">
                        {{ $t(tab.label) }}
                    </div>
                </div>
@@ -54,7 +54,7 @@
                            @click="selectSymbol(item)">
                            <div class="symbol-left">
                                <div class="symbol-info">
                                    <div class="symbol-name">{{ (item.symbol).toUpperCase() }}</div>
                                    <div class="symbol-name">{{ getSymbolDisplayName(item) }}</div>
                                </div>
                            </div>
                            <div class="symbol-change" :class="item.change_ratio >= 0 ? 'up' : 'down'">
@@ -98,20 +98,33 @@
const symbolListRef = ref(null)
const symbolInitialLoading = ref(false) // tab 切换时首屏请求中，避免 @load 重复请求 pageNo=1
const SYMBOL_PAGE_SIZE = 10
const TAB_TYPES = ['cryptos', 'US-stocks', 'indices', 'forex']
const DEFAULT_SYMBOL = {
    cryptos: 'btc',
    'US-stocks': 'AAPL',
    indices: 'GlobalETF500',
    forex: 'EURUSD',
}

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

const modalTabs = [
    { label: '加密货币', value: 'cryptos' },
    { label: '股票', value: 'US-stocks' },
    { label: 'ETF', value: 'indices' },
    { label: '外汇', value: 'forex' },
]

// 头部显示：关联选择项的 name，无则用 symbol
@@ -124,8 +137,32 @@

// 嵌入合约：1=永续(合约交易)，2=交割(期权交易)
const embedSelectIndex = computed(() => tradeType.value === 'contract' ? 1 : 2)
// 嵌入合约品种类型（value 已与接口类型统一，仅 optional 需映射）
const embedType = computed(() => 'cryptos')
// 嵌入合约品种类型
const embedType = computed(() => activeTab.value)

function getSymbolDisplayName(item) {
    if (!item) return ''
    const name = item.name || item.enName || item.symbol || ''
    if (activeTab.value === 'forex') return String(name).toUpperCase()
    if (activeTab.value === 'cryptos') return String(item.symbol || name).toUpperCase()
    return name
}

function mapSymbolItem(item) {
    return {
        symbol: item.symbol,
        name: item.enName || item.name || item.symbol,
        close: item.close ?? item.lastPrice ?? '--',
        change_ratio: item.changeRatio ?? item.change_ratio ?? 0,
    }
}

function switchTab(tab) {
    if (activeTab.value === tab) return
    activeTab.value = tab
    currentSymbol.value = DEFAULT_SYMBOL[tab] || 'btc'
    fetchData()
}

// 图标路径
const starIcon = new URL('@/assets/image/icon-star.png', import.meta.url).href
@@ -141,8 +178,9 @@
// 获取交易数据；pageNo 页码，append 是否追加
const fetchTradingData = async (pageNo = 1, append = false) => {
    try {
        const type = activeTab.value
        const params = {
            type: 'cryptos',
            type,
            pageNo: pageNo,
            pageSize: SYMBOL_PAGE_SIZE
        }
@@ -151,19 +189,21 @@

        if (data && Array.isArray(data)) {
            const symbols = data.map(item => item.symbol).join(',')
            let list = []
            if (symbols) {
                const homeData = await _getHomeList(symbols)
                if (homeData && Array.isArray(homeData)) {
                    if (append) {
                        symbolList.value = [...symbolList.value, ...homeData]
                    } else {
                        symbolList.value = homeData
                    }
                } else if (!append) {
                    symbolList.value = []
                if (homeData && Array.isArray(homeData) && homeData.length) {
                    list = homeData
                } else {
                    list = data.map(mapSymbolItem)
                }
            } else if (!append) {
                symbolList.value = []
            } else {
                list = data.map(mapSymbolItem)
            }
            if (append) {
                symbolList.value = [...symbolList.value, ...list]
            } else {
                symbolList.value = list
            }
            if (data.length <= 0) {
                symbolFinished.value = true
@@ -219,7 +259,8 @@
    const keyword = searchKeyword.value.toLowerCase()
    return symbolList.value.filter(item =>
        item.symbol.toLowerCase().includes(keyword) ||
        (item.name && item.name.toLowerCase().includes(keyword))
        (item.name && item.name.toLowerCase().includes(keyword)) ||
        (item.enName && item.enName.toLowerCase().includes(keyword))
    )
})

@@ -229,8 +270,6 @@
    showSymbolModal.value = false
    searchKeyword.value = ''
}

// 查询当前交易对是否已收藏（与 add-currency / trade-head 一致）
function checkFavorite() {
    if (!useStore.userInfo?.token || !currentSymbol.value) {
        isFavorite.value = false
@@ -271,7 +310,10 @@
})

// 监听路由 query 变化（同一页带不同 query 时同步）
watch(() => route.query, () => applyFromRoute(), { deep: true })
watch(() => route.query, () => {
    applyFromRoute()
    fetchData()
}, { deep: true })

// 组件挂载时：先从 path/query 取 symbol、activeTab，再拉数据并刷新收藏状态
onMounted(() => {