zzzz
2024-03-29 227ab6fb84ef98144962ec9b4103b367679c3fef
src/page/assetsCenter/profile.vue
@@ -1,31 +1,172 @@
<template>
  <div class="profile-box">
    <img class="profile" :src="require(`@/assets/image/6Profile.png`)" alt="" />
    <!-- src/assets/image/6Profile.png -->
  <div class="pb-120 assetsCenter">
    <div class="flex justify-between px-52 pt-31 box-border">
      <div
        class="flex-1 items-center text-center textColor1"
        v-for="(item, index) in typeList"
        :key="'type' + index"
        @click="onTabs(index)"
      >
        <div class="font-32 text-center lh-53">{{ item.type }}</div>
      </div>
    </div>
    <div class="flex mx-52 mt-17">
      <span
        class="flex-1 border-b-color"
        :class="{ active_color: tab === 0 }"
      ></span>
      <span
        class="flex-1 border-b-color"
        :class="{ active_color: tab === 1 }"
      ></span>
      <span
        class="flex-1 border-b-color"
        :class="{ active_color: tab === 2 }"
      ></span>
      <span
        class="flex-1 border-b-color"
        :class="{ active_color: tab === 3 }"
      ></span>
    </div>
    <over-view v-if="tab === 0" :funds="funds" :key="tab"></over-view>
    <as-sets v-if="tab === 1" :funds="funds" :key="tab"></as-sets>
    <contract
      v-if="tab === 2"
      :funds="funds"
      :index="index"
      :key="tab"
    ></contract>
    <financial
      v-if="tab === 3"
      :funds="funds"
      :index="index"
      :key="tab"
    ></financial>
  </div>
</template>
<script>
import ExTabs from "./";
import AsSets from "@/components/assetsCenter/assets";
import OverView from "@/components/assetsCenter/overview";
import Contract from "@/components/assetsCenter/contract";
import Financial from "@/components/assetsCenter/financial";
import Axios from "@/API/assets";
export default {
  name: "ListQuotation",
  name: "assets-index",
  components: {
    AsSets,
    OverView,
    Contract,
    Financial,
  },
  data() {
    return {
      fixDate,
      HOST_URL,
      active: 0,
      type: "left", //left 从左往右 right 从有王座
      sortVal: 0,
      list: [],
      timer: null,
      tab: 0,
      index: 0, // 每个组件的二级tab
      funds: {},
      typeList: [
        {
          type: this.$t("总览"),
        },
        {
          type: this.$t("现货账户"),
        },
        {
          type: this.$t("合约"),
        },
        {
          type: this.$t("理财"),
        },
      ],
    };
  },
  methods: {
    onTabs(val) {
      if (this.tab < val) {
        this.type = "right";
      } else {
        this.type = "left";
      }
      console.log(val);
      this.tab = val;
    },
    getAssets() {
      Axios.GetAllAssets().then((res) => {
        const { code, data } = res;
        if (code) {
          //console.log('总资产数据',data)
          this.funds = data;
        }
      });
    },
  },
  created() {
    this.getAssets();
    this.timer = setInterval(() => {
      this.getAssets();
    }, 5000);
    if (Object.hasOwnProperty.call(this.$route.query, "tab")) {
      this.tab = this.$route.query.tab / 1;
      this.index = this.$route.query.index ? this.$route.query.index * 1 : 0;
    }
  },
  activated() {
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.getAssets();
    }, 5000);
    this.index = 0;
  },
  deactivated() {
    clearInterval(this.timer);
    this.timer = null;
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>
<style lang="scss" scoped>
.profile-box {
  .profile {
    width: 100%;
    // height: 200px;
  }
.assetsCenter {
  width: 100%;
  box-sizing: border-box;
}
</style>
.active_color {
  @include themify() {
    border-bottom: 5px solid themed("color_main") !important;
  }
  border-radius: 2.208px;
}
.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active {
  will-change: transform;
  transition: all 500ms;
}
.left-leave-active,
.right-leave-active {
  display: none;
}
.left-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.left-leave {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.right-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.right-leave {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>