update

src/types/block.d.ts

@@ -3,3 +3,13 @@ export declare type AssetType = {
     exec: string
     symbol: string
 }
+
+export declare type BlockOverview = {
+    height: number
+    hash: string
+    txCount: number
+    txHash: string
+    parentHash: string
+    blockTime: number
+    stateHash: string
+}

src/utils/filters.ts

@@ -3,6 +3,9 @@ import store from '@/store'
 
 export const filterHash = (str: string, num?: number): string => {
     const length = num || 16
+    if (!str) {
+        return ''
+    }
     return str.substr(0, length) + '...' + str.substr(-4)
 }
 

src/views/Block/detail.vue

@@ -28,7 +28,14 @@
           <div class="item">
             <img src="../../assets/dots/green.png">
             <label>上个区块</label>
-            <span>{{ (info.height - 1) > 0 ? info.height - 1 : '无' }}</span>
+            <span v-if="info.height -1 > 0">
+              <router-link :to="{name: 'BlockDetail', params: {hash: info.parentHash}}">
+                {{ info.height - 1 }}
+              </router-link>
+            </span>
+            <span v-else>
+              无
+            </span>
           </div>
         </div>
         <div class="right">
@@ -45,15 +52,22 @@
           <div class="item">
             <img src="../../assets/dots/red.png">
             <label>下个区块</label>
-            <span>{{ (info.height + 1) > maxHeight ? '无' : (info.height + 1) }}</span>
+            <span v-if="next.height">
+              <router-link :to="{name: 'BlockDetail', params: {hash: next.hash}}">
+                {{ next.height }}
+              </router-link>
+            </span>
+            <span v-else>
+              无
+            </span>
           </div>
         </div>
       </div>
     </div>
 
     <Pagination
-        :length="maxHeight"
-        :title="`全部区块(` + maxHeight + `)`"
+        :length="info.txCount"
+        :title="`交易记录(` + info.txCount + `)`"
         :page-size="pageSize"
         @current-change="handleCurrentChange"
     >
@@ -99,36 +113,64 @@
 <script lang="ts" setup>
 import { block } from '@/api'
 import { Breadcrumb, Pagination } from '@/components'
-import { useStore } from '@/store'
+import { BlockOverview } from '@/types/block'
 import { filterHash, parseSymbol } from '@/utils/filters'
-import { computed, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-const store = useStore()
 const pageSize = 20
 
-const maxHeight = computed<number>(() => store.getters.maxHeight)
+onMounted(() => {
+  loadBlockData()
+})
+
+watch(route, (to) => {
+  if (to.name === 'BlockDetail') {
+    loadBlockData()
+  }
+})
 
 const hash: string = route.params.hash as string
 
-const currentPage = ref<number>(1)
 const handleCurrentChange = (e: number) => {
   console.log(e)
 }
 
-const info = ref({})
+const info = ref<BlockOverview>({
+  height: 0,
+  hash: '',
+  txCount: 0,
+  txHash: '',
+  parentHash: '',
+  blockTime: 0,
+  stateHash: ''
+})
+const next = ref({
+  height: 0,
+  hash: ''
+})
 const records = ref([])
 
-block.getBlockOverview(hash).then(res => {
-  console.log(res)
+const loadBlockData = () => {
+  console.log('jiazai shuju ')
 
-  info.value = res.result.head
+  block.getBlockOverview(hash).then(res => {
+    console.log('更新INFO A ')
+    info.value = res.result.head
 
-  block.getTxByHashes(res.result.txHashes).then(txs => {
-    records.value = txs.result.txs
+    block.getTxByHashes(res.result.txHashes).then(txs => {
+      records.value = txs.result.txs
+    })
+
+    block.getBlockHash(res.result.head.height + 1).then(nxt => {
+      if (nxt.error == null) {
+        next.value.height = res.result.head.height + 1
+        next.value.hash = nxt.result.hash
+      }
+    })
   })
-})
+}
 </script>
 
 <style scoped lang="less">