From 79db9782438e27a9006d540d18d649c720180a31 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Wed, 13 Aug 2025 18:46:46 +0800
Subject: [PATCH] 1
---
src/page/markets/markets.vue | 281 ++++++++++++++++++++++----------------------------------
1 files changed, 110 insertions(+), 171 deletions(-)
diff --git a/src/page/markets/markets.vue b/src/page/markets/markets.vue
index d0d3f6a..8a385db 100644
--- a/src/page/markets/markets.vue
+++ b/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>
--
Gitblit v1.9.3