save blockChainBrowser home page

package.json

@@ -22,7 +22,8 @@
     "vue": "^2.6.11",
     "vue-i18n": "^8.24.4",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "ycc-api": "^0.0.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",
@@ -36,9 +37,9 @@
     "@vue/eslint-config-typescript": "^7.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "typescript": "~4.1.5",
-    "vue-template-compiler": "^2.6.11",
     "sass": "^1.26.5",
-    "sass-loader": "^8.0.2"
+    "sass-loader": "^8.0.2",
+    "typescript": "~4.1.5",
+    "vue-template-compiler": "^2.6.11"
   }
 }

src/components/pc/BlockChainBrowser/Count.vue

@@ -33,35 +33,14 @@ export default Vue.extend({
       if (parseInt(String(local / 1000 - this.time)) >= 86400)
         this.showTime = filters.formatTime(this.time)
       else if (parseInt(String(local / 1000 - this.time)) >= 3600)
-        this.showTime = `${h}${
-          h == 1
-            ? this.$root.$t('components.hour')
-            : this.$root.$t('components.hours')
-        }${m}${
-          m == 1
-            ? this.$root.$t('components.min')
-            : this.$root.$t('components.mins')
-        }${s}${
-          s == 1
-            ? this.$root.$t('components.sec')
-            : this.$root.$t('components.secs')
-        }`
+        this.showTime = `${h}${h == 1 ? 'hour' : 'hours'}${m}${
+          m == 1 ? 'min' : 'mins'
+        }${s}${s == 1 ? 'sec' : 'secs'}`
       else if (parseInt(String(local / 1000 - this.time)) >= 60)
-        this.showTime = `${m}${
-          m == 1
-            ? this.$root.$t('components.min')
-            : this.$root.$t('components.mins')
-        }${s}${
-          s == 1
-            ? this.$root.$t('components.sec')
-            : this.$root.$t('components.secs')
-        }`
-      else
-        this.showTime = `${s}${
-          s == 1
-            ? this.$root.$t('components.sec')
-            : this.$root.$t('components.secs')
+        this.showTime = `${m}${m == 1 ? 'min' : 'mins'}${s}${
+          s == 1 ? 'sec' : 'secs'
         }`
+      else this.showTime = `${s}${s == 1 ? 'sec' : 'secs'}`
     },
   },
   beforeDestroy() {

src/components/pc/BlockChainBrowser/LatestBlock/index.vue

 <template>
   <div>
-    <latest-container title="最新区块">
+    <latest-container title="最新区块" to="/block">
       <div
         class="item flex px-7 py-4"
         v-for="(item, i) in latestBlocks"
@@ -9,14 +9,25 @@
         <div
           class="txNumberBox text-footer-color text-sm font-bold text-center pt-2 flex-shrink-0"
         >
-          <div>{{ item.txNum }} 笔交易</div>
+          <div>{{ (item && item.txs && item.txs.length) || '' }} 笔交易</div>
           <div style="color: rgba(37, 69, 203, 0.3);">
-            {{ item.timestamp }}s前
+            <Count v-if="item.blockTime" :time="item.blockTime"></Count>
           </div>
         </div>
         <div class="w-full ml-5">
           <div class="flex justify-between">
-            <div class="height">{{ item.height }}</div>
+            <div class="height">
+              <router-link
+                :to="{
+                  path: '/blockDetail',
+                  query: {
+                    height: item.height,
+                  },
+                }"
+              >
+                {{ item.height }}
+              </router-link>
+            </div>
             <div>
               <span class="graytxt">区块奖励:</span>
               <span>
@@ -27,7 +38,18 @@
           <div class="flex justify-between">
             <div>
               <span class="graytxt">打包地址：</span>
-              <span class="text-app-color-2">{{ item.address }}</span>
+              <router-link
+                :to="{
+                  path: '/address',
+                  query: {
+                    address: item.minerHash,
+                  },
+                }"
+              >
+                <span class="text-app-color-2">
+                  {{ item.minerHash | filterHash }}
+                </span>
+              </router-link>
             </div>
             <div class="graytxt">投票节点5+打包节点10</div>
           </div>
@@ -40,17 +62,13 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import LatestContainer from '@/components/pc/BlockChainBrowser/LatestContainer.vue'
+import { iBlockMsg } from 'ycc-api/dist/cmjs/service/home/types'
+import Count from '@/components/pc/BlockChainBrowser/Count.vue'
+
 export default Vue.extend({
-  components: { LatestContainer },
+  components: { LatestContainer, Count },
   props: {
-    latestBlocks: Array as PropType<
-      {
-        txNum: number
-        timestamp: number
-        height: number
-        address: string
-      }[]
-    >,
+    latestBlocks: Array as PropType<iBlockMsg[]>,
   },
 })
 </script>

src/components/pc/BlockChainBrowser/LatestContainer.vue

@@ -5,7 +5,9 @@
         {{ title }}
       </div>
       <div class="seeMore cursor-pointer">
-        查看更多
+        <router-link :to="to">
+          查看更多
+        </router-link>
       </div>
     </div>
     <div>
@@ -19,6 +21,7 @@ import Vue from 'vue'
 export default Vue.extend({
   props: {
     title: String,
+    to: String,
   },
 })
 </script>

src/components/pc/BlockChainBrowser/LatestTx/index.vue

 <template>
   <div>
-    <latest-container title="最新交易">
+    <latest-container title="最新交易" to="/tradeList">
       <div
         class="item flex px-7 py-4 justify-between"
         v-for="(item, i) in latestTxs"

src/utils/filters.ts

@@ -2,7 +2,7 @@ import { iAsset } from "@/types/trade";
 
 //截断哈希
 export default {
-  filterHash: (str: string): string => {
+  filterHash: (str = ""): string => {
     const num = 8;
     return str.substring(0, num) + "..." + str.substring(str.length - 4);
   },

src/views/pc/blockChainBrowser.vue

@@ -25,6 +25,8 @@ import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
 import ChainOverview from '@/components/pc/BlockChainBrowser/ChainOverview/index.vue'
 import LatestBlock from '@/components/pc/BlockChainBrowser/LatestBlock/index.vue'
 import LatestTx from '@/components/pc/BlockChainBrowser/LatestTx/index.vue'
+import { getLatestBlock } from 'ycc-api/dist/cmjs/service/home/index'
+import { iBlockMsg } from 'ycc-api/dist/cmjs/service/home/types'
 
 export default Vue.extend({
   components: {
@@ -60,44 +62,7 @@ export default Vue.extend({
         },
       ],
       value: '',
-      latestBlocks: [
-        {
-          height: 2000,
-          address: 'aldskjfalkdjf',
-          timestamp: 1012930,
-          txNum: 20,
-        },
-        {
-          height: 2000,
-          address: 'aldskjfalkdjf',
-          timestamp: 1012930,
-          txNum: 20,
-        },
-        {
-          height: 2000,
-          address: 'aldskjfalkdjf',
-          timestamp: 1012930,
-          txNum: 20,
-        },
-        {
-          height: 2000,
-          address: 'aldskjfalkdjf',
-          timestamp: 1012930,
-          txNum: 20,
-        },
-        {
-          height: 2000,
-          address: 'aldskjfalkdjf',
-          timestamp: 1012930,
-          txNum: 20,
-        },
-        {
-          height: 2000,
-          address: 'aldskjfalkdjf',
-          timestamp: 1012930,
-          txNum: 20,
-        },
-      ],
+      latestBlocks: [] as iBlockMsg[],
       latestTxs: [
         {
           hash: 'lkajskfdkasdf',
@@ -123,6 +88,15 @@ export default Vue.extend({
       ],
     }
   },
+  mounted() {
+    this.latestBlocks = (' '
+      .repeat(6)
+      .split(' ')
+      .map((i) => ({})) as unknown) as iBlockMsg[]
+    getLatestBlock('ycc', '/yccApi').then((ret) => {
+      this.latestBlocks = ret || []
+    })
+  },
   methods: {
     setValue(v: string) {
       this.value = v

vue.config.js

@@ -13,6 +13,20 @@ module.exports = {
           '^/api': ''
         }
       },
+      "/coin": {
+        target: "https://b.biqianbao.net/",
+        pathRewrite: {
+          "^/coin": ""
+        },
+        changeOrigin: true,
+      },
+      "/yccApi": {
+        target: "https://mainnet.yuan.org/api",
+        pathRewrite: {
+          "^/yccApi": ""
+        },
+        changeOrigin: true,
+      },
     }
   },
   configureWebpack: {