feat: txList in addr

src/components/pc/BlockChainBrowser/TradeTable2.vue

+<template>
+  <div class="trade-table">
+    <el-table
+      :data="Trades"
+      stripe
+      style="width: 100%;"
+      class="data-table"
+      :cell-class-name="groupCellName"
+      v-loading="Loading"
+      element-loading-text="Loading..."
+      element-loading-spinner="el-icon-loading"
+    >
+      <template slot="empty">
+        <div>
+          <!-- <div class="loading-line"></div> -->
+          <span v-if="!Loading && Trades.length === 0">
+            {{ $t('lang.page.nodata') }}
+          </span>
+        </div>
+      </template>
+      <el-table-column label width="40">
+        <template slot-scope="item">
+          <div>
+            <div
+              :class="{
+                'start-line': item.row.tradeG === 2,
+                'middle-line': item.row.tradeG === 1,
+                'end-line': item.row.tradeG === 3,
+              }"
+            ></div>
+            <img
+              class="w-5 h-5 max-w-none z-20 relative"
+              v-if="
+                item.row.tradeG === 1 ||
+                item.row.tradeG === 2 ||
+                item.row.tradeG === 3
+              "
+              src="../../../assets/images/blockChainBrowser/tradeDetail/txGroupIcon.png"
+            />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('lang.trade.hash')">
+        <template slot-scope="item">
+          <div>
+            <!-- <p class="group-title" v-if="item.row.tradeG === 2">
+              {{ $t('txDetail.groupTx') }}
+            </p> -->
+            <router-link
+              :to="`/tradeHash?hash=${item.row.hash}`"
+              class="light flex-left text-footer-color"
+            >
+              {{ item.row.hash | filterHash(10) }}
+            </router-link>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="hash" :label="$t('lang.trade.sender')">
+        <template slot-scope="item">
+          <router-link
+            :to="`/address?address=${item.row.from}`"
+            class="text-footer-color"
+          >
+            {{ item.row.from | filterHash(10) }}
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column width="60">
+        <template slot-scope="item">
+          <img
+            :src="
+              item.row.tradeG === 1 ||
+              item.row.tradeG === 2 ||
+              item.row.tradeG === 3
+                ? arrowRightBlue
+                : arrowRightDark
+            "
+            style="width: 20px; height: 20px;"
+            alt=""
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="hash" :label="$t('lang.trade.receiver')">
+        <template slot-scope="item">
+          <router-link
+            :to="`/address?address=${item.row.to}`"
+            class="text-footer-color"
+          >
+            {{ item.row.to | filterHash(10) }}
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="fee" :label="$t('lang.block.txCount')">
+        <template slot-scope="item">
+          <div class="text-darkBlue">
+            {{ item.row | TradeValue }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('lang.trade.fee')" width="120">
+        <template slot-scope="item">
+          <div class="text-darkBlue">
+            {{ item.row.fee | filterFee }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('lang.trade.receiveStatus')">
+        <template slot-scope="item">
+          <div>
+            <tx-status :status="item.row.success"></tx-status>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('lang.trade.time')" width="160">
+        <template slot-scope="item">
+          <div class="text-darkBlue">
+            {{ item.row.block_time | formatTime }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('lang.trade.type')" width="90" align="right">
+        <template slot-scope="item">
+          <div class="text-darkBlue">
+            {{
+              item.row.actionName === 'unknown' ? 'none' : item.row.action_name
+            }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column width="40"></el-table-column>
+    </el-table>
+    <div class="flex justify-end pt-7" v-if="!hidePageContainer">
+      <page-container
+        @pageChange="pageChange"
+        @sizeChange="sizeChange"
+        :currentPage="pages.currentPage"
+        :pageSize="pages.pageSize"
+        :total="pages.total"
+      ></page-container>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { tradeAccuracy } from '@/utils/common'
+import { Table, TableColumn } from 'element-ui'
+import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
+import TxStatus from '../txStatus.vue'
+import arrowRightBlue from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-blue.png'
+import arrowRightDark from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png'
+
+export default Vue.extend({
+  components: {
+    'el-table': Table,
+    'el-table-column': TableColumn,
+    PageContainer,
+    TxStatus,
+  },
+  props: {
+    hidePageContainer: {
+      type: Boolean,
+      default: false,
+    },
+    Trades: Array,
+    Loading: Boolean,
+    groupCellName: Function,
+    pageChange: Function,
+    sizeChange: Function,
+    pages: Object,
+  },
+  data() {
+    return {
+      arrowRightBlue,
+      arrowRightDark,
+    }
+  },
+  methods: {
+    isSuccess(execer: any, ty: any) {
+      return !tradeAccuracy(execer, ty)
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+.trade-table {
+  .tx-start,
+  .tx-middle,
+  .tx-end {
+    position: relative;
+    background-color: rgba(79, 221, 252, 0.04);
+    .start-line {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+
+      width: 1px;
+      height: 50px;
+      border: 1px solid #4fddfc;
+    }
+    .middle-line {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+
+      width: 1px;
+      height: 80px;
+      border: 1px solid #4fddfc;
+    }
+    .end-line {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+
+      width: 1px;
+      height: 40px;
+      border: 1px solid #4fddfc;
+    }
+  }
+}
+.loading-line {
+  height: 60px;
+  line-height: 18px;
+}
+
+.tx-record {
+  margin-top: 30px;
+  border: 1px solid #ebeff1;
+  .err-ico {
+    color: #e45359;
+    font-size: 12px;
+    width: 13px;
+    margin-right: 5px;
+    display: inline-flex;
+  }
+  h2 {
+    height: 81px;
+    line-height: 81px;
+    padding-left: 25px;
+    font-size: 16px;
+    color: #516379;
+    font-family: PingFangSC-Semibold;
+    font-weight: 500;
+    background: white;
+    border-bottom: 1px solid #ececec;
+  }
+  .data-table {
+    .el-table__header thead tr {
+      height: 60px;
+    }
+
+    .tx-start:nth-of-type(2) {
+      padding-top: 0;
+    }
+
+    .group-title {
+      margin: 15px 0 9px 20px;
+      font-size: 14px;
+      font-family: PingFangSC-Semibold;
+      font-weight: 500;
+      color: #d79a3f;
+    }
+  }
+  .token-icon {
+    height: 26px;
+  }
+}
+.bottom-page {
+  margin-top: 23px;
+}
+.loading-line {
+  height: 70px;
+  line-height: 18px;
+}
+.el-table tr,
+.el-table td {
+  border: 0;
+}
+</style>

src/mixin/address.ts

-import { getAccountRecords } from "@/service/api";
+import { getAddressTxCount, getAddrTxList } from "@/service/api";
 import Rpc from "@/utils/Rpc";
 import Vue from "vue";
 
@@ -34,6 +34,7 @@ export default Vue.extend({
   },
   mounted() {
     this.getAllExecBalance();
+    this.getTxList();
   },
   computed: {
     tabList() {
@@ -92,14 +93,65 @@ export default Vue.extend({
         }
       });
     },
+    checkGroup(arr: any[]) {
+      arr.map((current, index) => {
+        if (current.group_count > 1) {
+          current.tradeG = 1; //0-非交易组，1-交易组，3-交易组末条, 2-交易组首条
+          // current.tradeG = (current.tx.fee === 0 && arr[index-1].tx.fee!==0)? 2 : 1
+          if (current.fee !== 0) {
+            current.tradeG = 2;
+          } else {
+            if (index < arr.length) {
+              console.log(index);
+              current.tradeG = arr[index].next === "" ? 3 : 1;
+            } else {
+              current.tradeG = 3;
+            }
+          }
+        } else {
+          current.tradeG = 0;
+        }
+      });
+      return arr;
+    },
+    getTxList() {
+      this.loadingTxRecordTable = true;
+      getAddressTxCount(this.$route.query.address as string).then((res) => {
+        if (res.error === null) {
+          this.pages.total = res.result > 10000 ? 10000 : res.result;
+          getAddrTxList(
+            this.$route.query.address as string,
+            this.pages.currentPage,
+            this.pages.pageSize
+          ).then((res) => {
+            if (res.error === null) {
+              this.txRecordList = this.checkGroup(res.result);
+              this.loadingTxRecordTable = false;
+            }
+          });
+        }
+      });
+    },
     setValue(v: string) {
       this.value = v;
     },
     sizeChange(size: number) {
       this.pages.pageSize = size;
+      this.pageChange(1);
     },
     pageChange(page: number) {
       this.pages.currentPage = page;
+      this.loadingTxRecordTable = true;
+      getAddrTxList(
+        this.$route.query.address as string,
+        this.pages.currentPage,
+        this.pages.pageSize
+      ).then((res) => {
+        if (res.error === null) {
+          this.txRecordList = this.checkGroup(res.result);
+          this.loadingTxRecordTable = false;
+        }
+      });
     },
     groupCellName(val: any) {
       switch (val.row.tradeG) {

src/service/api.ts

@@ -231,3 +231,24 @@ export function getTxCountBewteenTimes(
     },
   });
 }
+
+export function getAddrTxList(addr: string, number: number, size: number) {
+  return axios(expandApi, {
+    method: "post",
+    params: {
+      id: 1,
+      method: "Tx.TxList",
+      params: [
+        {
+          match_one: [
+            { key: "from", value: addr },
+            { key: "to", value: addr },
+          ],
+          match: [],
+          sort: [{ key: "height", ascending: false }],
+          page: { number, size },
+        },
+      ],
+    },
+  });
+}

src/views/pc/address/index.vue

@@ -29,6 +29,7 @@
         v-if="focusedTab === 'txRecord'"
         :optionList="optionList"
         :setValue="(v) => (selectedOption = v)"
+        :hideSelect="true"
         :value="selectedOption"
       >
         <template #left>
@@ -56,9 +57,11 @@
     <div class="flex justify-end" v-if="focusedTab === 'txRecord'">
       <page-container
         style="margin-top: 30px;"
-        :pages="pages"
-        :sizeChange="sizeChange"
-        :pageChange="pageChange"
+        :currentPage="pages.currentPage"
+        :pageSize="pages.pageSize"
+        :total="pages.total"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange"
       ></page-container>
     </div>
   </div>
@@ -71,7 +74,7 @@ import VueTypedMixins from 'vue-typed-mixins'
 import address from '@/mixin/address'
 import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
 import TabList from '@/components/pc/BlockChainBrowser/TabList/index.vue'
-import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
+import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable2.vue'
 import DataFilter from '@/components/pc/BlockChainBrowser/DataFilter/index.vue'
 import VotePackTable from './components/votePackTable.vue'
 export default VueTypedMixins(address).extend({