src/views/sendTransaction/transferConfirm.vue

   1 <style lang="" scoped>
   2 .warp {
   3     position: absolute;
   4     top: 0;
   5     left: 0;
   6     right: 0;
   7     height: 600px;
   8     z-index: 2;
   9 }
  10 .header {
  11   display: flex;
  12 }
  13 .header p{
  14   text-align: center;
  15   width: 270px;
  16   padding-top: 17px;
  17 }
  18
  19 .content {
  20     margin: 20px;
  21     padding: 20px;
  22     overflow: hidden;
  23     border-radius:4px;
  24     width: 280px;
  25 }
  26
  27 .ft {
  28     border-radius: 5px;
  29     padding: 0 20px !important;
  30     line-height: 45px;
  31     margin-bottom: 20px;
  32 }
  33
  34 .ft .from {
  35     overflow-x: hidden;
  36     width: 90px;
  37 }
  38 .ft .to {
  39     overflow-x: hidden;
  40     padding-left: 20px;
  41     float: right;
  42 }
  43
  44 .right-arrow {
  45     width: 32px;
  46     height: 32px;
  47     border-top: 12px solid #3c454b;
  48     border-right: 12px solid #3c454b;
  49     transform: rotate(45deg);
  50     position: absolute;
  51     left: 105px;
  52 }
  53
  54 .divider {
  55     margin: 15px 0;
  56 }
  57
  58 .value .uint {
  59     font-size: 12px;
  60     margin-left: 3px;
  61     text-transform: uppercase;
  62 }
  63
  64 .fee-intro {
  65     font-size: 10px;
  66 }
  67
  68 .btn-inline {
  69     display: flex;
  70     padding: 0;
  71 }
  72 .btn-inline .btn {
  73     margin: 10px 15px;
  74 }
  75 .row{
  76   word-break: break-all;
  77 }
  78   .col{
  79     font-size: 14px;
  80     width: 35%;
  81   }
  82   .label{
  83     color: #7B7B7B;
  84   }
  85   .value{
  86     color: #282828;
  87     width: 60%;
  88   }
  89   .asset{
  90     text-transform: uppercase;
  91   }
  92   table{
  93     width: 100%;
  94   }
  95   .form-item{
  96     padding:0;
  97     margin:0;
  98     margin-bottom: 10px;
  99   }
 100   .scorll-panel{
 101     overflow: scroll;
 102     height: 545px;
 103   }
 104 .view-link{
 105   font-size: 14px;
 106   color: #035BD4;
 107 }
 108 </style>
 109
 110 <template>
 111     <div class="warp bg-gray">
 112         <section class="header bg-header">
 113             <i class="iconfont icon-back" @click="$router.go(-1)"></i>
 114             <p>{{ title || $t('transfer.confirmTransaction') }}</p>
 115         </section>
 116
 117         <div class="scorll-panel">
 118             <section class="content bg-white">
 119                 <table>
 120                     <tbody>
 121                         <tr class="row">
 122                             <td class="col label">{{ $t('transfer.from') }}</td>
 123                             <td class="col value">{{account.alias}}</td>
 124                         </tr>
 125                         <tr class="row">
 126                             <td class="col label">{{ $t('transfer.to') }}</td>
 127                             <td class="col value">{{transaction.toShort}}</td>
 128                         </tr>
 129                         <tr class="row">
 130                             <td class="col label">{{ $t('transfer.asset') }}</td>
 131                             <td class="col value asset">
 132                               {{full? transaction.asset:shortAddress(transaction.asset)}}
 133                               <a v-on:click="full = !full"  class="view-link">
 134                                 {{ full? $t('transfer.hide'): $t('transfer.view') }}
 135                               </a>
 136                             </td>
 137                         </tr>
 138                         <div class="divider"></div>
 139                         <tr class="row">
 140                             <td class="col label">{{ $t('transfer.transferAmount') }}</td>
 141                             <td class="col value">{{transaction.amount}}<span v-if="assetAlias" class="uint">{{assetAlias}}</span></td>
 142                         </tr>
 143                         <tr class="row">
 144                             <td class="col label">{{ $t('transfer.fee') }}</td>
 145                             <td class="col value">{{transaction.fee}}<span class="uint">BTM</span></td>
 146                         </tr>
 147
 148                         <tr class="row">
 149                             <td class="col label">{{ $t('transfer.total') }}</td>
 150                             <td class="col value">
 151                                 <!--<p class="fee-intro">{{ $t('transfer.totalTip') }}</p>-->
 152                                 <!--{{(assetAlias && assetAlias.toUpperCase() === 'BTM')?Number(transaction.amount)+Number(transaction.fee): Number(transaction.amount)}}<span v-if="assetAlias" class="uint">{{assetAlias}}</span>-->
 153                                 {{totalAmount}}<span v-if="assetAlias" class="uint">{{assetAlias}}</span>
 154                             </td>
 155                         </tr>
 156                     </tbody>
 157                 </table>
 158             </section>
 159
 160             <section class="content bg-white">
 161               <div class="form">
 162                 <div class="form-item">
 163                   <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
 164                   <div class="form-item-content">
 165                     <input type="password"  v-model="password" autofocus>
 166                   </div>
 167                 </div>
 168               </div>
 169             </section>
 170
 171             <div class="row" style="margin: 20px;">
 172                 <div class="btn bg-green" @click="transfer">{{ $t('transfer.confirm') }}</div>
 173             </div>
 174         </div>
 175
 176     </div>
 177
 178 </template>
 179
 180 <script>
 181   import address from "@/utils/address";
 182   import transaction from "@/models/transaction";
 183   import BigNumber from "bignumber.js"
 184   import account from "@/models/account";
 185 import modalPasswd from "@/components/modal-passwd";
 186 import getLang from "@/assets/language/sdk";
 187 import { LocalStream } from 'extension-streams';
 188 import { mapGetters } from 'vuex'
 189
 190 export default {
 191     components: {
 192         modalPasswd
 193     },
 194     data() {
 195         return {
 196           full: false,
 197           title:null,
 198           rawData: [],
 199             account: {},
 200             transaction: {
 201                 to: "",
 202                 toShort: "",
 203                 amount: 0,
 204                 fee: ""
 205             },
 206             password:'',
 207             assetAlias:null
 208         };
 209     },
 210   beforeRouteEnter (to, from, next) {
 211     next(vm => {
 212       if(from.name === 'cross-chain') {
 213         vm.title = vm.$t('crossChain.detail')
 214       }
 215
 216       next()
 217     });
 218   },
 219     computed: {
 220       totalAmount(){
 221         if(this.assetAlias && this.assetAlias.toUpperCase() === 'BTM'){
 222           const n = new BigNumber(this.transaction.amount)
 223           return n.plus(this.transaction.fee).toNumber()
 224         }else{
 225           return Number(this.transaction.amount)
 226         }
 227       },
 228       ...mapGetters([
 229         'language',
 230         'net',
 231         'netType'
 232       ])
 233     },
 234     methods: {
 235         shortAddress: function (add) {
 236           return address.short(add)
 237         },
 238         transfer: function () {
 239             if (this.password == "") {
 240               this.$dialog.show({
 241                 body: this.$t("transfer.emptyPassword")
 242               });
 243               return;
 244             }
 245             let loader = this.$loading.show({
 246                 // Optional parameters
 247                 container: null,
 248                 canCancel: true,
 249                 onCancel: this.onCancel
 250             });
 251
 252             let address
 253           if (this.transaction.type === 'toVapor'){
 254             address = this.account.address
 255           }else if(this.transaction.type === 'toBytom'){
 256             address =  this.account.vpAddress
 257           }else{
 258             address = this.netType === 'vapor'?  this.account.vpAddress: this.account.address;
 259           }
 260
 261           Promise.all(this.rawData.map( (rawdata) => transaction.transfer(this.account.guid, rawdata, this.password, address)))
 262                 .then(ret => {
 263                     loader.hide();
 264                     if(this.$route.params.type == 'popup'){
 265                       LocalStream.send({method:'transfer',action:'success', message:ret[ret.length-1]});
 266                       window.close();
 267                     }
 268                     this.$dialog.show({
 269                       type: 'success',
 270                       body: this.$t("transfer.success")
 271                     });
 272                     this.$router.push('/')
 273                     if(this.transaction.type === 'toVapor'){
 274                       account.setupNet(`${this.net}vapor`)
 275                     }
 276                 })
 277                 .catch(error => {
 278                     loader.hide();
 279                     this.$dialog.show({
 280                         body: getLang(error.message, this.language)
 281                     });
 282                 });
 283         }
 284     }, mounted() {
 285         let params = this.$route.params;
 286
 287         this.account = params.account;
 288         this.transaction = params.transaction;
 289         this.transaction.toShort = params.transaction.to;
 290         this.rawData = params.rawData;
 291
 292         this.assetAlias = params.assetAlias;
 293     }
 294 };
 295 </script>