1

PC-20250623MANY\Administrator

2025-07-22 3003b7486ddeffd169f2b2f564fc0ff8c2c58bb3

 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();
    }
  }
};