123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 src/page/assetsCenter/profile.vue

@@ -1,172 +1,228 @@
<template>
  <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>
    <!-- 用户头像和 id -->
   <assets-head>
    <!-- <van-icon
       class="font-45"
       @click="tokefu"
       :name="require(`@/assets/image/customer.png`)"
       :badge="`${unreadMsg_num}`"
     >
     </van-icon> -->
   </assets-head>
    <article>
      <div style="margin-left:20px">
        <div class="my-box-header" >
          <img :src="require('@/assets/3x/names6.png')" alt="" />
          <div>{{ $t("我的") }}</div>
        </div>
        <div class="text-right">ID:{{ userInfo.usercode }}</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>
    </article>
    <tabsProfile />
    <main>
      <!-- <div class="friends-warp">
        <div class="friends-box">
          <div class="icon-geren">
            <img src="@/assets/3x/names4.png" alt="" />
          </div>
          <div class="center-text">
            <div class="text1">{{ $t("邀请朋友") }}</div>
            <div class="text2">{{ $t("邀请好友一起赚钱") }}</div>
          </div>
        </div>
      </div>
      <div class="friends-warp" style="margin: 20px 0">
        <div class="friends-box">
          <div class="icon-geren download-box">
            <img class="google" src="@/assets/3x/names2.png" alt="" />
            <img src="@/assets/3x/names3.png" alt="" />
          </div>
          <div class="center-text">
            <div class="text1">{{ $t("下载APP") }}</div>
          </div>
        </div>
        <div>
          <img class="jiantouxia" src="@/assets/svg/jiantouxia.svg" alt="" />
        </div>
      </div> -->
      <div class="Safe">Safe</div>

      <section>
        <div class="section-box" @click="$router.push('/safety')">
          <div class="section-left">
            <img class="jiantouxia safe" src="@/assets/3x/names9.png" alt="" />
            <span class="section-text">{{ $t("安全") }}</span>
          </div>
          <div class="section-right">
            <img class="jiantouxia" src="@/assets/svg/jiantouxia.svg" alt="" />
          </div>
        </div>
        <div class="section-box" @click="$router.push('/userCenter')">
          <div class="section-left">
            <img
              class="jiantouxia safe"
              src="@/assets/3x/资源 18@3x.png"
              alt=""
            />
            <span class="section-text">{{ $t("设置") }}</span>
          </div>
          <div class="section-right">
            <img class="jiantouxia" src="@/assets/svg/jiantouxia.svg" alt="" />
          </div>
        </div>
        <div class="section-box" @click="$router.push('/TermsOfService')">
          <div class="section-left">
            <img class="jiantouxia safe" src="@/assets/3x/names12.png" alt="" />
            <span class="section-text">{{ $t("关于我们") }}</span>
          </div>
          <div class="section-right">
            <img class="jiantouxia" src="@/assets/svg/jiantouxia.svg" alt="" />
          </div>
        </div>
        <div class="exit" @click="loginOut">{{ $t("退出") }}</div>
      </section>
      <div class="exit-text">
        {{
          $t("请不要向任何人透露密码、短信和谷歌验证码，包括交易所工作人员。")
        }}
      </div>
    </main>
  </div>
</template>

<script>
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";
import { mapActions, mapGetters } from "vuex";
import tabsProfile from "./tabs-profile.vue";
import { setStorage } from "@/utils/utis";
import assetsHead from "@/components/assets-head";

export default {
  name: "assets-index",
  components: {
    AsSets,
    OverView,
    Contract,
    Financial,
    tabsProfile,
   assetsHead
  },
  data() {
    return {
      type: "left", //left 从左往右 right 从有王座
      list: [],
      timer: null,
      tab: 0,
      index: 0, // 每个组件的二级tab
      funds: {},
      typeList: [
        {
          type: this.$t("总览"),
        },
        {
          type: this.$t("现货账户"),
        },
        {
          type: this.$t("合约"),
        },
        {
          type: this.$t("理财"),
        },
      ],
    };
  computed: {
    ...mapGetters({
      userInfo: "user/userInfo",
    }),
  },
  mounted() {
    this.GET_UERS_KYC();
  },
  methods: {
    onTabs(val) {
      if (this.tab < val) {
        this.type = "right";
      } else {
        this.type = "left";
      }
      console.log(val);
      this.tab = val;
    ...mapActions("user", ["GET_UERS_KYC"]),

    loginOut() {
      this.$store.commit("user/SET_OUT");
      setStorage("popNotice", false);
      this.$router.push("/home");
    },
    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>
.assetsCenter {
  width: 100%;
  box-sizing: border-box;
}
.active_color {
  @include themify() {
    border-bottom: 5px solid themed("color_main") !important;
main {
  .section-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    color: #d2d2dc;
    .section-left {
      display: flex;
      align-items: center;
      .section-text {
        margin-left: 20px;
      }
      .safe {
        width: 40px;
      }
    }
  }
  border-radius: 2.208px;
  margin: 40px 80px;

  section {
    padding: 30px 60px;
  }
  .Safe {
    color: #9691fa;
    background-color: #f5f5f7;
    padding: 30px 60px;
  }
  .friends-warp {
    display: flex;
    padding: 30px 60px;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
    justify-content: space-between;
    align-items: center;
  }
  .friends-box {
    display: flex;

    align-items: center;

    .text1 {
      color: #000;
    }
    .text2 {
      color: #d2d2dc;
      margin-top: 10px;
    }
    img {
      width: 80px;
      margin-right: 30px;
    }
    .download-box {
      img {
        width: 130px;
      }
    }
    .icon-geren {
      display: flex;
      flex-direction: column;

      .google {
        margin-bottom: 10px;
      }
    }
  }
  .jiantouxia {
    width: 30px;
  }
  .exit {
    background-color: #ff1414;
    text-align: center;
    color: #fff;
    margin-top: 60px;
    margin-bottom: 50px;
    line-height: 80px;
  }
  .exit-text {
    text-align: center;
    font-size: 20px;
    color: #d2d2dc;
  }
}
.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active {
  will-change: transform;
  transition: all 500ms;
article {
  display: flex;
  justify-content: right;
  margin-right: 60px;
  margin-top: 40px;
  .my-box-header {
    display: flex;
    align-items: flex-end;
    color: #9691fa;
    img {
      width: 60px;
      margin-right: 10px;
    }
  }
  .text-right {
    text-align: right;
    color: #d2d2dc;
    font-size: 35px;
  }
}
.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>
</style>