pagiation 组件

2021-09-27 13:44:29 +08:00
parent ad8a7edf66
commit 0d2211e93b
9 changed files with 194 additions and 172 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,25 +54,4 @@ a {
  text-decoration: none;
  color: #2055ca;
 }
-
-// 记录列表的样式
-.records {
-  margin-top: 30px;
-  border: 1px solid #ebeff1;
-
-  .head {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 80px;
-    padding: 0 32px;
-    border-bottom: 1px solid #ececec;
-    background: #FFFFFF;
-
-    h2 {
-      font-size: 16px;
-      font-weight: 500;
-    }
-  }
-}
 </style>
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -1,11 +1,12 @@
 <template>
  <div class="records">
    <div class="head">
-      <h2>交易记录</h2>
+      <h2>{{ title }}</h2>
      <el-pagination
          background
-          layout="total, prev, pager, next, jumper"
+          layout="total,prev,pager,next,jumper"
          :total="length"
+          :page-size="pageSize"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
@@ -16,24 +17,51 @@
 </template>

 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineEmits, defineProps } from 'vue'

-const props = defineProps({
+const emits = defineEmits(['currentChange'])
+
+defineProps({
  length: {
    type: Number,
    default: 0
  },
+  title: {
+    type: String
+  },
+  pageSize: {
+    type: Number,
+    default: 20
+  },
  currentPage: {
    type: Number,
    default: 0
  }
 })

-const handleCurrentChange = () => {
-  console.log(props.currentPage.value)
+const handleCurrentChange = (e: number) => {
+  emits('currentChange', e)
 }
 </script>

-<style scoped>
+<style scoped lang="less">
+.records {
+  margin: 16px 0;
+  border: 1px solid #ebeff1;

+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 80px;
+    padding: 0 32px;
+    border-bottom: 1px solid #ececec;
+    background: #FFFFFF;
+
+    h2 {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}
 </style>
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -45,6 +45,9 @@ export default createStore<State>({
        },
        maxHeight: (state: State): number => {
            return state.maxHeight
+        },
+        symbol: (): string => {
+            return process.env.VUE_APP_MAIN_COIN_SYMBOL as string
        }
    },
    mutations: {
--- a/src/utils/filters.ts
+++ b/src/utils/filters.ts
@@ -1,4 +1,5 @@
 import { AssetType } from '@/types/block'
+import store from '@/store'

 export const filterHash = (str: string, num?: number): string => {
    const length = num || 16
@@ -10,6 +11,6 @@ export const parseSymbol = (assets?: AssetType[]): string => {
    if (assets) {
        return assets[0].symbol
    } else {
-        return ''
+        return store.getters.symbol
    }
 }
--- a/src/views/Address/index.vue
+++ b/src/views/Address/index.vue
@@ -2,53 +2,87 @@
  <div class="container">
    <Breadcrumb :path="[{name: '地址信息'}]"/>
    <div>
-      地址 {{ balance.addr }}
+      地址 {{ address }}
    </div>
    <div>
-      地址 {{ balance.balance }}
+      余额 {{ balance.balance.toFixed(2) }} {{ store.getters.symbol }}
    </div>
    <div>
-      地址 {{ balance.currency }}
+      总接收 {{ balance.reciver.toFixed(2) }} {{ store.getters.symbol }}
    </div>
    <div>
-      地址 {{ balance.frozen }}
+      总发送 {{ sended.toFixed(2) }} {{ store.getters.symbol }}
+    </div>
+    <div>
+      数据量 {{ balance.txCount }}
+    </div>
+    <div>
+      冻结 {{ frozen.toFixed(2) }}
    </div>

-    <Pagination :length="records.length">
+    <Pagination
+        :length="balance.txCount"
+        :title="`数据记录(` + balance.txCount + `)`"
+        :page-size="pageSize"
+        @current-change="handleCurrentChange"
+    >
      <el-table :data="records" stripe class="table">
        <template #empty>
          <el-empty description="暂无数据"></el-empty>
        </template>

+        <el-table-column width="34" align="right">
+          <template #default="scope">
+            <el-icon v-if="scope.row.receipt.ty == 1">
+              <Warning class="warning"/>
+            </el-icon>
+          </template>
+        </el-table-column>
+
        <el-table-column label="交易哈希">
          <template #default="scope">
            <router-link :to="{name: 'TradeDetail', params: { hash: scope.row.txHash }}">
-              {{ filterHash(scope.row.txHash) }}
+              {{ filterHash(scope.row.txHash, 32) }}
            </router-link>
          </template>
        </el-table-column>
-        <el-table-column label="发送方">
+        <el-table-column width="200" label="发送方">
          <template #default="scope">
            <router-link :to="{name: 'Address', params: { address: scope.row.fromAddr }}">
              {{ filterHash(scope.row.fromAddr) }}
            </router-link>
          </template>
        </el-table-column>
-        <el-table-column label="接收方">
+
+        <el-table-column width="40" align="center">
+          <template #default="scope">
+            <el-icon v-if="scope.row.fromAddr == address">
+              <DArrowRight/>
+            </el-icon>
+            <el-icon v-else>
+              <DArrowLeft/>
+            </el-icon>
+          </template>
+        </el-table-column>
+
+        <el-table-column width="200" label="接收方">
          <template #default="scope">
            <router-link :to="{name: 'Address', params: { address: scope.row.tx.to }}">
              {{ filterHash(scope.row.tx.to) }}
            </router-link>
          </template>
        </el-table-column>
-        <el-table-column width="100" prop="amount" label="交易量" align="center"/>
-        <el-table-column width="100" prop="tx.feefmt" label="手续费" align="center"/>
-        <el-table-column width="180" prop="blockTime" label="上链时间" align="center"/>
-        <el-table-column width="100" label="交易资产" align="center">
+        <el-table-column width="100" label="交易量" align="center">
          <template #default="scope">
-            {{ parseSymbol(scope.row.assets) }}
+            {{ scope.row.amount }} {{ parseSymbol(scope.row.assets) }}
          </template>
        </el-table-column>
+        <el-table-column width="100" label="手续费" align="center">
+          <template #default="scope">
+            {{ scope.row.tx.feefmt }} {{ parseSymbol(scope.row.assets) }}
+          </template>
+        </el-table-column>
+        <el-table-column width="180" prop="blockTime" label="上链时间" align="center"/>
      </el-table>
    </Pagination>
  </div>
@@ -57,44 +91,75 @@
 <script lang="ts" setup>
 import { block } from '@/api'
 import { Breadcrumb, Pagination } from '@/components'
+import { useStore } from '@/store'
 import { filterHash, parseSymbol } from '@/utils/filters'
-import { ref } from 'vue'
+import { DArrowLeft, DArrowRight, Warning } from '@element-plus/icons'
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'

+const store = useStore()
 const route = useRoute()
 const address = route.params.address as string
+const pageSize = 10

-type addressBalance = {
-  addr: string
+type AddrOverview = {
  balance: number
-  currency: number
-  frozen: number
+  reciver: number
+  txCount: number
 }
-const balance = ref<addressBalance>({
-  addr: '',
+const balance = ref<AddrOverview>({
  balance: 0,
-  currency: 0,
-  frozen: 0
-})
-block.getAddrBalance([address]).then(res => {
-  balance.value = res.result[0]
+  reciver: 0,
+  txCount: 0
 })

+/**
+ * 获取地址的基本信息
+ */
+block.getAddrOverview(address).then(res => {
+  balance.value.balance = res.result.balance ? res.result.balance / 1e8 : 0
+  balance.value.reciver = res.result.reciver ? res.result.reciver / 1e8 : 0
+  balance.value.txCount = res.result.txCount ? res.result.txCount : 0
+})
+
+const sended = computed(() => balance.value.reciver - balance.value.balance)
+const frozen = ref<number>(0)
+/**
+ * 获取冻结的主代币
+ */
+block.getAllExecBalance(address).then(res => {
+  if (res.result.execAccount) {
+    frozen.value = res.result.execAccount.find((item: { execer: string }) => item.execer == 'coins').account.frozen / 1e8
+  }
+})
+/**
+ * 获取全部交易
+ */
 block.getTxByAddr({
  addr: address,
  flag: 0,
-  count: 5,
+  count: pageSize,
  direction: 0,
  height: -1,
  index: 1
 }).then(res => {
-  console.log(res.error, res.result)
+  let hashes = res.result.txInfos.map((item: { hash: string }) => item.hash)
+
+  block.getTxByHashes(hashes).then(res => {
+    records.value = res.result.txs
+  })
 })

-const currentPage = ref<number>(1)
 const records = ref([])
+const handleCurrentChange = (e: number) => {
+  console.log(e)
+}
 </script>

 <style scoped lang="less">
-
+.warning {
+  font-size: 16px;
+  vertical-align: middle;
+  color: crimson;
+}
 </style>
--- a/src/views/Block/detail.vue
+++ b/src/views/Block/detail.vue
@@ -1,6 +1,5 @@
 <template>
  <div class="container">
-
    <Breadcrumb :path="[{name: '全部区块', router: 'Block'}, {name: '区块详情'}]"/>

    <div class="height">
@@ -18,20 +17,13 @@
      <div>下个区块 {{ (info.height + 1) > maxHeight ? '无' : (info.height + 1) }}</div>
    </div>

-    <div class="records">
-      <div class="head">
-        <h2>交易记录</h2>
-        <el-pagination
-            background
-            v-model:currentPage="currentPage"
-            layout="total, prev, pager, next, jumper"
-            :total="records.length"
-            @current-change="handleCurrentChange"
-        >
-        </el-pagination>
-      </div>
-
-      <el-table :data="records" stripe class="table">
+    <Pagination
+        :length="maxHeight"
+        :title="`全部区块(` + maxHeight + `)`"
+        :page-size="pageSize"
+        @current-change="handleCurrentChange"
+    >
+      <el-table :data="records" stripe>
        <template #empty>
          <el-empty description="暂无数据"></el-empty>
        </template>
@@ -66,13 +58,13 @@
          </template>
        </el-table-column>
      </el-table>
-    </div>
+    </Pagination>
  </div>
 </template>

 <script lang="ts" setup>
 import { block } from '@/api'
-import { Breadcrumb } from '@/components'
+import { Breadcrumb, Pagination } from '@/components'
 import { useStore } from '@/store'
 import { filterHash, parseSymbol } from '@/utils/filters'
 import { computed, ref } from 'vue'
@@ -80,6 +72,7 @@ import { useRoute } from 'vue-router'

 const route = useRoute()
 const store = useStore()
+const pageSize = 20

 const maxHeight = computed<number>(() => store.getters.maxHeight)

--- a/src/views/Block/index.vue
+++ b/src/views/Block/index.vue
@@ -2,49 +2,44 @@
  <div class="container">
    <Breadcrumb :path="[{name: '全部区块'}]"/>

-    <div class="page-header">
-      <div class="title">
-        全部区块（{{ maxHeight }}个区块）
-      </div>
-      <el-pagination
-          background
-          v-model:currentPage="currentPage"
-          :page-size="pageSize"
-          layout="prev,pager,next,jumper"
-          :total="maxHeight"
-          @current-change="handleCurrentChange"
-      >
-      </el-pagination>
-    </div>
-
-    <el-table :data="blockList" stripe class="table">
-      <template #empty>
-        <el-empty description="暂无数据"></el-empty>
-      </template>
-
-      <el-table-column width="100" align="center" label="高度">
-        <template #default="scope">
-          <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{
-              scope.row.height
-            }}
-          </router-link>
+    <Pagination
+        :length="maxHeight"
+        :title="`全部区块(` + maxHeight + `)`"
+        :page-size="pageSize"
+        @current-change="handleCurrentChange"
+    >
+      <el-table :data="blockList" stripe>
+        <template #empty>
+          <el-empty description="暂无数据"></el-empty>
        </template>
-      </el-table-column>

-      <el-table-column label="区块哈希">
-        <template #default="scope">
-          <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{ scope.row.hash }}</router-link>
-        </template>
-      </el-table-column>
-      <el-table-column prop="txCount" label="数据量" width="100" align="center"/>
-      <el-table-column prop="blockTime" label="上链时间" width="180" align="center"/>
-    </el-table>
+        <el-table-column width="100" align="center" label="高度">
+          <template #default="scope">
+            <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{
+                scope.row.height
+              }}
+            </router-link>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="区块哈希">
+          <template #default="scope">
+            <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{
+                scope.row.hash
+              }}
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="txCount" label="数据量" width="100" align="center"/>
+        <el-table-column prop="blockTime" label="上链时间" width="180" align="center"/>
+      </el-table>
+    </Pagination>
  </div>
 </template>

 <script lang="ts" setup>
 import { block } from '@/api'
-import { Breadcrumb } from '@/components'
+import { Breadcrumb,Pagination } from '@/components'
 import { useStore } from '@/store'
 import { computed, onBeforeUnmount, ref } from 'vue'

@@ -59,7 +54,7 @@ const interval = ref<NodeJS.Timeout | null>()

 interval.value = setInterval(() => {
  block.getLastHeader().then(res => {
-    if (maxHeight.value < res.result.height) {
+    if (maxHeight.value !== res.result.height) {
      store.dispatch('setMaxHeight', res.result.height)
    } else {
      console.log('列表', maxHeight.value, res.result.height)
@@ -85,22 +80,5 @@ const handleCurrentChange = () => {
 </script>

 <style scoped lang="less">
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;

-  .title {
-    padding-left: 16px;
-    font-size: 16px;
-    font-weight: 500;
-    color: #53657a;
-  }
-}
-
-.table {
-  margin: 16px 0 32px;
-  box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
-  border-radius: 2px;
-}
 </style>
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -71,7 +71,7 @@ interval.value = setInterval(() => {

 const getLastHeader = () => {
  block.getLastHeader().then(res => {
-    if (maxHeight.value < res.result.height) {
+    if (maxHeight.value !== res.result.height) {
      store.dispatch('setMaxHeight', res.result.height)
      getBlockList()
    } else {
--- a/src/views/Trade/index.vue
+++ b/src/views/Trade/index.vue
@@ -2,36 +2,29 @@
  <div class="container">
    <Breadcrumb :path="[{name: '全部数据'}]"/>

-    <div class="page-header">
-      <div class="title">
-        全部数据（65条数据）
-      </div>
-      <el-pagination
-          background
-          v-model:currentPage="currentPage"
-          :page-size="pageSize"
-          layout="prev,pager,next,jumper"
-          :total="400"
-          @current-change="handleCurrentChange"
-      >
-      </el-pagination>
-    </div>

-    <el-table :data="blocks" stripe class="table">
-      <template #empty>
-        <el-empty description="暂无数据"></el-empty>
-      </template>
+    <Pagination
+        :length="maxHeight"
+        :title="`全部区块(` + maxHeight + `)`"
+        :page-size="pageSize"
+        @current-change="handleCurrentChange"
+    >
+      <el-table :data="blocks" stripe>
+        <template #empty>
+          <el-empty description="暂无数据"></el-empty>
+        </template>

-      <el-table-column prop="date" label="高度" width="100" align="center"/>
-      <el-table-column prop="date" label="区块哈希"/>
-      <el-table-column prop="date" label="数据量" width="180" align="center"/>
-      <el-table-column prop="date" label="上链时间" width="180" align="center"/>
-    </el-table>
+        <el-table-column prop="date" label="高度" width="100" align="center"/>
+        <el-table-column prop="date" label="区块哈希"/>
+        <el-table-column prop="date" label="数据量" width="180" align="center"/>
+        <el-table-column prop="date" label="上链时间" width="180" align="center"/>
+      </el-table>
+    </Pagination>
  </div>
 </template>

 <script lang="ts" setup>
-import { Breadcrumb } from '@/components'
+import { Breadcrumb, Pagination } from '@/components'

 import { ref } from 'vue'

@@ -44,23 +37,5 @@ const blocks = ref([])
 </script>

 <style scoped lang="less">
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;

-  .title {
-    padding-left: 16px;
-    font-size: 16px;
-    font-weight: 500;
-    color: #53657a;
-  }
-}
-
-.table {
-  margin: 16px 0 32px;
-  box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
-  border-radius: 2px;
-  font-size: 12px;
-}
 </style>