引入各市场国旗，接入全球市场接口，地区分组列表接口，地区详情接口，一次性查询所有Tabs栏父子结构接口，修改IndexCards组件

api/marketSituation/marketSituation.js

@@ -0,0 +1,70 @@
+/** @format */
+
+import { http } from "../../utils/http";
+
+export const getData = () => {
+  return http({
+    method: "GET",
+    url: "/ka",
+  });
+};
+
+/**
+ * 获取全球指数
+ * POST /api/global/getGlobalIndex
+ */
+export const getGlobalIndexAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/global/getGlobalIndex",
+    data,
+  });
+};
+
+/**
+ * 获取地区分组列表
+ * POST /api/global/regionalGroup
+ */
+export const getRegionalGroupAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/global/regionalGroup",
+    data,
+  });
+};
+
+/**
+ * 获取地区详情
+ * POST /api/global/regionalGroupList
+ */
+export const getRegionalGroupListAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/global/regionalGroupList",
+    data,
+  });
+};
+
+/**
+ * 一次性查询所有Tab栏父子结构
+ * POST /api/homework/tab/getAll
+ */
+export const getAllTabsAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/homework/tab/getAll",
+    data,
+  });
+};
+
+/**
+ * 通用市场数据分页查询接口（默认1页20条）
+ * POST /api/market/data/page/query
+ */
+export const queryStockDataAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/market/data/page/query",
+    data,
+  });
+};

components/IndexCard.vue

@@ -1,8 +1,10 @@
+<!-- @format -->
+
 <template>
   <view class="index-card">
     <view class="card-header">
       <view class="flag-container">
-				<image :src="flagIcon" class="flag-icon" mode="aspectFit"></image>
+        <image :src="getMarketFlag(market)" class="flag-icon" mode="aspectFit"></image>
       </view>
       <text class="index-name">{{ stockName }}</text>
     </view>
@@ -25,51 +27,79 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed } from "vue";
 
 // 定义组件属性
 const props = defineProps({
   // 国旗图标路径
-	flagIcon: {
+  market: {
     type: String,
-		required: true
+    required: true,
   },
   // 指数名称
   stockName: {
     type: String,
-		required: true
+    required: true,
   },
   // 当前价格
   currentPrice: {
     type: [String, Number],
-		required: true
+    required: true,
   },
   // 涨跌金额
   changeAmount: {
     type: [String, Number],
-		required: true
+    required: true,
   },
   // 涨跌幅
   changePercent: {
     type: [String, Number],
-		required: true
+    required: true,
   },
   // 是否上涨
   isRising: {
     type: Boolean,
-		default: true
-	}
-})
+    default: true,
+  },
+});
+
+const getMarketFlag = (market) => {
+  console.log("market", market);
+  let imagePath;
+
+  if (market === "cn") {
+    imagePath = "/static/marketSituation-image/country-flag/cn.png";
+  } else if (market === "hk") {
+    imagePath = "/static/marketSituation-image/country-flag/hk.png";
+  } else if (market === "can") {
+    imagePath = "/static/marketSituation-image/country-flag/can.png";
+  } else if (market === "my") {
+    imagePath = "/static/marketSituation-image/country-flag/my.png";
+  } else if (market === "sg") {
+    imagePath = "/static/marketSituation-image/country-flag/sg.png";
+  } else if (market === "th") {
+    imagePath = "/static/marketSituation-image/country-flag/th.png";
+  } else if (market === "vi") {
+    imagePath = "/static/marketSituation-image/country-flag/vi.png";
+  } else if (market === "us" || market === "usa") {
+    imagePath = "/static/marketSituation-image/country-flag/us.png";
+  } else {
+    imagePath = "/static/marketSituation-image/country-flag/global.png";
+  }
+
+  console.log("返回的图片路径:", imagePath);
+  return imagePath;
+};
 
 // 计算价格颜色
 const priceColor = computed(() => {
-	return props.isRising ? '#00C853' : '#FF1744'
-})
+  return props.isRising ? "#00C853" : "#FF1744";
+});
 
 // 计算图表背景色
 const chartBgColor = computed(() => {
-	return props.isRising ? '#E8F5E8' : '#FFEBEE'
-})
+  return props.isRising ? "#E8F5E8" : "#FFEBEE";
+});
 </script>
 
 <style scoped>
@@ -163,7 +193,7 @@ const chartBgColor = computed(() => {
 
 /* 添加一些波浪效果 */
 .chart-line::before {
-	content: '';
+  content: "";
   position: absolute;
   top: -10rpx;
   left: 20%;
@@ -176,7 +206,7 @@ const chartBgColor = computed(() => {
 }
 
 .chart-line::after {
-	content: '';
+  content: "";
   position: absolute;
   top: -6rpx;
   right: 30%;

pages/marketSituation/countryMarket.vue

@@ -1,9 +1,10 @@
+<!-- @format -->
+
 <template>
   <view class="content">
     <!-- 市场子Tab -->
     <view class="sub_tabs">
-			<view v-for="(tab, i) in marketTabs" :key="tab" :class="['tab_item', i === activeTabIndex ? 'active' : '']"
-				@click="switchTab(i)">
+      <view v-for="(tab, i) in marketTabs" :key="tab" :class="['tab_item', i === activeTabIndex ? 'active' : '']" @click="switchTab(i)">
         <text>{{ tab }}</text>
       </view>
     </view>
@@ -16,8 +17,7 @@
       </view>
       <view class="indices_grid">
         <view v-for="(index, i) in countryInfo.mainIndices" :key="i" class="index_item">
-					<IndexCard :flagIcon="countryInfo.flag" :indexName="index.name" :currentPrice="index.price"
-						:changeAmount="index.change" :changePercent="index.changePercent" :isRising="index.isRising" />
+          <IndexCard :market="countryInfo.market" :indexName="index.name" :currentPrice="index.price" :changeAmount="index.change" :changePercent="index.changePercent" :isRising="index.isRising" />
         </view>
       </view>
 
@@ -92,115 +92,120 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import IndexCard from '../../components/IndexCard.vue'
+import { ref, computed, onMounted } from "vue";
+import IndexCard from "../../components/IndexCard.vue";
 
 // 子Tab与操作
-const marketTabs = ['全部', '美股', '纽交所', '纳斯达克']
-const activeTabIndex = ref(0)
+// const marketTabs = ["全部", "美股", "纽交所", "纳斯达克"];
+const activeTabIndex = ref(0);
 const switchTab = (i) => {
-	activeTabIndex.value = i
-}
+  activeTabIndex.value = i;
+};
 
 // 今日情绪温度示例数据
 const sentimentMeters = [
-	{ value: 90, label: '道琼斯', theme: 'hot' },
-	{ value: 60, label: '纳斯达克', theme: 'warm' },
-	{ value: 20, label: '标普500', theme: 'cool' }
-]
+  { value: 90, label: "道琼斯", theme: "hot" },
+  { value: 60, label: "纳斯达克", theme: "warm" },
+  { value: 20, label: "标普500", theme: "cool" },
+];
 
 // 图标映射
 const selectIcons = {
-	hot: '/static/marketSituation-image/hot.png',
-	warm: '/static/marketSituation-image/warm.png',
-	cool: '/static/marketSituation-image/cool.png'
-}
+  hot: "/static/marketSituation-image/hot.png",
+  warm: "/static/marketSituation-image/warm.png",
+  cool: "/static/marketSituation-image/cool.png",
+};
 
 // Props
 const props = defineProps({
   countryId: {
     type: Number,
-		required: true
-	}
-})
+    required: true,
+  },
+  marketTabs: {
+    type: Array,
+  },
+});
 
 // 国家/地区信息映射
 const countryInfoMap = {
-	2: { // 新加坡
-		name: '新加坡',
-		flag: '🇸🇬',
+  2: {
+    // 新加坡
+    name: "新加坡",
+    flag: "🇸🇬",
     isMarketOpen: true,
     mainIndices: [
-			{ name: '海峡时报指数', price: '3,234.56', change: '+12.34', changePercent: '+0.38%', isRising: true },
-			{ name: 'FTSE ST Mid Cap', price: '1,234.56', change: '-5.67', changePercent: '-0.46%', isRising: false }
+      { name: "海峡时报指数", price: "3,234.56", change: "+12.34", changePercent: "+0.38%", isRising: true },
+      { name: "FTSE ST Mid Cap", price: "1,234.56", change: "-5.67", changePercent: "-0.46%", isRising: false },
     ],
     hotStocks: [
-			{ name: '星展银行', code: 'D05.SI', price: '35.20', change: '+0.15', isRising: true },
-			{ name: '华侨银行', code: 'O39.SI', price: '13.45', change: '-0.05', isRising: false }
-		]
+      { name: "星展银行", code: "D05.SI", price: "35.20", change: "+0.15", isRising: true },
+      { name: "华侨银行", code: "O39.SI", price: "13.45", change: "-0.05", isRising: false },
+    ],
   },
-	3: { // 马来西亚
-		name: '马来西亚',
-		flag: '🇲🇾',
+  3: {
+    // 马来西亚
+    name: "马来西亚",
+    flag: "🇲🇾",
     isMarketOpen: false,
-		mainIndices: [
-			{ name: '富时大马KLCI指数', price: '1,567.89', change: '+8.90', changePercent: '+0.57%', isRising: true }
-		],
+    mainIndices: [{ name: "富时大马KLCI指数", price: "1,567.89", change: "+8.90", changePercent: "+0.57%", isRising: true }],
     hotStocks: [
-			{ name: '马来亚银行', code: '1155.KL', price: '9.85', change: '+0.10', isRising: true },
-			{ name: '大众银行', code: '1295.KL', price: '4.32', change: '-0.02', isRising: false }
-		]
+      { name: "马来亚银行", code: "1155.KL", price: "9.85", change: "+0.10", isRising: true },
+      { name: "大众银行", code: "1295.KL", price: "4.32", change: "-0.02", isRising: false },
+    ],
   },
-	4: { // 印度尼西亚
-		name: '印度尼西亚',
-		flag: '🇮🇩',
+  4: {
+    // 印度尼西亚
+    name: "印度尼西亚",
+    flag: "🇮🇩",
     isMarketOpen: true,
-		mainIndices: [
-			{ name: '雅加达综合指数', price: '7,234.56', change: '+45.67', changePercent: '+0.63%', isRising: true }
-		],
-		hotStocks: []
+    mainIndices: [{ name: "雅加达综合指数", price: "7,234.56", change: "+45.67", changePercent: "+0.63%", isRising: true }],
+    hotStocks: [],
   },
-	5: { // 美国
-		name: '美国',
-		flag: '🇺🇸',
+  5: {
+    // 美国
+    name: "美国",
+    flag: "🇺🇸",
     isMarketOpen: false,
     mainIndices: [
-			{ name: '道琼斯', price: '45,757.90', change: '-125.22', changePercent: '-0.27%', isRising: false },
-			{ name: '纳斯达克', price: '22,333.96', change: '+125.22', changePercent: '+0.47%', isRising: true },
-			{ name: '标普500', price: '6,606.08', change: '+125.22', changePercent: '+0.27%', isRising: true }
+      { name: "道琼斯", price: "45,757.90", change: "-125.22", changePercent: "-0.27%", isRising: false },
+      { name: "纳斯达克", price: "22,333.96", change: "+125.22", changePercent: "+0.47%", isRising: true },
+      { name: "标普500", price: "6,606.08", change: "+125.22", changePercent: "+0.27%", isRising: true },
     ],
     hotStocks: [
-			{ name: '苹果', code: 'AAPL', price: '195.89', change: '+2.34', isRising: true },
-			{ name: '微软', code: 'MSFT', price: '378.85', change: '-1.23', isRising: false }
-		]
-	}
-}
+      { name: "苹果", code: "AAPL", price: "195.89", change: "+2.34", isRising: true },
+      { name: "微软", code: "MSFT", price: "378.85", change: "-1.23", isRising: false },
+    ],
+  },
+};
 
 // 计算当前国家信息
 const countryInfo = computed(() => {
-	return countryInfoMap[props.countryId] || {
-		name: '未知地区',
-		flag: '🌍',
+  return (
+    countryInfoMap[props.countryId] || {
+      name: "未知地区",
+      flag: "🌍",
       isMarketOpen: false,
       mainIndices: [],
-		hotStocks: []
+      hotStocks: [],
     }
-})
+  );
+});
 
 // 计算当前国家的板块与股票
 const sectors = computed(() => {
-	return countryInfoMap[props.countryId]?.sectors || []
-})
+  return countryInfoMap[props.countryId]?.sectors || [];
+});
 const stocks = computed(() => {
-	return countryInfoMap[props.countryId]?.stocks || []
-})
+  return countryInfoMap[props.countryId]?.stocks || [];
+});
 
 // 查看更多占位
 const viewMore = (type) => {
   // 可根据 type 跳转到相应页面或加载更多
   // 例如：indices/sectors/stocks
   // uni.navigateTo({ url: `/pages/marketSituation/${type}List` })
-}
+};
 </script>
 
 <style scoped>
@@ -256,12 +261,12 @@ const viewMore = (type) => {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20rpx;
-	background-color: #F6F6F6;
+  background-color: #f6f6f6;
 }
 
 /* 情绪温度 */
 .sentiment {
-	background-color: #F6F6F6;
+  background-color: #f6f6f6;
   padding: 0 20rpx 20rpx 20rpx;
 }
 

pages/marketSituation/globalIndex.vue

@@ -1,3 +1,5 @@
+<!-- @format -->
+
 <template>
   <view class="main">
     <!-- 固定头部 -->
@@ -7,11 +9,8 @@
           <image src="/static/marketSituation-image/back.png" mode=""></image>
         </view>
         <view class="header_input_wrapper">
-                    <image class="search_icon" src="/static/marketSituation-image/search.png" mode=""
-                        @click="onSearchClick"></image>
-                    <input class="header_input" type="text" placeholder="搜索"
-                        placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue"
-                        @input="onSearchInput" @confirm="onSearchConfirm" />
+          <image class="search_icon" src="/static/marketSituation-image/search.png" mode="" @click="onSearchClick"></image>
+          <input class="header_input" type="text" placeholder="搜索" placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue" @input="onSearchInput" @confirm="onSearchConfirm" />
         </view>
         <view class="header_icons">
           <view class="header_icon" @click="selected">
@@ -25,7 +24,7 @@
       <view class="warn">
         <image src="/static/marketSituation-image/warn.png" mode="aspectFit"></image>
         <view class="warn_text_container">
-                    <text :class="warnTextClass">{{ $t('marketSituation.warn') }}</text>
+          <text :class="warnTextClass">{{ $t("marketSituation.warn") }}</text>
         </view>
       </view>
     </view>
@@ -33,58 +32,25 @@
     <!-- 内容区域 -->
     <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
       <!-- 亚太-中华 -->
-            <view class="market-section">
-                <view class="market-header">
-                    <text class="market-title">亚太-中华</text>
-                    <view class="market-more" @click="viewMore('asia-china')">
-                        <text class="more-text">查看更多</text>
-                        <text class="more-arrow">></text>
-                    </view>
-                </view>
-                <view class="cards-grid-three">
-                    <view v-for="(item, index) in asiachinaIndexes" :key="index" class="card-item">
-                        <IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName"
-                            :currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
-                            :changePercent="item.changePercent" :isRising="item.isRising"
-                            @click="viewIndexDetail(item)" />
-                    </view>
-                </view>
-            </view>
-
-            <!-- 亚太 -->
-            <view class="market-section">
+      <view class="market-section" v-for="item in globalIndexArray" :key="item">
         <view class="market-header">
-                    <text class="market-title">亚太</text>
-                    <view class="market-more" @click="viewMore('asia')">
+          <text class="market-title">{{ item.ac }}</text>
+          <view class="market-more" @click="viewMore(item.ac)">
             <text class="more-text">查看更多</text>
             <text class="more-arrow">></text>
           </view>
         </view>
         <view class="cards-grid-three">
-                    <view v-for="(item, index) in asiaIndexes" :key="index" class="card-item">
-                        <IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName"
-                            :currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
-                            :changePercent="item.changePercent" :isRising="item.isRising"
-                            @click="viewIndexDetail(item)" />
-                    </view>
-                </view>
-            </view>
-
-            <!-- 美洲 -->
-            <view class="market-section">
-                <view class="market-header">
-                    <text class="market-title">美洲</text>
-                    <view class="market-more" @click="viewMore('america')">
-                        <text class="more-text">查看更多</text>
-                        <text class="more-arrow">></text>
-                    </view>
-                </view>
-                <view class="cards-grid-three">
-                    <view v-for="(item, index) in americaIndexes" :key="index" class="card-item">
-                        <IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName"
-                            :currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
-                            :changePercent="item.changePercent" :isRising="item.isRising"
-                            @click="viewIndexDetail(item)" />
+          <view v-for="iitem in item.list" :key="iitem" class="card-item">
+            <IndexCard
+              :market="iitem.market"
+              :stockName="iitem.name"
+              :currentPrice="iitem.currentPrice"
+              :changeAmount="iitem.changeAmount"
+              :changePercent="iitem.changePercent"
+              :isRising="iitem.isRising"
+              @click="viewIndexDetail(iitem)"
+            />
           </view>
         </view>
       </view>
@@ -99,201 +65,202 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed, nextTick, watch } from 'vue'
-import footerBar from '../../components/footerBar.vue'
-import IndexCard from '../../components/IndexCard.vue'
+import { ref, onMounted, computed, nextTick, watch } from "vue";
+import footerBar from "../../components/footerBar.vue";
+import IndexCard from "../../components/IndexCard.vue";
+import { getRegionalGroupAPI } from "../../api/marketSituation/marketSituation.js";
 
 // 响应式数据
-const iSMT = ref(0) // 状态栏高度
-const contentHeight = ref(0)
-const headerHeight = ref(0) // 头部高度
-const searchValue = ref('') // 搜索值
-const isWarnTextOverflow = ref(false) // warn文字是否溢出
+const iSMT = ref(0); // 状态栏高度
+const contentHeight = ref(0);
+const headerHeight = ref(0); // 头部高度
+const searchValue = ref(""); // 搜索值
+const isWarnTextOverflow = ref(false); // warn文字是否溢出
 
 // warn文字的class计算属性
 const warnTextClass = computed(() => {
-    return isWarnTextOverflow.value ? 'warn_text scroll-active' : 'warn_text'
-})
+  return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text";
+});
 
 // 检测warn文字是否溢出
 const checkWarnTextOverflow = () => {
   nextTick(() => {
     setTimeout(() => {
-            const query = uni.createSelectorQuery()
+      const query = uni.createSelectorQuery();
 
       // 同时查询容器和文字元素
-            query.select('.warn_text_container').boundingClientRect()
-            query.select('.warn_text').boundingClientRect()
+      query.select(".warn_text_container").boundingClientRect();
+      query.select(".warn_text").boundingClientRect();
       query.exec((res) => {
-                const containerRect = res[0]
-                const textRect = res[1]
+        const containerRect = res[0];
+        const textRect = res[1];
 
         if (!containerRect || !textRect) {
-                    return
+          return;
         }
 
         // 判断文字是否超出容器（留一些余量）
-                const isOverflow = textRect.width > (containerRect.width - 10)
-
-                isWarnTextOverflow.value = isOverflow
-            })
-        }, 500)
-    })
-}
-
+        const isOverflow = textRect.width > containerRect.width - 10;
+
+        isWarnTextOverflow.value = isOverflow;
+      });
+    }, 500);
+  });
+};
+const globalIndexArray = ref([]);
 // 亚太-中华指数数据
 const asiachinaIndexes = ref([
   {
-        flagIcon: '/static/c1.png',
-        stockName: '上证指数',
-        stockCode:'noCode',
-        currentPrice: '3933.96',
-        changeAmount: '+24.32',
-        changePercent: '+0.62%',
-        isRising: true
+    flagIcon: "/static/c1.png",
+    stockName: "上证指数",
+    stockCode: "noCode",
+    currentPrice: "3933.96",
+    changeAmount: "+24.32",
+    changePercent: "+0.62%",
+    isRising: true,
   },
   {
-        flagIcon: '/static/c2.png',
-        stockName: '深证成指',
-        stockCode:'noCode',
-        currentPrice: '45757.90',
-        changeAmount: '-123.45',
-        changePercent: '-0.27%',
-        isRising: false
+    flagIcon: "/static/c2.png",
+    stockName: "深证成指",
+    stockCode: "noCode",
+    currentPrice: "45757.90",
+    changeAmount: "-123.45",
+    changePercent: "-0.27%",
+    isRising: false,
   },
   {
-        flagIcon: '/static/c3.png',
-        stockName: '创业板指',
-        stockCode:'noCode',
-        currentPrice: '6606.08',
-        changeAmount: '+89.76',
-        changePercent: '+1.38%',
-        isRising: true
+    flagIcon: "/static/c3.png",
+    stockName: "创业板指",
+    stockCode: "noCode",
+    currentPrice: "6606.08",
+    changeAmount: "+89.76",
+    changePercent: "+1.38%",
+    isRising: true,
   },
   {
-        flagIcon: '/static/c4.png',
-        stockName: 'HSI50',
-        stockCode:'noCode',
-        currentPrice: '22333.96',
-        changeAmount: '+156.78',
-        changePercent: '+0.71%',
-        isRising: true
+    flagIcon: "/static/c4.png",
+    stockName: "HSI50",
+    stockCode: "noCode",
+    currentPrice: "22333.96",
+    changeAmount: "+156.78",
+    changePercent: "+0.71%",
+    isRising: true,
   },
   {
-        flagIcon: '/static/c5.png',
-        stockName: '沪深300',
-        stockCode:'noCode',
-        currentPrice: '45757.90',
-        changeAmount: '-89.12',
-        changePercent: '-0.19%',
-        isRising: false
+    flagIcon: "/static/c5.png",
+    stockName: "沪深300",
+    stockCode: "noCode",
+    currentPrice: "45757.90",
+    changeAmount: "-89.12",
+    changePercent: "-0.19%",
+    isRising: false,
   },
   {
-        flagIcon: '/static/c6.png',
-        stockName: '上证50',
-        stockCode:'noCode',
-        currentPrice: '45757.90',
-        changeAmount: '+234.56',
-        changePercent: '+0.52%',
-        isRising: true
-    }
-])
+    flagIcon: "/static/c6.png",
+    stockName: "上证50",
+    stockCode: "noCode",
+    currentPrice: "45757.90",
+    changeAmount: "+234.56",
+    changePercent: "+0.52%",
+    isRising: true,
+  },
+]);
 
 // 亚太指数数据
 const asiaIndexes = ref([
   {
-        flagIcon: '/static/c7.png',
-        stockName: '日经225',
-        stockCode:'noCode',
-        currentPrice: '28456.78',
-        changeAmount: '+234.56',
-        changePercent: '+0.83%',
-        isRising: true
+    flagIcon: "/static/c7.png",
+    stockName: "日经225",
+    stockCode: "noCode",
+    currentPrice: "28456.78",
+    changeAmount: "+234.56",
+    changePercent: "+0.83%",
+    isRising: true,
   },
   {
-        flagIcon: '/static/c8.png',
-        stockName: '韩国KOSPI',
-        stockCode:'noCode',
-        currentPrice: '2567.89',
-        changeAmount: '-12.34',
-        changePercent: '-0.48%',
-        isRising: false
+    flagIcon: "/static/c8.png",
+    stockName: "韩国KOSPI",
+    stockCode: "noCode",
+    currentPrice: "2567.89",
+    changeAmount: "-12.34",
+    changePercent: "-0.48%",
+    isRising: false,
   },
   {
-        flagIcon: '/static/c9.png',
-        stockName: '印度孟买',
-        stockCode:'noCode',
-        currentPrice: '65432.10',
-        changeAmount: '+456.78',
-        changePercent: '+0.70%',
-        isRising: true
-    }
-])
+    flagIcon: "/static/c9.png",
+    stockName: "印度孟买",
+    stockCode: "noCode",
+    currentPrice: "65432.10",
+    changeAmount: "+456.78",
+    changePercent: "+0.70%",
+    isRising: true,
+  },
+]);
 
 // 美洲指数数据
 const americaIndexes = ref([
   {
-        flagIcon: '/static/c7.png',
-        stockName: '道琼斯指数',
-        stockCode:'noCode',
-        currentPrice: '34567.89',
-        changeAmount: '+123.45',
-        changePercent: '+0.36%',
-        isRising: true
+    flagIcon: "/static/c7.png",
+    stockName: "道琼斯指数",
+    stockCode: "noCode",
+    currentPrice: "34567.89",
+    changeAmount: "+123.45",
+    changePercent: "+0.36%",
+    isRising: true,
   },
   {
-        flagIcon: '/static/c8.png',
-        stockName: '纳斯达克',
-        stockCode:'noCode',
-        currentPrice: '13456.78',
-        changeAmount: '-67.89',
-        changePercent: '-0.50%',
-        isRising: false
+    flagIcon: "/static/c8.png",
+    stockName: "纳斯达克",
+    stockCode: "noCode",
+    currentPrice: "13456.78",
+    changeAmount: "-67.89",
+    changePercent: "-0.50%",
+    isRising: false,
   },
   {
-        flagIcon: '/static/c9.png',
-        stockName: '标普500',
-        stockCode:'noCode',
-        currentPrice: '4234.56',
-        changeAmount: '+23.45',
-        changePercent: '+0.56%',
-        isRising: true
-    }
-])
+    flagIcon: "/static/c9.png",
+    stockName: "标普500",
+    stockCode: "noCode",
+    currentPrice: "4234.56",
+    changeAmount: "+23.45",
+    changePercent: "+0.56%",
+    isRising: true,
+  },
+]);
 
 // 计算属性：内容区域顶部位置
 const contentTopPosition = computed(() => {
-    const statusBarHeight = iSMT.value || 0
-    const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 100
-    return statusBarHeight + currentHeaderHeight
-})
+  const statusBarHeight = iSMT.value || 0;
+  const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 100;
+  return statusBarHeight + currentHeaderHeight;
+});
 
 // 方法：返回上一页
 const goBack = () => {
-    uni.navigateBack()
-}
+  uni.navigateBack();
+};
 
 // 方法：搜索输入
 const onSearchInput = (e) => {
-    searchValue.value = e.detail.value
-}
+  searchValue.value = e.detail.value;
+};
 
 // 方法：清除搜索
 const clearSearch = () => {
-    searchValue.value = ''
-}
+  searchValue.value = "";
+};
 
 // 方法：查看更多
 const viewMore = (market) => {
-	console.log('查看更多:', market)
+  console.log("查看更多:", market);
   uni.navigateTo({
-		url: `/pages/marketSituation/marketDetail?market=${market}`
-	})
-}
+    url: `/pages/marketSituation/marketDetail?market=${market}`,
+  });
+};
 
 // 方法：查看指数详情
 const viewIndexDetail = (item) => {
-    console.log('查看指数详情:', item.stockName)
+  console.log("查看指数详情:", item.stockName);
   // uni.showToast({
   //     title: `查看 ${item.stockName} 详情`,
   //     icon: 'none',
@@ -301,40 +268,54 @@ const viewIndexDetail = (item) => {
   // })
   // 这里可以跳转到具体的指数详情页面
   uni.navigateTo({
-        url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`
-    })
+    url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
+  });
+};
+
+const getRegionalGroup = async () => {
+  try {
+    const result = await getRegionalGroupAPI();
+    globalIndexArray.value = result.data;
+  } catch (e) {
+    console.log("获取区域指数失败", e);
   }
+};
 
 // 生命周期：页面挂载
-onMounted(() => {
+onMounted(async () => {
+  await getRegionalGroup();
   // 获取系统信息
-    const systemInfo = uni.getSystemInfoSync()
-    iSMT.value = systemInfo.statusBarHeight || 0
+  const systemInfo = uni.getSystemInfoSync();
+  iSMT.value = systemInfo.statusBarHeight || 0;
 
-    console.log('全球指数页面加载完成')
+  console.log("全球指数页面加载完成");
   // 动态计算header实际高度
-    uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
+  uni
+    .createSelectorQuery()
+    .select(".header_fixed")
+    .boundingClientRect((rect) => {
       if (rect) {
-            headerHeight.value = rect.height
-            console.log('Header实际高度:', headerHeight.value, 'px')
+        headerHeight.value = rect.height;
+        console.log("Header实际高度:", headerHeight.value, "px");
       }
-    }).exec()
-    // 检测warn文字是否溢出
-    checkWarnTextOverflow()
     })
+    .exec();
+  // 检测warn文字是否溢出
+  checkWarnTextOverflow();
+});
 
 // 监听headerHeight变化，重新计算contentHeight
 watch(headerHeight, (newHeight) => {
   if (newHeight > 0) {
-        const systemInfo = uni.getSystemInfoSync()
-        const windowHeight = systemInfo.windowHeight
-        const statusBarHeight = systemInfo.statusBarHeight || 0
-        const footerHeight = 100
+    const systemInfo = uni.getSystemInfoSync();
+    const windowHeight = systemInfo.windowHeight;
+    const statusBarHeight = systemInfo.statusBarHeight || 0;
+    const footerHeight = 100;
 
-        contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
-        console.log('重新计算contentHeight:', contentHeight.value)
+    contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
+    console.log("重新计算contentHeight:", contentHeight.value);
   }
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -430,7 +411,6 @@ watch(headerHeight, (newHeight) => {
   height: 40rpx;
 }
 
-
 .warn {
   display: flex;
   align-items: center;

pages/marketSituation/marketCondition.vue

@@ -8,12 +8,12 @@
       <view class="title">
         <image class="back-homepage-btn" src="/static/marketSituation-image/back.png" mode="返回按钮" @click="backToHomepage()"> </image>
         <view class="mid-title">
-          <view class="arrow-left"> </view>
+          <view class="arrow-left" @click="toLeftPage()"> </view>
           <view class="stock-id">
             <view class="stock-name"> {{ stockInformation.stockName }} </view>
             <view class="stock-code"> {{ stockInformation.stockCode }} </view>
           </view>
-          <view class="arrow-right"> </view>
+          <view class="arrow-right" @click="toRightPage()"> </view>
         </view>
         <image class="search" src="/static/marketSituation-image/search.png" mode="搜索" @click="search()"> </image>
         <view class="more" @click="getMore()">···</view>
@@ -240,6 +240,10 @@ const tcpConnected = ref(false);
 const connectionListener = ref(null);
 const messageListener = ref(null);
 
+// 股票来源
+const currentStockFrom = ref();
+// 当前股票位置
+const currentStockIndex = ref(-1);
 // 股票信息栏变量
 const stockInformation = ref({
   stockName: "----", //股票名称
@@ -511,6 +515,35 @@ const backToHomepage = () => {
   }
 };
 
+const toLeftPage = () => {
+	if(currentStockFrom.value == "marketOverview"){
+		return;
+	}
+  if (currentStockIndex.value > 0) {
+    currentStockIndex.value--;
+    // updateStockInformation();
+  } else {
+    uni.showToast({
+      title: "没有更多股票了",
+      icon: "none",
+      duration: 1000,
+    });
+  }
+};
+
+const toRightPage = () => {
+  if (currentStockIndex.value < stockList.length - 1) {
+    currentStockIndex.value++;
+    // updateStockInformation();
+  } else {
+    uni.showToast({
+      title: "没有更多股票了",
+      icon: "none",
+      duration: 1000,
+    });
+  }
+};
+
 const openStockDetail = () => {
   isStockDetail.value = true;
 };
@@ -2136,10 +2169,10 @@ const startAddDataTimer = () => {
 onLoad((options) => {
   console.log("页面接收到的参数：", options);
 
-  // 处理通过data参数传递的复杂对象
-  if (options.data) {
+  // 处理通过stockInformation参数传递的复杂对象
+  if (options.stockInformation) {
     try {
-      const stockData = JSON.parse(decodeURIComponent(options.data));
+      const stockData = JSON.parse(decodeURIComponent(options.stockInformation));
       console.log("解析的股票数据：", stockData);
 
       // 更新stockInformation
@@ -2152,30 +2185,17 @@ onLoad((options) => {
     }
   }
 
-  // 处理通过stockInformation参数传递的数据（兼容globalIndex.vue的传参方式）
-  if (options.stockInformation) {
-    try {
-      const stockData = JSON.parse(decodeURIComponent(options.stockInformation));
-      console.log("解析的股票信息：", stockData);
-
-      // 更新stockInformation
-      if (stockData) {
-        stockInformation.value = {
-          ...stockInformation.value,
-          ...stockData,
-        };
-      }
-    } catch (error) {
-      console.error("解析股票信息失败：", error);
-    }
+  // 处理index参数（股票在列表中的位置）
+  if (options.index !== undefined) {
+    const stockIndex = parseInt(options.index);
+    console.log("股票在列表中的索引：", stockIndex);
+    // 将index保存到响应式变量中，用于后续的左右切换功能
+    currentStockIndex.value = stockIndex;
   }
 
-  // 处理简单参数
-  if (options.stockCode) {
-    stockInformation.value.stockCode = options.stockCode;
-  }
-  if (options.stockName) {
-    stockInformation.value.stockName = decodeURIComponent(options.stockName);
+  // 处理stockFrom参数（股票来源）
+  if (options.stockFrom) {
+    currentStockFrom.value = options.stockFrom;
   }
 });
 

pages/marketSituation/marketDetail.vue

@@ -1,3 +1,5 @@
+<!-- @format -->
+
 <template>
   <view class="main">
     <!-- 自定义导航栏 -->
@@ -21,36 +23,31 @@
         </view>
         <view class="header-item price-column" @click="sortByPrice">
           <text class="header-text">最新</text>
-					<text class="sort-icon">{{ sortType === 'price' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}</text>
+          <text class="sort-icon">{{ sortType === "price" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
         </view>
         <view class="header-item change-column" @click="sortByChange">
           <text class="header-text">涨幅</text>
-					<text class="sort-icon">{{ sortType === 'change' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}</text>
+          <text class="sort-icon">{{ sortType === "change" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
         </view>
       </view>
     </view>
 
     <!-- 内容区域 -->
     <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
-			
-
       <!-- 股票列表 -->
       <view class="stock-list">
-				<view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index"
-					@click="viewIndexDetail(stock)">
+        <view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index" @click="viewIndexDetail(stock)">
           <view class="stock-cell name-column">
             <view class="stock-name">{{ stock.stockName }}</view>
             <view class="stock-code">{{ stock.stockCode }}</view>
           </view>
           <view class="stock-cell price-column">
-						<text class="stock-price"
-							:class="stock.isRising ? 'rising' : 'falling'">
-							{{ typeof stock.price === 'number' ? stock.price.toFixed(2) : stock.price }}
+            <text class="stock-price" :class="stock.isRising ? 'rising' : 'falling'">
+              {{ typeof stock.price === "number" ? stock.price.toFixed(2) : stock.price }}
             </text>
           </view>
           <view class="stock-cell change-column">
-						<text class="stock-change"
-							:class="stock.isRising ? 'rising' : 'falling'">
+            <text class="stock-change" :class="stock.isRising ? 'rising' : 'falling'">
               {{ stock.change || stock.changePercent }}
             </text>
           </view>
@@ -67,174 +64,170 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
-import footerBar from '@/components/footerBar.vue'
-
+import { ref, computed, onMounted, watch } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import footerBar from "@/components/footerBar.vue";
+import { getRegionalGroupListAPI } from "../../api/marketSituation/marketSituation.js";
 // 响应式数据
-const iSMT = ref(0)
-const contentHeight = ref(0)
-const headerHeight = ref(80)
-const marketType = ref('america')
-const marketTitle = ref('美洲')
-const sortType = ref('') // 排序类型：'price' 或 'change'
-const sortOrder = ref('desc') // 排序顺序：'asc' 或 'desc'
+const iSMT = ref(0);
+const contentHeight = ref(0);
+const headerHeight = ref(80);
+const marketTitle = ref();
+const sortType = ref(""); // 排序类型：'price' 或 'change'
+const sortOrder = ref("desc"); // 排序顺序：'asc' 或 'desc'
 
 // 股票数据
 const stockList = ref([
   {
-		stockName: 'Telecommunication',
-		stockCode: '888607',
+    stockName: "Telecommunication",
+    stockCode: "888607",
     price: 1349.47,
-		change: '+7.67%',
-		isRising: true
+    change: "+7.67%",
+    isRising: true,
   },
   {
-		stockName: 'Other',
-		stockCode: '888607',
+    stockName: "Other",
+    stockCode: "888607",
     price: 1349.47,
-		change: '+6.67%',
-		isRising: true
+    change: "+6.67%",
+    isRising: true,
   },
   {
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
     price: 1349.47,
-		change: '+5.67%',
-		isRising: true
+    change: "+5.67%",
+    isRising: true,
   },
   {
-		stockName: 'Telecommunication',
-		stockCode: '888607',
+    stockName: "Telecommunication",
+    stockCode: "888607",
     price: 1349.47,
-		change: '+4.67%',
-		isRising: true
+    change: "+4.67%",
+    isRising: true,
   },
   {
-		stockName: 'Other',
-		stockCode: '888611',
+    stockName: "Other",
+    stockCode: "888611",
     price: 1359.47,
-		change: '+3.67%',
-		isRising: true
+    change: "+3.67%",
+    isRising: true,
   },
   {
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
     price: 1349.47,
-		change: '+2.67%',
-		isRising: true
+    change: "+2.67%",
+    isRising: true,
   },
   {
-		stockName: 'Telecommunication',
-		stockCode: '888607',
+    stockName: "Telecommunication",
+    stockCode: "888607",
     price: 1349.47,
-		change: '+1.67%',
-		isRising: true
+    change: "+1.67%",
+    isRising: true,
   },
   {
-		stockName: 'Other',
-		stockCode: '888611',
+    stockName: "Other",
+    stockCode: "888611",
     price: 1009.98,
-		change: '-1.67%',
-		isRising: false
+    change: "-1.67%",
+    isRising: false,
   },
   {
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
     price: 1009.98,
-		change: '-0.67%',
-		isRising: false
+    change: "-0.67%",
+    isRising: false,
   },
   {
-		stockName: 'Telecommunication',
-		stockCode: '888607',
+    stockName: "Telecommunication",
+    stockCode: "888607",
     price: 1009.98,
-		change: '-0.67%',
-		isRising: false
+    change: "-0.67%",
+    isRising: false,
   },
   {
-		stockName: 'Other',
-		stockCode: '888611',
+    stockName: "Other",
+    stockCode: "888611",
     price: 1009.98,
-		change: '-1.67%',
-		isRising: false
+    change: "-1.67%",
+    isRising: false,
   },
   {
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
     price: 1009.98,
-		change: '-4.67%',
-		isRising: false
+    change: "-4.67%",
+    isRising: false,
   },
   {
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
     price: 1009.98,
-		change: '-3.67%',
-		isRising: false
+    change: "-3.67%",
+    isRising: false,
   },
   {
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
     price: 1009.98,
-		change: '-3.67%',
-		isRising: false
-	}
-])
+    change: "-3.67%",
+    isRising: false,
+  },
+]);
 
 // 计算属性
 const contentTopPosition = computed(() => {
-	return iSMT.value + headerHeight.value
-})
+  return iSMT.value + headerHeight.value;
+});
 
 const sortedStockList = computed(() => {
-	console.log('计算sortedStockList，原始数据长度:', stockList.value.length);
-	let list = [...stockList.value]
+  console.log("计算sortedStockList，原始数据长度:", stockList.value.length);
+  let list = [...stockList.value];
 
-	if (sortType.value === 'price') {
+  if (sortType.value === "price") {
     list.sort((a, b) => {
-			return sortOrder.value === 'asc' ? a.price - b.price : b.price - a.price
-		})
-	} else if (sortType.value === 'change') {
+      return sortOrder.value === "asc" ? a.price - b.price : b.price - a.price;
+    });
+  } else if (sortType.value === "change") {
     list.sort((a, b) => {
-			const aChange = parseFloat(a.change.replace(/[+%-]/g, ''))
-			const bChange = parseFloat(b.change.replace(/[+%-]/g, ''))
-			return sortOrder.value === 'asc' ? aChange - bChange : bChange - aChange
-		})
+      const aChange = parseFloat(a.change.replace(/[+%-]/g, ""));
+      const bChange = parseFloat(b.change.replace(/[+%-]/g, ""));
+      return sortOrder.value === "asc" ? aChange - bChange : bChange - aChange;
+    });
   }
 
-	console.log('排序后数据长度:', list.length);
-	return list
-})
+  console.log("排序后数据长度:", list.length);
+  return list;
+});
+
+const getRegionalGroupList = async () => {
+  try {
+    const result = await getRegionalGroupListAPI({
+      market: marketTitle.value,
+    });
+  } catch (e) {
+    console.error("获取区域分组列表失败:", e);
+  }
+};
 
 // 页面加载时接收参数
 onLoad((options) => {
   if (options && options.market) {
-		marketType.value = options.market
-		switch (options.market) {
-			case 'america':
-				marketTitle.value = '美洲'
-				break
-			case 'asia':
-				marketTitle.value = '亚太'
-				break
-			case 'asia-china':
-				marketTitle.value = '亚太-中华'
-				break
-			default:
-				marketTitle.value = '全球指数'
-		}
+    marketTitle.value = options.market;
   }
-})
+});
 
 // 方法
 const goBack = () => {
-	uni.navigateBack()
-}
+  uni.navigateBack();
+};
 
 // 方法：查看指数详情
 const viewIndexDetail = (item) => {
-    console.log('查看指数详情:', item.stockName)
+  console.log("查看指数详情:", item.stockName);
   // uni.showToast({
   //     title: `查看 ${item.stockName} 详情`,
   //     icon: 'none',
@@ -242,52 +235,56 @@ const viewIndexDetail = (item) => {
   // })
   // 这里可以跳转到具体的指数详情页面
   uni.navigateTo({
-        url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`
-    })
-}
+    url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
+  });
+};
 
 const sortByPrice = () => {
-	if (sortType.value === 'price') {
-		sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  if (sortType.value === "price") {
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
   } else {
-		sortType.value = 'price'
-		sortOrder.value = 'desc'
-	}
+    sortType.value = "price";
+    sortOrder.value = "desc";
   }
+};
 
 const sortByChange = () => {
-	if (sortType.value === 'change') {
-		sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  if (sortType.value === "change") {
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
   } else {
-		sortType.value = 'change'
-		sortOrder.value = 'desc'
-	}
+    sortType.value = "change";
+    sortOrder.value = "desc";
   }
+};
 
 onMounted(() => {
   // 获取状态栏高度
   iSMT.value = uni.getSystemInfoSync().statusBarHeight;
   // 动态计算header实际高度
-    uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
+  uni
+    .createSelectorQuery()
+    .select(".header_fixed")
+    .boundingClientRect((rect) => {
       if (rect) {
-            headerHeight.value = rect.height
-            console.log('Header实际高度:', headerHeight.value, 'px')
+        headerHeight.value = rect.height;
+        console.log("Header实际高度:", headerHeight.value, "px");
       }
-    }).exec()
     })
+    .exec();
+});
 
 // 监听headerHeight变化，重新计算contentHeight
 watch(headerHeight, (newHeight) => {
   if (newHeight > 0) {
-        const systemInfo = uni.getSystemInfoSync()
-        const windowHeight = systemInfo.windowHeight
-        const statusBarHeight = systemInfo.statusBarHeight || 0
-        const footerHeight = 100
+    const systemInfo = uni.getSystemInfoSync();
+    const windowHeight = systemInfo.windowHeight;
+    const statusBarHeight = systemInfo.statusBarHeight || 0;
+    const footerHeight = 100;
 
-        contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
-        console.log('重新计算contentHeight:', contentHeight.value)
+    contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
+    console.log("重新计算contentHeight:", contentHeight.value);
   }
-})
+});
 </script>
 
 <style scoped>
@@ -471,11 +468,11 @@ watch(headerHeight, (newHeight) => {
 }
 
 .rising {
-	color: #00C851;
+  color: #00c851;
 }
 
 .falling {
-	color: #FF4444;
+  color: #ff4444;
 }
 
 /* 底部安全区域 */

pages/marketSituation/marketOverview.vue

@@ -20,8 +20,16 @@
 
         <!-- 卡片网格 -->
         <view class="cards_grid">
-          <view v-for="(card, index) in cardData" :key="index" class="card_item">
-            <IndexCard :flagIcon="card.flagIcon" :stockName="card.stockName" :currentPrice="card.currentPrice" :changeAmount="card.changeAmount" :changePercent="card.changePercent" :isRising="card.isRising" @click="viewIndexDetail(card)" />
+          <view v-for="(card, index) in marketSituationStore.cardData" :key="index" class="card_item">
+            <IndexCard
+              :market="card.market"
+              :stockName="card.stockName"
+              :currentPrice="card.currentPrice"
+              :changeAmount="card.changeAmount"
+              :changePercent="card.changePercent"
+              :isRising="card.isRising"
+              @click="viewIndexDetail(card, index)"
+            />
           </view>
         </view>
         <view class="warn">
@@ -41,6 +49,9 @@
 import { ref, onMounted, watch, nextTick, computed } from "vue";
 import util from "../../common/util.js";
 import IndexCard from "../../components/IndexCard.vue";
+import { useMarketSituationStore } from "../../stores/modules/marketSituation.js";
+const marketSituationStore = useMarketSituationStore();
+import { getGlobalIndexAPI } from "../../api/marketSituation/marketSituation.js";
 
 const iSMT = ref(0);
 const searchValue = ref("");
@@ -63,95 +74,7 @@ const warnTextClass = computed(() => {
   return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text";
 });
 
-// 弹窗相关数据
-const showCountryModal = ref(false);
-const selectedCountry = ref("概况");
-const countryList = ref(["概况", "新加坡", "马来西亚", "印度尼西亚", "美国", "中国香港", "泰国", "中国", "加拿大", "越南", "外汇", "贵金属"]);
-
-// 卡片数据
-const cardData = ref([
-  {
-    flagIcon: "🇺🇸",
-    stockName: "道琼斯",
-    stockCode: "noCode",
-    currentPrice: "45757.90",
-    changeAmount: "-125.22",
-    changePercent: "-0.27%",
-    isRising: false,
-  },
-  {
-    flagIcon: "🇺🇸",
-    stockName: "纳斯达克",
-    stockCode: "noCode",
-    currentPrice: "22333.96",
-    changeAmount: "+125.22",
-    changePercent: "+0.47%",
-    isRising: true,
-  },
-  {
-    flagIcon: "🇺🇸",
-    stockName: "标普500",
-    stockCode: "noCode",
-    currentPrice: "6606.08",
-    changeAmount: "+125.22",
-    changePercent: "+0.27%",
-    isRising: true,
-  },
-  {
-    flagIcon: "🇨🇳",
-    stockName: "上证指数",
-    stockCode: "noCode",
-    currentPrice: "3333.96",
-    changeAmount: "+125.22",
-    changePercent: "+0.27%",
-    isRising: true,
-  },
-  {
-    flagIcon: "🇨🇳",
-    stockName: "科创50",
-    stockCode: "noCode",
-    currentPrice: "757.90",
-    changeAmount: "-25.22",
-    changePercent: "-0.27%",
-    isRising: false,
-  },
-  {
-    flagIcon: "🇭🇰",
-    stockName: "恒生指数",
-    stockCode: "noCode",
-    currentPrice: "19757.90",
-    changeAmount: "-125.22",
-    changePercent: "-0.63%",
-    isRising: false,
-  },
-  {
-    flagIcon: "🇸🇬",
-    stockName: "道琼斯",
-    stockCode: "noCode",
-    currentPrice: "3757.90",
-    changeAmount: "+85.22",
-    changePercent: "+2.31%",
-    isRising: true,
-  },
-  {
-    flagIcon: "🇲🇾",
-    stockName: "纳斯达克",
-    stockCode: "noCode",
-    currentPrice: "1657.90",
-    changeAmount: "-15.22",
-    changePercent: "-0.91%",
-    isRising: false,
-  },
-  {
-    flagIcon: "🇹🇭",
-    stockName: "标普500",
-    stockCode: "noCode",
-    currentPrice: "1457.90",
-    changeAmount: "+35.22",
-    changePercent: "+2.48%",
-    isRising: true,
-  },
-]);
+const globalIndexArray = ref([]);
 
 // 搜索输入事件
 const onSearchInput = (e) => {
@@ -216,7 +139,7 @@ const checkWarnTextOverflow = () => {
 };
 
 // 方法：查看指数详情
-const viewIndexDetail = (item) => {
+const viewIndexDetail = (item, index) => {
   console.log("查看指数详情:", item.stockName);
   // uni.showToast({
   //     title: `查看 ${item.stockName} 详情`,
@@ -225,7 +148,7 @@ const viewIndexDetail = (item) => {
   // })
   // 这里可以跳转到具体的指数详情页面
   uni.navigateTo({
-    url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
+    url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}&index=${index}&from=marketOverview`,
   });
 };
 
@@ -236,7 +159,17 @@ const goToGlobalIndex = () => {
   });
 };
 
-onMounted(() => {
+const getGlobalIndex = async () => {
+  try {
+    const result = await getGlobalIndexAPI();
+    globalIndexArray.value = result.data;
+  } catch (e) {
+    console.log("获取全球指数失败", e);
+  }
+};
+
+onMounted(async () => {
+  await getGlobalIndex();
   // 状态栏高度
   iSMT.value = uni.getSystemInfoSync().statusBarHeight;
 

pages/marketSituation/marketSituation.vue

@@ -1,3 +1,5 @@
+<!-- @format -->
+
 <template>
   <view>
     <view class="main">
@@ -5,11 +7,8 @@
       <view class="header_fixed" :style="{ top: iSMT + 'px' }">
         <view class="header_content">
           <view class="header_input_wrapper">
-						<image class="search_icon" src="/static/marketSituation-image/search.png" mode=""
-							@click="onSearchClick"></image>
-						<input class="header_input" type="text" placeholder="搜索"
-							placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue"
-							@input="onSearchInput" @confirm="onSearchConfirm" />
+            <image class="search_icon" src="/static/marketSituation-image/search.png" mode="" @click="onSearchClick"></image>
+            <input class="header_input" type="text" placeholder="搜索" placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue" @input="onSearchInput" @confirm="onSearchConfirm" />
           </view>
           <view class="header_icons">
             <view class="header_icon" @click="selected">
@@ -21,11 +20,9 @@
           </view>
         </view>
         <view class="channel_li" v-if="channelData.length > 0">
-					<scroll-view class="channel_wrap" scroll-x="true" :scroll-into-view="scrollToView"
-						:scroll-with-animation="true" show-scrollbar="false">
+          <scroll-view class="channel_wrap" scroll-x="true" :scroll-into-view="scrollToView" :scroll-with-animation="true" show-scrollbar="false">
             <view class="channel_innerWrap">
-							<view v-for="(item, index) in channelData" :key="item.id" :id="'nav' + item.id"
-								:class="['channel_item', index === pageIndex ? 'active' : '']" @click="navClick(index)">
+              <view v-for="(item, index) in channelData" :key="item.id" :id="'nav' + item.id" :class="['channel_item', index === pageIndex ? 'active' : '']" @click="navClick(index)">
                 <text class="channel_text">{{ item.title }}</text>
                 <view v-if="index === pageIndex" class="active_indicator"></view>
               </view>
@@ -40,7 +37,7 @@
       <!-- 可滚动内容区域 -->
       <scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
         <!-- 动态组件切换 -->
-				<component :is="currentComponent" :countryId="currentChannelId" />
+        <component :is="currentComponent" :countryId="currentChannelId" :marketTabs="getChildMarketTabs(currentChannelId)" />
       </scroll-view>
     </view>
 
@@ -57,10 +54,8 @@
         </view>
         <view class="modal_body">
           <view class="country_grid">
-						<view v-for="(country, index) in countryList" :key="index"
-							:class="['country_item', selectedCountry === country ? 'selected' : '']"
-							@click="selectCountry(country)">
-							<text class="country_text">{{ country }}</text>
+            <view v-for="(item, index) in channelData" :key="index" :class="['country_item', selectedCountry === item.title ? 'selected' : '']" @click="selectCountry(item.title)">
+              <text class="country_text">{{ item.title }}</text>
             </view>
           </view>
         </view>
@@ -70,228 +65,229 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, nextTick, computed } from 'vue'
-import footerBar from '../../components/footerBar.vue'
-import forexMetals from './forexMetals.vue'
-import marketOverview from './marketOverview.vue'
-import countryMarket from './countryMarket.vue'
-
-const type = ref('marketSituation')
-const iSMT = ref(0)
-const searchValue = ref('')
-const contentHeight = ref(0)
-const headerHeight = ref(0) // 动态计算的header高度
+import { ref, onMounted, watch, nextTick, computed } from "vue";
+import footerBar from "../../components/footerBar.vue";
+import forexMetals from "./forexMetals.vue";
+import marketOverview from "./marketOverview.vue";
+import countryMarket from "./countryMarket.vue";
+import { getAllTabsAPI } from "../../api/marketSituation/marketSituation.js";
+const type = ref("marketSituation");
+const iSMT = ref(0);
+const searchValue = ref("");
+const contentHeight = ref(0);
+const headerHeight = ref(0); // 动态计算的header高度
 
 // Tab 栏相关数据
-const channelData = ref([
-	{ id: 1, title: '概况' },
-	{ id: 2, title: '新加坡' },
-	{ id: 3, title: '马来西亚' },
-	{ id: 4, title: '印度尼西亚' },
-	{ id: 5, title: '美国' },
-	{ id: 6, title: '中国香港' },
-	{ id: 7, title: '泰国' },
-	{ id: 8, title: '中国' },
-	{ id: 9, title: '加拿大' },
-	{ id: 10, title: '越南' },
-	{ id: 11, title: '外汇' },
-	{ id: 12, title: '贵金属' },
-])
-const pageIndex = ref(0)
-const scrollToView = ref('')
+const channelData = ref([{ id: 1, title: "概况" }]);
+const pageIndex = ref(0);
+const scrollToView = ref("");
 
 // 动态组件相关
 const currentChannelId = computed(() => {
-	return channelData.value[pageIndex.value]?.id || 1
-})
+  return channelData.value[pageIndex.value]?.id || 1;
+});
 
 const currentComponent = computed(() => {
-	const channelId = currentChannelId.value
+  const channelId = currentChannelId.value;
 
   // 概况页面使用 MarketOverview 组件
   if (pageIndex.value === 0) {
-		return marketOverview
+    return marketOverview;
   }
   // 外汇(id=11)和贵金属(id=12)使用 ForexMetals 组件
   else if (channelId === 11 || channelId === 12) {
-		return forexMetals
+    return forexMetals;
   }
   // 其他国家/地区页面使用 CountryMarket 组件
   else {
-		return countryMarket
+    return countryMarket;
   }
-})
+});
 
 // 计算属性：精准计算content区域的top值
 const contentTopPosition = computed(() => {
-	const statusBarHeight = iSMT.value || 0
-	const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 140
-	return statusBarHeight + currentHeaderHeight
-})
+  const statusBarHeight = iSMT.value || 0;
+  const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 140;
+  return statusBarHeight + currentHeaderHeight;
+});
 
 // 弹窗相关数据
-const showCountryModal = ref(false)
-const selectedCountry = ref('概况')
-const countryList = ref([
-	'概况', '新加坡', '马来西亚', '印度尼西亚', '美国', '中国香港',
-	'泰国', '中国', '加拿大', '越南', '外汇', '贵金属'
-])
+const showCountryModal = ref(false);
+const selectedCountry = ref("概况");
+
+const getAllTabs = async () => {
+  try {
+    const result = await getAllTabsAPI();
+    channelData.value = result.data.map((item) => ({ ...item, id: item.id, title: item.tradeName }));
+  } catch (e) {
+    console.error("获取地区分组列表失败", e);
+  }
+};
+
+const getChildMarketTabs = (id) => {
+  return channelData.value.filter((item) => item.id === id)[0]?.children?.map((child) => child.tradeName);
+};
 
 // 搜索输入事件
 const onSearchInput = (e) => {
-	searchValue.value = e.detail.value
-}
+  searchValue.value = e.detail.value;
+};
 
 // 搜索确认事件
 const onSearchConfirm = (e) => {
-	console.log('搜索内容:', e.detail.value)
+  console.log("搜索内容:", e.detail.value);
   // 这里可以添加搜索逻辑
-	performSearch(e.detail.value)
-}
+  performSearch(e.detail.value);
+};
 
 // 搜索图标点击事件
 const onSearchClick = () => {
   if (searchValue.value.trim()) {
-		performSearch(searchValue.value)
-	}
+    performSearch(searchValue.value);
   }
+};
 
 // 执行搜索
 const performSearch = (keyword) => {
   if (!keyword.trim()) {
     uni.showToast({
-			title: '请输入搜索内容',
-			icon: 'none'
-		})
-		return
+      title: "请输入搜索内容",
+      icon: "none",
+    });
+    return;
   }
 
   uni.showToast({
     title: `搜索: ${keyword}`,
-		icon: 'none'
-	})
+    icon: "none",
+  });
   // 这里添加实际的搜索逻辑
-}
+};
 
 // 我的收藏点击事件
 const selected = () => {
   uni.showToast({
-		title: '我的收藏',
-		icon: 'none'
-	})
+    title: "我的收藏",
+    icon: "none",
+  });
   // 这里可以跳转到收藏页面
-}
+};
 
 // 历史记录点击事件
 const history = () => {
   uni.showToast({
-		title: '历史记录',
-		icon: 'none'
-	})
+    title: "历史记录",
+    icon: "none",
+  });
   // 这里可以跳转到历史页面
-}
+};
 
 // Tab 栏点击事件
 const navClick = (index) => {
-	pageIndex.value = index
-	const currentItem = channelData.value[index]
-	scrollToView.value = 'nav' + currentItem.id
+  pageIndex.value = index;
+  const currentItem = channelData.value[index];
+  scrollToView.value = "nav" + currentItem.id;
 
   // 同步更新弹窗中的选中状态
-	selectedCountry.value = currentItem.title
+  selectedCountry.value = currentItem.title;
 
   uni.showToast({
     title: `切换到: ${currentItem.title}`,
-		icon: 'none'
-	})
+    icon: "none",
+  });
 
   // 这里可以添加切换 tab 后的数据加载逻辑
-	console.log('当前选中的 tab:', currentItem)
-}
+  console.log("当前选中的 tab:", currentItem);
+};
 
 // 更多选项点击事件
 const channel_more = () => {
-	showCountryModal.value = true
-}
+  showCountryModal.value = true;
+};
 
 // 选择国家
 const selectCountry = (country) => {
-	selectedCountry.value = country
+  selectedCountry.value = country;
 
   // 查找对应的tab索引
-	const targetIndex = channelData.value.findIndex(item => item.title === country)
+  const targetIndex = channelData.value.findIndex((item) => item.title === country);
 
   if (targetIndex !== -1) {
     // 同步更新页面tab
-		pageIndex.value = targetIndex
-		const currentItem = channelData.value[targetIndex]
-		scrollToView.value = 'nav' + currentItem.id
+    pageIndex.value = targetIndex;
+    const currentItem = channelData.value[targetIndex];
+    scrollToView.value = "nav" + currentItem.id;
 
-		console.log('选中了：' + country + '，同步到tab索引：' + targetIndex)
+    console.log("选中了：" + country + "，同步到tab索引：" + targetIndex);
     uni.showToast({
-			title: '已切换到：' + country,
-			icon: 'none',
-			duration: 2000
-		})
+      title: "已切换到：" + country,
+      icon: "none",
+      duration: 2000,
+    });
   } else {
     // 如果是"概况"或其他特殊选项，默认切换到第一个tab
-		if (country === '概况' || country === '全部') {
-			pageIndex.value = 0
-			scrollToView.value = 'nav' + channelData.value[0].id
+    if (country === "概况" || country === "全部") {
+      pageIndex.value = 0;
+      scrollToView.value = "nav" + channelData.value[0].id;
     }
 
-		console.log('选中了：' + country)
+    console.log("选中了：" + country);
     uni.showToast({
-			title: '已选择：' + country,
-			icon: 'none',
-			duration: 2000
-		})
+      title: "已选择：" + country,
+      icon: "none",
+      duration: 2000,
+    });
   }
 
   // 这里可以添加切换到对应国家/地区数据的逻辑
   // 例如：loadMarketData(country)
-	closeModal()
-}
+  closeModal();
+};
 
 // 关闭弹窗
 const closeModal = () => {
-	showCountryModal.value = false
-}
+  showCountryModal.value = false;
+};
 
-onMounted(() => {
+onMounted(async () => {
+  await getAllTabs();
   // 状态栏高度
   iSMT.value = uni.getSystemInfoSync().statusBarHeight;
 
   // 初始化 tab 栏
   if (channelData.value.length > 0) {
-		pageIndex.value = 0
-		scrollToView.value = 'nav' + channelData.value[0].id
+    pageIndex.value = 0;
+    scrollToView.value = "nav" + channelData.value[0].id;
   }
 
   // 确保DOM渲染完成后再查询高度
   nextTick(() => {
     // 动态计算header实际高度
-		uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
+    uni
+      .createSelectorQuery()
+      .select(".header_fixed")
+      .boundingClientRect((rect) => {
         if (rect) {
-				headerHeight.value = rect.height
-				console.log('Header实际高度:', headerHeight.value, 'px')
+          headerHeight.value = rect.height;
+          console.log("Header实际高度:", headerHeight.value, "px");
         }
-		}).exec()
-	})
       })
+      .exec();
+  });
+});
 
 // 监听headerHeight变化，重新计算contentHeight
 watch(headerHeight, (newHeight) => {
   if (newHeight > 0) {
-		const systemInfo = uni.getSystemInfoSync()
-		const windowHeight = systemInfo.windowHeight
-		const statusBarHeight = systemInfo.statusBarHeight || 0
-		const footerHeight = 100
+    const systemInfo = uni.getSystemInfoSync();
+    const windowHeight = systemInfo.windowHeight;
+    const statusBarHeight = systemInfo.statusBarHeight || 0;
+    const footerHeight = 100;
 
-		contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
-		console.log('重新计算contentHeight:', contentHeight.value)
+    contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
+    console.log("重新计算contentHeight:", contentHeight.value);
   }
-})
+});
 </script>
 
 <style scoped>
@@ -458,7 +454,7 @@ watch(headerHeight, (newHeight) => {
   min-width: 40rpx;
   max-width: 120rpx;
   height: 8rpx;
-	background-image: url('/static/marketSituation-image/bg.png');
+  background-image: url("/static/marketSituation-image/bg.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

stores/modules/marketSituation.js

@@ -0,0 +1,78 @@
+/** @format */
+
+import { defineStore } from "pinia";
+import { ref } from "vue";
+// 定义 Store
+export const useMarketSituationStore = defineStore(
+  "marketSituation",
+  () => {
+    const cardData = ref([
+      {
+        market: "usa",
+        stockName: "道琼斯",
+        stockCode: "noCode",
+        currentPrice: "45757.90",
+        changeAmount: "-125.22",
+        changePercent: "-0.27%",
+        isRising: false,
+      },
+      {
+        market: "usa",
+        stockName: "纳斯达克",
+        stockCode: "noCode",
+        currentPrice: "22333.96",
+        changeAmount: "+125.22",
+        changePercent: "+0.47%",
+        isRising: true,
+      },
+      {
+        market: "usa",
+        stockName: "标普500",
+        stockCode: "noCode",
+        currentPrice: "6606.08",
+        changeAmount: "+125.22",
+        changePercent: "+0.27%",
+        isRising: true,
+      },
+      {
+        market: "cn",
+        stockName: "上证指数",
+        stockCode: "noCode",
+        currentPrice: "3333.96",
+        changeAmount: "+125.22",
+        changePercent: "+0.27%",
+        isRising: true,
+      },
+      {
+        market: "cn",
+        stockName: "科创50",
+        stockCode: "noCode",
+        currentPrice: "757.90",
+        changeAmount: "-25.22",
+        changePercent: "-0.27%",
+        isRising: false,
+      },
+    ]);
+
+    // 记得 return
+    return {
+        cardData
+    };
+  },
+  // TODO: 持久化
+  {
+    // 网页端持久化
+    // persist: true,
+    // 小程序端持久化
+    persist: {
+      storage: {
+        getItem(key) {
+          return uni.getStorageSync(key);
+        },
+        setItem(key, value) {
+          uni.setStorageSync(key, value);
+        },
+      },
+    },
+  }
+);