src/views/vote/listVote.vue

   1 <style lang="" scoped>
   2 .header {
   3   display: flex;
   4 }
   5 .header p{
   6   text-align: center;
   7   width: 281px;
   8   padding-top: 17px;
   9 }
  10 .my-vote {
  11   height: 115px;
  12     padding: 15px;
  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: 10px 0 5px;
  22 }
  23
  24 .vote-list {
  25     padding: 0px 15px 10px;
  26     border-radius:4px;
  27     height: 300px;
  28     overflow: scroll;
  29 }
  30
  31 .vote-item> td{
  32   padding: 12px 2px;
  33   border-bottom: 1px solid #F0F0F0;
  34 }
  35   .vote-item img{
  36     height: 54px;
  37     width: 54px;
  38     border:1px solid #E0E0E0;
  39     opacity:1;
  40     border-radius:4px;
  41   }
  42   .vote-item .vote-title{
  43     font-size: 14px;
  44   }
  45   .vote-item .vote-number{
  46     font-size: 12px;
  47     color: #8A8A8A;
  48   }
  49
  50   .vote-title{
  51     font-size: 14px;
  52     line-height: 36px;
  53     vertical-align: middle;
  54     align-items: center;
  55     display: flex;
  56   }
  57
  58   .bp{
  59     color: white;
  60     background: #91D303;
  61   }
  62
  63   .stanbybp{
  64     color: white;
  65     background: #FFCC00;
  66   }
  67
  68   .otherbp{
  69     color: white;
  70     background: #C4C4C4;
  71   }
  72   .vote-role{
  73     width: 20px;
  74     height: 20px;
  75     border-radius: 12px;
  76     font-size: 12px;
  77     line-height: 20px;
  78     text-align: center
  79   }
  80
  81   .outer-dot{
  82     width: 16px;
  83     height: 16px;
  84
  85     position:relative;
  86     border-radius: 9px;
  87   }
  88
  89   .inner-dot{
  90     position: absolute;
  91     width: 6px;
  92     height: 6px;
  93     left: 5px;
  94     top: 5px;
  95     border-radius: 3px;
  96   }
  97
  98   .vote-label{
  99     font-size: 12px;
 100     padding: 0px 20px 5px;
 101     display:flex;
 102   }
 103
 104   .bg-image{
 105     height: 188px;
 106   }
 107
 108   .button-container{
 109     display: flex;
 110     font-size: 14px;
 111     margin: 20px;
 112   }
 113
 114   .button-container a:nth-child(2){
 115     flex: 1;
 116     margin-left: 20px;
 117   }
 118
 119   .btn-vote{
 120     width: 72px;
 121     height: 32px;
 122     border: 1px solid #035BD4;
 123     box-sizing: border-box;
 124     border-radius: 2px;
 125     color: #035BD4;
 126     font-size:14px;
 127     background: white;
 128     padding: 0;
 129   }
 130
 131   .v-label{
 132     display: flex;
 133     align-items: center;
 134     margin-right:5px;
 135   }
 136
 137   .v-icon{
 138     margin-right: 5px;
 139   }
 140
 141   .bp-icon .outer-dot{
 142     background: rgba(145, 211, 3, 0.1);
 143   }
 144   .bp-icon .inner-dot{
 145     background: #91D303;
 146   }
 147
 148   .stanbybp-icon .outer-dot{
 149     background: rgba(255, 204, 0, 0.1);
 150   }
 151  .stanbybp-icon .inner-dot{
 152     background: #FFCC00;
 153   }
 154
 155   .search-wrapper input{
 156     margin-left: 5px;
 157     background: url('../../assets/img/icon/search.svg') top 3px left 2px no-repeat;
 158     padding-left: 27px;
 159     width: 118px;
 160     height: 32px;
 161     border: 1px solid rgba(0, 0, 0, 0.16);
 162     box-sizing: border-box;
 163     border-radius: 100px;
 164     line-height: 32px;
 165   }
 166
 167   .list{
 168     width: 100%;
 169   }
 170
 171   .node-label{
 172     width: 160px;
 173   }
 174 </style>
 175
 176 <template>
 177     <div class="warp-chlid bg-white">
 178
 179         <section class="bg-image">
 180           <div class="header">
 181               <i class="iconfont icon-back" @click="close"></i>
 182               <p>{{ $t('listVote.title') }}</p>
 183           </div>
 184           <div class="my-vote">
 185             <div class="color-grey">{{ $t('listVote.myVote') }}</div>
 186             <div class="vote-number">{{myVote}}</div>
 187             <div class="color-grey">{{ $t('listVote.totalVote')}} {{formatNue(totalVote)}}</div>
 188           </div>
 189         </section>
 190
 191         <section class="vote-container  bg-white">
 192           <div class="button-container">
 193             <router-link class="color-black" :to="{name: 'voteRecord'}">
 194               <div>{{$t('listVote.voteRecord')}}</div>
 195             </router-link>
 196             <router-link class="color-black" :to="{name: 'voteRegulation'}">
 197               <div>{{ $t('listVote.voteRules')}}</div>
 198             </router-link>
 199             <router-link class="color-grey" :to="{name: 'listCancel'}">
 200               <div>{{ $t('listVote.cancelVote')}}</div>
 201             </router-link>
 202           </div>
 203           <div class="vote-label color-black">
 204             <div class="v-label">
 205               <div class="v-icon bp-icon">
 206                 <div class="outer-dot">
 207                   <div class="inner-dot"></div>
 208                 </div>
 209               </div>
 210               <div>{{ $t('listVote.bp') }}</div>
 211             </div>
 212             <div class="v-label">
 213               <div class="v-icon stanbybp-icon">
 214                 <div class="outer-dot">
 215                   <div class="inner-dot"></div>
 216                 </div>
 217               </div>
 218               <div>{{ $t('listVote.standbyBP') }}</div>
 219             </div>
 220             <div class="search-wrapper">
 221               <input type="text" v-model="search" :placeholder="$t('listVote.bpName')"/>
 222             </div>
 223           </div>
 224           <div class="vote-list">
 225             <table class="list accounts">
 226               <tr class="vote-item" v-for="(vote, index) in filteredList" :key="index">
 227                   <td>
 228                     <div :class="voteRole(vote.role)">
 229                       {{ vote.rank }}
 230                     </div>
 231                   </td>
 232                   <td>
 233                     <img  :src="vote.logo || defaultUrlImg" alt="">
 234                   </td>
 235                   <td class="node-label">
 236                     <div class="vote-title" >
 237                       <div v-if="net === 'mainnet'">
 238                         <a :href="`https://vapor.blockmeta.com/node/${vote.pub_key}`" target="_blank">
 239                           {{vote.name}}
 240                         </a>
 241                       </div>
 242                       <div v-else>
 243                         {{vote.name}}
 244                       </div>
 245                     </div>
 246                     <div class="vote-number">{{$t('listVote.votes')}} {{formatNue(vote.voteNum)}} ({{formatFraction(vote.voteNum, totalVote)}})</div>
 247                   </td>
 248                 <td class="text-align-right">
 249                   <button class="btn btn-vote" @click="openVote(vote)">
 250                     {{$t('listVote.vote')}}
 251                   </button>
 252                 </td>
 253               </tr>
 254             </table>
 255           </div>
 256         </section>
 257     </div>
 258 </template>
 259
 260 <script>
 261 import query from "@/models/query";
 262 import { BTM } from "@/utils/constants";
 263 import Number from "@/utils/Number"
 264 import { mapActions, mapGetters, mapState } from 'vuex'
 265 import * as Actions from '@/store/constants';
 266 import _ from 'lodash';
 267 import image from '@/assets/img/icon/node-default.svg';
 268
 269 export default {
 270     components: {
 271     },
 272     data() {
 273         return {
 274           defaultUrlImg:image,
 275           totalVote:0,
 276           search:''
 277         };
 278     },
 279     computed: {
 280         unit() {
 281             return this.assets[this.transaction.asset];
 282         },
 283         voteRole(){
 284             return function (roleNum) {
 285               switch (roleNum){
 286                 case 0:
 287                   return 'vote-role bp';
 288                 case 1:
 289                   return 'vote-role stanbybp';
 290                 case 2:
 291                   return 'vote-role otherbp';
 292                 default:
 293                   return 'vote-role otherbp';
 294               }
 295             }
 296         },
 297       myVote() {
 298         let vote
 299         const votes = this.currentAccount.votes
 300         if(votes && votes.length >0 ){
 301           vote = _.sumBy(votes,'total')
 302         }
 303         return (vote != null && vote != 0) ? Number.formatNue(vote,0, 8) : '0.00'
 304       },
 305       filteredList() {
 306         return this.listVote.filter(post => {
 307           return post.name.toLowerCase().includes(this.search.toLowerCase())
 308         })
 309       },
 310       ...mapState([
 311         'bytom',
 312         'listVote'
 313       ]),
 314       ...mapGetters([
 315         'currentAccount',
 316         'accountList',
 317         'net',
 318       ])
 319     },
 320     watch: {
 321
 322     },
 323     methods: {
 324         close: function () {
 325             this.$router.go(-1)
 326             },
 327         formatNue: function (nue) {
 328           return Number.formatNue(nue,0, 8);
 329         },
 330         formatFraction: function (upper, lower) {
 331           return Number.fractionalNum(upper, lower);
 332         },
 333         openVote: function(vote){
 334           this[Actions.SET_SELECTED_VOTE](vote);
 335           this.$router.push({name: 'vote'});
 336         },
 337         ...mapActions([
 338           Actions.SET_LIST_VOTE,
 339           Actions.SET_SELECTED_VOTE,
 340         ])
 341     },
 342     mounted() {
 343       query.chainStatus().then(resp => {
 344         if(resp){
 345           this.totalVote = resp.totalVoteNum;
 346           const votes =  resp.consensusNodes.map( (item, index) => {
 347             item.rank = index+1;
 348             return item
 349           });
 350           this[Actions.SET_LIST_VOTE](votes)
 351         }
 352       });
 353     }
 354 };
 355 </script>