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
 162 export default {
 163     components: {
 164         modalPasswd
 165     },
 166     data() {
 167         return {
 168             rawData: {},
 169             account: {},
 170             transaction: {
 171                 to: "",
 172                 toShort: "",
 173                 amount: 0,
 174                 fee: ""
 175             },
 176             password:''
 177         };
 178     },
 179     methods: {
 180         transfer: function () {
 181             if (this.password == "") {
 182               this.$dialog.show({
 183                 body: this.$t("transfer.emptyPassword")
 184               });
 185               return;
 186             }
 187             let loader = this.$loading.show({
 188                 // Optional parameters
 189                 container: null,
 190                 canCancel: true,
 191                 onCancel: this.onCancel
 192             });
 193
 194             // rawData, password
 195             transaction.transfer(this.account.guid, this.rawData, this.password)
 196                 .then(ret => {
 197                     loader.hide();
 198                     if(this.$route.params.type == 'popup'){
 199                       LocalStream.send({method:'transfer',action:'success', message:ret});
 200                       window.close();
 201                     }
 202                     this.$dialog.show({
 203                       type: 'success',
 204                       body: this.$t("transfer.success")
 205                     });
 206                     this.$router.push('/')
 207                 })
 208                 .catch(error => {
 209                     loader.hide();
 210                     this.$dialog.show({
 211                         body: getLang(error.message)
 212                     });
 213                 });
 214         }
 215     }, mounted() {
 216         let params = this.$route.params;
 217
 218         this.account = params.account;
 219         this.transaction = params.transaction;
 220         this.transaction.toShort = params.transaction.to;
 221         this.rawData = params.rawData;
 222     }
 223 };
 224 </script>