| | |
| | | :key="item.pid" |
| | | @click="tab = item.pid" |
| | | > |
| | | <span>{{ item.abbreviation }}</span> |
| | | <span class="line-one">{{ item.name }}</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> |
| | |
| | | { |
| | | text: this.$t("美国"), |
| | | value: "US", |
| | | name: "美国" |
| | | name: this.$t("美国") |
| | | }, |
| | | { |
| | | text: this.$t("墨西哥"), |
| | | value: "MEX", |
| | | name: "墨西哥" |
| | | 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" } |
| | | ], |
| | | mxList: [ |
| | | { abbreviation: "IPC" }, |
| | | { abbreviation: "INMEX" }, |
| | | { abbreviation: "NASDAQ" } |
| | | ], |
| | | tab: 1, |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | kData: {} |
| | | kData: {}, |
| | | times: null |
| | | }; |
| | | }, |
| | | components: { |
| | |
| | | }, |
| | | watch: { |
| | | tab() { |
| | | this.getIndicesAndKData(); |
| | | this.init(); |
| | | } |
| | | }, |
| | | beforeDestroy() { |
| | | if (this.times) clearInterval(this.times); |
| | | }, |
| | | computed: { |
| | | switchText() { |
| | |
| | | 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 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; |
| | | }); |
| | | this.tabList = data.data; |
| | | this.tab = this.tabList[1].pid; |
| | | |
| | | // console.log("dadadadadad", this.tabList); |
| | | }, |
| | |
| | | this.kData = data.data; |
| | | // console.log("getIndicesAndKData", this.kData); |
| | | }, |
| | | // tab切换 |
| | | tabChange() { |
| | | // 初始化 |
| | | init() { |
| | | if (this.times) clearInterval(this.times); |
| | | this.getIndicesAndKData(); |
| | | this.times = setInterval(() => { |
| | | this.getIndicesAndKData(); |
| | | }, 2000); |
| | | } |
| | | } |
| | | }; |
| | |
| | | width: 32%; |
| | | height: 0.8em; |
| | | border-radius: 0.5em; |
| | | padding: 0 0.25em; |
| | | |
| | | span { |
| | | font-size: 0.4em; |