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 }
  62
  63 .fee-intro {
  64     font-size: 10px;
  65 }
  66
  67 .btn-inline {
  68     display: flex;
  69     padding: 0;
  70 }
  71 .btn-inline .btn {
  72     margin: 10px 15px;
  73 }
  74 .row{
  75   word-break: break-all;
  76 }
  77   .col{
  78     font-size: 14px;
  79     width: 35%;
  80   }
  81   .label{
  82     color: #7B7B7B;
  83   }
  84   .value{
  85     color: #282828;
  86     width: 60%;
  87   }
  88   table{
  89     width: 100%;
  90   }
  91   .form-item{
  92     padding:0;
  93     margin:0;
  94     margin-bottom: 10px;
  95   }
  96 </style>
  97
  98 <template>
  99     <div class="warp bg-gray">
 100         <section class="header bg-header">
 101             <i class="iconfont icon-back" @click="$router.go(-1)"></i>
 102             <p>{{ $t('transfer.confirmTransaction') }}</p>
 103         </section>
 104
 105         <section class="content bg-white">
 106             <table>
 107                 <tbody>
 108                     <tr class="row">
 109                         <td class="col label">{{ $t('transfer.from') }}</td>
 110                         <td class="col value">{{account.alias}}</td>
 111                     </tr>
 112                     <tr class="row">
 113                         <td class="col label">{{ $t('transfer.to') }}</td>
 114                         <td class="col value">{{transaction.toShort}}</td>
 115                     </tr>
 116                     <div class="divider"></div>
 117                     <tr class="row">
 118                         <td class="col label">{{ $t('transfer.transferAmount') }}</td>
 119                         <td class="col value">{{transaction.amount}}<span class="uint">BTM</span></td>
 120                     </tr>
 121                     <tr class="row">
 122                         <td class="col label">{{ $t('transfer.fee') }}</td>
 123                         <td class="col value">{{transaction.fee}}<span class="uint">BTM</span></td>
 124                     </tr>
 125
 126                     <tr class="row">
 127                         <td class="col label">{{ $t('transfer.total') }}</td>
 128                         <td class="col value">
 129                             <!--<p class="fee-intro">{{ $t('transfer.totalTip') }}</p>-->
 130                             {{Number(transaction.amount)+Number(transaction.fee)}}<span class="uint">BTM</span>
 131                         </td>
 132                     </tr>
 133                 </tbody>
 134             </table>
 135         </section>
 136
 137         <section class="content bg-white">
 138           <div class="form">
 139             <div class="form-item">
 140               <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
 141               <div class="form-item-content">
 142                 <input type="password"  v-model="password" autofocus>
 143               </div>
 144             </div>
 145           </div>
 146         </section>
 147
 148         <div class="row" style="margin: 20px;">
 149             <div class="btn bg-green" @click="transfer">{{ $t('transfer.confirm') }}</div>
 150         </div>
 151
 152     </div>
 153
 154 </template>
 155
 156 <script>
 157 import transaction from "@/models/transaction";
 158 import modalPasswd from "@/components/modal-passwd";
 159 import getLang from "@/assets/language/sdk";
 160 import { LocalStream } from 'extension-streams';
 161 import { mapGetters } from 'vuex'
 162
 163 export default {
 164     components: {
 165         modalPasswd
 166     },
 167     data() {
 168         return {
 169             rawData: {},
 170             account: {},
 171             transaction: {
 172                 to: "",
 173                 toShort: "",
 174                 amount: 0,
 175                 fee: ""
 176             },
 177             password:''
 178         };
 179     },
 180     computed: {
 181       ...mapGetters([
 182         'language'
 183       ])
 184     },
 185     methods: {
 186         transfer: function () {
 187             if (this.password == "") {
 188               this.$dialog.show({
 189                 body: this.$t("transfer.emptyPassword")
 190               });
 191               return;
 192             }
 193             let loader = this.$loading.show({
 194                 // Optional parameters
 195                 container: null,
 196                 canCancel: true,
 197                 onCancel: this.onCancel
 198             });
 199
 200             // rawData, password
 201             transaction.transfer(this.account.guid, this.rawData, this.password)
 202                 .then(ret => {
 203                     loader.hide();
 204                     if(this.$route.params.type == 'popup'){
 205                       LocalStream.send({method:'transfer',action:'success', message:ret});
 206                       window.close();
 207                     }
 208                     this.$dialog.show({
 209                       type: 'success',
 210                       body: this.$t("transfer.success")
 211                     });
 212                     this.$router.push('/')
 213                 })
 214                 .catch(error => {
 215                     loader.hide();
 216                     this.$dialog.show({
 217                         body: getLang(error.message, this.language)
 218                     });
 219                 });
 220         }
 221     }, mounted() {
 222         let params = this.$route.params;
 223
 224         this.account = params.account;
 225         this.transaction = params.transaction;
 226         this.transaction.toShort = params.transaction.to;
 227         this.rawData = params.rawData;
 228     }
 229 };
 230 </script>