src/views/vote/listCancel.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     border-radius:4px;
  26     height: 505px;
  27     overflow: scroll;
  28     padding: 20px 0px;
  29 }
  30
  31 .votes{
  32   width: 100%;
  33 }
  34
  35 .vote-item> td{
  36   padding: 12px 15px;
  37   border-bottom: 1px solid #F0F0F0;
  38   cursor: pointer;
  39 }
  40   .vote-item img{
  41     height: 36px;
  42     width: 36px;
  43     border:1px solid #E0E0E0;
  44     opacity:1;
  45     border-radius:4px;
  46     margin-right: 15px;
  47   }
  48   .vote-item .vote-title{
  49     font-size: 14px;
  50   }
  51   .vote-item .vote-number{
  52     font-size: 12px;
  53     color: #8A8A8A;
  54   }
  55
  56   .vote-title{
  57     font-size: 14px;
  58     line-height: 36px;
  59     vertical-align: middle;
  60     align-items: center;
  61     display: flex;
  62   }
  63
  64 </style>
  65
  66 <template>
  67     <div class="warp-child bg-gray">
  68       <section class="header bg-header">
  69         <i class="iconfont icon-back" @click="close"></i>
  70         <p>{{ $t('listCancel.selectVote') }}</p>
  71       </section>
  72
  73         <section class="vote-container  bg-white">
  74           <div class="vote-list">
  75             <table class="list votes">
  76               <tr class="vote-item" v-for="(vote, index) in filteredList" :key="index"  @click="openVeto(vote)">
  77                   <td >
  78                     <div class="vote-title" >
  79                       <img  :src="vote.logo" alt="">
  80                       <div v-if="net === 'mainnet'">
  81                         <a :href="`https://vapor.blockmeta.com/node/${vote.pub_key}`" target="_blank">
  82                           {{vote.name}}
  83                         </a>
  84                       </div>
  85                       <div v-else>
  86                         {{vote.name}}
  87                       </div>
  88                     </div>
  89                     <div class="vote-number">{{$t('listCancel.voted')}} {{formatNue(vote.total)}}</div>
  90                   </td>
  91                 <td>
  92                   <div class="vote-title">{{formatNue(vote.total-vote.locked)}} </div>
  93                    <div class="vote-number"> {{$t('listCancel.cancel')}} </div>
  94                 </td>
  95               </tr>
  96             </table>
  97           </div>
  98         </section>
  99     </div>
 100 </template>
 101
 102 <script>
 103 import query from "@/models/query";
 104 import { BTM } from "@/utils/constants";
 105 import Number from "@/utils/Number"
 106 import { mapActions, mapGetters, mapState } from 'vuex'
 107 import _ from 'lodash';
 108 import * as Actions from '@/store/constants';
 109
 110
 111 export default {
 112     components: {
 113     },
 114     data() {
 115         return {
 116           votes:[],
 117           totalVote:0,
 118           search:''
 119         };
 120     },
 121     computed: {
 122         unit() {
 123             return this.assets[this.transaction.asset];
 124         },
 125         voteRole(){
 126             return function (roleNum) {
 127               switch (roleNum){
 128                 case 0:
 129                   return 'vote-role bp';
 130                 case 1:
 131                   return 'vote-role stanbybp';
 132                 case 2:
 133                   return 'vote-role otherbp';
 134                 default:
 135                   return 'vote-role otherbp';
 136               }
 137             }
 138         },
 139       myVote() {
 140         let vote
 141         const votes = this.currentAccount.votes
 142         if(votes && votes.length >0 ){
 143           vote = _.sumBy(votes,'total')
 144         }
 145         return (vote != null && vote != 0) ? Number.formatNue(vote,8) : '0.00'
 146       },
 147       filteredList() {
 148         return this.votes.filter(post => {
 149           return post.name.toLowerCase().includes(this.search.toLowerCase())
 150         })
 151       },
 152       ...mapState([
 153         'bytom',
 154         'listVote'
 155       ]),
 156       ...mapGetters([
 157         'currentAccount',
 158         'accountList',
 159         'net'
 160       ])
 161     },
 162     watch: {
 163
 164     },
 165     methods: {
 166         close: function () {
 167             this.$router.go(-1)
 168             },
 169         formatNue: function (nue) {
 170           return Number.formatNue(nue,8);
 171         },
 172         formatFraction: function (upper, lower) {
 173           return Number.fractionalNum(upper, lower);
 174         },
 175         openVeto: function(veto){
 176           this[Actions.SET_SELECTED_VOTE](veto);
 177           this.$router.push({name: 'veto'});
 178         },
 179         ...mapActions([
 180           Actions.SET_SELECTED_VOTE,
 181         ])
 182     },
 183     mounted() {
 184       const originVotes = this.currentAccount.votes
 185       const allVotes = this.listVote;
 186       this.votes = _.map(originVotes, function(obj) {
 187         return _.assign(obj, _.find(allVotes, {pubKey: obj.vote}));
 188       });
 189     }
 190 };
 191 </script>