src/views/transferDetail.vue

   1 <style lang="" scoped>
   2   .header {
   3     display: flex;
   4   }
   5   .header p{
   6     text-align: center;
   7     width: 280px;
   8     padding-top: 17px;
   9   }
  10
  11 .preview i {
  12     width: 100px;
  13     margin: 0 auto;
  14     display: block;
  15     width: 45px;
  16     font-size: 45px;
  17     margin-bottom: 25px;
  18 }
  19 .preview .value {
  20     font-size: 30px;
  21     width: 300px;
  22     margin: 0 auto;
  23     text-align: center;
  24 }
  25 .preview .value span {
  26     font-size: 18px;
  27 }
  28
  29 .title {
  30     font-size: 18px;
  31     font-weight: inherit;
  32     color: #cacaca;
  33     text-align: center;
  34     padding: 5px 0;
  35 }
  36 .transaction {
  37     padding: 0 20px;
  38     font-size: 14px;
  39     word-break: break-all;
  40     height: 380px;
  41     width: 275px;
  42     margin-top: 20px;
  43 }
  44 .transaction .label {
  45     width: 35%;
  46     vertical-align: top;
  47     word-break: break-word;
  48 }
  49 .transaction .value{
  50   width: 65%;
  51   color: #282828;
  52   font-weight: 500;
  53   word-break: break-word;
  54 }
  55   .panel{
  56     padding: 0;
  57   }
  58   .tx-header{
  59     height: 40px;
  60     width: 280px;
  61     text-align: center;
  62     padding: 20px;
  63   }
  64   .tx-header .value{
  65     color: white;
  66     font-size: 18px;
  67     font-weight: 500;
  68   }
  69   .success-header{
  70     background-image: url("../assets/img/backgroundHead/succeed.svg");
  71     background-size: 320px 80px;
  72   }
  73   .pending-header{
  74     background-image: url("../assets/img/backgroundHead/pending.svg");
  75     background-size: 320px 80px;
  76   }
  77   .fail-header{
  78     background-image: url("../assets/img/backgroundHead/fail.svg");
  79     background-size: 320px 80px;
  80   }
  81   .header-text{
  82     color:rgba(255,255,255,0.50);
  83   }
  84   .asset{
  85     text-transform: uppercase;
  86   }
  87   .divider{
  88     margin: 10px 0;
  89   }
  90   .footer{
  91     text-align: center;
  92     position: absolute;
  93     bottom: 10px;
  94     width: 100%;
  95     font-size: 12px
  96   }
  97 </style>
  98
  99 <template>
 100     <div class="bg-gray warp-chlid">
 101         <section class="header bg-header">
 102             <i class="iconfont icon-back" @click="$router.go(-1)"></i>
 103             <p >{{ $t('transactionDetail.title') }}</p>
 104         </section>
 105
 106         <section class="panel">
 107             <div class="tx-header"
 108                  v-bind:class="classObject">
 109               <p class="value">{{transaction.direct}}{{transaction.val}}</p>
 110               <small class="header-text" v-if="!transaction.status">
 111                 {{ $t('transactionDetail.fail') }}
 112               </small>
 113               <small class="header-text" v-else-if="transaction.hasOwnProperty('blockTimestamp')">
 114                 {{ $t('transactionDetail.success') }}
 115               </small>
 116               <small class="header-text" v-else>
 117                 {{ $t('transactionDetail.pending') }}
 118               </small>
 119             </div>
 120             <vue-scroll>
 121                 <div class="transaction">
 122                     <table style="margin-bottom: 20px">
 123                       <tbody>
 124                       <tr>
 125                         <td class="label">
 126                           {{ $t('transactionDetail.transactionID') }}
 127                         </td>
 128                         <td class="value">
 129                           <p>{{transaction.hash}}</p>
 130                         </td>
 131                       </tr>
 132                       <tr>
 133                         <td colspan="2"><div class="divider"></div></td>
 134                       </tr>
 135
 136                       <tr>
 137                         <td class="label">
 138                           {{ $t('transactionDetail.assetId') }}
 139                         </td>
 140                         <td class="asset value">
 141                           <p>{{currentAsset.asset.assetId}}</p>
 142                         </td>
 143                       </tr>
 144                       <tr>
 145                         <td class="label">
 146                           {{ $t('transactionDetail.time') }}
 147                         </td>
 148                         <td class="value">
 149                             <div v-if="transaction.hasOwnProperty('blockTimestamp')">
 150                               {{transaction.submissionTimestamp | moment}}
 151                             </div>
 152                             <div v-else>
 153                               -
 154                             </div>
 155                         </td>
 156                       </tr>
 157                       <tr>
 158                         <td class="label">
 159                             {{ $t('transactionDetail.blockHeight') }}
 160                         </td>
 161                         <td class="value">
 162                           <p v-if="transaction.blockHeight != undefined">{{transaction.blockHeight}}</p>
 163                           <p v-else>-</p>
 164                         </td>
 165                       </tr>
 166                       <tr>
 167                         <td class="label">
 168                           {{ $t('transactionDetail.blockSize') }}
 169                         </td>
 170                         <td class="value">
 171                           <p>{{transaction.size}}</p>
 172                         </td>
 173                       </tr>
 174                       <tr>
 175                         <td class="label">
 176                           {{ $t('transactionDetail.fee') }}(BTM)
 177                         </td>
 178                         <td class="value">
 179                           <p>{{transaction.fee}}</p>
 180                         </td>
 181                       </tr>
 182                       <tr v-if="transaction.type =='vote' || transaction.type =='veto' ">
 183                         <td colspan="2"><div class="divider"></div></td>
 184                       </tr>
 185                       <tr  v-if="transaction.type =='vote' || transaction.type =='veto'">
 186                         <td class="label">
 187                           {{ $t('listVote.bpName') }}
 188                         </td>
 189                         <td class="value">
 190                           <p>{{transaction.vName}}</p>
 191                         </td>
 192                       </tr>
 193                       <tr  v-if="transaction.type =='vote'">
 194                         <td class="label">
 195                           {{ $t('listVote.voteVotes') }}
 196                         </td>
 197                         <td class="value">
 198                           <p>{{transaction.vAmount}}</p>
 199                         </td>
 200                       </tr>
 201                       <tr v-if="transaction.type =='crossChain'">
 202                         <td colspan="2"><div class="divider"></div></td>
 203                       </tr>
 204                       <tr  v-if="transaction.type =='crossChain'">
 205                         <td class="label">
 206                           {{ $t('crossChain.direction') }}
 207                         </td>
 208                         <td class="value">
 209                           <p>{{transaction.cDirection}}</p>
 210                         </td>
 211                       </tr>
 212                       <tr>
 213                         <td colspan="2"><div class="divider"></div></td>
 214                       </tr>
 215                       <tr :key="'input'+index" v-for="(input, index) in transaction.inputs">
 216                         <td class="label">{{ $t('transactionDetail.sendAddress') }}{{transaction.inputs.length > 1 ? index+1 : ''}}</td>
 217                         <td class="value">{{input.address}}<span v-if="input.address == selfAddress"> {{ $t('transactionDetail.myAddress') }}</span></td>
 218                       </tr>
 219                       <tr :key="'output'+ index" v-for="(output, index) in transaction.outputs">
 220                         <td class="label">{{ $t('transactionDetail.receiveAddress') }}{{transaction.outputs.length > 1 ? index+1 : ''}}</td>
 221                         <td class="value">{{output.address}}<span v-if="output.address == selfAddress"> {{ $t('transactionDetail.myAddress') }}</span></td>
 222                       </tr>
 223
 224                       </tbody>
 225                     </table>
 226                 </div>
 227             </vue-scroll>
 228         </section>
 229         <small class="footer color-grey">{{ $t('transactionDetail.tips') }}</small>
 230     </div>
 231 </template>
 232
 233 <script>
 234   import {  mapState, mapGetters } from 'vuex'
 235
 236   export default {
 237     name: "",
 238     data() {
 239         return {
 240             selfAddress: "",
 241             transaction: {
 242                 guid: "",
 243                 to: "",
 244                 amount: 0,
 245                 fee: ""
 246             }
 247         };
 248     },
 249     methods: {
 250     },
 251     computed: {
 252       classObject: function () {
 253         return {
 254           'success-header': this.transaction.status && this.transaction.hasOwnProperty('blockTimestamp'),
 255           'pending-header': this.transaction.status  && !this.transaction.hasOwnProperty('blockTimestamp') ,
 256           'fail-header': !this.transaction.status
 257         }
 258       },
 259       ...mapState([
 260         'currentAsset',
 261         'listVote'
 262       ]),
 263       ...mapGetters([
 264         'currentAccount',
 265         'netType'
 266       ])
 267     },
 268     mounted() {
 269         let params = this.$route.params;
 270
 271         let transaction = params.transaction;
 272         if(this.netType === 'vapor'){
 273           this.selfAddress = this.currentAccount.vpAddress;
 274         }else{
 275           this.selfAddress = this.currentAccount.address;
 276         }
 277         console.log(params.transaction)
 278         if(transaction.type =='vote' || transaction.type =='veto'){
 279           const node =_.find(this.listVote, {pubKey: transaction.pubkey})
 280           transaction.vName = node.name
 281         }
 282         this.transaction = transaction
 283     }
 284 };
 285 </script>