metaforce-scan/src/pages/TableBlock/Tokens/details.vue

<template>
  <div
    class="tableBlock-tabs mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
  >
    <div class="flex items-center">
      <el-icon
        :color="'#FFFFFF'"
        class="cursor-pointer icon-size"
        @click="goBack"
        ><ArrowLeftBold
      /></el-icon>
      <span
        class="desktop:text-[26px] mobile:text-[18px] text-white font-medium desktop:ml-[12px] mobile:ml-[8px] cursor-pointer"
        @click="goBack"
        >Adress Details</span
      >
    </div>
    <div class="mobile:hidden mt-[38px]">
      <token-details />
    </div>
    <div class="desktop:hidden mt-[38px]">
      <token-mobile-details />
    </div>
    <!-- 下面的选项 -->
    <div
      class="flex flex-1 w-full bg-black-19191A mt-[56px] rounded-[10px] overflow-hidden"
    >
      <div class="details-tabs w-full">
        <div class="flex flex-1 flex-row mobile:overflow-x-scroll">
          <p
            class="p-[20px] whitespace-normal text-gray-BBB cursor-pointer focus-visible:outline-hidden"
            :class="active === 'transactions' ? 'details-tabs-active' : ''"
            @click="changeTabs('transactions')"
          >
            <span>Transactions</span>
          </p>
          <p
            class="p-[20px] whitespace-normal text-gray-BBB cursor-pointer focus-visible:outline-hidden"
            :class="active === 'tokenTransfers' ? 'details-tabs-active' : ''"
            @click="changeTabs('tokenTransfers')"
          >
            Token&nbsp;Transfers
          </p>
          <p
            class="p-[20px] whitespace-normal text-gray-BBB cursor-pointer focus-visible:outline-hidden"
            :class="
              active === 'internalTransactions' ? 'details-tabs-active' : ''
            "
            @click="changeTabs('internalTransactions')"
          >
            Internal&nbsp;transactions
          </p>
        </div>
        <div>
          <div :class="active === 'transactions' ? 'flex' : 'hidden'">
            <div
              class="flex flex-1 justify-center items-center h-[210px]"
              v-if="transactionsData.length == 0"
            >
              <p class="text-white text-[14px] font-normal opacity-80">
                There are no transactions for this Transactions.
              </p>
            </div>
            <div
              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden w-full"
              v-if="transactionsData.length != 0"
            >
              <transfers-row
                v-for="(item, index) in transactionsData"
                :key="`${index}${item.title}`"
                :blockNumber="item.blockNumber"
                :title="item.title"
                :value1="item.value1"
                :value2="item.value2"
                :value3="item.value3"
                :state="item.state"
              />
              <upper-lower-switch
                :current="`page${pageTransactions}`"
                :class="'mt-[20px] justify-end'"
                :space-class="''"
                :prev="handleTransactionsPrev"
                :next="handleTransactionsNext"
              />
            </div>
            <div
              class="mt-[10px] rounded-[10px] px-[20px] desktop:hidden pb-[20px] w-full"
              v-if="transactionsData.length != 0"
            >
              <mobile-row
                v-for="(item, index) in transactionsData"
                :key="`${index}${item.title}`"
                :title="item.title"
                :value1="item.value1"
                :value2="item.value2"
                :value3="item.value3"
                :state="item.state"
              />
            </div>
          </div>
          <div :class="active === 'tokenTransfers' ? 'flex' : 'hidden'">
            <div
              class="flex flex-1 justify-center items-center h-[210px]"
              v-if="tokensData.length == 0"
            >
              <p class="text-white text-[14px] font-normal opacity-80">
                There are no transactions for this block.
              </p>
            </div>
            <div
              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden w-full"
              v-if="tokensData.length != 0"
            >
              <transfers-row
                v-for="(item, index) in tokensData"
                :key="`${index}${item.title}`"
                :blockNumber="item.blockNumber"
                :title="item.title"
                :value1="item.value1"
                :value2="item.value2"
                :value3="item.value3"
                :state="item.state"
              />
            </div>
            <div
              class="mt-[10px] rounded-[10px] px-[20px] desktop:hidden pb-[20px] w-full"
              v-if="tokensData.length != 0"
            >
              <mobile-row
                v-for="(item, index) in tokensData"
                :key="`${index}${item.title}`"
                :title="item.title"
                :value1="item.value1"
                :value2="item.value2"
                :value3="item.value3"
                :state="item.state"
              />
            </div>
          </div>
          <div :class="active === 'internalTransactions' ? 'flex' : 'hidden'">
            <div
              class="flex flex-1 justify-center items-center h-[210px]"
              v-if="internalData.length == 0"
            >
              <p class="text-white text-[14px] font-normal opacity-80">
                There are no transactions for this internal.
              </p>
            </div>
            <div
              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden w-full"
              v-if="internalData.length != 0"
            >
              <transfers-row
                v-for="(item, index) in internalData"
                :key="`${index}${item.title}`"
                :blockNumber="item.blockNumber"
                :title="item.title"
                :value1="item.value1"
                :value2="item.value2"
                :value3="item.value3"
                :state="item.state"
              />
              <upper-lower-switch
                :current="`page${pageInternal}`"
                :class="'mt-[20px] justify-end'"
                :space-class="''"
                :prev="handleInternalPrev"
                :next="handleInternalNext"
              />
            </div>
            <!-- 移动端 -->
            <div
              class="mt-[10px] rounded-[10px] px-[20px] desktop:hidden pb-[20px] w-full"
              v-if="internalData.length != 0"
            >
              <mobile-row
                v-for="(item, index) in internalData"
                :key="`${index}${item.title}`"
                :title="item.title"
                :blockNumber="item?.blockNumber"
                :value1="item.value1"
                :value2="item.value2"
                :value3="item.value3"
                :state="item.state"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowLeftBold } from '@element-plus/icons-vue'
import {
  getFindReceiptByAddressPage,
  getFindTransactionListPage,
} from '@src/api/TransactionsController'
import TokenDetails from '@src/components/table/desktop/tokensDetails.vue'
import TokenMobileDetails from '@src/components/table/mobile/tokensDetails.vue'
import mobileRow from '@src/pages/VNFT/mobileRow.vue'

import { onMounted, ref, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const active = ref('internalTransactions')
let internalData = ref<any>([])
let transactionsData = ref<any>([])
let tokensData = ref<any>([])

let currentHash = ref('')
let pageInternal = ref(1)
let pageTransactions = ref(1)

// 请求internal数据
const requestInternal = async (address: string, page?: any) => {
  const params = {
    address,
    isContract: 1,
    pageNum: page || 1,
    pageSize: 5,
  }
  const res = await getFindTransactionListPage(params)
  if (res.data.rows.length == 0) {
    return false
  }
  internalData.value = res.data.rows.map((item: any) => {
    return {
      title: `Block #${item.blockNumber}`,
      blockNumber: item?.blockNumber,
      value1: item?.hash,
      value2: item?.from,
      value3: item?.to,
      state: item?.status === '0x1' ? 'Success' : 'Faild',
    }
  })
  return true
}
// 请求transactionsData的数据
const requestTransactions = async (address: string, page?: any) => {
  const params = {
    address,
    isContract: 2,
    pageNum: page,
    pageSize: 5,
  }
  const res = await getFindTransactionListPage(params)
  if (res.data.rows.length == 0) {
    return false
  }
  transactionsData.value = res.data.rows.map((item: any) => {
    return {
      title: `Block #${item?.blockNumber}`,
      blockNumber: item?.blockNumber,
      value1: item?.hash,
      value2: item?.from,
      value3: item?.to,
      state: item?.status === '0x1' ? 'Success' : 'Faild',
    }
  })
  return true
}
// 请求tokensData的数据
const rqeuestTokensData = async (address: string) => {
  const params = {
    address,
    pageNum: 1,
    pageSize: 20,
    filterType: 'all',
  }
  const res = await getFindReceiptByAddressPage(params)
  tokensData.value = res.data.rows.map((item: any) => {
    return {
      title: `Block #${item.blockNumber}`,
      blockNumber: item?.blockNumber,
      value1: item?.transactionHash,
      value2: item?.from,
      value3: item?.to,
      state: item?.status === '0x1' ? 'Success' : 'Faild',
    }
  })
  console.log(res)
}
watchEffect(() => {
  if (route.path.split('/')?.[1] != 'tokens') {
    return
  }
  // 获取地址
  let address = route.path.split('/')?.[2] || undefined
  if (address == undefined) {
    return
  }
  currentHash.value = address
  // 根据地址请求tab
  requestInternal(address)
  requestTransactions(address)
  rqeuestTokensData(address)
})

// 路由回退
const goBack = () => router.replace('/tokens')
// 修改tabs
const changeTabs = (current: string) => {
  active.value = current
}
// 上一页
const handleInternalPrev = async () => {
  if (pageInternal.value == 1) {
    return
  }
  if (currentHash.value == '' || currentHash.value == undefined) {
    return
  }
  const res = await requestInternal(currentHash.value, pageInternal.value - 1)
  if (res) {
    pageInternal.value = pageInternal.value - 1
  }
}

// 下一页
const handleInternalNext = async () => {
  if (currentHash.value == '' || currentHash.value == undefined) {
    return
  }
  const res = await requestInternal(currentHash.value, pageInternal.value + 1)
  if (res) {
    pageInternal.value = pageInternal.value + 1
  }
}

// 上一页
const handleTransactionsPrev = async () => {
  if (pageTransactions.value == 1) {
    return
  }
  if (currentHash.value == '' || currentHash.value == undefined) {
    return
  }
  const res = await requestTransactions(
    currentHash.value,
    pageTransactions.value - 1
  )
  if (res) {
    pageTransactions.value = pageTransactions.value - 1
  }
}

// 下一页
const handleTransactionsNext = async () => {
  if (currentHash.value == '' || currentHash.value == undefined) {
    return
  }
  const res = await requestTransactions(
    currentHash.value,
    pageTransactions.value + 1
  )
  if (res) {
    pageTransactions.value = pageTransactions.value + 1
  }
}
</script>

<style lang="scss">
@import '../index.scss';
.details-tabs {
  .details-tabs-active {
    background: #5834b6;
    color: #ffffff;
  }
}
</style>