From 3003b7486ddeffd169f2b2f564fc0ff8c2c58bb3 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Tue, 22 Jul 2025 09:56:04 +0800
Subject: [PATCH] 1

---
 src/page/markets/markets.vue |   82 +++++++++++++++++++++++++++++++++--------
 1 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/src/page/markets/markets.vue b/src/page/markets/markets.vue
index e66caf3..38ed571 100644
--- a/src/page/markets/markets.vue
+++ b/src/page/markets/markets.vue
@@ -20,17 +20,17 @@
     <div class="tabs flex-between">
       <div
         class="tab_item flex-center"
-        :class="{ active: item.value == tab }"
+        :class="{ active: item.pid == tab }"
         v-for="item in tabList"
-        :key="item.value"
-        @click="tab = item.value"
+        :key="item.pid"
+        @click="tab = item.pid"
       >
-        <span>{{ item.name }}</span>
+        <span>{{ item.abbreviation }}</span>
       </div>
     </div>
 
     <div class="markets_echart">
-      <index-component :ids="'markets'"></index-component>
+      <index-component :ids="'markets'" :dataObj="kData"></index-component>
       <!-- <van-skeleton title :row="3" /> -->
     </div>
 
@@ -58,18 +58,25 @@
         },
         {
           text: this.$t("墨西哥"),
-          value: "MX",
+          value: "MEX",
           name: "墨西哥"
         }
       ],
-      tabList: [
-        { name: "Dow Jones", value: 1 },
-        { name: "S&P 500", value: 2 },
-        { name: "NASDAQ", value: 3 }
+      tabList: [],
+      usList: [
+        { abbreviation: "Dow Jones" },
+        { abbreviation: "S&P 500" },
+        { abbreviation: "NASDAQ" }
+      ],
+      mxList: [
+        { abbreviation: "IPC" },
+        { abbreviation: "INMEX" },
+        { abbreviation: "NASDAQ" }
       ],
       tab: 1,
       pageNum: 1,
-      pageSize: 10
+      pageSize: 10,
+      kData: {}
     };
   },
   components: {
@@ -78,24 +85,67 @@
     stockList,
     indexComponent
   },
+  watch: {
+    tab() {
+      this.getIndicesAndKData();
+    }
+  },
   computed: {
-    switchText() { // 切换文字
+    switchText() {
+      // 切换文字
       return this.$t(this.$store.state.marketsSwitch.name) || this.$t("美国");
     },
-    propOption() { // 传递给列表组件的类型值
+    propOption() {
+      // 传递给列表组件的类型值
       return { stockType: this.$store.state.marketsSwitch.value };
     }
   },
-  created() {
-    if (!this.$store.state.marketsSwitch.name) { // 如果没有选过，默认选择第一个
+  async created() {
+    if (!this.$store.state.marketsSwitch.name) {
+      // 如果没有选过，默认选择第一个
       this.$store.commit("MARKET_CHANGE", this.actions[0]);
     }
+    await this.getTabData();
+    this.tab = this.tabList[0].pid;
   },
   mounted() {},
   methods: {
     // 选择
-    onSelect(e) {
+    async onSelect(e) {
       this.$store.commit("MARKET_CHANGE", e);
+      await this.getTabData();
+      this.tab = this.tabList[0].pid;
+    },
+    // 获取tab数据
+    async getTabData() {
+      let stockType = this.$store.state.marketsSwitch.value;
+      let data = await api.getIndicesList({
+        stockType
+      });
+
+      // 数据重构
+      let list = [];
+      if (stockType == "US") list = this.usList;
+      if (stockType == "MEX") list = this.mxList;
+      this.tabList = list.map((item, index) => {
+        item = { ...item, ...data.data[index + 1] };
+        return item;
+      });
+
+      // console.log("dadadadadad", this.tabList);
+    },
+    // 获取指数图
+    async getIndicesAndKData() {
+      let data = await api.getIndicesAndKData({
+        pid: this.tab,
+        stockType: this.$store.state.marketsSwitch.value
+      });
+      this.kData = data.data;
+      // console.log("getIndicesAndKData", this.kData);
+    },
+    // tab切换
+    tabChange() {
+      this.getIndicesAndKData();
     }
   }
 };

--
Gitblit v1.9.3