dcc
2024-06-07 d5381ec06ab5f549fade867c3a874de613bdd5d4
src/page/assetsCenter/index.vue
@@ -2,30 +2,33 @@
  <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 span="12">
          <span class="title">{{ $t("总资产") }}</span>
        </van-col>
        <div class="pt">Total Assets Valuation</div>
        <div class="pt">0</div>
        <div class="pt">≈ 0.00USD</div>
        <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">
          ≈ {{ currency.currency_symbol
          }}{{
            assetsFunds.total
              ? (assetsFunds.total * currency.rate).toFixed(2)
              : " --"
          }}
        </div>
      </van-row>
      <van-row gutter="20" class="but-box">
        <van-col span="8" v-for="item in tabList1" :key="item.id">
        <van-col
          span="8"
          v-for="item in tabList1"
          :key="item.id"
          @click="routerList(item)"
        >
          <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">
@@ -39,48 +42,86 @@
          {{ item.text }}
        </div>
      </div>
      <div class="tabs-content">
        <div>Spot Total Assets</div>
        <div class="tabs-name">0 USDT ≈ 0.00 $</div>
        <div>{{ allName }} {{ $t("总资产") }}</div>
        <div class="tabs-name">
          {{ allAssets }} ≈ {{ currency.currency_symbol }}{{ allAssetsRate }}
        </div>
      </div>
    </div>
    <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>
      <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>
            <van-col span="8">
              <div class="title">{{ $t("可用") }}</div>
              <div class="text">
                {{
                  item.usable.toFixed(
                    item.symbol.toUpperCase() === "USDT" ? 6 : 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" ? 6 : 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" ? 6 : 8
                  ) || "0.0"
                }}
              </div>
            </van-col>
          </van-row>
        </div>
      </template>
      <!--永续合约持有仓位-->
      <div class="px-30">
        <template v-if="active === 4">
          <PerpetualPositionList
            :list-data="funds"
            @sell="onRecall"
          ></PerpetualPositionList>
        </template>
        <!--交割合约持有仓位-->
        <template v-if="active === 2">
          <futrue-hold-list :list-data="funds" />
        </template>
        <template v-if="active === 5">
          <financialList :list="funds" :btnShow="true" />
        </template>
      </div>
    </main>
  </div>
@@ -88,247 +129,217 @@
<script>
import { _getAllWallet } from "@/API/fund.api";
import Axios from "@/API/assets";
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,
    futrueHoldList,
    financialList,
  },
  data() {
    return {
      keywords: "",
      loading: true,
      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") },
        {
          id: 1,
          text: this.$t("充币"),
          // route: "/recharge/rechargePage?symbol=usdt",
          route: "/recharge/rechargeList",
        },
        {
          id: 2,
          text: this.$t("提币"),
          route: "/withdraw/withdrawPage",
        },
        // {
        //   id: 4,
        //   text: this.$t("闪兑"),
        //   route: "/exchange/exchangePage",
        // },
        {
          id: 5,
          text: this.$t("货币理财"),
          route: "/financialHistory",
          query: {
            type: 0,
          },
        },
        {
          id: 6,
          text: this.$t("矿池理财"),
          route: "/financialHistory",
          query: {
            type: 1,
          },
        },
      ],
      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") },
        { id: 1, text: this.$t("现货") },
        { id: 2, text: this.$t("交割合约") },
        { id: 4, text: this.$t("永续合约") },
        { id: 5, text: this.$t("理财") },
      ],
      funds: [
        {
          volume: 0,
          symbol: "usdt",
          usable: 0,
          freeze_amount: 0,
          name: "USDT/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "knc",
          usable: 0,
          freeze_amount: 0,
          name: "KNC/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "vet",
          usable: 0,
          freeze_amount: 0,
          name: "VET/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          volume: 0,
          symbol: "doge",
          usable: 0,
          freeze_amount: 0,
          name: "DOGE/USDT",
          usdt: 0,
          lock_amount: 0,
          frozenAmount: 0,
        },
        {
          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,
        },
      ],
      funds: [],
      fundsDatra: [],
      tabListData: {},
      assetsFunds: {},
    };
  },
  created() {
    // this.getAssets();
    this.getAssetsFunds();
    this.getAssets();
  },
  mounted() {
    this.GET_UERS_KYC();
  },
  computed: {
    ...mapGetters("home", ["currency", "theme"]),
    allAssets() {
      if (this.assetsFunds.total) {
        switch (this.active) {
          case 1:
            return this.assetsFunds.money_all_coin;
          case 2:
            return this.assetsFunds.money_futures;
          case 4:
            return this.assetsFunds.money_contract;
          case 5:
            return (
              Number(this.assetsFunds.money_finance) +
              Number(this.assetsFunds.money_miner)
            );
          default:
            break;
        }
      }
      return "--";
    },
    allName() {
      // console.log(this.tabList);
      const arr = this.tabList.filter((item) => item.id === this.active);
      return arr[0].text;
    },
    allAssetsRate() {
      if (this.assetsFunds.total) {
        switch (this.active) {
          case 1:
            return (
              this.assetsFunds.money_all_coin * this.currency.rate
            ).toFixed(2);
          case 2:
            return (
              this.assetsFunds.money_futures * this.currency.rate
            ).toFixed(2);
          case 4:
            return (
              this.assetsFunds.money_contract * this.currency.rate
            ).toFixed(2);
          case 5:
            return (
              (Number(this.assetsFunds.money_finance) +
                Number(this.assetsFunds.money_miner)) *
              this.currency.rate
            ).toFixed(2);
          default:
            break;
        }
      }
      return "--";
    },
  },
  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 });
    },
    onTab() {
      getfinacialProductsBought({
        page_no: "",
        state: "1",
      }).then((res) => {
        this.loading = false;
        if (this.active === 5) {
          this.funds = [...this.funds, ...res];
        }
      });
      getMachineBought({
        page_no: 1,
        state: 1,
      }).then((res) => {
        this.loading = false;
        if (this.active === 5) {
          this.funds = [...this.funds, ...res];
        }
      });
    },
    onRecall() {
      // 撤单or 平仓 evt
      // this.clearTimer()
      // this[this.curTab](this.symbol)
      // this.fetchOrderListHold()
    },
    async fetchFutrueHoldList() {
      // 获取交割当前持仓
      const res = await _futrueOrderList();
      // const { code, data } = res;
      this.loading = false;
      if (this.active === 2) {
        this.funds = res;
      }
    },
    // 获取永续当前持仓
    async get_orderListHold() {
      const res = await _orderListHold();
      this.loading = false;
      if (this.active === 4) {
        this.funds = res;
      }
    },
    // 获取总资产
    async getAssetsFunds() {
      const res = await Axios.GetAllAssets();
      const { code, data } = res;
      if (code) {
        this.assetsFunds = data;
      }
    },
    // 切换
    activeCheng(item) {
      this.active = item.id;
      this.funds = [];
      this.loading = true;
      if (item.id === 4) {
        this.get_orderListHold();
      } else if (item.id === 2) {
        this.fetchFutrueHoldList();
      } else if (item.id === 1) {
        this.getAssets();
      } else if (item.id === 5) {
        this.onTab();
      }
    },
    getAssets() {
      _getAllWallet().then((res) => {
@@ -336,9 +347,12 @@
          usdt: res.usdt,
          lock_money: res.lock_money,
        };
        this.loading = false;
        let list = res.extends;
        this.funds = list;
        console.log(list);
        if (this.active === 1) {
          this.funds = list;
          this.fundsDatra = list;
        }
      });
    },
    goRouter(parmas) {
@@ -427,4 +441,12 @@
    }
  }
}
::v-deep .van-loading {
  text-align: center;
  margin: 30px 0;
}
.items-center {
  background: #f5f5f5;
}
</style>