From 3003b7486ddeffd169f2b2f564fc0ff8c2c58bb3 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Tue, 22 Jul 2025 09:56:04 +0800
Subject: [PATCH] 1
---
src/page/markets/markets.vue | 384 +++++++++++++++++++++++++-----------------------------
1 files changed, 176 insertions(+), 208 deletions(-)
diff --git a/src/page/markets/markets.vue b/src/page/markets/markets.vue
index 690c89c..38ed571 100644
--- a/src/page/markets/markets.vue
+++ b/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>
--
Gitblit v1.9.3