fix

2021-09-26 17:30:54 +08:00
parent 527dd1fc75
commit ad8a7edf66
11 changed files with 160 additions and 62 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,4 +54,25 @@ a {
  text-decoration: none;
  color: #2055ca;
 }
+
+// 记录列表的样式
+.records {
+  margin-top: 30px;
+  border: 1px solid #ebeff1;
+
+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 80px;
+    padding: 0 32px;
+    border-bottom: 1px solid #ececec;
+    background: #FFFFFF;
+
+    h2 {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}
 </style>
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -1,15 +1,5 @@
 <template>
  <div class="banner">
-    <div class="left-trans">
-      <!--      <div class="animation-area flex-between-stright">-->
-      <!--        <img src="../../../assets/img/computer/henxian-zuo.gif" class="line-left" alt="">-->
-      <!--        <img src="../../../assets/img/computer/box.png" class="box-left" alt="">-->
-      <!--        <div class="circle-area">-->
-      <!--          <img src="../../../assets/img/computer/cicle-out.png" class="left-out-cicle" alt="">-->
-      <!--          <img src="../../../assets/img/computer/cicle-inner.png" class="left-inner-cicle" alt="">-->
-      <!--        </div>-->
-      <!--      </div>-->
-    </div>
    <div class="middle">
      <div class="search-box">
        <h1>区块链浏览器</h1>
@@ -24,17 +14,6 @@
          <div class="search-btn" @click="onSearch">搜索</div>
        </div>
      </div>
-      <!-- <chain-info></chain-info> -->
-    </div>
-    <div class="right-trans">
-      <!--      <div class="animation-area flex-between-stright">-->
-      <!--        <div class="circle-area">-->
-      <!--          <img src="../../../assets/img/computer/cicle-out.png" class="right-out-cicle" alt="">-->
-      <!--          <img src="../../../assets/img/computer/cicle-inner.png" class="right-inner-cicle" alt="">-->
-      <!--        </div>-->
-      <!--        <img src="../../../assets/img/computer/box.png" class="box-right" alt="">-->
-      <!--        <img src="../../../assets/img/computer/henxian-you.gif" class="line-right" alt="">-->
-      <!--      </div>-->
    </div>
  </div>
 </template>
@@ -55,7 +34,7 @@ const onSearch = () => {

  if (searchKey.value === '') {
    return ElMessage.warning({
-      message:'请输入 地址/哈希/区块高度',
+      message: '请输入 地址/哈希/区块高度',
      offset: 300
    })
  }
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="records">
+    <div class="head">
+      <h2>交易记录</h2>
+      <el-pagination
+          background
+          layout="total, prev, pager, next, jumper"
+          :total="length"
+          @current-change="handleCurrentChange"
+      >
+      </el-pagination>
+    </div>
+
+    <slot name="default"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  length: {
+    type: Number,
+    default: 0
+  },
+  currentPage: {
+    type: Number,
+    default: 0
+  }
+})
+
+const handleCurrentChange = () => {
+  console.log(props.currentPage.value)
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,11 +3,13 @@ import Breadcrumb from './Breadcrumb.vue'
 import Footer from './Footer.vue'
 import Header from './Header.vue'
 import Nav from './Nav.vue'
+import Pagination from './Pagination.vue'

-export default {
+export {
    Banner,
    Breadcrumb,
    Footer,
    Header,
-    Nav
+    Nav,
+    Pagination
 }
--- a/src/types/block.d.ts
+++ b/src/types/block.d.ts
@@ -0,0 +1,5 @@
+export declare type AssetType = {
+    amount: number
+    exec: string
+    symbol: string
+}
--- a/src/utils/filters.ts
+++ b/src/utils/filters.ts
@@ -1,8 +1,15 @@
-export const filterHash = (str: string, num?: number) => {
+import { AssetType } from '@/types/block'
+
+export const filterHash = (str: string, num?: number): string => {
    const length = num || 16
    return str.substr(0, length) + '...' + str.substr(-4)
 }

-export default {
-    filterHash
+// 解析资产符号
+export const parseSymbol = (assets?: AssetType[]): string => {
+    if (assets) {
+        return assets[0].symbol
+    } else {
+        return ''
+    }
 }
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,6 +1,6 @@
 import vuex from '@/store'
 import axios, { AxiosRequestConfig } from 'axios'
-import router from '../router'
+import router from '@/router'

 const request = axios.create({
    baseURL: process.env.VUE_APP_API_URL,
--- a/src/views/Address/index.vue
+++ b/src/views/Address/index.vue
@@ -1,23 +1,83 @@
 <template>
  <div class="container">
    <Breadcrumb :path="[{name: '地址信息'}]"/>
-
    <div>
-      地址
+      地址 {{ balance.addr }}
    </div>
+    <div>
+      地址 {{ balance.balance }}
+    </div>
+    <div>
+      地址 {{ balance.currency }}
+    </div>
+    <div>
+      地址 {{ balance.frozen }}
+    </div>
+
+    <Pagination :length="records.length">
+      <el-table :data="records" stripe class="table">
+        <template #empty>
+          <el-empty description="暂无数据"></el-empty>
+        </template>
+
+        <el-table-column label="交易哈希">
+          <template #default="scope">
+            <router-link :to="{name: 'TradeDetail', params: { hash: scope.row.txHash }}">
+              {{ filterHash(scope.row.txHash) }}
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column 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: 'Address', params: { address: scope.row.tx.to }}">
+              {{ filterHash(scope.row.tx.to) }}
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column width="100" prop="amount" label="交易量" align="center"/>
+        <el-table-column width="100" prop="tx.feefmt" label="手续费" align="center"/>
+        <el-table-column width="180" prop="blockTime" label="上链时间" align="center"/>
+        <el-table-column width="100" label="交易资产" align="center">
+          <template #default="scope">
+            {{ parseSymbol(scope.row.assets) }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </Pagination>
  </div>
 </template>

 <script lang="ts" setup>
 import { block } from '@/api'
-import { Breadcrumb } from '@/components'
+import { Breadcrumb, Pagination } from '@/components'
+import { filterHash, parseSymbol } from '@/utils/filters'
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'

-const route= useRoute()
+const route = useRoute()
 const address = route.params.address as string

+type addressBalance = {
+  addr: string
+  balance: number
+  currency: number
+  frozen: number
+}
+const balance = ref<addressBalance>({
+  addr: '',
+  balance: 0,
+  currency: 0,
+  frozen: 0
+})
 block.getAddrBalance([address]).then(res => {
-  console.log(res.result)
+  balance.value = res.result[0]
 })

 block.getTxByAddr({
@@ -28,8 +88,11 @@ block.getTxByAddr({
  height: -1,
  index: 1
 }).then(res => {
-  console.log(res.error, res.result.txs)
+  console.log(res.error, res.result)
 })
+
+const currentPage = ref<number>(1)
+const records = ref([])
 </script>

 <style scoped lang="less">
--- a/src/views/Block/detail.vue
+++ b/src/views/Block/detail.vue
@@ -60,7 +60,11 @@
        <el-table-column width="100" prop="amount" label="交易量" align="center"/>
        <el-table-column width="100" prop="tx.feefmt" label="手续费" align="center"/>
        <el-table-column width="180" prop="blockTime" label="上链时间" align="center"/>
-        <el-table-column width="100" prop="assets" label="交易资产" align="center"/>
+        <el-table-column width="100" label="交易资产" align="center">
+          <template #default="scope">
+            {{ parseSymbol(scope.row.assets) }}
+          </template>
+        </el-table-column>
      </el-table>
    </div>
  </div>
@@ -70,11 +74,10 @@
 import { block } from '@/api'
 import { Breadcrumb } from '@/components'
 import { useStore } from '@/store'
-import { filterHash } from '@/utils/filters'
+import { filterHash, parseSymbol } from '@/utils/filters'
 import { computed, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'

-const router = useRouter()
 const route = useRoute()
 const store = useStore()

@@ -123,25 +126,4 @@ block.getBlockOverview(hash).then(res => {
  background: #FFFFFF;
  border: 1px solid rgba(235, 239, 241, 1);
 }
-
-.records {
-  margin-top: 30px;
-  border: 1px solid #ebeff1;
-
-  .head {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 80px;
-    padding: 0 32px;
-    border-bottom: 1px solid #ececec;
-    background: #FFFFFF;
-
-    h2 {
-      font-size: 16px;
-      font-weight: 500;
-    }
-  }
-
-}
 </style>
--- a/src/views/Block/index.vue
+++ b/src/views/Block/index.vue
@@ -62,7 +62,7 @@ interval.value = setInterval(() => {
    if (maxHeight.value < res.result.height) {
      store.dispatch('setMaxHeight', res.result.height)
    } else {
-      console.log('列表',maxHeight.value, res.result.height)
+      console.log('列表', maxHeight.value, res.result.height)
    }
  })
 }, 5000)
@@ -78,7 +78,7 @@ block.getHeaders(start, maxHeight.value, false).then(res => {
 const currentPage = ref<number>(1)
 const pageSize = ref<number>(20)

-const handleCurrentChange = (e: number) => {
+const handleCurrentChange = () => {
  console.log(currentPage.value)
 }

--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -48,7 +48,7 @@

 <script lang="ts" setup>
 import { block } from '@/api'
-import Banner from '@/components/Banner.vue'
+import { Banner } from '@/components'
 import { useStore } from '@/store'
 import { filterHash } from '@/utils/filters'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'