ethereum_viewer_webapp/src/components/viewer/table/TradeInfo.vue

<template>
  <div>
    <v-container>
      <div v-for="trade in item.tradeInfo">
        <v-row>
          <!--token symbol-->
          <v-chip v-if="!trade.tokenSymbol"
                  label class="ma-2 tradeLabel" @click="httpKit.jumpToEthw(trade.token, 'token')">
            <!-- 没有名字的 -->
            <div class="tokenName">{{ hashKit.headAndEnd2(trade.token) }}</div>
            <div class="tokenAmount">{{ numKit._N(trade.amount, 4) }} </div>
          </v-chip>
          <v-chip v-else
                  label class="ma-2 tradeLabel" :color="hashKit.generateColorByHash(trade.token)"
                  @click="httpKit.jumpToEthw(trade.token, 'token')">
            <!-- 有名字的和Ethereum/EthereumPow -->
            <div class="tokenName">{{ trade.tokenSymbol }}</div>
            <div class="tokenAmount">{{ numKit._N(trade.amount, 4) }}</div>
          </v-chip>
          <!--from-->
          <div>
            <v-chip v-if="trade.from === item.from"
                    label class="ma-2" color="green lighten-3" @click="httpKit.jumpToEthw(trade.from)">
              {{ hashKit.headAndEnd2(trade.from) }}
            </v-chip>
            <v-chip v-else-if="trade.from === item.to"
                    label class="ma-2" color="indigo lighten-4" @click="httpKit.jumpToEthw(trade.from)">
              <div v-if="!trade.fromName">{{ hashKit.headAndEnd2(trade.from) }}</div>
              <div v-else>{{ trade.fromName }}</div>
            </v-chip>
            <v-chip v-else
                    label class="ma-2" :color="hashKit.generateColorByHash(trade.from)"
                    @click="httpKit.jumpToEthw(trade.from)">
              <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 v-if="trade.to === item.from"
                    label class="ma-2" color="green lighten-3" @click="httpKit.jumpToEthw(trade.to)">
              {{ hashKit.headAndEnd2(trade.to) }}
            </v-chip>
            <v-chip v-else-if="trade.to === item.to"
                    label class="ma-2" color="indigo lighten-4" @click="httpKit.jumpToEthw(trade.to)">
              <div v-if="!trade.toName">{{ hashKit.headAndEnd2(trade.to) }}</div>
              <div v-else>{{ trade.toName }}</div>
            </v-chip>
            <v-chip v-else
                    label class="ma-2" :color="hashKit.generateColorByHash(trade.to)" @click="httpKit.jumpToEthw(trade.to)">
              <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'
import HttpKit from '@/plugins/kit/HttpKit'

export default {
  name: 'TradeInfo',
  props: ['item'],
  data: () => ({
    numKit: NumKit,
    hashKit: HashKit,
    httpKit: HttpKit
  })
}
</script>

<style scoped>

</style>