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.assetId === BTM)[0]
 136           balance = balanceObject.availableBalance
 137         }
 138
 139           return `${this.$t("vote.amountPlaceHolder")}${(balance != null && balance != 0) ? balance : '0.00'}`
 140       },
 141       ...mapState([
 142         'bytom',
 143         'selectVote'
 144       ]),
 145       ...mapGetters([
 146         'currentAccount',
 147         'accountList',
 148         'net',
 149         'currency',
 150         'netType'
 151       ])
 152     },
 153     watch: {
 154         account: function (newAccount) {
 155             this.guid = newAccount.guid;
 156         }
 157     },
 158     methods: {
 159         close: function () {
 160             this.$router.go(-1)
 161             this.transaction.vote = "";
 162             this.transaction.amount = "";
 163         },
 164         formatCurrency: function (num) {
 165           return Num.formatCurrency(num, this.currency)
 166         },
 167         send: function () {
 168             if (this.transaction.amount <= 0) {
 169                 this.$dialog.show({
 170                     body: this.$t("transfer.noneBTM")
 171                 });
 172                 return;
 173             }
 174
 175             let loader = this.$loading.show({
 176                 // Optional parameters
 177                 container: null,
 178                 canCancel: true,
 179                 onCancel: this.onCancel
 180             });
 181
 182             const vote = this.selectVote.pubKey
 183             this.transaction.to = vote
 184             transaction.buildVote(this.currentAccount.vpAddress, vote,  this.transaction.amount, this.transaction.confirmations).then(result => {
 185                 loader.hide();
 186               if(!this.transaction.fee){
 187                 this.transaction.fee = Number( _.sumBy(result, 'tx.fee') );
 188               }
 189                 this.$router.push({ name: 'vote-confirm', params: { account: this.currentAccount,  transaction: this.transaction,assetAlias: 'BTM', rawData: result} })
 190             }).catch(error => {
 191                 loader.hide();
 192                 this.$dialog.show({
 193                     body: getLang(error.message)
 194                 });
 195             });
 196
 197         }
 198     }, mounted() {
 199         transaction.asset(BTM).then(ret => {
 200           this.selectAsset = ret
 201         });
 202     }
 203 };
 204 </script>