全部区块查询页面

src/assets/lang/zh.ts

@@ -4,8 +4,8 @@ export const lang = {
   news: "新闻公告",
   blockChainBrowser: "区块链浏览器",
   page: {
-    first: "首页",
-    last: "尾页",
+    first: "首",
+    last: "尾",
     confirm: "确定",
     nodata: "暂无数据",
   },
@@ -101,7 +101,7 @@ export const lang = {
     txRecord: "交易记录",
     consensusNode: "共识节点",
     txTotal: "共找到{0}笔交易",
-    receiveStatus: '接受状态'
+    receiveStatus: "接受状态",
   },
   components: {
     hour: "小时",

src/components/mobile/m-blockItem.vue

@@ -5,7 +5,7 @@
         class="text-footer-color text-base font-bold"
         style="margin-top: 7px;"
       >
-        {{ (item && item.txs && item.txs.length) || '' }}
+        {{ item && item.txCount }}
       </div>
       <div class="text-xs font-bold text-footer-color-light">
         {{ $t('lang.block.txCount') }}
@@ -42,7 +42,7 @@
               },
             }"
           >
-            {{ item.minerHash | filterHash }}
+            {{ item.hash | filterHash(12) }}
           </router-link>
         </span>
       </div>

src/components/mobile/m-latestBlocks.vue

@@ -14,17 +14,15 @@
       :key="i"
       :item="item"
     ></m-block-item>
-    <m-latest-tx></m-latest-tx>
   </div>
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import mBlockItem from './m-blockItem.vue'
 import { iBlockMsg } from 'ycc-api/dist/cmjs/service/home/types'
-import MLatestTx from './m-latestTx.vue'
 
 export default Vue.extend({
-  components: { mBlockItem, MLatestTx },
+  components: { mBlockItem,  },
   props: {
     latestBlocks: Array as PropType<iBlockMsg[]>,
   },

src/components/mobile/m-pageContainer.vue

 <template>
   <div class="m-page-container">
-    <div class="detail flex-left" v-if="!simple">
+    <div class="simple flex justify-end">
       <el-pagination
         background
         small
         @current-change="handleCurrentChange"
-        @size-change="handleSizeChange"
         :current-page="currentPageNum"
         :page-size="pageSize"
         :page-sizes="[10, 20, 30]"
-        layout="total,sizes,jumper"
+        layout="prev,pager,next"
         :total="total"
         :pager-count="5"
       ></el-pagination>
-      <div class="confirm">{{ $t('lang.page.confirm') }}</div>
     </div>
-    <div class="simple">
+    <div class="detail flex mt-3.5 items-center justify-end" v-if="!simple">
       <el-pagination
         background
         small
         @current-change="handleCurrentChange"
         :current-page="currentPageNum"
         :page-size="pageSize"
-        :page-sizes="[10, 20, 30]"
-        layout="prev,pager,next"
+        layout="total,jumper"
         :total="total"
         :pager-count="5"
       ></el-pagination>
+      <div class="confirm">{{ $t('lang.page.confirm') }}</div>
     </div>
   </div>
 </template>
@@ -87,30 +85,57 @@ export default Vue.extend({
 })
 </script>
 <style lang="scss">
+$blue: #dee1e6;
+$white: #6368de;
+
 .m-page-container {
+  .btn-prev,
+  .btn-next {
+    margin: 0 !important;
+    height: 30px !important;
+    min-width: 30px !important;
+    background: white !important;
+    border: 1px solid #dee1e6;
+  }
+  .btn-prev {
+    border-right: none;
+  }
+
   .el-pagination {
     .el-pager li:not(.disabled).active {
       background-color: $blue;
+      color: #6368de;
     }
     .el-pager li {
+      background: white;
+      line-height: 30px;
+      text-align: center;
+      min-width: 30px !important;
+      height: 30px;
+      margin: 0 !important;
       font-weight: 500;
       font-size: 12px;
+      border: 1px solid #dee1e6;
+      border-right: none;
+    }
+    .el-pager li {
     }
   }
   .confirm {
+    width: 58px;
+    height: 30px;
+    line-height: 30px;
+    background: #2545cb;
+    border-radius: 15px;
     padding: 0 5px;
     flex-shrink: 1;
     margin-left: 10px;
     display: inline-block;
-    width: fit-content;
-    height: 22px;
-    line-height: 22px;
-    background: $blue;
-    border-radius: 15px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
     text-align: center;
-    color: $white;
-    font-size: 12px;
-    font-family: PingFangSC-Regular;
     cursor: pointer;
   }
   .el-pagination {
@@ -133,14 +158,30 @@ export default Vue.extend({
       }
     }
   }
-  .el-pagination__total {
+  .el-pagination__total,
+  .el-pagination__jump {
     margin: 0;
+    margin-left: 4px;
     font-size: 12px;
     font-family: PingFangSC;
     font-weight: 400;
-    color: rgba(128, 147, 167, 1);
-    line-height: 17px;
+    line-height: 30px !important;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #8093a7;
+    height: 30px !important;
+  }
+
+  .el-pagination__editor.el-input {
+    width: 65px;
+    height: 30px;
+    input {
+      width: 100%;
+      height: 100% !important;
+    }
   }
+
   .detail {
     margin-bottom: 12px;
   }

src/components/mobile/m-title.vue

+<template>
+  <div class="c-title flex items-center pl-3.5 bg-white text-darkBlue font-bold text-sm">
+    {{ title }}
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    title: String,
+  },
+})
+</script>
+<style lang="scss" scoped>
+.c-title {
+  height: 50px;
+}
+</style>

src/mixin/block.ts

+import Vue from "vue";
+import { message } from "ant-design-vue";
+import { getRpc } from "ycc-api/dist/cmjs/service/Rpc";
+const Rpc = getRpc("/yccApi");
+export default Vue.extend({
+  data() {
+    return {
+      maxHeight: 0,
+      startHeight: 0,
+      endHeight: 0,
+      Loading: false,
+      Timer: 0,
+      pages: {
+        currentPage: 1,
+        pageSize: 20,
+        total: 10,
+      },
+      Blocks: [] as any[],
+    };
+  },
+  computed: {
+    ParallelChain(): any {
+      return this.$store.getters.isParallelChain;
+    },
+  },
+  activated() {
+    this.getLastBlock();
+  },
+  mounted() {
+    this.getLastBlock();
+  },
+  methods: {
+    getLastBlock() {
+      if (this.Loading) return;
+      this.Loading = true;
+      Rpc.getLastHeader().then((data) => {
+        if (data.error === null) {
+          if (data.result.height !== this.endHeight) {
+            this.maxHeight = data.result.height;
+            this.pages.total = this.maxHeight;
+            this.getBlocks(this.maxHeight);
+            return;
+          }
+          this.Loading = false;
+        } else {
+          this.Loading = false;
+          message.warning({
+            // title: this.$t('components.tip'),
+            // message: data.error,
+            content: data.error as string,
+          });
+        }
+      });
+    },
+    pageChange(page: number) {
+      clearTimeout(this.Timer);
+      this.pages.currentPage = page;
+      const newHeight =
+        this.maxHeight - (this.pages.currentPage - 1) * this.pages.pageSize;
+      this.endHeight = 0;
+      this.Blocks = [];
+      this.getBlocks(newHeight);
+    },
+    sizeChange(size: number) {
+      this.pages.pageSize = size;
+      this.pageChange(1);
+    },
+    getBlocks(endHeight: number) {
+      this.Loading = true;
+      // 首次更新
+      if (this.endHeight === 0) {
+        this.endHeight = endHeight;
+        this.startHeight =
+          this.endHeight - this.pages.pageSize + 1 > 0
+            ? this.endHeight - this.pages.pageSize + 1
+            : 0; // 尾页判断
+      } else {
+        // 非首次请求获取更新的区块
+        this.startHeight = this.endHeight + 1;
+        this.endHeight = this.maxHeight;
+      }
+
+      Rpc.getHeaders(this.startHeight, this.endHeight, false).then((data) => {
+        if (data.error === null) {
+          const info = data.result.items.reverse();
+          if (this.pages.currentPage === 1) {
+            this.Blocks = [...info, ...this.Blocks];
+            this.Blocks.length = this.pages.pageSize;
+          } else {
+            this.Blocks = info;
+          }
+          
+          this.Loading = false;
+        } else {
+          this.Loading = false;
+          message.warning({
+            content: data.error,
+          });
+          // this.$notify.warning({
+          //   title: this.$t('components.tip'),
+          //   message: data.error,
+          // })
+        }
+      });
+    },
+  },
+  beforeDestroy() {
+    //清除定时器
+    clearTimeout(this.Timer);
+  },
+});

src/views/mobile/block.vue

+<template>
+  <div class="c-block mx-4">
+    <m-chain-search class="mt-3.5"></m-chain-search>
+    <m-page-container
+      @pageChange="pageChange"
+      @sizeChange="sizeChange"
+      :currentPage="pages.currentPage"
+      :pageSize="pages.pageSize"
+      :total="pages.total"
+      class="mt-5"
+    ></m-page-container>
+    <m-title
+      class="mt-3.5"
+      :title="`${$t('lang.block.title')}(${234234}${$t('lang.block.count')})`"
+    ></m-title>
+    <m-block-item
+      v-for="(item, i) in Blocks"
+      :item="item"
+      :key="i"
+    ></m-block-item>
+    <m-page-container
+      :simple="false"
+      @pageChange="pageChange"
+      @sizeChange="sizeChange"
+      :currentPage="pages.currentPage"
+      :pageSize="pages.pageSize"
+      :total="pages.total"
+      class="mt-5"
+    ></m-page-container>
+  </div>
+</template>
+<script lang="ts">
+import MBlockItem from '@/components/mobile/m-blockItem.vue'
+import mChainSearch from '@/components/mobile/m-chainSearch.vue'
+import MPageContainer from '@/components/mobile/m-pageContainer.vue'
+import MTitle from '@/components/mobile/m-title.vue'
+import VueTypedMixins from 'vue-typed-mixins'
+import blockMixin from '@/mixin/block'
+export default VueTypedMixins(blockMixin).extend({
+  components: { mChainSearch, MPageContainer, MTitle, MBlockItem },
+})
+</script>
+<style lang="scss" scoped>
+.c-block {
+  padding-top: 44px;
+  border-radius: 2px;
+}
+</style>

src/views/mobile/blockChainBrowser.vue

@@ -20,6 +20,7 @@
       class="mx-4 mt-3.5"
       :latestBlocks="latestBlocks"
     ></m-latest-blocks>
+    <m-latest-tx class="mx-4"></m-latest-tx>
   </div>
 </template>
 
@@ -34,6 +35,7 @@ import MNumOfOnChainTx from '@/components/mobile/map/m-numOfOnChainTx.vue'
 import MChainPrice from '@/components/mobile/m-chain-price.vue'
 import MChainPerf from '@/components/mobile/m-chain-perf.vue'
 import MLatestBlocks from '@/components/mobile/m-latestBlocks.vue'
+import MLatestTx from '@/components/mobile/m-latestTx.vue'
 
 export default VueTypedMixins(blockChainBrowserMixin).extend({
   components: {
@@ -44,6 +46,7 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
     MChainPrice,
     MChainPerf,
     MLatestBlocks,
+    MLatestTx,
   },
 })
 </script>

src/views/pc/block.vue

 <template>
   <div class="the-block min-w-1200 md:w-bodySet mx-auto mb-16 flow-root">
-    <chain-search
-      class="mt-7"
-    ></chain-search>
+    <chain-search class="mt-7"></chain-search>
     <div class="pc-block inner-box">
       <div class="title flex items-center justify-between">
         <span class="total-block">
@@ -100,122 +98,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import VueTypedMixins from 'vue-typed-mixins'
 import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
 import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
 import Count from '@/components/pc/BlockChainBrowser/Count.vue'
-import { getRpc } from 'ycc-api/dist/cmjs/service/Rpc'
-import { message } from 'ant-design-vue'
-
-const Rpc = getRpc('/yccApi')
-export default Vue.extend({
+import blockMixin from '@/mixin/block'
+export default VueTypedMixins(blockMixin).extend({
   components: { ChainSearch, PageContainer, Count },
-  data() {
-    return {
-      maxHeight: 0,
-      startHeight: 0,
-      endHeight: 0,
-      Loading: false,
-      Timer: 0,
-      pages: {
-        currentPage: 1,
-        pageSize: 20,
-        total: 10,
-      },
-      Blocks: [] as any[],
-    }
-  },
-  computed: {
-    ParallelChain(): any {
-      return this.$store.getters.isParallelChain
-    },
-    
-  },
-  activated() {
-    this.getLastBlock()
-  },
-  mounted() {
-    this.getLastBlock()
-  },
-  methods: {
-    getLastBlock() {
-      console.log(this.Loading, 'show loading')
-      if (this.Loading) return
-      this.Loading = true
-      Rpc.getLastHeader().then((data) => {
-        if (data.error === null) {
-          if (data.result.height !== this.endHeight) {
-            this.maxHeight = data.result.height
-            this.pages.total = this.maxHeight
-            this.getBlocks(this.maxHeight)
-            return
-          }
-          this.Loading = false
-        } else {
-          this.Loading = false
-          message.warning({
-            // title: this.$t('components.tip'),
-            // message: data.error,
-            content: data.error as string,
-          })
-        }
-      })
-    },
-    pageChange(page: number) {
-      clearTimeout(this.Timer)
-      this.pages.currentPage = page
-      let newHeight =
-        this.maxHeight - (this.pages.currentPage - 1) * this.pages.pageSize
-      this.endHeight = 0
-      this.Blocks = []
-      this.getBlocks(newHeight)
-    },
-    sizeChange(size: number) {
-      this.pages.pageSize = size
-      this.pageChange(1)
-    },
-    getBlocks(endHeight: number) {
-      this.Loading = true
-      // 首次更新
-      if (this.endHeight === 0) {
-        this.endHeight = endHeight
-        this.startHeight =
-          this.endHeight - this.pages.pageSize + 1 > 0
-            ? this.endHeight - this.pages.pageSize + 1
-            : 0 // 尾页判断
-      } else {
-        // 非首次请求获取更新的区块
-        this.startHeight = this.endHeight + 1
-        this.endHeight = this.maxHeight
-      }
-
-      Rpc.getHeaders(this.startHeight, this.endHeight, false).then((data) => {
-        if (data.error === null) {
-          let info = data.result.items.reverse()
-          if (this.pages.currentPage === 1) {
-            this.Blocks = [...info, ...this.Blocks]
-            this.Blocks.length = this.pages.pageSize
-          } else {
-            this.Blocks = info
-          }
-          this.Loading = false
-        } else {
-          this.Loading = false
-          message.warning({
-            content: data.error,
-          })
-          // this.$notify.warning({
-          //   title: this.$t('components.tip'),
-          //   message: data.error,
-          // })
-        }
-      })
-    },
-  },
-  beforeDestroy() {
-    //清除定时器
-    clearTimeout(this.Timer)
-  },
 })
 </script>