BTC排一.ETH排二，USDT排三其他随便

dcc

2024-06-29 358dd78ee40aea1e43fd7987c6e604960c2d0672

 src/page/assetsCenter/index.vue

@@ -2,21 +2,15 @@
  <div class="assets-box">
    <header>
      <van-row class="title-box">
        <van-col span="12"
          ><span class="title">{{ $t("总资产") }}</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 span="12">
          <!-- <span class="title">{{ $t("总资产") }}</span> -->
        </van-col>
        <van-col span="12" class="right">
          <div class="w-33" style="height: 20px">{{ " " }}</div>
          <!-- <img :src="require('@/assets/3x/names8.png')" class="w-33" /> -->
        </van-col>
        <div class="pt">{{ $t("总资产估值") }}</div>
        <div class="pt">{{ assetsFunds.total }}</div>
        <!-- <div class="pt">{{ assetsFunds.total }}</div> -->
        <div class="pt">
          ≈ {{ currency.currency_symbol
          }}{{
@@ -26,30 +20,19 @@
          }}
        </div>
      </van-row>

      <van-row gutter="20" class="but-box">
        <van-col
          span="8"
          v-for="item in tabList1"
          :key="item.id"
          @click="routerList(item)"
        >
        <van-col span="8" v-for="item in tabList1" :key="item.id" @click="routerList(item)">
          <div class="but">{{ item.text }}</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)"
        >
        <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>{{ allName }} {{ $t("总资产") }}</div>
        <div class="tabs-name">
@@ -57,13 +40,18 @@
        </div>
      </div>
    </div>

    <main>
      <template v-if="loading">
        <van-loading />
      </template>

      <template v-if="active === 1">
        <div class="px-32 py-13 flex">
          <div class="inputBoxbg h-60 w-full rounded-full flex items-center">
            <input style="padding-left: 10px" type="text" v-model="keywords" :placeholder="$t('搜索币种')"
              class="h-full flex-1 search-input border-none bg-none" @input="onInput" />
            <img src="@/assets/3x/资源 22@3x.png" alt="logo" class="w-32 h-32 mx-16" />
          </div>
        </div>
        <div class="item-box" v-for="(item, index) in funds" :key="index">
          <div class="title-main">{{ item.symbol.toUpperCase() }}/USDT</div>
          <van-row>
@@ -72,7 +60,7 @@
              <div class="text">
                {{
                  item.usable.toFixed(
                    item.symbol.toUpperCase() === "USDT" ? 6 : 8
                    item.symbol.toUpperCase() === "USDT" ? 2 : 2
                  ) || "0.0"
                }}
              </div>
@@ -82,7 +70,7 @@
              <div class="text">
                {{
                  item.lock_amount.toFixed(
                    item.symbol.toUpperCase() === "USDT" ? 6 : 8
                    item.symbol.toUpperCase() === "USDT" ? 2 : 2
                  ) || "0.0"
                }}
              </div>
@@ -92,7 +80,7 @@
              <div class="text">
                {{
                  (item.frozenAmount + item.freeze_amount).toFixed(
                    item.symbol.toUpperCase() === "USDT" ? 6 : 8
                    item.symbol.toUpperCase() === "USDT" ? 2 : 2
                  ) || "0.0"
                }}
              </div>
@@ -103,10 +91,7 @@
      <!--永续合约持有仓位-->
      <div class="px-30">
        <template v-if="active === 4">
          <PerpetualPositionList
            :list-data="funds"
            @sell="onRecall"
          ></PerpetualPositionList>
          <PerpetualPositionList :list-data="funds" @sell="onRecall"></PerpetualPositionList>
        </template>
        <!--交割合约持有仓位-->
        <template v-if="active === 2">
@@ -123,18 +108,15 @@
<script>
import { _getAllWallet } from "@/API/fund.api";
import Axios from "@/API/assets";

import { mapGetters } from "vuex";
import { mapActions, mapGetters } from "vuex";
import { _futrueOrderList, _orderListHold } from "@/API/trade.api";
import PerpetualPositionList from "@/components/perpetual-position-list/index.vue";
import futrueHoldList from "@/page/deliveryContract/hold.vue";
import financialList from "@/components/assetsCenter/financialList";

import {
  getfinacialProductsBought,
  getMachineBought,
} from "@/API/financialManagement";

export default {
  components: {
    PerpetualPositionList,
@@ -143,13 +125,15 @@
  },
  data() {
    return {
      keywords: "",
      loading: true,
      active: 1,
      tabList1: [
        {
          id: 1,
          text: this.$t("充币"),
          route: "/recharge/rechargePage?symbol=usdt",
          // route: "/recharge/rechargePage?symbol=usdt",
          route: "/recharge/rechargeList",
        },
        {
          id: 2,
@@ -180,11 +164,12 @@
      ],
      tabList: [
        { id: 1, text: this.$t("现货") },
        { id: 2, text: this.$t("交割合约") },
        { id: 2, text: this.$t("期权合约") },
        { id: 4, text: this.$t("永续合约") },
        { id: 5, text: this.$t("理财") },
      ],
      funds: [],
      fundsDatra: [],
      tabListData: {},
      assetsFunds: {},
    };
@@ -192,6 +177,9 @@
  created() {
    this.getAssetsFunds();
    this.getAssets();
  },
  mounted() {
    this.GET_UERS_KYC();
  },
  computed: {
    ...mapGetters("home", ["currency", "theme"]),
@@ -251,6 +239,17 @@
    },
  },
  methods: {
    ...mapActions("user", ["GET_UERS_KYC"]),
    onInput(e) {
      console.log(333, this.fundsDatra);
      this.funds = this.fundsDatra.filter((item) =>
        item.symbol.includes(e.target.value.toLocaleLowerCase())
      );
      // this.fundsDatra[index]["data"] = this.tabList[index]["data"].filter(
      //   (item) => item.symbol.includes(e.target.value.toLocaleLowerCase())
      // );
    },

    routerList(item) {
      this.$router.push({ path: item.route, query: item.query });
    },
@@ -329,7 +328,18 @@
        this.loading = false;
        let list = res.extends;
        if (this.active === 1) {
          let btcindex = list.findIndex(item => item.symbol == 'btc')
          if (btcindex !== -1) {
            let movedElement = list.splice(btcindex, 1); 
            list.unshift(movedElement[0]); 
          }
          let ethindex = list.findIndex(item => item.symbol == 'eth')
          if (ethindex !== -1) {
            let movedElement = list.splice(ethindex, 1);
            list.splice(1, 0, movedElement[0]);
          }
          this.funds = list;
          this.fundsDatra = list;
        }
      });
    },
@@ -347,20 +357,25 @@
<style lang="scss" scoped>
.assets-box {
  header {
    padding: 100px 0 0px;
    // 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;
@@ -368,6 +383,7 @@
      margin-bottom: 30px;
    }
  }

  .right {
    text-align: right;
  }
@@ -377,17 +393,20 @@
  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;
      // color: #dedbe2;
    }
  }

  .tabs-box {
    display: flex;
    color: #dedbe2;
    // color: #dedbe2;
    font-weight: 400;
    flex: 1;
    justify-content: space-between;
@@ -405,22 +424,30 @@
    margin: 0 15px;
    padding: 30px 30px;
    margin-top: 40px;

    .title-main {
      color: #807cf7;
      font-weight: 900;
      margin-bottom: 20px;
    }

    .title {
      color: #dedbe2;
      // color: #dedbe2;
      margin-bottom: 10px;
    }

    .text {
      font-weight: 900;
    }
  }
}

::v-deep .van-loading {
  text-align: center;
  margin: 30px 0;
}

.items-center {
  background: #f5f5f5;
}
</style>