feat: tradeDetail

src/views/mobile/tradeDetail.vue

+<template>
+  <div class="c-trade-detail mx-4 flow-root">
+    <MChainSearch class="mt-3.5"></MChainSearch>
+    <m-title :title="$t('lang.txDetail.detail')" class="mt-5"></m-title>
+    <div class="bg-white px-3.5 mb-5">
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.block.hash') }}</div>
+        <div class="content">
+          {{ data.hash | filterHash }}
+          <m-copy-btn :copyTxt="data.hash"></m-copy-btn>
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.txDetail.status') }}</div>
+        <div class="content">
+          <tx-status size="small" :status="data.status"></tx-status>
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.block.height') }}</div>
+        <div class="content">
+          {{ data.height }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.txDetail.time') }}</div>
+        <div class="content">
+          {{ data.blockTime | formatTime }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.trade.sender') }}</div>
+        <div class="content">
+          <router-link
+            :to="`/address?address=${data.from}`"
+            class="text-footer-color"
+          >
+            {{ data.from | filterHash(10) }}
+          </router-link>
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.trade.receiver') }}</div>
+        <div class="content">
+          <router-link
+            :to="`/address?address=${data.to}`"
+            class="text-footer-color"
+          >
+            {{ data.to | filterHash(10) }}
+          </router-link>
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.txDetail.value') }}</div>
+        <div class="content">
+          {{
+            { amount: data.amount, assets: data.assets, tx: data.inData }
+              | TradeValue
+          }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.txDetail.fee') }}</div>
+        <div class="content">
+          {{ data.fee | filterFee }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.txDetail.random') }}</div>
+        <div class="content">
+          {{ String(data.nonce) }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.txDetail.execer') }}</div>
+        <div class="content">
+          {{ data.execer }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.trade.func') }}</div>
+        <div class="content">
+          {{ data.actionName === 'unknown' ? 'none' : data.actionName }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <div class="label">{{ $t('lang.txDetail.txType') }}</div>
+        <div class="content">
+          {{
+            data.txType === 'normalTx'
+              ? $t('lang.txDetail.normalTx')
+              : $t('lang.txDetail.groupTx')
+          }}
+        </div>
+      </div>
+      <div class="">
+        <div class="label">{{ $t('lang.txDetail.inData') }}</div>
+        <div class="preBox">
+          <pre
+            class="preTxt"
+            contenteditable="true"
+          ><code>{{data.inData | decodeTransferNote}}</code>
+          </pre>
+        </div>
+      </div>
+      <div class="pb-3.5">
+        <div class="label">{{ $t('lang.txDetail.outData') }}</div>
+        <div class="preBox">
+          <pre
+            class="preTxt"
+            contenteditable="true"
+          ><code>{{data.outData}}</code>
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import vueTypedMixins from 'vue-typed-mixins'
+import MChainSearch from '@/components/mobile/m-chainSearch.vue'
+import MTitle from '@/components/mobile/m-title.vue'
+import MCopyBtn from '@/components/mobile/m-copyBtn.vue'
+import TxStatus from '@/components/pc/txStatus.vue'
+import tradeDetail from '@/mixin/tradeDetail'
+
+export default vueTypedMixins(tradeDetail).extend({
+  components: {
+    MChainSearch,
+    MTitle,
+    MCopyBtn,
+    TxStatus,
+  },
+})
+</script>
+<style lang="scss" scoped>
+.c-trade-detail {
+  padding-top: 44px;
+  .label {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #7c88ad;
+    width: 73px;
+    min-height: 40px;
+    line-height: 40px;
+  }
+  .content {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #1f3470;
+    line-height: 40px;
+  }
+  .preBox {
+    width: 305px;
+    height: 150px;
+    background: #ffffff;
+    border: 1px solid #ebeff1;
+    overflow: auto;
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #1f3470;
+    word-break: break-all;
+  }
+}
+</style>

src/views/pc/tradeDetail.vue

@@ -176,7 +176,6 @@ export default vueTypedMixins(tradeDetail).extend({
     ChainSearch,
     CopyBtn,
   },
-  mixins: [tradeDetail],
 })
 </script>