From 732c30b33f782c2d2ebb62eacda2fb7a453a7ecd Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Sat, 31 Jan 2026 11:01:45 +0800
Subject: [PATCH] 1
---
src/page/markets/markets.vue | 106 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 72 insertions(+), 34 deletions(-)
diff --git a/src/page/markets/markets.vue b/src/page/markets/markets.vue
index e66caf3..9b8382b 100644
--- a/src/page/markets/markets.vue
+++ b/src/page/markets/markets.vue
@@ -1,13 +1,7 @@
<template>
<div class="markets">
<tab-head :rightShow="false">
- <van-popover
- v-model="switchShow"
- trigger="click"
- :actions="actions"
- @select="onSelect"
- placement="bottom-end"
- >
+ <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" />
@@ -18,20 +12,14 @@
</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 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.name }}</span>
</div>
</div>
<div class="markets_echart">
- <index-component :ids="'markets'"></index-component>
- <!-- <van-skeleton title :row="3" /> -->
+ <index-component :ids="'markets'" :dataObj="kData"></index-component>
</div>
<stock-list :propOption="propOption"></stock-list>
@@ -54,22 +42,30 @@
{
text: this.$t("美国"),
value: "US",
- name: "美国"
+ name: this.$t("美国")
},
{
- text: this.$t("墨西哥"),
- value: "MX",
- name: "墨西哥"
- }
+ text: this.$t("日本"),
+ value: "JP",
+ name: this.$t("日本")
+ },
+ // {
+ // text: this.$t("hk1"),
+ // value: "HK",
+ // name: this.$t("hk1")
+ // },
+ // {
+ // text: this.$t("tw"),
+ // value: "TW",
+ // name: this.$t("tw")
+ // },
],
- tabList: [
- { name: "Dow Jones", value: 1 },
- { name: "S&P 500", value: 2 },
- { name: "NASDAQ", value: 3 }
- ],
+ tabList: [],
tab: 1,
pageNum: 1,
- pageSize: 10
+ pageSize: 10,
+ kData: {},
+ times: null
};
},
components: {
@@ -78,24 +74,65 @@
stockList,
indexComponent
},
+ watch: {
+ tab() {
+ this.init();
+ }
+ },
+ beforeDestroy() {
+ if (this.times) clearInterval(this.times);
+ },
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();
},
- mounted() {},
+ mounted() { },
methods: {
// 选择
- onSelect(e) {
+ async onSelect(e) {
this.$store.commit("MARKET_CHANGE", e);
+ await this.getTabData();
+ },
+ // 获取tab数据
+ async getTabData() {
+ let stockType = this.$store.state.marketsSwitch.value;
+ let data = await api.getIndicesList({
+ stockType
+ });
+ this.tabList = data.data;
+ this.tab = this.tabList[1].pid;
+
+ // 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);
+ },
+ // 初始化
+ init() {
+ if (this.times) clearInterval(this.times);
+ this.getIndicesAndKData();
+ this.times = setInterval(() => {
+ this.getIndicesAndKData();
+ }, 2000);
}
}
};
@@ -134,6 +171,7 @@
width: 32%;
height: 0.8em;
border-radius: 0.5em;
+ padding: 0 0.25em;
span {
font-size: 0.4em;
--
Gitblit v1.9.3