1

PC-20250623MANY\Administrator

2025-07-22 3003b7486ddeffd169f2b2f564fc0ff8c2c58bb3

 src/page/markets/markets.vue

@@ -1,111 +1,154 @@
<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>
  <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>

        <div class="tabs flex-between">
            <div class="tab_item flex-center" :class="{ active: item.value == tab }" v-for="item in tabList"
                :key="item.value" @click="tab = item.value">
                <span>{{ item.name }}</span>
            </div>
        </div>

        <div class="markets_echart">
            <div class="markets_echart_title">
                Dow Jones Industrial Average
            </div>
            <div class="markets_echart_price">
                44,406.36
            </div>
            <div class="markets_echart_index flex-between">
                <span>-422.17</span>
                <span>-0.94%</span>
            </div>
            <div class="markets_echart_e">
                <Echart :ids="'markets-echart'" :colorType="-1"></Echart>
            </div>

            <!-- <van-skeleton title :row="3" /> -->
        </div>

        <van-row class="markets_head">
            <van-col span="12" class="flex-start head_item">{{ $t('Name') }}</van-col>
            <van-col span="4" class="flex-start head_item">{{ $t('Price') }}</van-col>
            <van-col span="8" class="flex-end head_item">{{ $t('Change') }}</van-col>
        </van-row>

        <van-row class="markets_item" v-for="item in 10" :key="item">
            <van-col span="12" class="item_n">
                <div class="flex-start">
                    <span class="i_icon">US</span>
                    <span class="i_hint">SS</span>
                </div>
                <div class="i_name">shangshi</div>
            </van-col>
            <van-col span="4" class="flex-start item_n">18</van-col>
            <van-col span="8" class="item_n">
                <div class="flex-end" style="margin-bottom: .15em;">18</div>
                <div class="flex-end">18%</div>
            </van-col>
        </van-row>

        <n-pagination></n-pagination>
    <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>{{ item.abbreviation }}</span>
      </div>
    </div>

    <div class="markets_echart">
      <index-component :ids="'markets'" :dataObj="kData"></index-component>
      <!-- <van-skeleton title :row="3" /> -->
    </div>

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

<script>
import indexComponent from "@/components/index-component.vue";
import tabHead from "@/components/tabHead.vue";
import nPagination from "@/components/nPagination.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: 1,
                    name: '美国'
                },
                {
                    text: this.$t('墨西哥'),
                    value: 2,
                    name: '墨西哥'
                },
            ],
            tabList: [{ name: 'Dow Jones', value: 1 }, { name: 'S&P 500', value: 2 }, { name: 'NASDAQ', value: 3 },],
            tab: 1,
        }
    },
    components: {
        tabHead, Echart, nPagination,
    },
    computed: {
        switchText() {
            return this.$t(this.$store.state.marketsSwitch.name) || this.$t('美国');
        }
    },
    mounted() {
    },
    methods: {
        onSelect(e) { // 选择
            this.$store.commit("MARKET_CHANGE", e)
  name: "markets",
  data() {
    return {
      switchShow: false,
      // 切换
      actions: [
        {
          text: this.$t("美国"),
          value: "US",
          name: "美国"
        },
        {
          text: this.$t("墨西哥"),
          value: "MEX",
          name: "墨西哥"
        }
      ],
      tabList: [],
      usList: [
        { abbreviation: "Dow Jones" },
        { abbreviation: "S&P 500" },
        { abbreviation: "NASDAQ" }
      ],
      mxList: [
        { abbreviation: "IPC" },
        { abbreviation: "INMEX" },
        { abbreviation: "NASDAQ" }
      ],
      tab: 1,
      pageNum: 1,
      pageSize: 10,
      kData: {}
    };
  },
  components: {
    tabHead,
    Echart,
    stockList,
    indexComponent
  },
  watch: {
    tab() {
      this.getIndicesAndKData();
    }
}
  },
  computed: {
    switchText() {
      // 切换文字
      return this.$t(this.$store.state.marketsSwitch.name) || this.$t("美国");
    },
    propOption() {
      // 传递给列表组件的类型值
      return { stockType: this.$store.state.marketsSwitch.value };
    }
  },
  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: {
    // 选择
    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();
    }
  }
};
</script>

<style lang="less" scoped>
@@ -117,126 +160,51 @@
@dark_green: #07c160;

.markets {
    font-size: 10vw;
    width: 100vw;
    min-height: 100vh;
    padding-bottom: 1.5rem;
  font-size: 10vw;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 1.5rem;

    .markets_head {
        background-color: @green2;
        margin-top: .25em;
        height: 1em;
        padding: 0 .25em;
  .markets_echart {
    width: 100%;
    height: 3.2em;
    background: rgba(red, 0.1);
    color: @red;
  }

        .head_item {
            font-size: .4em;
            height: 100%;
            font-weight: 600;
        }
  .tabs {
    width: 9.5em;
    height: 1em;
    background-color: @green2;
    border-radius: 0.5em;
    margin: 0.25em auto;
    padding: 0 0.1em;

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

      span {
        font-size: 0.4em;
      }
    }

    .markets_item {
        margin-top: .25em;
        // height: 1em;
        padding: .25em .25em;
        border-bottom: #f5f5f5 solid .01em;

        .item_n {
            font-size: .4em;
            min-height: 2em;
            font-weight: 500;


            .i_icon {
                border-radius: 0 26em 26em 0;
                background: @dark_green;
                color: #fff;
                padding: .1em .5em .1em .4em;
                margin-right: .3em;
                font-size: .8em;
            }

            .i_name {
                margin-top: .3em;
                color: #777777;
                font-size: .8em;
            }
        }
    .active {
      background-color: @green;
    }
  }

    .markets_echart {
        width: 100%;
        height: 3.2em;
        background: rgba(red, .1);
        color: @red;
        padding-right: .25em;
        padding-top: .3em;
  .switch {
    padding: 0.35em 0.5em;
    background-color: @green;
    color: @white;
    border-radius: 1em;

        .markets_echart_title {
            color: @black;
            padding-left: .625em;
            font-size: .4em;
            margin-bottom: .3em;
        }

        .markets_echart_price {
            padding-left: .625em;
            font-size: .4em;
            margin-bottom: .4em;
        }

        .markets_echart_index {
            padding: 0 .25em;

            span {
                font-size: .3em;
            }
        }

        .markets_echart_e {
            margin-top: .25em;
            width: 86%;
            height: 3.5em;
        }

        &>div:last-child {
            font-size: .37em;
        }
    span {
      font-size: 0.35em;
      margin-left: 0.2em;
    }

    .tabs {
        width: 9.5em;
        height: 1em;
        background-color: @green2;
        border-radius: .5em;
        margin: .25em auto;
        padding: 0 .1em;

        .tab_item {
            width: 32%;
            height: 0.8em;
            border-radius: .5em;

            span {
                font-size: .4em;
            }
        }

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

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

        span {
            font-size: .35em;
            margin-left: .2em;
        }
    }
  }
}
</style>