src/views/vote/vote.vue

   1 <style lang="" scoped>
   2 .header {
   3   display: flex;
   4 }
   5 .header p{
   6   text-align: center;
   7   width: 270px;
   8   padding-top: 17px;
   9 }
  10
  11 .transferType input[type=radio] {
  12   position: absolute;
  13   visibility: hidden;
  14 }
  15
  16 .transferType input[type="radio"]:checked+label{
  17   color:white;
  18   background-color: #333333;
  19 }
  20
  21 .form-container{
  22   margin: 20px;
  23 }
  24 .form {
  25     margin-bottom: 20px;
  26     padding: 10px 15px;
  27     border-radius:4px;
  28 }
  29 .form-container .btn{
  30     height: 48px;
  31     bottom: 20px;
  32     position: absolute;
  33     width: 320px;
  34 }
  35 .vote-title{
  36   font-size: 14px;
  37   color: #000;
  38   vertical-align: middle;
  39   align-items: center;
  40   display: flex;
  41 }
  42 .vote-title img{
  43   height: 36px;
  44   width: 36px;
  45   border:1px solid #E0E0E0;
  46   opacity:1;
  47   border-radius:4px;
  48   margin-right: 15px;
  49 }
  50 </style>
  51
  52 <template>
  53     <div class="warp-chlid bg-gray">
  54         <section class="header bg-header">
  55             <i class="iconfont icon-back" @click="close"></i>
  56             <p>{{ $t('listVote.vote') }}</p>
  57         </section>
  58
  59         <section class="form-container">
  60           <div class="form bg-white">
  61             <div v-if="selectVote !== null" class="form-item">
  62               <label class="form-item-label">{{ $t('vote.selectNode') }}</label>
  63               <div class="form-item-content" >
  64                 <div class="vote-title" >
  65                   <img  :src="selectVote.logo" alt="">
  66                   <div>
  67                     {{selectVote.name}}
  68                   </div>
  69                 </div>
  70               </div>
  71             </div>
  72           </div>
  73           <div class="form bg-white">
  74
  75               <div class="form-item">
  76                   <label class="form-item-label">
  77                     {{ $t('transfer.quantity') }}
  78
  79                   </label>
  80                   <div class="form-item-content" style=" display: flex;">
  81                       <input type="number" v-model="transaction.amount" :placeholder="bytomBalance">
  82                       <span class="color-grey" style="width: 40px; font-size: 15px;position: absolute;right: 0;">{{unit}}</span>
  83                   </div>
  84               </div>
  85           </div>
  86           <a class="btn btn-primary" @click="send">{{ $t('transfer.confirm') }}</a>
  87         </section>
  88     </div>
  89 </template>
  90
  91 <script>
  92 import transaction from "@/models/transaction";
  93 import getLang from "@/assets/language/sdk";
  94 import Confirm from "../sendTransaction/transferConfirm";
  95 import { BTM } from "@/utils/constants";
  96 import { mapGetters, mapState } from 'vuex'
  97 import { Number as Num } from "@/utils/Number"
  98 import _ from 'lodash';
  99
 100 const currencyInPrice = {
 101   inCny: 'cny_price',
 102   inUsd: 'usd_price',
 103   inBtc:'btc_price'
 104 }
 105
 106 export default {
 107     components: {
 108         Confirm
 109     },
 110     data() {
 111         return {
 112           selectAsset: {
 113             asset: BTM,
 114             symbol: "BTM",
 115             decimals:8
 116           },
 117             show: false,
 118             accountBalance: 0.00,
 119             unit: 'BTM',
 120             fee: this.$t("transfer.feeType"),
 121             feeTypeOptions: [this.$t("transfer.feeType")],
 122             transaction: {
 123                 asset: BTM,
 124                 amount: "",
 125                 to:'',
 126                 confirmations: 1
 127             }
 128         };
 129     },
 130     computed: {
 131       bytomBalance: function () {
 132         let balance,
 133           balances = this.currentAccount.vpBalances
 134         if(balances && balances.length >0 ){
 135           const balanceObject = balances.filter(b => b.asset === BTM)[0]
 136           balance = balanceObject.balance
 137
 138           let vote = 0, lock = 0
 139           const votes = this.currentAccount.votes
 140           if(votes && votes.length >0 ){
 141             vote = _.sumBy(votes,'total')
 142             lock = _.sumBy(votes,'locked')
 143           }
 144
 145           balance = (balance-vote-lock)/Math.pow(10,balanceObject.decimals)
 146         }
 147
 148           return `${this.$t("vote.amountPlaceHolder")}${(balance != null && balance != 0) ? balance : '0.00'}`
 149       },
 150       ...mapState([
 151         'bytom',
 152         'selectVote'
 153       ]),
 154       ...mapGetters([
 155         'currentAccount',
 156         'accountList',
 157         'net',
 158         'currency',
 159         'netType'
 160       ])
 161     },
 162     watch: {
 163         account: function (newAccount) {
 164             this.guid = newAccount.guid;
 165         }
 166     },
 167     methods: {
 168         close: function () {
 169             this.$router.go(-1)
 170             this.transaction.vote = "";
 171             this.transaction.amount = "";
 172         },
 173         formatCurrency: function (num) {
 174           return Num.formatCurrency(num, this.currency)
 175         },
 176         send: function () {
 177             if (this.transaction.amount <= 0) {
 178                 this.$dialog.show({
 179                     body: this.$t("transfer.noneBTM")
 180                 });
 181                 return;
 182             }
 183
 184             let loader = this.$loading.show({
 185                 // Optional parameters
 186                 container: null,
 187                 canCancel: true,
 188                 onCancel: this.onCancel
 189             });
 190
 191             const vote = this.selectVote.pub_key
 192             this.transaction.to = vote
 193             transaction.buildVote(this.currentAccount.guid, vote,  Num.convertToNue(this.transaction.amount,8), this.transaction.confirmations).then(result => {
 194                 loader.hide();
 195               if(!this.transaction.fee){
 196                 this.transaction.fee = Number( _.sumBy(result, 'fee') );
 197               }
 198                 this.$router.push({ name: 'vote-confirm', params: { account: this.currentAccount,  transaction: this.transaction,assetAlias: 'BTM', rawData: result} })
 199             }).catch(error => {
 200                 loader.hide();
 201                 this.$dialog.show({
 202                     body: getLang(error.message)
 203                 });
 204             });
 205
 206         }
 207     }, mounted() {
 208         transaction.asset(BTM).then(ret => {
 209           this.selectAsset = ret
 210         });
 211     }
 212 };
 213 </script>