src/views/vote/voteConfirm.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('vote.voteDetials') }}</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">{{ accountLabel }}</td>
 123                             <td class="col value">{{account.alias}}</td>
 124                         </tr>
 125                         <tr v-if="selectVote.name" class="row">
 126                             <td class="col label">{{ $t('listVote.bpName')}}</td>
 127                             <td class="col value">{{selectVote.name}}</td>
 128                         </tr>
 129                         <tr v-else class="row">
 130                             <td class="col label">{{ $t('listVote.bpPubkey')}}</td>
 131                             <td class="col value">{{transaction.toShort}}</td>
 132                         </tr>
 133                         <div class="divider"></div>
 134                         <tr class="row">
 135                             <td class="col label">{{ $t('listVote.votes') }}</td>
 136                             <td class="col value">{{transaction.amount}}<span v-if="assetAlias" class="uint">{{assetAlias}}</span></td>
 137                         </tr>
 138                         <tr class="row">
 139                             <td class="col label">{{ $t('transfer.fee') }}</td>
 140                             <td class="col value">{{transaction.fee}}<span class="uint">BTM</span></td>
 141                         </tr>
 142                     </tbody>
 143                 </table>
 144             </section>
 145
 146             <section class="content bg-white">
 147               <div class="form">
 148                 <div class="form-item">
 149                   <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
 150                   <div class="form-item-content">
 151                     <input type="password"  v-model="password" autofocus>
 152                   </div>
 153                 </div>
 154               </div>
 155             </section>
 156
 157             <div class="row" style="margin: 20px;">
 158                 <div class="btn bg-green" @click="transfer">{{ $t('transfer.confirm') }}</div>
 159             </div>
 160         </div>
 161
 162     </div>
 163
 164 </template>
 165
 166 <script>
 167   import address from "@/utils/address";
 168   import transaction from "@/models/transaction";
 169   import BigNumber from "bignumber.js"
 170   import account from "@/models/account";
 171 import modalPasswd from "@/components/modal-passwd";
 172 import getLang from "@/assets/language/sdk";
 173 import { LocalStream } from 'extension-streams';
 174 import { mapGetters,mapState } from 'vuex'
 175
 176 export default {
 177     components: {
 178         modalPasswd
 179     },
 180     data() {
 181         return {
 182           full: false,
 183           title:null,
 184           accountLabel: this.$t('listVote.voteAccount'),
 185           rawData: {},
 186             account: {},
 187             transaction: {
 188                 to: "",
 189                 toShort: "",
 190                 amount: 0,
 191                 fee: ""
 192             },
 193             password:'',
 194             assetAlias:null
 195         };
 196     },
 197   beforeRouteEnter (to, from, next) {
 198     next(vm => {
 199       if(from.name === 'veto') {
 200         vm.title = vm.$t('vote.vetoDetials')
 201         vm.accountLabel = vm.$t('listVote.vetoAccount')
 202       }
 203
 204       next()
 205     });
 206   },
 207   computed: {
 208       totalAmount(){
 209         if(this.assetAlias && this.assetAlias.toUpperCase() === 'BTM'){
 210           const n = new BigNumber(this.transaction.amount)
 211           return n.plus(this.transaction.fee).toNumber()
 212         }else{
 213           return Number(this.transaction.amount)
 214         }
 215       },
 216       ...mapState([
 217         'selectVote'
 218       ]),
 219       ...mapGetters([
 220         'language',
 221         'net'
 222       ])
 223     },
 224     methods: {
 225         shortAddress: function (add) {
 226           return address.short(add)
 227         },
 228         transfer: function () {
 229             if (this.password == "") {
 230               this.$dialog.show({
 231                 body: this.$t("transfer.emptyPassword")
 232               });
 233               return;
 234             }
 235             let loader = this.$loading.show({
 236                 // Optional parameters
 237                 container: null,
 238                 canCancel: true,
 239                 onCancel: this.onCancel
 240             });
 241
 242             // rawData, password
 243             transaction.transfer(this.account.guid, this.rawData, this.password)
 244                 .then(ret => {
 245                     loader.hide();
 246                     if(this.$route.params.type == 'popup'){
 247                       LocalStream.send({method:'transfer',action:'success', message:ret});
 248                       window.close();
 249                     }
 250                     this.$dialog.show({
 251                       type: 'success',
 252                       body: this.$t("transfer.success")
 253                     });
 254                     this.$router.push('/')
 255                     if(this.transaction.type === 'toVapor'){
 256                       account.setupNet(`${this.net}vapor`)
 257                     }
 258                 })
 259                 .catch(error => {
 260                     loader.hide();
 261                     this.$dialog.show({
 262                         body: getLang(error.message, this.language)
 263                     });
 264                 });
 265         }
 266     }, mounted() {
 267         let params = this.$route.params;
 268
 269         this.account = params.account;
 270         this.transaction = params.transaction;
 271         this.transaction.toShort = params.transaction.to;
 272         this.rawData = params.rawData;
 273
 274         this.assetAlias = params.assetAlias;
 275     }
 276 };
 277 </script>