src/views/delayTxList.vue

   1 <style lang="scss" scoped>
   2 .transactions {
   3   font-size: 15px;
   4   height:calc(100% - 80px);
   5   overflow: auto;
   6   overscroll-behavior: contain;
   7 }
   8
   9 .value{
  10 font-size: 15px;
  11 }
  12 .addr{
  13   font-size: 12px;
  14   color: rgba(0, 0, 0, 0.36);
  15 }
  16
  17 .no-record{
  18   display: block;
  19 }
  20
  21 .back{
  22     width: 56px;
  23     height: 28px;
  24
  25     background: #EEEEEE;
  26     border-radius: 20px;
  27 }
  28
  29 .header{
  30   display: flex;
  31   margin-bottom: 20px;
  32   h1{
  33     margin-left: 12px;
  34     font-size: 20px;
  35   }
  36 }
  37
  38 .list-item a{
  39   display: flex;
  40   justify-content: space-between;
  41   width: 100%;
  42   color: rgba(0, 0, 0, 0.88);
  43   font-size: 14px;
  44 }
  45
  46 .transaction-title{
  47   display: flex;
  48   font-weight: 600;
  49   font-size: 15px;
  50   margin: 16px 0;
  51   color: rgba(0, 0, 0, 0.24);
  52   div:not(:first-child) {
  53     margin-left: 25px;
  54   }
  55
  56   div{
  57     cursor: pointer;
  58   }
  59 }
  60 .icon_circle_selected{
  61   color: #06BE85;
  62   font-size: 16px;
  63   vertical-align: middle;
  64   margin-right: 5px;
  65 }
  66 </style>
  67
  68 <template>
  69     <div class="warp-child bg-grey">
  70         <section class="header">
  71           <BackButton :small="true" :des="'home'"/>
  72           <h1 class="color-black">
  73             <div class="welcome-title">{{ $t('delayTx.title')}}</div>
  74           </h1>
  75         </section>
  76
  77         <section class="transactions" v-if="currentBlockHeight !== 0">
  78             <ul class="list">
  79                 <li class="list-item" v-for="(transaction, index) in transactions" :key="index" >
  80                     <a :href="blockmeta(transaction.lockedTxHash)" target="_blank">
  81                         <div>
  82                             <div class="font-bold">
  83                               {{transaction.type}}
  84                             </div>
  85                             <div class="addr color-grey" >{{transaction.address}}</div>
  86
  87                         </div>
  88                         <div class="text-align-right">
  89                             <div class="value">{{transaction.direct}}{{transaction.amount}} {{transaction.asset.symbol}}</div>
  90
  91                             <div v-if="transaction.status === 'delay_transfer_unlocked'" class="addr color-black">
  92                               <i class="iconfont icon_circle_selected"></i>{{ $t('delayTx.delay_transfer_unlocked') }}
  93                             </div>
  94                             <div v-else class="addr">
  95                               {{ $t(`delayTx.${transaction.status}`, { days: ( transaction.days ) }) }}
  96                             </div>
  97                         </div>
  98                     </a>
  99                 </li>
 100               <infinite-loading @infinite="infiniteHandler">
 101                 <div slot="no-more"></div>
 102                 <div slot="no-results">
 103                   <div class="bg-emptytx"></div>
 104                   <div>
 105                     <span class="color-lightgrey center-text no-record">{{$t('main.noRecord')}}</span>
 106                   </div>
 107                 </div>
 108               </infinite-loading>
 109             </ul>
 110         </section>
 111
 112
 113     </div>
 114 </template>
 115
 116 <script>
 117 import address from "@/utils/address";
 118 import query from "@/models/query";
 119 import transaction from "@/models/transaction";
 120 import { BTM } from "@/utils/constants";
 121 import { mapGetters, mapState } from 'vuex'
 122 import moment from 'moment'
 123
 124 const EnterActive = 'animated faster fadeInLeft';
 125 const LeaveActive = 'animated faster fadeOutLeft';
 126 const limit = 10
 127
 128 const vaporBlockTime = 0.5
 129 const bytomBlockTime = 150
 130
 131 export default {
 132     name: "",
 133     data() {
 134         return {
 135             transactions: [],
 136             maskShow: false,
 137             start: 0,
 138             enterActive: EnterActive,
 139             leaveActive: LeaveActive,
 140             currentBlockHeight:0,
 141         };
 142     },
 143     watch: {
 144         '$route'(to, from) {
 145             if (to.name.startsWith('menu')) {
 146                 this.maskShow = true
 147             } else if (from.name.startsWith('menu')) {
 148                 this.maskShow = false
 149             }
 150
 151             // remove transition for some page
 152             this.enterActive = EnterActive
 153             this.leaveActive = LeaveActive
 154         },
 155     },
 156     computed: {
 157       address: function(){
 158         return this.currentAddress
 159         // if(this.netType === 'vapor'){
 160         //   return this.currentAccount.vpAddress
 161         // }else{
 162         //   return this.currentAccount.address
 163         // }
 164       },
 165         ...mapState([
 166           'bytom',
 167           'currentAsset',
 168           'listVote'
 169         ]),
 170         ...mapGetters([
 171           'language',
 172           'currentAccount',
 173           'currentAddress',
 174           'currency',
 175           'netType',
 176           'net'
 177         ])
 178     },
 179     methods: {
 180       infiniteHandler($state) {
 181         if (this.transactions.length===0 || (this.transactions.length == (this.start)) ) {
 182           this.refreshTransactions( this.start, limit).then(transactions => {
 183             if (transactions.length) {
 184               this.start = this.start + limit;
 185               this.transactions.push(...transactions);
 186               $state.loaded();
 187             }else{
 188               $state.complete();
 189             }
 190           });
 191         }else {
 192           $state.complete();
 193         }
 194       },
 195       blockmeta:function (txid) {
 196         if(this.netType === 'vapor'){
 197           return `https://vapor.blockmeta.com/tx/${txid}`
 198         }else{
 199           return `https://classic.blockmeta.com/tx/${txid}`
 200         }
 201       },
 202       close: function () {
 203         this.$router.go(-1)
 204       },
 205       shortAddress: function (add) {
 206         return address.short(add)
 207       },
 208       refreshTransactions: function (start, limit) {
 209           return new Promise((resolve, reject) => {
 210
 211               transaction.listDelayTransaction(this.address,  start, limit, this.net).then(transactions => {
 212                 if (transactions == null) {
 213                       return;
 214                   }
 215
 216                   const formattedTx = this.transactionsFormat(transactions);
 217                   resolve(formattedTx)
 218               }).catch(error => {
 219                   console.log(error);
 220                   reject(error)
 221               });
 222           })
 223         },
 224         countDays: function (lockUntil) {
 225           const blockDiff = lockUntil - this.currentBlockHeight ;
 226           let timeDiff = 0
 227           if(this.netType === 'bytom'){
 228             timeDiff = bytomBlockTime * blockDiff;
 229           }else{
 230             timeDiff = vaporBlockTime * blockDiff
 231           }
 232
 233           return moment().add(timeDiff, 'seconds').fromNow(true);
 234         },
 235         transactionsFormat: function (transactions) {
 236           const formattedTransactions = []
 237
 238           transactions.forEach(transaction => {
 239             if(transaction.fromAddress == this.address){
 240               transaction.address = address.short(transaction.toAddress)
 241               transaction.direct = "-";
 242               transaction.type = this.$t('delayTx.scheduledTransfer')
 243             }
 244             else {
 245               transaction.address = address.short(transaction.fromAddress)
 246               transaction.direct = "+";
 247               transaction.type = this.$t('delayTx.scheduledReceive')
 248             }
 249
 250             if(transaction.status == 'delay_transfer_locked'){
 251               transaction.days = this.countDays(transaction.lockUntil)
 252             }
 253
 254             formattedTransactions.push(transaction);
 255           });
 256           return formattedTransactions;
 257         },
 258     },
 259     async mounted() {
 260         if(this.language === 'zh' ||this.language === 'cn'){
 261           moment.locale('zh-cn');
 262         }
 263         else{
 264           moment.locale('en');
 265         }
 266         const resp = await query.blockStatus()
 267         this.currentBlockHeight = resp.blockHeight;
 268     },
 269   };
 270 </script>