src/views/sendTransaction/advancedTransfer.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     overflow: scroll;
  10   }
  11   .header {
  12     display: flex;
  13   }
  14   .header p{
  15     text-align: center;
  16     width: 270px;
  17     padding-top: 17px;
  18   }
  19
  20   .content {
  21     margin: 20px;
  22     padding: 20px;
  23     overflow: hidden;
  24     border-radius:4px;
  25     width: 280px;
  26   }
  27   .divider {
  28     margin: 12px 0;
  29   }
  30
  31   .value .uint {
  32     font-size: 12px;
  33     margin-left: 3px;
  34   }
  35   .btn-inline .btn {
  36     margin: 10px 15px;
  37   }
  38   .row{
  39     word-break: break-all;
  40   }
  41   .col{
  42     font-size: 14px;
  43     width: 35%;
  44   }
  45   .label{
  46     color: #7B7B7B;
  47   }
  48   .value{
  49     color: #282828;
  50     width: 60%;
  51   }
  52   table{
  53     width: 100%;
  54   }
  55   .form-item{
  56     padding:0;
  57     margin:0;
  58     margin-bottom: 10px;
  59   }
  60   .hide{
  61     width: 175px;
  62     overflow: hidden;
  63     text-overflow: ellipsis;
  64     white-space: nowrap;
  65   }
  66   .view-link{
  67     font-size: 14px;
  68     color: #035BD4;
  69     width: 275px;
  70     display: block;
  71   }
  72 </style>
  73
  74 <template>
  75   <div class="warp bg-gray">
  76     <section class="header bg-header">
  77       <i class="iconfont icon-back" @click="close"></i>
  78       <p>{{ $t('transfer.confirmTransaction') }}</p>
  79     </section>
  80
  81     <section class="content bg-white">
  82       <table>
  83         <tbody>
  84           <tr class="row">
  85             <td class="col label">{{ $t('transfer.from') }}</td>
  86             <td class="col value">{{account.alias}}</td>
  87           </tr>
  88           <div class="divider"></div>
  89           <tr class="row">
  90             <td class="col label">Input</td>
  91             <td class="col value" v-bind:class="{ hide: !full }" >{{transaction.input}}</td>
  92           </tr>
  93           <tr class="row">
  94             <td class="col label">Output</td>
  95             <td class="col value" v-bind:class="{ hide: !full }" >{{transaction.output}}</td>
  96           </tr>
  97           <tr class="row">
  98             <td class="col label">Args</td>
  99             <td class="col value" v-bind:class="{ hide: !full }" >{{transaction.args}}</td>
 100           </tr>
 101           <tr class="row">
 102             <td colspan="2" class="center-text">
 103               <a v-on:click="full = !full"  class="view-link">
 104                 {{ full? $t('transfer.hide'): $t('transfer.view') }} >>
 105               </a>
 106             </td>
 107           </tr>
 108
 109           <div class="divider"></div>
 110
 111           <tr class="row">
 112             <td class="col label">{{ $t('transfer.fee') }}</td>
 113             <td class="col value">{{transaction.fee}}<span class="uint">BTM</span></td>
 114           </tr>
 115         </tbody>
 116       </table>
 117     </section>
 118     <section class="content bg-white">
 119       <div class="form">
 120         <div class="form-item">
 121           <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
 122           <div class="form-item-content">
 123             <input type="password"  v-model="password" autofocus>
 124           </div>
 125         </div>
 126       </div>
 127     </section>
 128
 129     <div class="row" style="margin: 20px;">
 130       <div class="btn bg-green" @click="transfer">{{ $t('transfer.confirm') }}</div>
 131     </div>
 132
 133   </div>
 134 </template>
 135
 136 <script>
 137 import transaction from "@/models/transaction";
 138 import getLang from "@/assets/language/sdk";
 139 import { LocalStream } from 'extension-streams';
 140
 141 export default {
 142     data() {
 143         return {
 144             full: false,
 145             // full2: false,
 146             account: {},
 147             transaction: {
 148                 input: "",
 149                 output: "",
 150                 args: "",
 151                 fee: "",
 152                 confirmations:"",
 153                 amounts: []
 154             },
 155             password:''
 156         };
 157     },
 158     computed: {
 159     },
 160     watch: {
 161     },
 162     methods: {
 163         close: function () {
 164             window.close();
 165         },
 166         transfer: function () {
 167             let loader = this.$loading.show({
 168                 // Optional parameters
 169                 container: null,
 170                 canCancel: true,
 171                 onCancel: this.onCancel
 172             });
 173
 174             transaction.buildTransaction(this.account.guid,  this.transaction.input, this.transaction.output, this.transaction.fee * 1000000000, this.transaction.confirmations).then(ret => {
 175                 return transaction.convertArgument(this.transaction.args)
 176                     .then((arrayData) =>{
 177                         return transaction.advancedTransfer(this.account.guid, ret.result.data, this.password, arrayData)
 178                             .then((resp) => {
 179                                 loader.hide();
 180                                 LocalStream.send({method:'advanced-transfer',action:'success', message:resp});
 181                                 this.$dialog.show({
 182                                     type: 'success',
 183                                     body: this.$t("transfer.success")
 184                                 });
 185                               window.close();
 186                             })
 187                             .catch(error => {
 188                                  throw error
 189                             });
 190                      })
 191                   .catch(error => {
 192                     throw error
 193                   });
 194             }).catch(error => {
 195                 loader.hide();
 196
 197                 this.$dialog.show({
 198                     body: getLang(error.message)
 199                 });
 200             });
 201         }
 202     }, mounted() {
 203           this.account = JSON.parse(localStorage.currentAccount);
 204
 205           if(this.$route.query.object !== undefined){
 206               const inout = JSON.parse(this.$route.query.object)
 207               if(inout.input !== undefined){
 208                  this.transaction.input = inout.input
 209               }
 210               if(inout.output !== undefined){
 211                   this.transaction.output = inout.output
 212               }
 213               if(inout.args !== undefined){
 214                  this.transaction.args = inout.args
 215               }
 216               if(inout.gas !== undefined){
 217                  this.transaction.fee = inout.gas/1000000000
 218               }
 219               if(inout.confirmations !== undefined){
 220                  this.transaction.confirmations = inout.confirmations
 221               }
 222
 223               const array = inout.input.filter(action => action.type ==='spend_wallet')
 224               this.transaction.amounts = array
 225           }
 226       }
 227 };
 228 </script>