注册页面的客服地址错误

zzzz

2024-03-29 227ab6fb84ef98144962ec9b4103b367679c3fef

 src/page/assetsCenter/index.vue

@@ -1,157 +1,430 @@
<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 class="assets-box">
    <header>
      <van-row class="title-box">
        <van-col span="12"><span class="title">Total Assets</span></van-col>
        <van-col
          span="12"
          class="right"
          @click="goRouter('/exchange/exchangeHistory')"
        >
          <img
            :src="require('@/assets/image/assets-center/Subtract.png')"
            class="w-44 h-38"
          />
        </van-col>
        <div class="pt">Total Assets Valuation</div>
        <div class="pt">0</div>
        <div class="pt">≈ 0.00USD</div>
      </van-row>

      <van-row gutter="20" class="but-box">
        <van-col span="8" v-for="item in tabList1" :key="item.id">
          <div class="but">{{ item.text }}</div>
        </van-col>
        <!-- <van-col span="8"><div class="but">withdraw</div></van-col>
        <van-col span="8"><div class="but">Exchange</div></van-col>
        <van-col span="8"><div class="but">Management</div></van-col>
        <van-col span="8"><div class="but">Mining Pool</div></van-col> -->
      </van-row>
    </header>
    <div class="tabs">
      <div class="tabs-box">
        <div
          v-for="item in tabList"
          :key="item.id"
          :class="`${active === item.id ? 'active-tabls' : ''}`"
          @click="activeCheng(item)"
        >
          {{ item.text }}
        </div>
      </div>

      <div class="tabs-content">
        <div>Spot Total Assets</div>
        <div class="tabs-name">0 USDT ≈ 0.00 $</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>

    <main>
      <div class="item-box" v-for="(item, index) in funds" :key="index">
        <div class="title-main">{{ item.symbol.toUpperCase() }}/USDT</div>
        <van-row>
          <van-col span="8">
            <div class="title">{{ $t("可用") }}</div>
            <div class="text">
              {{
                item.usable.toFixed(
                  item.symbol.toUpperCase() === "USDT" ? 2 : 8
                ) || "0.0"
              }}
            </div>
          </van-col>
          <van-col span="8">
            <div class="title">{{ $t("锁仓") }}</div>
            <div class="text">
              {{
                item.lock_amount.toFixed(
                  item.symbol.toUpperCase() === "USDT" ? 2 : 8
                ) || "0.0"
              }}
            </div>
          </van-col>
          <van-col span="8">
            <div class="title">{{ $t("冻结") }}</div>
            <div class="text">
              {{
                (item.frozenAmount + item.freeze_amount).toFixed(
                  item.symbol.toUpperCase() === "USDT" ? 2 : 8
                ) || "0.0"
              }}
            </div>
          </van-col>
        </van-row>
      </div>
    </main>
  </div>
</template>

<script>
import { _getAllWallet } from "@/API/fund.api";

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: "assets-index",
  components: {
    AsSets,
    OverView,
    Contract,
    Financial
  },
  data() {
    return {
      type: 'left', //left 从左往右 right 从有王座
      list: [],
      timer: null,
      tab: 0,
      index: 0, // 每个组件的二级tab
      funds: {},
      typeList: [
      active: 1,
      active1: 1,
      tabList1: [
        { id: 1, text: this.$t("充币") },
        { id: 2, text: this.$t("提币") },
        { id: 4, text: this.$t("闪兑") },
        { id: 5, text: this.$t("Management") },
        { id: 6, text: this.$t("Mining Pool") },
      ],
      tabList: [
        { id: 1, text: this.$t("Spot") },
        { id: 2, text: this.$t("Contract Delivery") },
        { id: 4, text: this.$t("Contract Account") },
        { id: 5, text: this.$t("Financial") },
      ],
      funds: [
        {
          type: this.$t('总览'),
          volume: 0,
          symbol: "usdt",
          usable: 0,
          freeze_amount: 0,
          name: "USDT/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          type: this.$t('现货账户'),
          volume: 0,
          symbol: "knc",
          usable: 0,
          freeze_amount: 0,
          name: "KNC/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          type: this.$t('合约'),

          volume: 0,
          symbol: "vet",
          usable: 0,
          freeze_amount: 0,
          name: "VET/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          type: this.$t('理财'),
          volume: 0,
          symbol: "doge",
          usable: 0,
          freeze_amount: 0,
          name: "DOGE/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
      ]
    }
  },
  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
        }
      })
    },
        {
          volume: 0,
          symbol: "usdc",
          usable: 0,
          freeze_amount: 0,
          name: "USDC/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "dai",
          usable: 0,
          freeze_amount: 0,
          name: "DAI/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "wld",
          usable: 0,
          freeze_amount: 0,
          name: "WLD/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "mln",
          usable: 0,
          freeze_amount: 0,
          name: "MLN/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "qtum",
          usable: 0,
          freeze_amount: 0,
          name: "QTUM/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "btc",
          usable: 0,
          freeze_amount: 0,
          name: null,
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "yfii",
          usable: 0,
          freeze_amount: 0,
          name: "YFII/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "etc",
          usable: 0,
          freeze_amount: 0,
          name: "ETC/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "wdc",
          usable: 0,
          freeze_amount: 0,
          name: "WDC/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "xrp",
          usable: 0,
          freeze_amount: 0,
          name: "XRP/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "icp",
          usable: 0,
          freeze_amount: 0,
          name: "ICP/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "eth",
          usable: 0,
          freeze_amount: 0,
          name: "ETH/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "ltc",
          usable: 0,
          freeze_amount: 0,
          name: "LTC/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "shib",
          usable: 0,
          freeze_amount: 0,
          name: "SHIB/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "yfi",
          usable: 0,
          freeze_amount: 0,
          name: "YFI/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "xtz",
          usable: 0,
          freeze_amount: 0,
          name: "XTZ/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "ada",
          usable: 0,
          freeze_amount: 0,
          name: "ADA/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
      ],
      tabListData: {},
    };
  },
  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
    }
    // this.getAssets();
  },
  activated() {
    clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.getAssets()
    }, 5000)
    this.index = 0
  methods: {
    // 切换
    activeCheng(item) {
      this.active = item.id;
    },
    getAssets() {
      _getAllWallet().then((res) => {
        this.tabListData = {
          usdt: res.usdt,
          lock_money: res.lock_money,
        };
        let list = res.extends;
        this.funds = list;
        console.log(list);
      });
    },
    goRouter(parmas) {
      if (parmas === "/exchange/exchangeHistory") {
        this.$router.push({ path: parmas, query: { type: 1 } });
      } else {
        this.$router.push(parmas);
      }
    },
  },
  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;
.assets-box {
  header {
    padding: 100px 0 0px;
    color: #817cf6;
    .title-box {
      padding: 0 70px;
    }
    .but-box {
      padding: 30px;
    }
    .title {
      font-weight: bold;
    }
    .pt {
      margin-top: 15px;
    }
    .but {
      box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
      line-height: 80px;
      text-align: center;
      margin-bottom: 30px;
    }
  }

  border-radius: 2.208px;
  .right {
    text-align: right;
  }
}

.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active {
  will-change: transform;
  transition: all 500ms;
.tabs {
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  margin: 0 15px;
  padding: 30px 30px;
  .tabs-content {
    margin-top: 40px;
    color: #363636;
    .tabs-name {
      margin-left: 10px;
      color: #dedbe2;
    }
  }
  .tabs-box {
    display: flex;
    color: #dedbe2;
    font-weight: 400;
    flex: 1;
    justify-content: space-between;

    .active-tabls {
      color: #807cf7;
      font-weight: 900;
    }
  }
}

.left-leave-active,
.right-leave-active {
  display: none;
main {
  .item-box {
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
    margin: 0 15px;
    padding: 30px 30px;
    margin-top: 40px;
    .title-main {
      color: #807cf7;
      font-weight: 900;
      margin-bottom: 20px;
    }
    .title {
      color: #dedbe2;
      margin-bottom: 10px;
    }
    .text {
      font-weight: 900;
    }
  }
}

.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>