src/views/vote/listVote.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 .my-vote {
  11   height: 115px;
  12     padding: 20px;
  13   display: flex;
  14   text-align: center;
  15   flex-direction: column;
  16   font-size:14px;
  17 }
  18
  19 .my-vote .vote-number{
  20   font-size: 28px;
  21   padding: 15px 0;
  22 }
  23
  24 .vote-list {
  25     margin-bottom: 20px;
  26     padding: 10px 15px;
  27     border-radius:4px;
  28     height: 300px;
  29     overflow: scroll;
  30 }
  31
  32 .transfer-header{
  33   background: #035BD4;
  34 }
  35 .vote-item> td{
  36   padding: 12px 5px;
  37   border-bottom: 1px solid #F0F0F0;
  38 }
  39   .vote-item img{
  40     height: 36px;
  41     width: 36px;
  42     border:1px solid #E0E0E0;
  43     opacity:1;
  44     border-radius:4px;
  45     margin-right: 15px;
  46   }
  47   .vote-item .vote-title{
  48     font-size: 14px;
  49   }
  50   .vote-item .vote-number{
  51     font-size: 12px;
  52     color: #8A8A8A;
  53   }
  54
  55   .vote-title{
  56     font-size: 14px;
  57     line-height: 36px;
  58     vertical-align: middle;
  59     align-items: center;
  60     display: flex;
  61   }
  62
  63   .bp{
  64     background: #F4FBE5;
  65     color: #91D303;
  66   }
  67
  68   .stanbybp{
  69     background: #FFFAE5;
  70     color: #FFCC00;
  71   }
  72
  73   .otherbp{
  74     background: #F2F3F4;
  75     color: #808A95;
  76   }
  77   .vote-role{
  78     width: 20px;
  79     height: 20px;
  80     border-radius: 12px;
  81     font-size: 12px;
  82     line-height: 20px;
  83     text-align: center
  84   }
  85
  86   .vote-label{
  87     font-size: 14px;
  88     padding: 20px;
  89     display:flex;
  90     border-bottom: 1px solid #F0F0F0;
  91
  92   }
  93
  94 </style>
  95
  96 <template>
  97     <div class="warp-chlid bg-gray">
  98         <section class="header bg-header">
  99             <i class="iconfont icon-back" @click="close"></i>
 100             <p>{{ $t('listVote.title') }}</p>
 101         </section>
 102
 103         <section class="my-vote transfer-header">
 104           <div>{{ $t('listVote.myVote') }}</div>
 105           <div class="vote-number">{{myVote}}</div>
 106           <div>{{ $t('listVote.totalVote')}} {{formatNue(totalVote)}}</div>
 107         </section>
 108
 109         <section class="vote-container  bg-white">
 110           <div>
 111             <button>{{ $t('listVote.voteRecord')}}</button>
 112             <button>{{ $t('listVote.voteRules')}}</button>
 113             <button>{{ $t('listVote.cancelVote')}}</button>
 114           </div>
 115           <div class="vote-label color-black">
 116             <div>
 117               {{ $t('listVote.bp') }}
 118             </div>
 119             <div>{{ $t('listVote.standbyBP') }}</div>
 120             <div class="search-wrapper">
 121               <input type="text" v-model="search" placeholder="Search title.."/>
 122             </div>
 123           </div>
 124           <div class="vote-list">
 125             <table class="list accounts">
 126               <tr class="vote-item" v-for="(vote, index) in filteredList" :key="index">
 127                   <td>
 128                     <div :class="voteRole(vote.role)">
 129                       {{ vote.rank }}
 130                     </div>
 131                   </td>
 132                   <td >
 133                     <div class="vote-title" >
 134                       <img  :src="vote.logo" alt="">
 135                       <div v-if="net === 'mainnet'">
 136                         <a :href="`https://vapor.blockmeta.com/node/${vote.pub_key}`" target="_blank">
 137                           {{vote.name}}
 138                         </a>
 139                       </div>
 140                       <div v-else>
 141                         {{vote.name}}
 142                       </div>
 143                     </div>
 144                     <div class="vote-number">{{$t('listVote.votes')}} {{formatNue(vote.vote_num)}} ({{formatFraction(vote.vote_num, totalVote)}})</div>
 145                   </td>
 146                 <td>
 147                   <router-link :to="{name: 'vote', params: { vote: vote }}">
 148                     {{$t('listVote.vote')}}
 149                   </router-link>
 150                 </td>
 151               </tr>
 152             </table>
 153           </div>
 154         </section>
 155     </div>
 156 </template>
 157
 158 <script>
 159 import query from "@/models/query";
 160 import { BTM } from "@/utils/constants";
 161 import Number from "@/utils/Number"
 162 import { mapActions, mapGetters, mapState } from 'vuex'
 163 import _ from 'lodash';
 164
 165 export default {
 166     components: {
 167     },
 168     data() {
 169         return {
 170           votes:[],
 171           totalVote:0,
 172           search:''
 173         };
 174     },
 175     computed: {
 176         unit() {
 177             return this.assets[this.transaction.asset];
 178         },
 179         voteRole(){
 180             return function (roleNum) {
 181               switch (roleNum){
 182                 case 0:
 183                   return 'vote-role bp';
 184                 case 1:
 185                   return 'vote-role stanbybp';
 186                 case 2:
 187                   return 'vote-role otherbp';
 188                 default:
 189                   return 'vote-role otherbp';
 190               }
 191             }
 192         },
 193       myVote() {
 194         let vote
 195         const votes = this.currentAccount.votes
 196         if(votes && votes.length >0 ){
 197           vote = _.sumBy(votes,'total')
 198         }
 199         return (vote != null && vote != 0) ? Number.formatNue(vote) : '0.00'
 200       },
 201       filteredList() {
 202         return this.votes.filter(post => {
 203           return post.name.toLowerCase().includes(this.search.toLowerCase())
 204         })
 205       },
 206       ...mapState([
 207         'bytom'
 208       ]),
 209       ...mapGetters([
 210         'currentAccount',
 211         'accountList',
 212         'net'
 213       ])
 214     },
 215     watch: {
 216
 217     },
 218     methods: {
 219         close: function () {
 220             this.$router.go(-1)
 221             },
 222         formatNue: function (nue) {
 223           return Number.formatNue(nue);
 224         },
 225         formatFraction: function (upper, lower) {
 226           return Number.fractionalNum(upper, lower);
 227         }
 228     },
 229     mounted() {
 230       query.chainStatus().then(resp => {
 231         if(resp){
 232           this.totalVote = resp.total_vote_num;
 233           this.votes =  resp.consensus_nodes.map( (item, index) => {
 234             item.rank = index+1;
 235             return item
 236           });
 237         }
 238       });
 239     }
 240 };
 241 </script>