store

src/components/pc/BlockChainBrowser/Count.vue

+<template>
+  <span class="time-count-down">{{ showTime }}</span>
+</template>
+
+<script lang="ts">
+import filters from '@/utils/filters'
+import Vue from 'vue'
+export default Vue.extend({
+  props: ['time'],
+  data() {
+    return {
+      showTime: 'loading...' as string | number,
+      Timer: 0,
+    }
+  },
+  mounted() {
+    this.caculateTime()
+    if (this.Timer === 0)
+      this.Timer = setInterval(() => {
+        this.caculateTime()
+      }, 1000)
+  },
+  methods: {
+    caculateTime() {
+      let Dt = new Date()
+      let local = Dt.getTime()
+      let dValue = parseInt(String(local / 1000 - this.time))
+      let h = parseInt(String(dValue / 3600))
+      dValue -= h * 3600
+      let m = parseInt(String(dValue / 60))
+      dValue -= m * 60
+      let s = parseInt(String(dValue))
+      if (parseInt(String(local / 1000 - this.time)) >= 86400)
+        this.showTime = filters.formatTime(this.time)
+      else if (parseInt(String(local / 1000 - this.time)) >= 3600)
+        this.showTime = `${h}${
+          h == 1
+            ? this.$root.$t('components.hour')
+            : this.$root.$t('components.hours')
+        }${m}${
+          m == 1
+            ? this.$root.$t('components.min')
+            : this.$root.$t('components.mins')
+        }${s}${
+          s == 1
+            ? this.$root.$t('components.sec')
+            : this.$root.$t('components.secs')
+        }`
+      else if (parseInt(String(local / 1000 - this.time)) >= 60)
+        this.showTime = `${m}${
+          m == 1
+            ? this.$root.$t('components.min')
+            : this.$root.$t('components.mins')
+        }${s}${
+          s == 1
+            ? this.$root.$t('components.sec')
+            : this.$root.$t('components.secs')
+        }`
+      else
+        this.showTime = `${s}${
+          s == 1
+            ? this.$root.$t('components.sec')
+            : this.$root.$t('components.secs')
+        }`
+    },
+  },
+  beforeDestroy() {
+    //清除定时器
+    clearTimeout(this.Timer)
+  },
+})
+</script>

src/components/pc/BlockChainBrowser/LatestBlock/index.vue

+<template>
+  <div>
+    <latest-container title="最新区块">
+      <div
+        class="item flex px-7 py-4"
+        v-for="(item, i) in latestBlocks"
+        :key="i"
+      >
+        <div
+          class="txNumberBox text-footer-color text-sm font-bold text-center pt-2 flex-shrink-0"
+        >
+          <div>{{ item.txNum }} 笔交易</div>
+          <div style="color: rgba(37, 69, 203, 0.3);">
+            {{ item.timestamp }}s前
+          </div>
+        </div>
+        <div class="w-full ml-5">
+          <div class="flex justify-between">
+            <div class="height">{{ item.height }}</div>
+            <div>
+              <span class="graytxt">区块奖励:</span>
+              <span>
+                15 ycc
+              </span>
+            </div>
+          </div>
+          <div class="flex justify-between">
+            <div>
+              <span class="graytxt">打包地址：</span>
+              <span class="text-app-color-2">{{ item.address }}</span>
+            </div>
+            <div class="graytxt">投票节点5+打包节点10</div>
+          </div>
+        </div>
+      </div>
+    </latest-container>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import LatestContainer from '@/components/pc/BlockChainBrowser/LatestContainer.vue'
+export default Vue.extend({
+  components: { LatestContainer },
+  props: {
+    latestBlocks: Array as PropType<
+      {
+        txNum: number
+        timestamp: number
+        height: number
+        address: string
+      }[]
+    >,
+  },
+})
+</script>
+
+<style scoped>
+.item {
+  height: 88px;
+  border-bottom: 1px solid #f5f5ff;
+}
+
+.txNumberBox {
+  width: 100px;
+  height: 52px;
+  background: rgba(37, 69, 203, 0.1);
+  border-radius: 4px;
+}
+
+.item:last-of-type {
+  border-bottom: none;
+}
+.height {
+  font-size: 18px;
+  font-family: PingFang-SC-Bold, PingFang-SC;
+  font-weight: bold;
+  color: #1f3470;
+}
+
+.graytxt {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #7c88ad;
+}
+
+.darkGraytxt {
+  color: #7c88ad;
+}
+</style>

src/components/pc/BlockChainBrowser/LatestContainer.vue

+<template>
+  <div class="latestblock shadow-shadow1">
+    <div class="header flex items-center justify-between px-7">
+      <div class="title">
+        {{ title }}
+      </div>
+      <div class="seeMore cursor-pointer">
+        查看更多
+      </div>
+    </div>
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    title: String,
+  },
+})
+</script>
+
+<style scoped>
+.latestblock {
+  width: 585px;
+  height: 608px;
+  background: #ffffff;
+  border-radius: 4px;
+}
+.header {
+  height: 80px;
+}
+.title {
+  font-size: 18px;
+  font-family: PingFang-SC-Bold, PingFang-SC;
+  font-weight: bold;
+  color: #1f3470;
+}
+.seeMore {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #2545cb;
+}
+</style>

src/components/pc/BlockChainBrowser/LatestTx/index.vue

+<template>
+  <div>
+    <latest-container title="最新交易">
+      <div
+        class="item flex px-7 py-4 justify-between"
+        v-for="(item, i) in latestTxs"
+        :key="i"
+      >
+        <div class="left">
+          <div>
+            <span class="graytxt">交易哈希：</span>
+            <span class="text-footer-color">
+              {{ item.hash | filterHash }}
+            </span>
+          </div>
+          <div class="graytxt">
+            {{ item.time_block | formatTime }}
+          </div>
+        </div>
+        <div class="middle">
+          <div>
+            <span class="graytxt">发送方：</span>
+            <span class="text-footer-color">{{ item.from | filterHash }}</span>
+          </div>
+          <div class="graytxt">
+            <span class="graytxt">接收方：</span>
+            <span class="text-footer-color">{{ item.to | filterHash }}</span>
+          </div>
+        </div>
+        <div class="right text-center">
+          <div class="graytxt">交易金额</div>
+          <div class="text-darkBlue">{{ item | filterTradeValue }}</div>
+        </div>
+      </div>
+    </latest-container>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import LatestContainer from '@/components/pc/BlockChainBrowser/LatestContainer.vue'
+import { iAsset } from '@/types/trade'
+export default Vue.extend({
+  components: { LatestContainer },
+  props: {
+    latestTxs: Array as PropType<
+      {
+        hash: string
+        time_block: number
+        from: string
+        to: string
+        amount: number
+        assets: iAsset[]
+        tx: {
+          execer?: string
+        }
+      }[]
+    >,
+  },
+})
+</script>
+
+<style scoped>
+.item {
+  height: 88px;
+  border-bottom: 1px solid #f5f5ff;
+}
+
+.txNumberBox {
+  width: 100px;
+  height: 52px;
+  background: rgba(37, 69, 203, 0.1);
+  border-radius: 4px;
+}
+
+.item:last-of-type {
+  border-bottom: none;
+}
+.height {
+  font-size: 18px;
+  font-family: PingFang-SC-Bold, PingFang-SC;
+  font-weight: bold;
+  color: #1f3470;
+}
+
+.graytxt {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #7c88ad;
+}
+
+.darkGraytxt {
+  color: #7c88ad;
+}
+.left {
+  min-width: 192px;
+}
+
+.middle {
+  min-width: 168px;
+}
+
+.right {
+  min-width: 56px;
+}
+</style>

src/main.ts

-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import 'ant-design-vue/dist/antd.css';
-import "tailwindcss/tailwind.css"
-import './style.css'
-import { Select } from 'ant-design-vue'
-import { i18n } from './assets/lang/index'
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import "ant-design-vue/dist/antd.css";
+import "tailwindcss/tailwind.css";
+import "./style.css";
+import { Select } from "ant-design-vue";
+import { i18n } from "./assets/lang/index";
+import filters from "@/utils/filters";
+
+Object.entries(filters).forEach(([filterName, filterFunc]) => {
+  Vue.filter(filterName, filterFunc);
+});
+
 // import VueI18n from 'vue-i18n';
 // Vue.use(VueI18n);
 
@@ -18,13 +24,13 @@ import { i18n } from './assets/lang/index'
 //   }
 // });
 
-Vue.use(Select)
+Vue.use(Select);
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
   i18n,
-  render: h => h(App)
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount("#app");

src/types/trade.ts

+export interface iAsset {
+  amount: number;
+  exec: string;
+  symbol: string;
+}

src/utils/filters.ts

+import { iAsset } from "@/types/trade";
+
+//截断哈希
+export default {
+  filterHash: (str: string): string => {
+    const num = 8;
+    return str.substring(0, num) + "..." + str.substring(str.length - 4);
+  },
+  filterAmount: (n: number): number => {
+    return n / 1e8;
+  },
+  /**
+   * 获取交易中的价值
+   * 强制非科学计数法
+   * @param {object} tradeInfo
+   */
+  filterTradeValue: (tradeInfo: {
+    amount: number;
+    assets: iAsset[];
+    actionName: string;
+    tx: {
+      execer: string;
+    };
+  }): string => {
+    if (!tradeInfo.amount && !tradeInfo.assets) return `0 YCC`;
+    // 燃烧或增发交易
+    if (
+      tradeInfo.actionName === "tokenBurn" ||
+      tradeInfo.actionName === "tokenMint"
+    )
+      return "0 YCC";
+    let res = `${tradeInfo.amount / 100000000} YCC`;
+    if (
+      tradeInfo.assets &&
+      tradeInfo.assets.length !== 0 &&
+      tradeInfo.assets[0].symbol
+    ) {
+      const amount = (tradeInfo.assets[0].amount || 0) / 100000000;
+      const cointoken = tradeInfo.assets[0].symbol;
+      if (
+        cointoken === "ycc" ||
+        (cointoken === "YCC" &&
+          /^user\.p\.\w+\.coins$/.test(tradeInfo.assets[0].exec))
+      )
+        res = `${amount} para`;
+      else res = `${amount} ${cointoken}`;
+    }
+    if (tradeInfo.tx && /^user\.p\.\w+\.coins$/.test(tradeInfo.tx.execer)) {
+      let symbol = tradeInfo.tx.execer;
+      const sLen = symbol.length - 13;
+      symbol = symbol.substr(7, sLen);
+      res = res + ` (${symbol})`;
+    }
+    return res;
+  },
+
+  /**
+   * 格式化时间
+   *
+   * @param {date} date
+   * @param {string} format
+   * @returns
+   */
+  formatTime(date: any, format = "yyyy-MM-dd hh:mm:ss") {
+    if (!date) return "";
+    if (typeof date === "number") {
+      if (Math.floor(date / 1e9) > 0 && Math.floor(date / 1e9) < 10) {
+        date = date * 1000;
+      }
+      date = new Date(date);
+    } else if (typeof date === "string") {
+      // timestamp in secounds
+      if (/^\d{10}$/.test(date)) {
+        date = new Date(Number(date) * 1000);
+      } else {
+        // ios 中使用 new Date( yyyy-MM-dd hh:mm:ss:SS ) 时间格式字符串不能精确到 小时以后
+        const dateArr = date.split(/[- :]/);
+        const now = new Date();
+        date = new Date(
+          Number(dateArr[0]) || now.getFullYear(),
+          dateArr[1] && parseInt(dateArr[1])
+            ? parseInt(dateArr[1]) - 1
+            : now.getMonth() - 1,
+          Number(dateArr[2]) || 1,
+          Number(dateArr[3]) || 0,
+          Number(dateArr[4]) || 0,
+          Number(dateArr[5]) || 0
+        );
+      }
+    } else {
+      /* eslint-disable-next-line */
+      console.error("wrong format", date);
+      return "";
+    }
+
+    if (format === "timestamp") return +date;
+
+    const map = {
+      M: date.getMonth() + 1, // 月份
+      d: date.getDate(), // 日
+      h: date.getHours(), // 小时
+      m: date.getMinutes(), // 分
+      s: date.getSeconds(), // 秒
+      q: Math.floor((date.getMonth() + 3) / 3), // 季度
+      S: date.getMilliseconds(), // 毫秒
+      W: "星期" + ["日", "一", "二", "三", "四", "五", "六"][date.getDay()], // 星期
+    } as any;
+    format = format.replace(/([yMdhmsqSW])+/g, function(all, t) {
+      let v = map[t];
+      if (v !== undefined) {
+        if (all.length > 1) {
+          v = "0" + v;
+          v = v.substr(v.length - 2);
+        }
+        return v;
+      } else if (t === "y") {
+        return (date.getFullYear() + "").substr(4 - all.length);
+      }
+      return all;
+    });
+    return format;
+  },
+};

src/views/pc/blockChainBrowser.vue

@@ -10,6 +10,10 @@
     />
     <div class="rect-block"></div>
     <ChainOverview />
+    <div class="flex justify-between mt-14">
+      <latest-block :latestBlocks="latestBlocks"></latest-block>
+      <latest-tx :latestTxs="latestTxs"></latest-tx>
+    </div>
   </div>
 </template>
 
@@ -19,9 +23,18 @@ import ChainCard from '@/components/pc/BlockChainBrowser/ChainOverview/ChainCard
 import ChainTitle from '@/components/pc/BlockChainBrowser/ChainTitle.vue'
 import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
 import ChainOverview from '@/components/pc/BlockChainBrowser/ChainOverview/index.vue'
+import LatestBlock from '@/components/pc/BlockChainBrowser/LatestBlock/index.vue'
+import LatestTx from '@/components/pc/BlockChainBrowser/LatestTx/index.vue'
 
 export default Vue.extend({
-  components: { ChainCard, ChainTitle, ChainSearch, ChainOverview },
+  components: {
+    ChainCard,
+    ChainTitle,
+    ChainSearch,
+    ChainOverview,
+    LatestBlock,
+    LatestTx,
+  },
   data() {
     return {
       msgList: [
@@ -47,6 +60,67 @@ export default Vue.extend({
         },
       ],
       value: '',
+      latestBlocks: [
+        {
+          height: 2000,
+          address: 'aldskjfalkdjf',
+          timestamp: 1012930,
+          txNum: 20,
+        },
+        {
+          height: 2000,
+          address: 'aldskjfalkdjf',
+          timestamp: 1012930,
+          txNum: 20,
+        },
+        {
+          height: 2000,
+          address: 'aldskjfalkdjf',
+          timestamp: 1012930,
+          txNum: 20,
+        },
+        {
+          height: 2000,
+          address: 'aldskjfalkdjf',
+          timestamp: 1012930,
+          txNum: 20,
+        },
+        {
+          height: 2000,
+          address: 'aldskjfalkdjf',
+          timestamp: 1012930,
+          txNum: 20,
+        },
+        {
+          height: 2000,
+          address: 'aldskjfalkdjf',
+          timestamp: 1012930,
+          txNum: 20,
+        },
+      ],
+      latestTxs: [
+        {
+          hash: 'lkajskfdkasdf',
+          from: 'laksjdflas',
+          to: 'lakdjflkasdf',
+          time_block: 1643167975993,
+          amount: 30000000,
+        },
+        {
+          hash: 'lkajskfdkasdf',
+          from: 'laksjdflas',
+          to: 'lakdjflkasdf',
+          time_block: 1643167975993,
+          amount: 30000000,
+        },
+        {
+          hash: 'lkajskfdkasdf',
+          from: 'laksjdflas',
+          to: 'lakdjflkasdf',
+          time_block: 1643167975993,
+          amount: 30000000,
+        },
+      ],
     }
   },
   methods: {