数据分页

src/components/Pagination.vue

@@ -2,14 +2,16 @@
   <div class="records">
     <div class="head">
       <h2>{{ title }}</h2>
-      <el-pagination
-          background
-          layout="total,prev,pager,next,jumper"
-          :total="length"
-          :page-size="pageSize"
-          @current-change="handleCurrentChange"
-      >
-      </el-pagination>
+      <slot name="page">
+        <el-pagination
+            background
+            layout="total,prev,pager,next,jumper"
+            :total="length"
+            :page-size="pageSize"
+            @current-change="handleCurrentChange"
+        >
+        </el-pagination>
+      </slot>
     </div>
 
     <slot name="default"></slot>

src/views/Address/index.vue

@@ -60,73 +60,83 @@
     </div>
 
     <Pagination
-        :length="balance.txCount"
         :title="`数据记录(` + balance.txCount + `)`"
-        :page-size="pageSize"
-        @current-change="handleCurrentChange"
     >
-      <el-table :data="records" stripe class="table">
-        <template #empty>
-          <el-empty description="暂无数据"></el-empty>
-        </template>
+      <template #page>
+        <el-pagination
+            background
+            :page-size="pageSize"
+            layout="prev,next"
+            :total="balance.txCount"
+            @current-change="handleCurrentChange"
+        >
+        </el-pagination>
+      </template>
+      <template #default>
+        <el-table :data="records" v-loading="loading" stripe class="table">
+          <template #empty>
+            <el-empty description="暂无数据"></el-empty>
+          </template>
 
-        <el-table-column width="34" align="right">
-          <template #default="scope">
-            <el-icon v-if="scope.row.receipt.ty == 1">
-              <Warning class="warning"/>
-            </el-icon>
-          </template>
-        </el-table-column>
+          <el-table-column width="80" prop="height" label="高度"/>
+          <el-table-column width="34" align="right">
+            <template #default="scope">
+              <el-icon v-if="scope.row.receipt.ty == 1">
+                <Warning class="warning"/>
+              </el-icon>
+            </template>
+          </el-table-column>
 
-        <el-table-column label="交易哈希">
-          <template #default="scope">
-            <router-link :to="{name: 'TradeDetail', params: { hash: scope.row.txHash }}">
-              {{ filterHash(scope.row.txHash, 32) }}
-            </router-link>
-          </template>
-        </el-table-column>
-        <el-table-column width="200" label="发送方">
-          <template #default="scope">
-            <router-link :to="{name: 'Address', params: { address: scope.row.fromAddr }}">
-              {{ filterHash(scope.row.fromAddr) }}
-            </router-link>
-          </template>
-        </el-table-column>
+          <el-table-column label="交易哈希">
+            <template #default="scope">
+              <router-link :to="{name: 'TradeDetail', params: { hash: scope.row.txHash }}">
+                {{ filterHash(scope.row.txHash, 32) }}
+              </router-link>
+            </template>
+          </el-table-column>
+          <el-table-column width="200" label="发送方">
+            <template #default="scope">
+              <router-link :to="{name: 'Address', params: { address: scope.row.fromAddr }}">
+                {{ filterHash(scope.row.fromAddr) }}
+              </router-link>
+            </template>
+          </el-table-column>
 
-        <el-table-column width="40" align="center">
-          <template #default="scope">
-            <el-icon v-if="scope.row.fromAddr == address">
-              <DArrowRight/>
-            </el-icon>
-            <el-icon v-else>
-              <DArrowLeft/>
-            </el-icon>
-          </template>
-        </el-table-column>
+          <el-table-column width="40" align="center">
+            <template #default="scope">
+              <el-icon v-if="scope.row.fromAddr == address">
+                <DArrowRight/>
+              </el-icon>
+              <el-icon v-else>
+                <DArrowLeft/>
+              </el-icon>
+            </template>
+          </el-table-column>
 
-        <el-table-column width="200" label="接收方">
-          <template #default="scope">
-            <router-link :to="{name: 'Address', params: { address: scope.row.tx.to }}">
-              {{ filterHash(scope.row.tx.to) }}
-            </router-link>
-          </template>
-        </el-table-column>
-        <el-table-column width="100" label="交易量" align="center">
-          <template #default="scope">
-            {{ scope.row.amount }} {{ parseSymbol(scope.row.assets) }}
-          </template>
-        </el-table-column>
-        <el-table-column width="100" label="手续费" align="center">
-          <template #default="scope">
-            {{ scope.row.tx.feefmt }} {{ parseSymbol(scope.row.assets) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="" label="上链时间" width="165" align="center">
-          <template #default="scope">
-            <TimeFormat :time="scope.row.blockTime"/>
-          </template>
-        </el-table-column>
-      </el-table>
+          <el-table-column width="200" label="接收方">
+            <template #default="scope">
+              <router-link :to="{name: 'Address', params: { address: scope.row.tx.to }}">
+                {{ filterHash(scope.row.tx.to) }}
+              </router-link>
+            </template>
+          </el-table-column>
+          <el-table-column width="100" label="交易量" align="center">
+            <template #default="scope">
+              {{ scope.row.amount }} {{ parseSymbol(scope.row.assets) }}
+            </template>
+          </el-table-column>
+          <el-table-column width="100" label="手续费" align="center">
+            <template #default="scope">
+              {{ scope.row.tx.feefmt }} {{ parseSymbol(scope.row.assets) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="" label="上链时间" width="165" align="center">
+            <template #default="scope">
+              <TimeFormat :time="scope.row.blockTime"/>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
     </Pagination>
   </div>
 </template>
@@ -138,12 +148,12 @@ import { useStore } from '@/store'
 import { AddrOverview, BlockDetail, TokenAssetItem } from '@/types/block'
 import { filterHash, parseSymbol } from '@/utils/filters'
 import { DArrowLeft, DArrowRight, Warning } from '@element-plus/icons'
-import { computed, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 const store = useStore()
 const route = useRoute()
-const address = route.params.address as string
+const address = computed<string>(() => route.params.address as string)
 const pageSize = Number(process.env.VUE_APP_BLOCK_DETAIL_LIST_SIZE)
 
 const balance = ref<AddrOverview>({
@@ -151,61 +161,92 @@ const balance = ref<AddrOverview>({
   reciver: 0,
   txCount: 0
 })
-
-/**
- * 获取地址的基本信息
- */
-block.getAddrOverview(address).then(res => {
-  balance.value.balance = res.result.balance ? res.result.balance / 1e8 : 0
-  balance.value.reciver = res.result.reciver ? res.result.reciver / 1e8 : 0
-  balance.value.txCount = res.result.txCount ? res.result.txCount : 0
-})
-
 const sended = computed(() => balance.value.reciver - balance.value.balance)
 const frozen = ref<number>(0)
-/**
- * 获取冻结的主代币
- */
-block.getAllExecBalance(address).then(res => {
-  if (res.result.execAccount) {
-    frozen.value = res.result.execAccount.find((item: { execer: string }) => item.execer == 'coins').account.frozen / 1e8
+const records = ref<BlockDetail[]>([])
+const token = ref<string>('')
+const assets = ref<TokenAssetItem[]>([])
+const loading = ref<boolean>(false)
+
+watch(route, (to) => {
+  if (to.name == 'Address') {
+    records.value = []
+    initAddressData()
   }
 })
 
-const records = ref<BlockDetail[]>([])
-/**
- * 获取全部交易
- */
-block.getTxByAddr({
-  addr: address,
+onMounted(() => {
+  initAddressData()
+})
+
+const initAddressData = () => {
+  /**
+   * 获取地址的基本信息
+   */
+  block.getAddrOverview(address.value).then(res => {
+    balance.value.balance = res.result.balance ? res.result.balance / 1e8 : 0
+    balance.value.reciver = res.result.reciver ? res.result.reciver / 1e8 : 0
+    balance.value.txCount = res.result.txCount ? res.result.txCount : 0
+  })
+  /**
+   * 获取冻结的主代币
+   */
+  block.getAllExecBalance(address.value).then(res => {
+    if (res.result.execAccount) {
+      frozen.value = res.result.execAccount.find((item: { execer: string }) => item.execer == 'coins').account.frozen / 1e8
+    }
+  })
+
+  block.getAddrTokenAssets(address.value, 'token').then(res => {
+    if (res.error == null) {
+      console.log(res)
+      assets.value = res.result.tokenAssets
+    }
+  })
+  loadTradeList()
+}
+
+const initParams = {
+  addr: address.value,
   flag: 0,
   count: pageSize,
   direction: 0,
   height: -1,
-  index: 1
-}).then(res => {
-  if (res.error == null) {
-    let hashes = res.result.txInfos.map((item: { hash: string }) => item.hash)
-
-    block.getTxByHashes(hashes).then(res => {
-      records.value = res.result.txs
-    })
-  }
-})
-
+  index: 0
+}
+const pageParams = reactive(initParams)
 const handleCurrentChange = (e: number) => {
-  console.log(e)
+  if (e === 1) {
+    pageParams.direction = 0
+    pageParams.height = -1
+  } else {
+    pageParams.direction = 0
+    pageParams.height = records.value[records.value.length - 1].height
+    pageParams.index = records.value[records.value.length - 1].index
+  }
+  console.log(pageParams)
+  records.value = []
+  loadTradeList()
 }
 
-const token = ref<string>('')
-const assets = ref<TokenAssetItem[]>([])
+const loadTradeList = () => {
+  loading.value = true
 
-block.getAddrTokenAssets(address, 'token').then(res => {
-  if (res.error == null) {
-    console.log(res)
-    assets.value = res.result.tokenAssets
-  }
-})
+  block.getTxByAddr(pageParams).then(res => {
+    if (res.error == null) {
+      let hashes = res.result.txInfos.map((item: { hash: string }) => item.hash)
+
+      block.getTxByHashes(hashes).then(res => {
+        console.log(' pageParams.height ', pageParams.height)
+        records.value = res.result.txs
+      }).finally(() => {
+        loading.value = false
+      })
+    } else {
+      loading.value = false
+    }
+  })
+}
 </script>
 
 <style scoped lang="less">