feat: add vote pack table template

src/mixin/address.ts

@@ -4,11 +4,28 @@ export default Vue.extend({
   data() {
     return {
       value: "",
-      focusedTab: "1",
+      focusedTab: "txRecord",
       pages: {
+        currentPage: 1,
+        pageSize: 10,
         total: 0,
       },
       selectedOption: "1",
+      loadingTxRecordTable: false,
+      txRecordList: [] as any[],
+      voteList: [
+        {
+          height: 30303,
+          hash: "102931jlakjsdflkajsdf",
+          sender: "alkdsjflkajsdf",
+          receiver: "aldskfjalkdsjfa",
+          reward: 987234,
+          time: 17602983409,
+        },
+      ],
+      packList: [],
+      loadingVote: false,
+      loadingPack: false,
     };
   },
   computed: {
@@ -16,15 +33,15 @@ export default Vue.extend({
       return [
         {
           name: this.$t("lang.trade.txRecord"),
-          value: "1",
+          value: "txRecord",
         },
         {
           name: this.$t("lang.address.votingRecord"),
-          value: "2",
+          value: "votingRecord",
         },
         {
           name: this.$t("lang.address.packingRecord"),
-          value: "3",
+          value: "packingRecord",
         },
       ];
     },
@@ -39,6 +56,12 @@ export default Vue.extend({
     setValue(v: string) {
       this.value = v;
     },
+    sizeChange(size: number) {
+      this.pages.pageSize = size;
+    },
+    pageChange(page: number) {
+      this.pages.currentPage = page;
+    },
     groupCellName(val: any) {
       switch (val.row.tradeG) {
         case 0:

src/views/pc/address/components/votePackTable.vue

+<template>
+  <div class="c-votePackTable">
+    <el-table :data="list" v-loading="loading">
+      <TableColumn label width="40"></TableColumn>
+      <TableColumn :label="$t('lang.txDetail.height')">
+        <template slot-scope="{ row }">
+          <div class="text-footer-color">
+            <router-link
+              :to="{
+                path: '/blockDetail',
+                query: {
+                  height: row.height,
+                },
+              }"
+            >
+              {{ row.height }}
+            </router-link>
+          </div>
+        </template>
+      </TableColumn>
+      <TableColumn :label="$t('lang.trade.hash')">
+        <template slot-scope="{ row }">
+          <div class="text-footer-color">
+            <router-link
+              :to="{
+                path: '/tradeHash',
+                query: {
+                  hash: row.hash,
+                },
+              }"
+            >
+              {{ row.hash }}
+            </router-link>
+          </div>
+        </template>
+      </TableColumn>
+      <TableColumn :label="$t('lang.trade.sender')">
+        <template slot-scope="{ row }">
+          <div class="text-footer-color">
+            <router-link
+              :to="{
+                path: '/address',
+                query: {
+                  address: row.sender,
+                },
+              }"
+            >
+              {{ row.sender }}
+            </router-link>
+          </div>
+        </template>
+      </TableColumn>
+      <TableColumn label width="40">
+        <template slot-scope="">
+          <img :src="arrowRight" alt="" />
+        </template>
+      </TableColumn>
+      <TableColumn :label="$t('lang.trade.receiver')">
+        <template slot-scope="{ row }">
+          <div class="text-footer-color">
+            <router-link
+              :to="{
+                path: '/address',
+                query: {
+                  address: row.receiver,
+                },
+              }"
+            >
+              {{ row.receiver }}
+            </router-link>
+          </div>
+        </template>
+      </TableColumn>
+      <TableColumn :label="$t('lang.block.blockReward')">
+        <template slot-scope="{ row }">
+          <div class="text-text-color">{{ row.reward | filterAmount }} YCC</div>
+        </template>
+      </TableColumn>
+      <TableColumn :label="$t('lang.trade.time')">
+        <template slot-scope="{ row }">
+          <div class="text-text-color">
+            {{ row.time | formatTime }}
+          </div>
+        </template>
+      </TableColumn>
+    </el-table>
+  </div>
+</template>
+<script lang="ts">
+import { Table, TableColumn } from 'element-ui'
+import arrowRight from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png'
+import Vue from 'vue'
+export default Vue.extend({
+  components: {
+    'el-table': Table,
+    TableColumn,
+  },
+  props: {
+    list: Array,
+    loading: Boolean,
+  },
+  data() {
+    return {
+      arrowRight,
+    }
+  },
+})
+</script>
+<style lang="scss" scoped></style>

src/views/pc/address/index.vue

@@ -11,7 +11,7 @@
       :focusedTab="focusedTab"
     ></TabList>
     <DataFilter
-      v-if="focusedTab === '1'"
+      v-if="focusedTab === 'txRecord'"
       :optionList="optionList"
       :setValue="(v) => (selectedOption = v)"
       :value="selectedOption"
@@ -21,14 +21,24 @@
       </template>
     </DataFilter>
     <TradeTable
-      v-if="focusedTab === '1'"
+      v-if="focusedTab === 'txRecord'"
       :groupCellName="groupCellName"
-      :Loading="loadingTable"
-      :Trades="Trades"
+      :Loading="loadingTxRecordTable"
+      :Trades="txRecordList"
       :pages="pages"
       :sizeChange="sizeChange"
       :pageChange="pageChange"
     ></TradeTable>
+    <vote-pack-table
+      v-if="focusedTab === 'votingRecord'"
+      :list="voteList"
+      :loading="loadingVote"
+    ></vote-pack-table>
+    <vote-pack-table
+      v-if="focusedTab === 'packingRecord'"
+      :list="packList"
+      :loading="loadingPack"
+    ></vote-pack-table>
   </div>
 </template>
 
@@ -38,9 +48,18 @@ import AddressOverview from '@/components/pc/BlockChainBrowser/AddressOverview/i
 import VueTypedMixins from 'vue-typed-mixins'
 import address from '@/mixin/address'
 import TabList from '@/components/pc/BlockChainBrowser/TabList/index.vue'
+import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
 import DataFilter from '@/components/pc/BlockChainBrowser/DataFilter/index.vue'
+import VotePackTable from './components/votePackTable.vue'
 export default VueTypedMixins(address).extend({
-  components: { ChainSearch, AddressOverview, TabList, DataFilter },
+  components: {
+    ChainSearch,
+    AddressOverview,
+    TabList,
+    DataFilter,
+    TradeTable,
+    VotePackTable,
+  },
   computed: {},
 })
 </script>