1

PC-20250623MANY\Administrator

2025-08-13 79db9782438e27a9006d540d18d649c720180a31

 src/page/markets/markets.vue

@@ -1,172 +1,94 @@
<template>
  <div class="markets">
    <tab-head :rightShow="false">
      <van-popover
        v-model="switchShow"
        trigger="click"
        :actions="actions"
        @select="onSelect"
        placement="bottom-end"
      >
        <template #reference>
          <div class="switch flex-center">
            <van-icon name="exchange" size=".45em" />
            <span>{{ switchText }}</span>
          </div>
        </template>
      </van-popover>
    </tab-head>
    <tab-head :title="$t('hj62')"></tab-head>

    <div class="tabs flex-between">
      <div
        class="tab_item flex-center"
        :class="{ active: item.pid == tab }"
        v-for="item in tabList"
        :key="item.pid"
        @click="tab = item.pid"
      >
        <span class="line-one">{{ item.abbreviation }}</span>
    <div class="tui-search">
      <van-field
        v-model="keyValue"
        :placeholder="$t('hj37')"
        right-icon="search"
        @click-right-icon="search"
      />
    </div>

    <div class="tui-tabs flex-start">
      <div class="tab_item flex-center">
        <span>{{ $t("美股") }}</span>
      </div>
    </div>

    <div class="markets_echart">
      <index-component :ids="'markets'" :dataObj="kData"></index-component>
    <div class="tui_variety flex-between-start">
      <div class="tui_variety_item" @click="$store.dispatch('CustomerService')">
        <img src="@/assets/img/market_0.png" alt="" />
        <div class="tui_variety_item_name">
          <span>{{ this.$t("kf") }}</span>
        </div>
      </div>
      <div
        class="tui_variety_item"
        v-for="i in tabs"
        :key="i.name"
        @click="$router.push(i.path)"
      >
        <img :src="i.img" alt="" />
        <div class="tui_variety_item_name">
          <span>{{ i.name }}</span>
        </div>
      </div>
    </div>

    <stock-list :propOption="propOption"></stock-list>
    <stock-list :propOption="propOption" ref="stockList"></stock-list>
  </div>
</template>

<script>
import indexComponent from "@/components/index-component.vue";
import tabHead from "@/components/tabHead.vue";
import stockList from "@/components/stock-list.vue";
import Echart from "../home/components/echart.vue";
import * as api from "@/axios/api";
export default {
  name: "markets",
  data() {
    return {
      switchShow: false,
      // 切换
      actions: [
        {
          text: this.$t("美国"),
          value: "US",
          name: this.$t("美国")
        },
        {
          text: this.$t("hk1"),
          value: "HK",
          name: this.$t("hk1")
        },
        {
          text: this.$t("tw"),
          value: "TW",
          name: this.$t("tw")
        },
        {
          text: this.$t("id1"),
          value: "IN",
          name: this.$t("id1")
        }
      ],
      tabList: [],
      usList: [
        { abbreviation: "Dow Jones" },
        { abbreviation: "S&P 500" },
        { abbreviation: "NASDAQ" }
      ],
      hkList: [
        { abbreviation: "恒生指數" },
        { abbreviation: "恒生中國企業指數" },
        { abbreviation: "HSCEI Covered Call Index" }
      ],
      twList: [
        { abbreviation: "臺灣證券交易所發行量加權股價指數" },
        { abbreviation: "櫃買指數" },
        { abbreviation: "臺灣50指數" }
      ],
      inList: [
        { abbreviation: "Nifty 50 Index" },
        { abbreviation: "Nifty Bank Index" },
        { abbreviation: "Nifty Financial Services Index" }
      ],
      tab: 1,
      pageNum: 1,
      pageSize: 10,
      kData: {}
      kData: {},
      keyValue: "", // 搜索
      tabs: [
        {
          name: this.$t("订单"),
          path: "/myorder",
          img: require("@/assets/img/market_1.png")
        },
        {
          name: this.$t("subdka"),
          path: "/RechargeSure",
          img: require("@/assets/img/market_2.png")
        },
        {
          name: this.$t("关于我们"),
          path: "/bankCard1",
          img: require("@/assets/img/market_3.png")
        }
      ]
    };
  },
  components: {
    tabHead,
    Echart,
    stockList,
    indexComponent
    stockList
  },
  watch: {
    tab() {
      this.getIndicesAndKData();
    }
  },
  watch: {},
  computed: {
    switchText() {
      // 切换文字
      return this.$t(this.$store.state.marketsSwitch.name) || this.$t("美国");
    },
    // 传递给列表组件的类型值
    propOption() {
      // 传递给列表组件的类型值
      return { stockType: this.$store.state.marketsSwitch.value };
      return { stockType: "US", keyWords: this.keyValue };
    }
  },
  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;
  },
  async created() {},
  mounted() {},
  methods: {
    // 选择
    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;
      else if (stockType == "HK") list = this.hkList;
      else if (stockType == "TW") list = this.twList;
      else if (stockType == "IN") list = this.inList;
      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();
    // 搜索
    search() {
      this.$refs.stockList.init();
    }
  }
};
@@ -180,53 +102,70 @@
@green2: #f0f0f0;
@dark_green: #07c160;

/deep/ .van-cell {
  background-color: rgba(#000, 0);
  border: rgba(#fff, 0.5) 2px solid;
  border-radius: 5em;
}
/deep/ .van-icon {
  font-size: 1.6em;
}
.markets {
  font-size: 10vw;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 1.5rem;

  .markets_echart {
    width: 100%;
    height: 3.2em;
    background: rgba(red, 0.1);
    color: @red;
  .tui_variety {
    padding: 0.7em 0 0.35em;
    .tui_variety_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      flex-basis: 25%;
      .tui_variety_item_name {
        line-height: 0.2em;
        color: #898a8e;
        margin-top: 0.1em;
        text-align: center;
        span {
          font-size: 0.3em;
        }
      }
      img {
        width: 0.7em;
        height: auto;
      }
    }
  }

  .tabs {
    width: 9.5em;
    height: 1em;
    background-color: @green2;
    border-radius: 0.5em;
    margin: 0.25em auto;
    padding: 0 0.1em;
  .tui-tabs {
    position: sticky;
    top: 0;
    left: 0;
    padding: 0 0.22em;

    .tab_item {
      width: 32%;
      height: 0.8em;
      border-radius: 0.5em;
      padding: 0 .25em;

      height: 1.05em;
      font-weight: bold;
      padding: 0 0.325em;
      color: rgb(204, 204, 204);
      position: relative;
      &::before {
        content: "";
        width: 0.75em;
        height: 0.15em;
        position: absolute;
        bottom: 0;
        background-color: rgb(82, 91, 173);
        border-radius: 0.15em;
      }
      span {
        font-size: 0.4em;
      }
    }

    .active {
      background-color: @green;
    }
  }

  .switch {
    padding: 0.35em 0.5em;
    background-color: @green;
    color: @white;
    border-radius: 1em;

    span {
      font-size: 0.35em;
      margin-left: 0.2em;
    }
  .tui-search {
    padding: 0.225em;
  }
}
</style>