第一版本

.env.example

@@ -1,10 +1,17 @@
-NODE_ENV=production
+NODE_ENV=development
 BASE_URL=/
 
-VUE_APP_VUEX_KEY=vuex
+VUE_APP_VUEX_KEY=ex_vuex
 
-VUE_APP_TITLE=Jason.Chen
+VUE_APP_TITLE=联盟链浏览器
 VUE_APP_API_URL=/api
+VUE_APP_BLOCK_URL=https://explorer.lianshang.vip/api
+
+VUE_APP_MAIN_COIN_SYMBOL=XHC
 
 VUE_APP_USERNAME=
 VUE_APP_PASSWORD=
+
+VUE_APP_HOME_LIST_SIZE=6
+VUE_APP_BLOCK_LIST_SIZE=20
+VUE_APP_BLOCK_DETAIL_LIST_SIZE=10

package.json

@@ -13,7 +13,6 @@
     "@element-plus/icons": "^0.0.11",
     "axios": "^0.21.4",
     "element-plus": "^1.1.0-beta.16",
-    "js-base64": "^3.7.2",
     "vue": "^3.2.11",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",

src/api/interfaces/block.ts

@@ -1,3 +1,3 @@
 import Chain33Rpc from '@33cn/chain33-rpc-api'
 
-export default new Chain33Rpc('https://explorer.lianshang.vip/api', null)
+export default new Chain33Rpc(process.env.VUE_APP_BLOCK_URL, null)

src/components/Banner.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="banner">
+    <div class="left-trans">
+      <div class="animation-area">
+        <img src="../assets/home/line-right.gif" class="line-left" alt="">
+        <img src="../assets/home/box.png" class="box-left" alt="">
+        <div class="circle-area">
+          <img src="../assets/home/cicle-out.png" class="left-out-cicle" alt="">
+          <img src="../assets/home/cicle-inner.png" class="left-inner-cicle" alt="">
+        </div>
+      </div>
+    </div>
+
     <div class="middle">
       <div class="search-box">
         <h1>区块链浏览器</h1>
@@ -15,6 +26,17 @@
         </div>
       </div>
     </div>
+
+    <div class="right-trans">
+      <div class="animation-area flex-between-stright">
+        <div class="circle-area">
+          <img src="../assets/home/cicle-out.png" class="right-out-cicle" alt="">
+          <img src="../assets/home/cicle-inner.png" class="right-inner-cicle" alt="">
+        </div>
+        <img src="../assets/home/box.png" class="box-right" alt="">
+        <img src="../assets/home/line-left.gif" class="line-right" alt="">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -124,12 +146,107 @@ const onSearch = () => {
   align-items: center;
   justify-content: center;
 
+  .left-trans,
+  .middle,
+  .right-trans {
+    display: inline-block;
+    height: 556px;
+  }
+
+  .left-trans {
+    width: 150px;
+    background: url("../assets/home/left-line.png") no-repeat top 60px left;
+    overflow: hidden;
+
+    .animation-area {
+      position: relative;
+      margin-top: 60px;
+      height: 450px;
+      float: right;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .box-left {
+      margin-top: -40px;
+      margin-left: -40px;
+      animation: jump 2s ease-in-out 1s infinite alternate;
+    }
+
+    .circle-area {
+      position: relative;
+      width: 91px;
+      height: 91px;
+
+      .left-out-cicle {
+        position: absolute;
+        left: 0;
+        top: 0;
+        animation: clockwise 2.5s linear infinite;
+      }
+
+      .left-inner-cicle {
+        width: 70px;
+        position: absolute;
+        left: 10px;
+        top: 11px;
+        animation: anticlockwise 2.5s linear infinite;
+      }
+    }
+  }
+
+  .right-trans {
+    width: 150px;
+    background: url("../assets/home/right-line.png") no-repeat top 60px right;
+    overflow: hidden;
+
+    .animation-area {
+      position: relative;
+      margin-top: 60px;
+      height: 450px;
+      float: left;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .box-right {
+      margin-right: -30px;
+      animation: jump 2s ease-in-out 0.1s infinite alternate;
+    }
+
+    .circle-area {
+      position: relative;
+      width: 91px;
+      height: 91px;
+
+      .right-out-cicle {
+        position: absolute;
+        left: 0;
+        top: 0;
+        animation: clockwise 2.5s linear infinite;
+      }
+
+      .right-inner-cicle {
+        width: 70px;
+        position: absolute;
+        left: 10px;
+        top: 12px;
+        animation: anticlockwise 2.5s linear infinite;
+      }
+    }
+  }
+
   .middle {
     height: 556px;
     position: relative;
     width: 1000px;
     flex-shrink: 0;
-    background: url("/assets/images/ball.png") center center no-repeat;
+    background: url("../assets/ball.png") center center no-repeat;
 
     .search-box {
       width: 700px;
@@ -190,4 +307,32 @@ const onSearch = () => {
     }
   }
 }
+
+// 动画区
+@keyframes clockwise {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes anticlockwise {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes jump {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(0, 15px);
+  }
+}
 </style>

src/components/Nav.vue

@@ -24,10 +24,10 @@ const navList = ref<NavItem[]>([
     title: '查看区块',
     route: 'Block'
   },
-  {
-    title: '查看数据',
-    route: 'Trade'
-  },
+  // {
+  //   title: '查看数据',
+  //   route: 'Trade'
+  // },
   {
     title: 'Token',
     route: 'Token'
@@ -43,10 +43,6 @@ const navList = ref<NavItem[]>([
   {
     title: '广播数据',
     route: 'Broadcast'
-  },
-  {
-    title: '我的钱包',
-    route: 'Wallet'
   }
 ])
 const linkTo = (name: string) => {

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/hooks/useGetMaxHeight.ts

@@ -1,24 +1,36 @@
 import { block } from '@/api'
 import vuex from '@/store'
+import { TotalFee } from '@/types/block'
+import { hexCharCodeToStr } from '@/utils/filters'
 import { ElMessage } from 'element-plus'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ComputedRef, onActivated, ref } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 
-export default () => {
-    const maxHeight = computed(() => vuex.getters.maxHeight)
-    const lastHash = computed(() => vuex.getters.lastHash)
+export default function (): {
+    maxHeight: ComputedRef<number>;
+    queryTotalFee: () => Promise<TotalFee>;
+    lastHash: ComputedRef<string>;
+} {
+    const maxHeight: ComputedRef<number> = computed(() => vuex.getters.maxHeight)
+    const lastHash: ComputedRef<string> = computed(() => vuex.getters.lastHash)
 
     // eslint-disable-next-line no-undef
     const interval = ref<NodeJS.Timeout | null>()
 
-    onMounted(() => {
+    onActivated(() => {
+        getLastHeader()
+        console.log('开始轮询头信息')
         interval.value = setInterval(() => {
             getLastHeader()
         }, 5000)
     })
 
-    const getLastHeader = () => {
+    /**
+     * 获取最新的区块
+     */
+    const getLastHeader = (): void => {
         block.getLastHeader().then(res => {
+            console.log('获取最新区块', res.result.height)
             if (res.error) {
                 clearInterval(Number(interval.value))
                 return ElMessage.error({
@@ -32,12 +44,21 @@ export default () => {
         })
     }
 
+    /**
+     * 查询从交易量和交易费
+     */
+    const queryTotalFee = (): Promise<TotalFee> => {
+        return block.queryTotalFee(hexCharCodeToStr(lastHash.value))
+    }
+
     onBeforeRouteLeave(() => {
+        console.log('结束轮询')
         clearInterval(Number(interval.value))
     })
 
     return {
         maxHeight,
-        lastHash
+        lastHash,
+        queryTotalFee
     }
 }

src/router/routers/block.ts

@@ -99,17 +99,6 @@ export default [
             showTabBar: true
         },
         component: () => import(/* webpackChunkName: "other" */ '@/views/Token/index.vue')
-    },
-    {
-        path: '/wallet',
-        name: 'Wallet',
-        meta: {
-            title: '我的钱包',
-            keepAlive: false,
-            requiresAuth: true,
-            showTabBar: true
-        },
-        component: () => import(/* webpackChunkName: "wallet" */ '@/views/Wallet/index.vue')
-    },
+    }
 ] as MyRouteRecordRaw[]
 

src/types/block.d.ts

@@ -105,4 +105,13 @@ export declare type TradeItem = {
     tx: {
         to: string
     }
-}
+}
+
+export declare type TotalFee = {
+    error: string | null
+    id: number
+    result: {
+        fee: number
+        txCount: number
+    }
+}

src/utils/filters.ts

@@ -18,7 +18,7 @@ export const parseSymbol = (assets?: AssetType[]): string => {
     }
 }
 
-export const timestampToTime = (timestamp: number) => {
+export const timestampToTime = (timestamp: number): string => {
     const date = new Date(timestamp * 1000)
     const Y = date.getFullYear() + '-'
     const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
@@ -29,34 +29,55 @@ export const timestampToTime = (timestamp: number) => {
     return Y + M + D + h + m + s
 }
 
-export function bin2hex(str:string):string {
+export function bin2hex (str: string): string {
     let ret = ''
     const r = /[0-9a-zA-Z_.~!*()]/
     for (let i = 0, l = str.length; i < l; i++) {
         if (r.test(str.charAt(i))) {
-            ret += str.charCodeAt(i).toString(16);
+            ret += str.charCodeAt(i).toString(16)
             console.log(ret)
         } else {
-            ret += encodeURIComponent(str.charAt(i)).replace(/%/g, '');
+            ret += encodeURIComponent(str.charAt(i)).replace(/%/g, '')
         }
     }
-    return ret;
+    return ret
 }
 
-export const hex2bin = (str: string): string => {
-    let ret = ''
-    let tmp = ''
-    for (let i = 0; i < str.length - 1; i += 2) {
-        const c = String.fromCharCode(parseInt(str.substr(i, 2), 16))
-        if (c.charCodeAt(1) > 127) {
-            tmp += '%' + str.substr(i, 2);
-            if (tmp.length == 9) {
-                ret += decodeURIComponent(tmp);
-                tmp = '';
-            }
-        } else {
-            ret += c;
-        }
+export function hexCharCodeToStr (hexCharCodeStr: string): string[] {
+    const trimedStr = hexCharCodeStr.trim()
+    const rawStr = trimedStr.substr(0, 2).toLowerCase() === '0x' ? trimedStr.substr(2) : trimedStr
+    const len = rawStr.length
+
+    let curCharCode
+    const resultStr = []
+    for (let i = 0; i < len; i = i + 2) {
+        curCharCode = parseInt(rawStr.substr(i, 2), 16)
+        resultStr.push(String.fromCharCode(curCharCode))
     }
-    return ret;
+    return [base64Encode(`TotalFeeKey:${resultStr.join('')}`)]
+}
+
+const base64Encode = (input: string): string => {
+    const _keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+    let output = ''
+    let chr1, chr2, chr3, enc1, enc2, enc3, enc4
+    let i = 0
+    while (i < input.length) {
+        chr1 = input.charCodeAt(i++)
+        chr2 = input.charCodeAt(i++)
+        chr3 = input.charCodeAt(i++)
+        enc1 = chr1 >> 2
+        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)
+        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)
+        enc4 = chr3 & 63
+        if (isNaN(chr2)) {
+            enc3 = enc4 = 64
+        } else if (isNaN(chr3)) {
+            enc4 = 64
+        }
+        output = output +
+            _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
+            _keyStr.charAt(enc3) + _keyStr.charAt(enc4)
+    }
+    return output
 }

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">

src/views/Auth/login.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="container">
     登录
-    <button @click="onLogin">一键登录</button>
   </div>
 </template>
 
@@ -14,7 +13,7 @@ const route = useRoute()
 const store = useStore()
 
 const onLogin = () => {
-  store.dispatch('auth/Login', { username: '15555555555', password: '123123' }).then(() => {
+  store.dispatch('auth/Login', { username: '', password: '' }).then(() => {
     route.query.to ? router.replace({ path: route.query.to as string }) : router.replace({ name: 'Home' })
   }).catch(err => {
     alert(err.message)

src/views/Auth/register.vue

@@ -1,7 +1,5 @@
 <template>
   注册
-
-  <button @click="onRegister">注册一个号</button>
 </template>
 
 <script lang="ts" setup>

src/views/Block/index.vue

@@ -71,6 +71,7 @@ const end = computed(() => {
 const blockList = ref([])
 
 onMounted(() => {
+  console.log('BLOCK INDEX')
   getBlockList()
 })
 

src/views/Home/index.vue

@@ -30,7 +30,7 @@
     <div class="trades">
       <div class="head">
         <h1>最新交易</h1>
-        <router-link :to="{name: 'Trade'}">查看全部</router-link>
+<!--        <router-link :to="{name: 'Trade'}">查看全部</router-link>-->
       </div>
 
       <div class="items" v-loading="tradeLoading">
@@ -141,6 +141,7 @@ const getBlockList = () => {
     getTradeList()
   }).finally(() => {
     blockLoading.value = false
+    tradeLoading.value = false
   })
 }
 
@@ -157,7 +158,6 @@ async function getTradeList () {
   }
 
   block.getTxByHashes(txHashes).then(res => {
-    console.log(res.result.txs)
     tradeList.value = res.result.txs
   }).finally(() => {
     tradeLoading.value = false

src/views/Trade/index.vue

@@ -2,10 +2,9 @@
   <div class="container">
     <Breadcrumb :path="[{name: '全部数据'}]"/>
 
-
     <Pagination
-        :length="maxHeight"
-        :title="`全部区块(` + maxHeight + `)`"
+        :length="txCount"
+        :title="`数据总数(` + txCount + `)`"
         :page-size="pageSize"
         @current-change="handleCurrentChange"
     >
@@ -23,21 +22,26 @@
   </div>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'Trade'
+}
+</script>
+
 <script lang="ts" setup>
 import { Breadcrumb, Pagination } from '@/components'
-import { encode } from 'js-base64';
-import { ref } from 'vue'
 import useGetMaxHeight from '@/hooks/useGetMaxHeight'
-import { block } from '@/api'
-import { hex2bin } from '@/utils/filters'
+import { onMounted, ref } from 'vue'
 
-const {lastHash, maxHeight} = useGetMaxHeight()
+const { queryTotalFee } = useGetMaxHeight()
 
-const keys: string = encode('TotalFeeKey:' + hex2bin(lastHash.value.replace('0x', '')))
+onMounted(() => {
+  console.log('TRADE onMounted')
+})
+const txCount = ref<number>(0)
 
-// 获取全部交易的数据量，但是接口不返回不知道什么问题,可能是因为节点没有seed
-block.queryTotalFee([keys]).then(res => {
-  console.log('queryTotalFee', res.result)
+queryTotalFee().then(res => {
+  txCount.value = res.result.txCount
 })
 
 const pageSize = Number(process.env.VUE_APP_BLOCK_LIST_SIZE)

vue.config.js

@@ -5,6 +5,7 @@ function resolve (dir) {
 }
 
 module.exports = {
+  productionSourceMap: false,
   configureWebpack: {
     resolve: {
       alias: {

yarn.lock

@@ -5483,11 +5483,6 @@ javascript-stringify@^2.0.1:
   resolved "https://registry.nlark.com/javascript-stringify/download/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79"
   integrity sha1-J8dlOb4U2L0Sghmi1zGwkzeQTnk=
 
-js-base64@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.2.tgz#816d11d81a8aff241603d19ce5761e13e41d7745"
-  integrity sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ==
-
 js-message@1.0.7:
   version "1.0.7"
   resolved "https://registry.nlark.com/js-message/download/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"