首页最新交易的数据获取

src/hooks/useGetMaxHeight.ts

@@ -1,9 +1,10 @@
 import { block } from '@/api'
 import vuex from '@/store'
 import { ElMessage } from 'element-plus'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
 
-export default function () {
+export default () => {
     const maxHeight = computed(() => vuex.getters.maxHeight)
 
     // eslint-disable-next-line no-undef
@@ -29,7 +30,7 @@ export default function () {
         })
     }
 
-    onBeforeUnmount(() => {
+    onBeforeRouteLeave(() => {
         clearInterval(Number(interval.value))
     })
 

src/views/Home/index.vue

@@ -33,12 +33,37 @@
         <router-link :to="{name: 'Trade'}">查看全部</router-link>
       </div>
 
-      <div class="items">
+      <div class="items" v-loading="tradeLoading">
         <div class="item" v-for="(item, index) in tradeList" :key="index">
-          {{ item.from }}
-          {{ item.to }}
-          {{ item.hash }}
-          {{ item.feefmt }}
+          <div class="hash">
+            <div>
+              交易哈希：
+              <router-link :to="{name: 'TradeDetail', params: {hash: item.txHash}}">
+                {{ filterHash(item.txHash, 10) }}
+              </router-link>
+            </div>
+            <div class="time">
+              <TimeFormat :time="item.blockTime"/>
+            </div>
+          </div>
+          <div class="addr">
+            <div>
+              发送方：
+              <router-link :to="{name: 'Address', params: {address: item.fromAddr}}">
+                {{ filterHash(item.fromAddr, 10) }}
+              </router-link>
+            </div>
+            <div>
+              接收方：
+              <router-link :to="{name: 'Address', params: {address: item.tx.to}}">
+                {{ filterHash(item.tx.to, 10) }}
+              </router-link>
+            </div>
+          </div>
+          <div class="asset">
+            <div>交易资产</div>
+            <div>{{ item.amount }} {{ parseSymbol(item.assets) }}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -56,7 +81,7 @@ import { block } from '@/api'
 import { Banner, TimeFormat } from '@/components'
 import useGetMaxHeight from '@/hooks/useGetMaxHeight'
 import { BlockItem } from '@/types/block'
-import { filterHash } from '@/utils/filters'
+import { filterHash, parseSymbol } from '@/utils/filters'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -65,6 +90,7 @@ const { maxHeight } = useGetMaxHeight()
 const pageSize = Number(process.env.VUE_APP_HOME_LIST_SIZE)
 
 const blockLoading = ref<boolean>(true)
+const tradeLoading = ref<boolean>(true)
 
 onMounted(() => {
   getBlockList()
@@ -96,31 +122,30 @@ const getBlockList = () => {
 
   block.getHeaders(start, maxHeight.value, false).then(res => {
     blockList.value = res.result.items.reverse()
+    getTradeList()
   }).finally(() => {
     blockLoading.value = false
   })
-  // block.getBlocks(start, maxHeight.value, false).then(res => {
-  //   res.result.items.reverse().forEach((item) => {
-  //
-  //     blockList.value.push({
-  //       height: item.block.height,
-  //       blockTime: item.block.blockTime,
-  //       txCount: item.block.txs.length,
-  //       // hash: block.getBlockHash(item.block.height)
-  //     })
-  //
-  //     // block.getBlockHash(item.block.height).then(hash => {
-  //     //   blockList.value.push({
-  //     //     height: item.block.height,
-  //     //     blockTime: item.block.blockTime,
-  //     //     txCount: item.block.txs.length,
-  //     //     hash: hash.result.hash
-  //     //   })
-  //     // })
-  //     tradeList.value.push(...item.block.txs)
-  //     console.log(tradeList.value)
-  //   })
-  // })
+}
+
+async function getTradeList () {
+  let txHashes = []
+  for (let i = 0; i < blockList.value.length; i++) {
+    let res = await block.getBlockOverview(blockList.value[i].hash)
+    txHashes.push(...res.result.txHashes)
+
+    if (txHashes.length > pageSize) {
+      txHashes = txHashes.slice(0, 6)
+      break
+    }
+  }
+
+  block.getTxByHashes(txHashes).then(res => {
+    console.log(res.result.txs)
+    tradeList.value = res.result.txs
+  }).finally(() => {
+    tradeLoading.value = false
+  })
 }
 </script>
 
@@ -161,6 +186,10 @@ const getBlockList = () => {
         height: 90px;
         padding: 16px;
         display: flex;
+
+        .time {
+          color: #9ea2a9;
+        }
       }
     }
   }
@@ -198,18 +227,26 @@ const getBlockList = () => {
 
         .num {
           color: #6368de;
+          margin-right: 16px;
         }
 
-        .time {
-          margin-left: 16px;
-          color: #9ea2a9;
-        }
       }
     }
   }
 
   .trades {
 
+    .item {
+      justify-content: space-between;
+
+      .hash,
+      .addr,
+      .asset {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+    }
   }
 }
 

src/views/Token/index.vue

@@ -16,7 +16,11 @@
           </router-link>
         </template>
       </el-table-column>
-      <el-table-column prop="total" label="发行数量"/>
+      <el-table-column label="发行数量">
+        <template #default="scope">
+          {{ (scope.row.total / 1e8).toFixed(2) }}
+        </template>
+      </el-table-column>
       <el-table-column label="发行时间" width="165" align="center">
         <template #default="scope">
           <TimeFormat :time="Number(scope.row.createdTime)"/>
@@ -36,7 +40,7 @@ export default {
 import { block } from '@/api'
 import { Breadcrumb, TimeFormat } from '@/components'
 import { filterHash } from '@/utils/filters'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 
 const tokens = ref([])
 

src/views/Trade/detail.vue

@@ -110,7 +110,6 @@ const detail = ref<BlockDetail>({
 } as BlockDetail)
 const blockHash = ref('')
 block.queryTransaction(route.params.hash as string).then(res => {
-  console.log(res)
   detail.value = res.result
 
   block.getBlockHash(res.result.height).then(res => {