metaforce-scan/src/pages/BitcNFt/centerContent.vue

<template>
  <div
    class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
  >
    <Cards
      :title="cardOptions.title"
      :value="value"
      :options="cardOptions.options"
      :totalSupply="cardOptions.totalSupply"
      :qrcodeurl="'https://baidu.com'"
    />
    <div
      class="flex flex-1 w-full bg-black-19191A mt-[56px] rounded-[10px] overflow-hidden"
    >
      <div class="details-tabs w-full">
        <el-tabs v-model="active" class="w-full">
          <el-tab-pane label="Token Transfers" name="tokenTransfers">
            <div class="flex flex-1 justify-center items-center h-[210px]">
              <p class="text-white text-[14px] font-normal opacity-80">
                There are no transactions for this Token Transfers.
              </p>
            </div>
            <div
              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden"
              v-if="transfersRows.length != 0"
            >
              <transfers-row
                v-for="(item, index) in transfersRows"
                :key="`${index}${item.title}`"
                :title="item.title"
                :value1="item.value1"
                :value2="item.value2"
                :value3="item.value3"
                :state="item.state"
              />
            </div>
          </el-tab-pane>
          <!-- Token Holders -->
          <el-tab-pane label="Token Holders" name="tokenHolders">
            <div
              class="flex flex-1 justify-center items-center h-[210px]"
              v-if="holdrersRows.length == 0"
            >
              <p class="text-white text-[14px] font-normal opacity-80">
                There are no transactions for this Token Holders.
              </p>
            </div>
            <div
              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden"
              v-if="holdrersRows.length != 0"
            >
              <holders-row
                v-for="(item, index) in holdrersRows"
                :key="`${index}${item.title}`"
                :title="item.title"
                :value1="item.value1"
                :value2="item.value2"
                :value3="item.value3"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getContractAddressInfoList,
  getContractHoldingQuantity,
} from '@src/api/AddressController'
import { onMounted, reactive, ref } from 'vue'
import holdersRow from './holdersRow.vue'
import transfersRow from '../VNFT/transfersRow.vue'
import Cards from './cards.vue'
import { getFindReceiptByAddressPage } from '@src/api/TransactionsController'
const active = ref('tokenTransfers')
const value = '0x4f2c168174266781008ba5d722d1bdc9ee52a874'

const cardOptions = reactive({
  title: '',
  options: [
    {
      key: 'ERC721',
      value: '',
    },
    {
      key: 'Addresses',
      value: '',
    },
    {
      key: 'Transfers',
      value: '',
    },
  ],
  totalSupply: '',
})
const holdrersRows = ref<any>([])
const transfersRows = ref<any>([])
// 请求代币信息
const requestInfo = async () => {
  const params = {
    contractAddress: value,
  }
  const res = await getContractAddressInfoList(params)
  const { data } = res
  cardOptions.title = data.name
  cardOptions.totalSupply = `${data.totalSupply} ${data.name}`
  cardOptions.options[0].key = data.tokenType
  cardOptions.options[1].value = data.addressesCount
  cardOptions.options[2].value = data.transfers
}
// 请求Token Holders
const requestHolders = async () => {
  const params = {
    pageNum: 1,
    pageSize: 10,
    contractAddress: value,
  }
  const res = await getContractHoldingQuantity(params)
  holdrersRows.value = res.data.rows.map((item: any) => {
    return {
      title: item?.holdAddress,
      value1: item?.holdingQuantity,
      value2: item?.contractName,
      value3: item?.percentage,
    }
  })
}
// 请求Token Transfers
const requestTransfers = async () => {
  const params = {
    address: value,
    pageNum: 1,
    pageSize: 10,
    filterType: 'all',
  }
  const res = await getFindReceiptByAddressPage(params)
  transfersRows.value = res.data.rows.map((item: any) => {
    return {
      title: `Block #${item.blockNumber}`,
      value1: item?.blockHash,
      value2: item?.from,
      value3: item?.to,
      state: item?.status === '0x1' ? 'Success' : 'Faild',
    }
  })
  console.log(res)
}
onMounted(() => {
  requestInfo()
  requestHolders()
  requestTransfers()
})
</script>

<style scoped></style>