<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="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.name }}</span>
|
</div>
|
</div>
|
|
<div class="markets_echart">
|
<index-component :ids="'markets'" :dataObj="kData"></index-component>
|
</div>
|
|
<stock-list :propOption="propOption"></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: [],
|
tab: 1,
|
pageNum: 1,
|
pageSize: 10,
|
kData: {},
|
times: null
|
};
|
},
|
components: {
|
tabHead,
|
Echart,
|
stockList,
|
indexComponent
|
},
|
watch: {
|
tab() {
|
this.init();
|
}
|
},
|
beforeDestroy() {
|
if (this.times) clearInterval(this.times);
|
},
|
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();
|
},
|
mounted() {},
|
methods: {
|
// 选择
|
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);
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@red: #ee0a24;
|
@green: #c4d600;
|
@white: #fff;
|
@black: #000;
|
@green2: #f0f0f0;
|
@dark_green: #07c160;
|
|
.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;
|
}
|
|
.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;
|
padding: 0 0.25em;
|
|
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;
|
}
|
}
|
}
|
</style>
|
