src/views/vote/veto.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.cancelVote') }}</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
  99 const currencyInPrice = {
 100   in_cny: 'cny_price',
 101   in_usd: 'usd_price',
 102   in_btc:'btc_price'
 103 }
 104
 105 export default {
 106     components: {
 107         Confirm
 108     },
 109     data() {
 110         return {
 111           selectAsset: {
 112             asset: BTM,
 113             symbol: "BTM",
 114             decimals:8
 115           },
 116             show: false,
 117             accountBalance: 0.00,
 118             unit: 'BTM',
 119             fee: this.$t("transfer.feeType"),
 120             feeTypeOptions: [this.$t("transfer.feeType")],
 121             transaction: {
 122               asset: BTM,
 123               amount: "",
 124                 to:'',
 125                 confirmations: 1
 126             }
 127         };
 128     },
 129     computed: {
 130       bytomBalance: function () {
 131         const vote = this.selectVote
 132         let vetoAmount
 133         if(vote && vote.total > vote.locked ){
 134           vetoAmount = Num.formatNue(vote.total-vote.locked,8)
 135         }
 136
 137           return `${this.$t("listCancel.availableVeto")}${(vetoAmount != null && vetoAmount != 0) ? vetoAmount : '0.00'}`
 138       },
 139       ...mapState([
 140         'bytom',
 141         'selectVote'
 142       ]),
 143       ...mapGetters([
 144         'currentAccount',
 145         'accountList',
 146         'net',
 147         'netType',
 148         'currency',
 149       ])
 150     },
 151     watch: {
 152         account: function (newAccount) {
 153             this.guid = newAccount.guid;
 154         }
 155     },
 156     methods: {
 157         close: function () {
 158             this.$router.go(-1)
 159             this.transaction.vote = "";
 160             this.transaction.amount = "";
 161         },
 162       formatCurrency: function (num) {
 163         return Num.formatCurrency(num, this.currency)
 164       },
 165         send: function () {
 166             if (this.transaction.amount <= 0) {
 167                 this.$dialog.show({
 168                     body: this.$t("transfer.noneBTM")
 169                 });
 170                 return;
 171             }
 172
 173             let loader = this.$loading.show({
 174                 // Optional parameters
 175                 container: null,
 176                 canCancel: true,
 177                 onCancel: this.onCancel
 178             });
 179
 180             const vote = this.selectVote.pub_key
 181             this.transaction.to = vote
 182             transaction.buildVeto(this.currentAccount.guid, vote,  Num.convertToNue(this.transaction.amount,8), this.transaction.confirmations).then(result => {
 183                 loader.hide();
 184                 if(!this.transaction.fee){
 185                   this.transaction.fee = Number( _.sumBy(result, 'fee') / 100000000);
 186                 }
 187                 this.$router.push({ name: 'vote-confirm', params: { account: this.currentAccount, transaction: this.transaction, assetAlias: 'BTM',rawData: result} })
 188             }).catch(error => {
 189                 loader.hide();
 190                 this.$dialog.show({
 191                     body: getLang(error.message)
 192                 });
 193             });
 194
 195         }
 196     }, mounted() {
 197     transaction.asset(BTM).then(ret => {
 198       this.selectAsset = ret
 199     });
 200     }
 201 };
 202 </script>