打包不显示源码的配置，获取最新高度的机制更新

src/api/interfaces/block.ts

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

src/hooks/useGetMaxHeight.ts

@@ -1,5 +1,6 @@
 import { block } from '@/api'
 import vuex from '@/store'
+import { hexCharCodeToStr } from '@/utils/filters'
 import { ElMessage } from 'element-plus'
 import { computed, onMounted, ref } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
@@ -12,11 +13,16 @@ export default () => {
     const interval = ref<NodeJS.Timeout | null>()
 
     onMounted(() => {
+        getLastHeader()
+        console.log('开始轮询头信息')
         interval.value = setInterval(() => {
             getLastHeader()
         }, 5000)
     })
 
+    /**
+     * 获取最新的区块
+     */
     const getLastHeader = () => {
         block.getLastHeader().then(res => {
             if (res.error) {
@@ -26,18 +32,29 @@ export default () => {
                     offset: 300
                 })
             } else if (maxHeight.value !== res.result.height) {
+                console.log('获取最新区块', res.result.height)
+
                 vuex.dispatch('setMaxHeight', res.result.height).then()
                 vuex.dispatch('setLastHash', res.result.hash).then()
             }
         })
     }
 
+    /**
+     * 查询从交易量和交易费
+     */
+    const queryTotalFee = () => {
+        return block.queryTotalFee(hexCharCodeToStr(lastHash.value))
+    }
+
     onBeforeRouteLeave(() => {
+        console.log('结束轮询')
         clearInterval(Number(interval.value))
     })
 
     return {
         maxHeight,
-        lastHash
+        lastHash,
+        queryTotalFee
     }
 }

src/store/index.ts

@@ -48,11 +48,11 @@ export default createStore<State>({
         maxHeight: (state: State): number => {
             return state.maxHeight
         },
-        lastHash: (state: State): string => {
-            return state.lastHash
-        },
         symbol: (): string => {
             return process.env.VUE_APP_MAIN_COIN_SYMBOL as string
+        },
+        lastHash: (state: State): string => {
+            return state.lastHash
         }
     },
     mutations: {
@@ -82,17 +82,20 @@ export default createStore<State>({
         },
         setLastHash: (state: State, hash: string): void => {
             state.lastHash = hash
-        },
+        }
     },
     actions: {
-        setUserInfo: ({ commit }, info: BaseInfo): void => {
+        setUserInfo: ({commit}, info: BaseInfo): void => {
             commit('setUserInfo', info)
         },
-        setOpenId: ({ commit }, openId: string): void => {
+        setOpenId: ({commit}, openId: string): void => {
             commit('setOpenId', openId)
         },
-        setMaxHeight: ({ commit }, height: number): void => {
+        setMaxHeight: ({commit}, height: number): void => {
             commit('setMaxHeight', height)
+        },
+        setLastHash: ({commit}, hash: string): void => {
+            commit('setLastHash', hash)
         }
     },
     modules: {

src/types/block.d.ts

@@ -95,3 +95,14 @@ export declare type BlockDetail = {
         tyName: string
     }
 }
+
+export declare type TradeItem = {
+    txHash: string
+    blockTime: number
+    fromAddr: string
+    amount: number
+    assets: any
+    tx: {
+        to: string
+    }
+}

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) + '-'
@@ -28,3 +28,56 @@ export const timestampToTime = (timestamp: number) => {
     const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
     return Y + M + D + h + m + s
 }
+
+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)
+            console.log(ret)
+        } else {
+            ret += encodeURIComponent(str.charAt(i)).replace(/%/g, '')
+        }
+    }
+    return ret
+}
+
+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 [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/Home/index.vue

@@ -80,7 +80,7 @@ export default {
 import { block } from '@/api'
 import { Banner, TimeFormat } from '@/components'
 import useGetMaxHeight from '@/hooks/useGetMaxHeight'
-import { BlockItem } from '@/types/block'
+import { BlockItem, TradeItem } from '@/types/block'
 import { filterHash, parseSymbol } from '@/utils/filters'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -103,20 +103,36 @@ watch(maxHeight, (newValue, oldValue) => {
 })
 
 const blockList = ref<BlockItem[]>([])
-const tradeList = ref([])
+const tradeList = ref<TradeItem[]>([])
 
 if (blockList.value.length === 0) {
-  let initBlock = {
+  const initBlock = {
     height: 0,
-    hash: 'x',
+    hash: ' ',
     txCount: 0,
     blockTime: 0
-  }
+  } as BlockItem
   for (let i = 0; i < 6; i++) {
     blockList.value.push(initBlock)
   }
 }
 
+if (tradeList.value.length === 0) {
+  const initTrade = {
+    txHash: ' ',
+    blockTime: 0,
+    fromAddr: ' ',
+    amount: 0,
+    assets: null,
+    tx: {
+      to: ' '
+    }
+  } as TradeItem
+  for (let i = 0; i < 6; i++) {
+    tradeList.value.push(initTrade)
+  }
+}
+
 const getBlockList = () => {
   const start = maxHeight.value - pageSize + 1 > 0 ? maxHeight.value - pageSize + 1 : 0
 

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,23 +22,26 @@
   </div>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'Trade'
+}
+</script>
+
 <script lang="ts" setup>
-import { block } from '@/api'
 import { Breadcrumb, Pagination } from '@/components'
 import useGetMaxHeight from '@/hooks/useGetMaxHeight'
 import { ref } from 'vue'
 
-const pageSize = Number(process.env.VUE_APP_BLOCK_LIST_SIZE)
-const maxHeight = 100
+const { queryTotalFee } = useGetMaxHeight()
 
-const { lastHash } = useGetMaxHeight()
+const txCount = ref<number>(0)
 
-console.log('lastHash', lastHash.value)
-// 'TotalFeeKey:'
-// base64_encode('TotalFeeKey:' . hex2bin($this->parseHexString($lastHash))),
-block.queryTotalFee(['VG90YWxGZWVLZXk6RDX0zTxuG/PZfMvhZPri8RiussF1s1VZmW9EotB9clQ=']).then(res => {
-  console.log(res)
+queryTotalFee().then(res => {
+  txCount.value = res.result.txCount
 })
+
+const pageSize = Number(process.env.VUE_APP_BLOCK_LIST_SIZE)
 const handleCurrentChange = (e: number) => {
   console.log(e)
 }

vue.config.js

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