<template>
|
<div class="ware">
|
<div style="padding: 0 0.4rem 0.4rem">
|
<!-- <div class="tabs-box" onscroll="handleScroll">
|
<div
|
v-for="(item, index) in tabsArr"
|
:key="index"
|
:class="
|
item.name == active ? 'tabs-item-active tabs-item' : 'tabs-item'
|
"
|
@click="onClick(item)"
|
>
|
{{ item.title }}
|
</div>
|
</div> -->
|
|
<template v-if="active === '1'">
|
<div v-for="(item, index) in tabsArr" :key="index">
|
<card :item="item" />
|
</div>
|
</template>
|
<template v-else>
|
<itemCard
|
@closingPosition="closingPosition"
|
:activeObj="activeObj"
|
:itemClick="itemClick"
|
/>
|
</template>
|
<div v-show="active !== '1'">
|
<dataList
|
ref="dataListref"
|
:activeObj="activeObj"
|
@closingPosition="closingPosition"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import card from "./Warehouse/card.vue";
|
import itemCard from "./Warehouse/item.card.vue";
|
import dataList from "./Warehouse/data.list.vue";
|
import { getMoney } from "../../axios/api";
|
|
export default {
|
components: { card, itemCard, dataList },
|
data() {
|
return {
|
actives: "2",
|
active: "2",
|
activeObj: {},
|
tabsArr: [
|
// {
|
// title: this.$t("hometips"),
|
// name: "1",
|
// bgc: "rgb(8, 82, 196)",
|
// laber: "ALL",
|
// symbolCode: "USD",
|
// symbol: "$",
|
// },
|
{
|
title: this.$t("ydgs"),
|
assname: this.$t("印股总资产"),
|
name: "2",
|
bgc: "rgb(12, 175, 226)",
|
laber: "IN",
|
symbolCode: "INR",
|
symbol: "₹",
|
},
|
// {
|
// title: this.$t("马来西亚"),
|
// assname: this.$t("馬股总资产"),
|
// name: "4",
|
// bgc: "rgb(163, 91, 255)",
|
// laber: "MAS",
|
// symbolCode: "MYR",
|
// symbol: "RM",
|
// },
|
// {
|
// title: this.$t("港股"),
|
// assname: this.$t("港股总资产"),
|
// name: "5",
|
// bgc: "rgb(255 91 230)",
|
// laber: "HK",
|
// symbolCode: "HKD",
|
// symbol: "HK$",
|
// },
|
],
|
getMoneyList: [],
|
};
|
},
|
created() {
|
this.getMoneys();
|
},
|
mounted() {
|
if (this.$route.query.buyType) {
|
let arr = this.tabsArr.filter(
|
(item) => item.laber == this.$route.query.buyType
|
)[0];
|
this.onClick(arr);
|
}
|
},
|
methods: {
|
closingPosition() {
|
this.getMoneys();
|
},
|
itemClick() {
|
this.$refs.dataListref.getList(this.activeObj.laber);
|
this.getMoneys();
|
},
|
async getMoneys() {
|
const res = await getMoney();
|
if (res.status === 0) {
|
let arr = [];
|
this.tabsArr.map((item) => {
|
res.data.map((items) => {
|
if (items.accectType === item.laber) {
|
item = { ...item, ...items, laber: items.accectType };
|
arr.push(item);
|
}
|
});
|
});
|
let obj = arr.filter((item) => item.name == this.active)[0];
|
this.activeObj = obj;
|
this.tabsArr = arr;
|
this.$forceUpdate(); // 强制Vue重新渲染
|
}
|
},
|
onClick(e) {
|
this.active = e.name;
|
this.activeObj = e;
|
this.getMoneys();
|
if (e.name !== "1") {
|
this.$refs.dataListref.getList(e.laber);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.ware {
|
overflow: hidden;
|
min-height: 100vh;
|
// padding: 0 0.4rem 0.4rem;
|
background-color: #fff;
|
padding-bottom: 100px;
|
}
|
.tabs-box {
|
display: flex;
|
overflow-x: auto;
|
width: 100%; /* Ensures it takes full width of the container */
|
white-space: nowrap; /* Prevents text wrapping */
|
background: rgb(247, 247, 250);
|
margin-top: 20px;
|
border-radius: 20px;
|
padding-right: 20px;
|
}
|
.tabs-box::-webkit-scrollbar {
|
display: none; /* Chrome, Safari, Opera */
|
}
|
.tabs-item {
|
cursor: pointer;
|
flex: 0 0 auto; /* Ensures items do not grow or shrink */
|
padding: 15px; /* Adjust padding as needed */
|
// border: 1px solid #ccc; /* Just for demonstration, you can style as needed */
|
margin-right: 10px; /* Adjust margin as needed */
|
min-width: 100px; /* Minimum width for each item */
|
text-align: center;
|
color: rgb(140, 159, 173);
|
font-size: 16px;
|
// padding: 0.10667rem 0.34667rem;
|
}
|
.tabs-item-active {
|
border-radius: 20px;
|
background: #39a08e;
|
// padding: 0.10667rem 0.34667rem;
|
color: #fff;
|
}
|
</style>
|
