From 543735d5141ce80b5f48c1a0d777fc29b0b34c86 Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Wed, 03 Jun 2026 18:27:50 +0800
Subject: [PATCH] 1
---
src/views/quotes/Market.vue | 52 ++++++++++++++++++++++++++++++----------------------
1 files changed, 30 insertions(+), 22 deletions(-)
diff --git a/src/views/quotes/Market.vue b/src/views/quotes/Market.vue
index bb0fc74..7432f87 100644
--- a/src/views/quotes/Market.vue
+++ b/src/views/quotes/Market.vue
@@ -1,9 +1,10 @@
<template>
<div class="quotes-market-page">
<!-- Top Tabs -->
- <div class="market-tabs market-tabs--single">
- <div class="tab-item active">
- {{ $t('加密货币') }}
+ <div class="market-tabs">
+ <div class="tab-item" v-for="tab in marketTabs" :key="tab.value"
+ :class="{ active: activeTab === tab.value }" @click="switchTab(tab.value)">
+ {{ $t(tab.label) }}
</div>
</div>
@@ -12,12 +13,12 @@
<van-list v-model:loading="marketLoading" :finished="marketFinished" :immediate-check="false"
:scroll-target="marketListRef" :finished-text="$t('没有更多了') || '没有更多了'" @load="loadMoreMarket">
<div class="pair-item" v-for="pair in tradingPairs" :key="pair.symbol"
- @click="goToOptions(pair.symbol)">
+ @click="goToOptions(pair.symbol, pair.type)">
<div class="pair-header">
<div class="pair-symbol">
<img v-if="getPairIconUrl(pair)" :src="getPairIconUrl(pair)" alt=""
class="pair-symbol-icon" />
- {{ pair.symboltxt.toUpperCase() }}
+ {{ (pair.symboltxt || pair.symbol || '').toUpperCase() }}
</div>
<div class="pair-change" :class="pair.change >= 0 ? 'up' : 'down'">
{{ pair.change >= 0 ? '+' : '' }}{{ pair.change.toFixed(4) }}%
@@ -60,7 +61,13 @@
const useStore = useUserStore()
const quotesStore = useQuotesStore()
-const activeTab = ref('crypto')
+const activeTab = ref('cryptos')
+const marketTabs = [
+ { label: '加密货币', value: 'cryptos' },
+ { label: '股票', value: 'US-stocks' },
+ { label: 'ETF', value: 'indices' },
+ { label: '外汇', value: 'forex' },
+]
const tradingPairs = ref([])
const interval = ref(null)
const marketPage = ref(1)
@@ -73,8 +80,15 @@
function getPairIconUrl(pair) {
if (!pair) return ''
const tab = activeTab.value
+ if (tab === 'US-stocks' || tab === 'indices') return ''
if (tab === 'optional' && (pair.type === 'US-stocks' || pair.type === 'indices')) return ''
return pair.iconImg ? `${IMG_PATH}/symbol/${pair.iconImg}.png` : ''
+}
+
+function switchTab(tab) {
+ if (activeTab.value === tab) return
+ activeTab.value = tab
+ fetchData()
}
// 根据当前价与涨跌幅生成小型 K 线数据，与首页一致
@@ -201,7 +215,7 @@
// 获取交易数据；pageNo 页码，append 是否追加
const fetchTradingData = async (pageNo = 1, append = false) => {
- const type = 'cryptos'
+ const type = activeTab.value
try {
const params = {
@@ -217,7 +231,7 @@
const basePrice = parseFloat(item.close || item.lastPrice || 0)
const changeRatio = item.changeRatio || 0
const symbolStr = item.symbol || '--'
- const symboltxt = item.enName
+ const symboltxt = item.enName || item.name || symbolStr
const iconImg = item.symbol_data || (symbolStr.includes('/') ? symbolStr.split('/')[0].toLowerCase() : symbolStr.replace(/USDT$/i, '').toLowerCase()) || symbolStr.toLowerCase()
const klineData = generateMiniKlineData(basePrice, changeRatio)
const spread = basePrice * 0.0001
@@ -226,20 +240,14 @@
return {
symbol: symbolStr,
- symboltxt: symboltxt,
+ symboltxt,
price: basePrice.toFixed(4),
change: changeRatio,
- sellPrice: sellPrice,
- buyPrice: buyPrice,
- klineData: klineData,
- symbol: symbolStr,
- type: type,
- iconImg: iconImg,
- price: basePrice.toFixed(4),
- change: changeRatio,
- sellPrice: sellPrice,
- buyPrice: buyPrice,
- klineData: klineData
+ sellPrice,
+ buyPrice,
+ klineData,
+ type,
+ iconImg
}
})
if (append) {
@@ -284,11 +292,11 @@
}
// 跳转到交易页 Options，与首页一致：/trade/options?symbol=xxx&activeTab=xxx
-function goToOptions(symbol) {
+function goToOptions(symbol, type) {
if (!symbol) return
router.push({
path: '/trade/options',
- query: { symbol, activeTab: 'cryptos' }
+ query: { symbol, activeTab: type || activeTab.value }
})
}
--
Gitblit v1.9.3