feat：blockDetail overview

src/components/pc/BlockChainBrowser/BlockOverview/LeftBox.vue

 <template>
-  <div class="left-box" :style="{ backgroundImage: `url(${leftBoxbgPng})` }">
+  <div
+    class="left-box"
+    :style="{ backgroundImage: `url(${leftBoxbgPng})` }"
+    v-loading="loading"
+    element-loading-text="Loading..."
+    element-loading-spinner="el-icon-loading"
+  >
     <div class="flex">
       <div class="flex left overflow-hidden flex-shrink-0">
         <img
@@ -12,7 +18,7 @@
             区块高度
           </div>
           <div class="my-block-height overflow-hidden overflow-ellipsis">
-            09238409823094820394808
+            {{ $route.query.height }}
           </div>
         </div>
       </div>
@@ -32,34 +38,34 @@
           交易数量
         </div>
         <div class="my-benifit">
-          13
+          {{ data.txCount }}
         </div>
       </div>
     </div>
     <div class="flex items-center" style="margin-top: 35px;">
       <div class="my-title theTitle">时间戳</div>
-      <div class="my-content1">2021-11-23</div>
+      <div class="my-content1">{{ data.blockTime | formatTime }}</div>
     </div>
     <div class="flex items-center">
       <div class="my-title theTitle">区块哈希</div>
       <div class="my-content1">
-        0xf9807e9f0d272ea0109a69f6360f53291783bac47569a8bc988a06ae9c50f8ae
+        {{ data.hash }}
       </div>
-      <copy-btn :copyTxt="10293809128" class="ml-4">复制</copy-btn>
+      <copy-btn :copyTxt="data.hash" class="ml-4">复制</copy-btn>
     </div>
     <div class="flex items-center">
       <div class="my-title theTitle">默克尔根</div>
       <div class="my-content1">
-        0x1d4b6d53da04f9a817c1c183d8b4a7fbb47b35ccdf286de3fb27473362684a19
+        {{ data.txHash }}
       </div>
-      <copy-btn :copyTxt="10293809128" class="ml-4">复制</copy-btn>
+      <copy-btn :copyTxt="data.txHash" class="ml-4">复制</copy-btn>
     </div>
     <div class="flex items-center">
       <div class="my-title theTitle">状态哈希</div>
       <div class="my-content1">
-        0x2ea9289ef78e17448c00aa3857f0fefd64191fc7dcc4ea524236be14efc7ad44
+        {{ data.stateHash }}
       </div>
-      <copy-btn :copyTxt="10293809128" class="ml-4">复制</copy-btn>
+      <copy-btn :copyTxt="data.stateHash" class="ml-4">复制</copy-btn>
     </div>
   </div>
 </template>
@@ -71,6 +77,10 @@ import Vue from 'vue'
 import CopyBtn from '../../CopyBtn.vue'
 export default Vue.extend({
   components: { CopyBtn },
+  props: {
+    data: Object,
+    loading: Boolean,
+  },
   data() {
     return {
       leftBoxbgPng,

src/components/pc/BlockChainBrowser/BlockOverview/RightBox.vue

@@ -5,6 +5,9 @@
       backgroundImage: `url(${url})`,
       backgroundPosition: backgroundPosition,
     }"
+    v-loading="loading"
+    element-loading-text="Loading..."
+    element-loading-spinner="el-icon-loading"
   >
     <div class="my-title mt-11">
       {{ type === 'last' ? '上个区块' : '下个区块' }}
@@ -29,6 +32,7 @@ export default Vue.extend({
   props: {
     type: String as PropType<'last' | 'next'>,
     height: [Number, String],
+    loading: Boolean,
   },
   data() {
     return {

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

 <template>
   <div class="block-overview flex justify-between">
-    <left-box></left-box>
+    <left-box :data="data" :loading="loading"></left-box>
     <div class="h-full">
       <right-box
+        :loading="loading"
         type="last"
         style="margin-bottom: 30px;"
-        :height="lastHeight"
+        :height="data.lastBlockHeight"
+      ></right-box>
+      <right-box
+        type="next"
+        :loading="loading"
+        :height="data.nextBlockHeight"
+        :init="init"
       ></right-box>
-      <right-box type="next" :height="nextHeight"></right-box>
     </div>
   </div>
 </template>
@@ -23,8 +29,9 @@ export default Vue.extend({
     RightBox,
   },
   props: {
-    lastHeight: Number,
-    nextHeight: Number,
+    data: Object,
+    init: Function,
+    loading: Boolean,
   },
 })
 </script>

src/mixin/blockDetail.ts

+import { searchInputPlaceholder } from "@/constant";
+import { getRpc } from "ycc-api/src/service/Rpc";
+import { getBlockDetail } from "ycc-api/src/service/blockDetail/index";
+import Vue from "vue";
+const Rpc = getRpc("/yccApi");
+export default Vue.extend({
+  data() {
+    return {
+      searchInputPlaceholder,
+      searchValue: "",
+      tabList: [
+        { name: "交易记录", value: "1" },
+        { name: "共识节点", value: "2" },
+      ],
+      focusedTab: "1",
+      optionList: [
+        { name: "交易记录", value: "1" },
+        { name: "共识节点", value: "2" },
+      ],
+      selectedOption: "1",
+      overview: {
+        txCount: "",
+        blockTime: 0,
+        hash: "",
+        stateHash: "",
+        txHash: "",
+        lastBlockHeight: 0,
+        nextBlockHeight: 0,
+      },
+      loadingOverview: false,
+    };
+  },
+  methods: {
+    selectOption(v: string) {
+      this.selectedOption = v;
+    },
+    clickSearch(v: string) {
+      console.log(v, " show search value");
+    },
+    setSearchValue(v: string) {
+      this.searchValue = v;
+    },
+    setFocusedTab(v: string) {
+      this.focusedTab = v;
+    },
+    async init() {
+      this.loadingOverview = true;
+      const { overview, txs } =
+        (await getBlockDetail("ycc", "/yccApi", {
+          height: Number(this.$route.query.height),
+        })) || {};
+      overview && (this.overview = overview);
+      this.loadingOverview = false;
+    },
+  },
+  async mounted() {
+    this.init();
+  },
+  watch: {
+    "$route.query.height"(newV, oldV) {
+      this.init();
+    },
+  },
+});

src/views/pc/blockDetail.vue

@@ -7,7 +7,12 @@
       :value="searchValue"
       :setValue="setSearchValue"
     ></chain-search>
-    <block-overview style="margin-top: 30px;"></block-overview>
+    <block-overview
+      style="margin-top: 30px;"
+      :data="overview"
+      :init="init"
+      :loading="loadingOverview"
+    ></block-overview>
     <TabList
       :tabList="tabList"
       :setFocusedTab="(v) => (focusedTab = v)"
@@ -22,7 +27,7 @@
         共找到13笔交易
       </template>
     </DataFilter>
-    <TradeTable></TradeTable>
+    <!-- <TradeTable></TradeTable> -->
   </div>
 </template>
 
@@ -30,10 +35,10 @@
 import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
 import BlockOverview from '@/components/pc/BlockChainBrowser/BlockOverview/index.vue'
 import TabList from '@/components/pc/BlockChainBrowser/TabList/index.vue'
-import { searchInputPlaceholder } from '@/constant'
 import DataFilter from '@/components/pc/BlockChainBrowser/DataFilter/index.vue'
-import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
+// import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
 import Vue from 'vue'
+import blockDetailMixin from '@/mixin/blockDetail'
 
 export default Vue.extend({
   components: {
@@ -41,38 +46,9 @@ export default Vue.extend({
     BlockOverview,
     TabList,
     DataFilter,
-    TradeTable,
-  },
-  data() {
-    return {
-      searchInputPlaceholder,
-      searchValue: '',
-      tabList: [
-        { name: '交易记录', value: '1' },
-        { name: '共识节点', value: '2' },
-      ],
-      focusedTab: '1',
-      optionList: [
-        { name: '交易记录', value: '1' },
-        { name: '共识节点', value: '2' },
-      ],
-      selectedOption: '1',
-    }
-  },
-  methods: {
-    selectOption(v: string) {
-      this.selectedOption = v
-    },
-    clickSearch(v: string) {
-      console.log(v, ' show search value')
-    },
-    setSearchValue(v: string) {
-      this.searchValue = v
-    },
-    setFocusedTab(v: string) {
-      this.focusedTab = v
-    },
+    // TradeTable,
   },
+  mixins: [blockDetailMixin],
 })
 </script>