blockDetail txhashes display

src/components/mobile/m-block-desc-card.vue

@@ -17,7 +17,7 @@
           </span>
         </div>
       </div>
-      <div class="flex justify-between">
+      <div class="flex justify-between mt-1">
         <div class="text-text-color text-xs">
           {{ $t('lang.txDetail.height') }}
         </div>

src/components/mobile/m-tabs.vue

+<template>
+  <div
+    class="c-title flex items-center pl-3.5 bg-white text-darkBlue font-bold text-sm"
+  >
+    <div
+      class="text-sm font-bold relative mr-7"
+      :class="[
+        tab.value === focusedTab ? ' text-footer-color' : ' text-text-color',
+      ]"
+      @click="setFocusedTab(tab.value)"
+      v-for="(tab, i) in tabList"
+      :key="i"
+    >
+      {{ tab.name }}
+      <div
+        v-if="tab.value === focusedTab"
+        class="absolute -bottom-1 left-1/2 -translate-x-1/2 transform bg-footer-color"
+        style="width: 14px; height: 2px;"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+export default Vue.extend({
+  props: {
+    title: String,
+    focusedTab: String,
+    setFocusedTab: Function,
+    tabList: Array as PropType<
+      {
+        name: string
+        value: string
+      }[]
+    >,
+  },
+})
+</script>
+<style lang="scss" scoped>
+.c-title {
+  height: 50px;
+}
+</style>

src/components/mobile/m-txItem.vue

@@ -16,11 +16,11 @@
           {{ $t('lang.trade.txAmount') }} :
         </div>
         <div class="text-darkBlue text-sm font-bold">
-          12.00YCC
+          {{ amount | filterAmount }}YCC
         </div>
       </div>
       <div class="text-xs text-text-color">
-        20394029348
+        {{ blockTime | formatTime }}
       </div>
     </div>
     <div class="flex items-center justify-between">
@@ -32,10 +32,19 @@
           class="text-xs"
           :class="[txGroup ? ' text-lightBlue' : 'text-footer-color']"
         >
-          {{ '1092380912' | filterHash }}
+          <router-link
+            :to="{
+              path: '/tradeHash',
+              query: {
+                hash: txHash,
+              },
+            }"
+          >
+            {{ txHash | filterHash }}
+          </router-link>
         </div>
       </div>
-      <TxStatus size="small" :status="true" />
+      <TxStatus size="small" :status="status" />
     </div>
     <div class="flex items-center justify-between">
       <div>
@@ -46,7 +55,16 @@
           class="text-xs"
           :class="[txGroup ? ' text-lightBlue' : 'text-footer-color']"
         >
-          {{ '1092380912' | filterHash }}
+          <router-link
+            :to="{
+              path: '/address',
+              query: {
+                address: from,
+              },
+            }"
+          >
+            {{ from | filterHash }}
+          </router-link>
         </span>
       </div>
       <div>
@@ -57,7 +75,16 @@
           class="text-xs"
           :class="[txGroup ? ' text-lightBlue' : 'text-footer-color']"
         >
-          {{ '1092380912' | filterHash }}
+          <router-link
+            :to="{
+              path: '/address',
+              query: {
+                address: to,
+              },
+            }"
+          >
+            {{ to | filterHash }}
+          </router-link>
         </span>
       </div>
     </div>
@@ -72,7 +99,13 @@ export default Vue.extend({
     TxStatus,
   },
   props: {
+    blockTime: Number,
     txGroup: String as PropType<'isGroupItem' | 'isGroupItemEnd'>,
+    amount: Number,
+    txHash: String,
+    from: String,
+    to: String,
+    status: Boolean,
   },
   data() {
     return {

src/mixin/blockDetail.ts

@@ -2,6 +2,8 @@ import { getRpc } from "ycc-api/src/service/Rpc";
 import { getBlockDetail } from "ycc-api/src/service/blockDetail/index";
 import Vue from "vue";
 import { getBlockOverviewAndRelativeHeight } from "ycc-api/dist/cmjs/service/blockDetail";
+import { message } from "ant-design-vue";
+import { tradeAccuracy } from "@/utils/common";
 const Rpc = getRpc("/yccApi");
 export default Vue.extend({
   data() {
@@ -22,7 +24,7 @@ export default Vue.extend({
       loadingOverview: false,
       loadingRelativeNumber: false,
       loadingTable: false,
-      Trades: [],
+      Trades: [] as any[],
       txHashes: [],
       pages: {
         currentPage: 1,
@@ -32,6 +34,48 @@ export default Vue.extend({
     };
   },
   methods: {
+    isSuccess(execer: any, ty: any) {
+      return !tradeAccuracy(execer, ty);
+    },
+    fetchTradeFromTxHashes() {
+      const searchArr: string[] = [];
+      const end =
+        this.pages.pageSize * this.pages.currentPage - 1 < this.pages.total
+          ? this.pages.pageSize * this.pages.currentPage - 1
+          : this.pages.total - 1;
+      const start = this.pages.pageSize * (this.pages.currentPage - 1);
+      for (let i = start; i <= end; i++) {
+        searchArr.push(this.txHashes[i]);
+      }
+      Rpc.getTxByHashes(searchArr).then((data) => {
+        if (data.error == null) {
+          // this.searchIcon(data.result.txs);
+          this.Trades = this.checkGroup(data.result.txs);
+          console.log(this.Trades, "show Trades");
+        } else {
+          message.warning(this.$t("components.tip") + data.error);
+        }
+      });
+    },
+    checkGroup(arr: any[]) {
+      arr.map((current, index) => {
+        if (current.tx.groupCount > 1) {
+          current.tradeG = 1; //0-非交易组，1-交易组，3-交易组末条, 2-交易组首条
+          if (current.tx.fee !== 0) {
+            current.tradeG = 2;
+          } else {
+            if (index < arr.length) {
+              current.tradeG = arr[index].tx.next ? 1 : 3;
+            } else {
+              current.tradeG = 3;
+            }
+          }
+        } else {
+          current.tradeG = 0;
+        }
+      });
+      return arr;
+    },
     selectOption(v: string) {
       this.selectedOption = v;
     },
@@ -62,6 +106,9 @@ export default Vue.extend({
               stateHash: o.stateHash,
               txHash: o.txHash,
             };
+            this.txHashes = o.txHashes;
+            this.pages.total = this.txHashes.length;
+            this.fetchTradeFromTxHashes();
           });
           relativeBlockHeight.then((r: any) => {
             this.loadingRelativeNumber = false;
@@ -75,20 +122,6 @@ export default Vue.extend({
       });
     },
     async init() {
-      // this.loadingOverview = true;
-      // this.loadingTable = true;
-
-      // const { overview, txs } =
-      //   (await getBlockDetail("ycc", "/yccApi", {
-      //     height: Number(this.$route.query.height),
-      //   })) || {};
-      // if (overview) {
-      //   this.overview = overview;
-      //   this.pages.total = overview.txCount;
-      //   this.Trades = txs;
-      // }
-      // this.loadingOverview = false;
-      // this.loadingTable = false;
       this.fetchBlockOverviewAndRelativeBlockHeightData();
     },
     // 交易组模块

src/router/index.ts

@@ -42,7 +42,7 @@ const routes: Array<RouteConfig> = [
       {
         path: "/blockDetail",
         name: "区块详情",
-        component: () => import(`@/views/${file}/blockDetail.vue`),
+        component: () => import(`@/views/${file}/blockDetail/index.vue`),
       },
       {
         path: "/tradeHash",

src/views/mobile/blockDetail.vue → src/views/mobile/blockDetail/index.vue

@@ -13,6 +13,33 @@
       :nextBlockHeight="overview.nextBlockHeight"
       :loading="loadingOverview"
     ></m-block-desc-card>
+    <m-tabs
+      class="mt-3.5"
+      :tabList="tabList"
+      :focusedTab="focusedTab"
+      :setFocusedTab="setFocusedTab"
+    ></m-tabs>
+    <div v-if="focusedTab === '1'" class=" flow-root">
+      <m-tx-item
+        v-for="(trade, i) in Trades"
+        :key="i"
+        :amount="trade.amount"
+        :txHash="trade.tx.hash"
+        :from="trade.tx.from"
+        :blockTime="trade.blockTime"
+        :to="trade.tx.to"
+        :status="isSuccess(trade.tx.execer, trade.receipt.ty)"
+      ></m-tx-item>
+      <m-page-container
+        class="mt-3.5"
+        :simple="false"
+        @pageChange="pageChange"
+        @sizeChange="sizeChange"
+        :currentPage="pages.currentPage"
+        :pageSize="pages.pageSize"
+        :total="pages.total"
+      ></m-page-container>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -20,10 +47,16 @@ import VueTypedMixins from 'vue-typed-mixins'
 import blockDetailMixin from '@/mixin/blockDetail'
 import MChainSearch from '@/components/mobile/m-chainSearch.vue'
 import MBlockDescCard from '@/components/mobile/m-block-desc-card.vue'
+import MTabs from '@/components/mobile/m-tabs.vue'
+import MTxItem from '@/components/mobile/m-txItem.vue'
+import MPageContainer from '@/components/mobile/m-pageContainer.vue'
 export default VueTypedMixins(blockDetailMixin).extend({
   components: {
     MChainSearch,
     MBlockDescCard,
+    MTabs,
+    MTxItem,
+    MPageContainer,
   },
 })
 </script>