TradeInfo模块基本重构完成

src/components/History.vue

@@ -122,7 +122,7 @@
               :href="'https://www.oklink.com/en/ethw/tx/' + item.hash"
               target="_blank"
           >
-            {{ getSimpleStr2(item.hash) + '..'  }}
+            {{ hashKit.head5(item.hash) + '..'  }}
           </v-chip>
         </template>
         <!-- From -->
@@ -132,7 +132,7 @@
               color="green lighten-3" target="_blank"
               @click="jump(item.from)"
           >
-            {{ getSimpleStr3(item.from) }}
+            {{ hashKit.headAndEnd2(item.from) }}
           </v-chip>
         </template>
         <!-- to -->
@@ -142,7 +142,7 @@
               @click="jump(item.to)"
               v-if="!item.toName"
           >
-            {{ getSimpleStr3(item.to) }}
+            {{ hashKit.headAndEnd2(item.to) }}
           </v-chip>
           <v-chip
               label
@@ -195,79 +195,7 @@
         </template>
         <!--tradeInfo-->
         <template v-slot:item.tradeInfo="{ item }">
-          <div @mouseenter="changeShowBlock(item, false)">
-            <v-container>
-              <div v-for="trade in item.tradeInfo">
-                <v-row>
-                  <!--token symbol-->
-                  <v-chip label
-                          class="ma-2 tradeLabel"
-                          @click="jump(trade.token, 'token')"
-                          v-if="!trade.tokenSymbol && trade.token !== '0xeth'">
-                    <div class="tokenName">{{ getSimpleStr3(trade.token) }}</div>
-                    <div class="tokenAmount">{{ numKit._N(trade.amount, 4) }} </div>
-                  </v-chip>
-                  <v-chip label
-                          color="blue lighten-4" class="ma-2 tradeLabel"
-                          @click="jump(trade.token, 'token')"
-                          v-else>
-                    <div class="tokenName">{{ trade.tokenSymbol }}</div>
-                    <div class="tokenAmount">{{ numKit._N(trade.amount, 4) }}</div>
-                  </v-chip>
-                  <!--from-->
-                  <div>
-                    <v-chip label
-                            class="ma-2" color="green lighten-3"
-                            @click="jump(trade.from)"
-                            v-if="trade.from === item.from">
-                      {{ getSimpleStr3(trade.from) }}
-                    </v-chip>
-                    <v-chip label
-                            class="ma-2" color="indigo lighten-4"
-                            @click="jump(trade.from)"
-                            v-else-if="trade.from === item.to">
-                      <div v-if="!trade.fromName">{{ getSimpleStr3(trade.from) }}</div>
-                      <div v-else>{{ trade.fromName }}</div>
-                    </v-chip>
-                    <v-chip label
-                            class="ma-2"
-                            @click="jump(trade.from)"
-                            v-else>
-                      <div v-if="!trade.fromName">{{ getSimpleStr3(trade.from) }}</div>
-                      <div v-else>{{ trade.fromName }}</div>
-                    </v-chip>
-                  </div>
-                  <v-icon>mdi-arrow-expand-right</v-icon>
-                  <!--to-->
-                  <div>
-                    <v-chip label
-                            class="ma-2" color="green lighten-3"
-                            @click="jump(trade.to)"
-                            v-if="trade.to === item.from">
-                      {{ getSimpleStr3(trade.to) }}
-                    </v-chip>
-                    <v-chip label
-                            class="ma-2" color="indigo lighten-4"
-                            @click="jump(trade.to)"
-                            v-else-if="trade.to === item.to">
-                      <div v-if="!trade.toName">{{ getSimpleStr3(trade.to) }}</div>
-                      <div v-else>{{ trade.toName }}</div>
-                    </v-chip>
-                    <v-chip label
-                            class="ma-2"
-                            @click="jump(trade.to)"
-                            v-else>
-                      <div v-if="!trade.toName">{{ getSimpleStr3(trade.to) }}</div>
-                      <div v-else>{{ trade.toName }}</div>
-                    </v-chip>
-                  </div>
-                </v-row>
-                <v-row>
-                  <v-divider></v-divider>
-                </v-row>
-              </div>
-            </v-container>
-          </div>
+          <TradeInfo :item="item"></TradeInfo>
         </template>
       </v-data-table>
     </v-card>
@@ -297,40 +225,14 @@
   import NumKit from '../plugins/kit/NumKit'
   import HashKit from '../plugins/kit/HashKit'
   import EthMev from '../plugins/model/EthMev'
+  import TradeInfo from '@/components/history/TradeInfo';
 
   export default {
     name: 'History',
-
+    components: { TradeInfo },
     methods: {
-      // 获取简易str
-      getSimpleStr (str) {
-        if (str && str.indexOf('x') !== -1) {
-          return str.substr(0, 7) + '...' + str.substr(-4)
-        } else {
-          return str
-        }
-      },
-      // 获取简易str2
-      getSimpleStr2 (str) {
-        if (str && str.indexOf('x') !== -1 && str.length > 15) {
-          return str.substr(0, 5)
-        } else {
-          return str
-        }
-      },
-      // 获取简易str3
-      getSimpleStr3 (str) {
-        if (str && str.indexOf('x') !== -1 && str.length > 15) {
-          let new_str = str.replaceAll("0x", "").toUpperCase()
-
-          return new_str.substr(0, 2)
-              + new_str.substr(new_str.length - 2, 2)
-        } else {
-          return str
-        }
-      },
       // 获取数据
-      async pullData () {
+      async generateHistoryData () {
         this.tableData.length = 0
 
         this.loading = true
@@ -393,7 +295,7 @@
     },
 
     data: () => ({
-      numKit: NumKit,
+      hashKit: HashKit,
       query: {
         block: '',
         hash: '',
@@ -422,7 +324,7 @@
     }),
 
     async mounted () {
-      await this.pullData()
+      await this.generateHistoryData()
     }
   }
 </script>

src/components/history/TradeInfo.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <v-container>
+      <div v-for="trade in item.tradeInfo">
+        <v-row>
+          <!--token symbol-->
+          <v-chip label
+                  class="ma-2 tradeLabel"
+                  @click="jump(trade.token, 'token')"
+                  v-if="!trade.tokenSymbol && trade.token !== '0xeth'">
+            <div class="tokenName">{{ hashKit.headAndEnd2(trade.token) }}</div>
+            <div class="tokenAmount">{{ numKit._N(trade.amount, 4) }} </div>
+          </v-chip>
+          <v-chip label
+                  color="blue lighten-4" class="ma-2 tradeLabel"
+                  @click="jump(trade.token, 'token')"
+                  v-else>
+            <div class="tokenName">{{ trade.tokenSymbol }}</div>
+            <div class="tokenAmount">{{ numKit._N(trade.amount, 4) }}</div>
+          </v-chip>
+          <!--from-->
+          <div>
+            <v-chip label
+                    class="ma-2" color="green lighten-3"
+                    @click="jump(trade.from)"
+                    v-if="trade.from === item.from">
+              {{ hashKit.headAndEnd2(trade.from) }}
+            </v-chip>
+            <v-chip label
+                    class="ma-2" color="indigo lighten-4"
+                    @click="jump(trade.from)"
+                    v-else-if="trade.from === item.to">
+              <div v-if="!trade.fromName">{{ hashKit.headAndEnd2(trade.from) }}</div>
+              <div v-else>{{ trade.fromName }}</div>
+            </v-chip>
+            <v-chip label
+                    class="ma-2"
+                    @click="jump(trade.from)"
+                    v-else>
+              <div v-if="!trade.fromName">{{ hashKit.headAndEnd2(trade.from) }}</div>
+              <div v-else>{{ trade.fromName }}</div>
+            </v-chip>
+          </div>
+          <v-icon>mdi-arrow-expand-right</v-icon>
+          <!--to-->
+          <div>
+            <v-chip label
+                    class="ma-2" color="green lighten-3"
+                    @click="jump(trade.to)"
+                    v-if="trade.to === item.from">
+              {{ hashKit.headAndEnd2(trade.to) }}
+            </v-chip>
+            <v-chip label
+                    class="ma-2" color="indigo lighten-4"
+                    @click="jump(trade.to)"
+                    v-else-if="trade.to === item.to">
+              <div v-if="!trade.toName">{{ hashKit.headAndEnd2(trade.to) }}</div>
+              <div v-else>{{ trade.toName }}</div>
+            </v-chip>
+            <v-chip label
+                    class="ma-2"
+                    @click="jump(trade.to)"
+                    v-else>
+              <div v-if="!trade.toName">{{ hashKit.headAndEnd2(trade.to) }}</div>
+              <div v-else>{{ trade.toName }}</div>
+            </v-chip>
+          </div>
+        </v-row>
+        <v-row>
+          <v-divider></v-divider>
+        </v-row>
+      </div>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import NumKit from '@/plugins/kit/NumKit'
+import HashKit from '@/plugins/kit/HashKit'
+
+export default {
+  name: 'TradeInfo',
+  props: ['item'],
+  data: () => ({
+    numKit: NumKit,
+    hashKit: HashKit
+  })
+}
+</script>
+
+<style scoped>
+
+</style>

src/plugins/kit/HashKit.js

@@ -1,3 +1,20 @@
 export default class HashKit {
+  static headAndEnd2(str) {
+    if (str && str.indexOf('x') !== -1 && str.length > 15) {
+      let new_str = str.replaceAll("0x", "").toUpperCase()
 
+      return new_str.substr(0, 2)
+        + new_str.substr(new_str.length - 2, 2)
+    } else {
+      return str
+    }
+  }
+
+  static head5(str) {
+    if (str && str.indexOf('x') !== -1 && str.length > 15) {
+      return str.substr(0, 5)
+    } else {
+      return str
+    }
+  }
 }

src/plugins/model/EthMev.js

@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-const http = Vue.prototype.$http
+import http from "axios";
 
 export default class EthMev {
   static async getEthMevData(block, hash, dataVague, page=1, size=200) {