src/popup/home/main.vue

   1 <style lang="" scoped>
   2 .warp {
   3   z-index: 1;
   4 }
   5 .account {
   6   /* text-align: center; */
   7   font-size: 18px;
   8 }
   9 .account .btn-menu {
  10   float: left;
  11   margin: 20px 8px 0 20px;
  12 }
  13 .account .btn-toggle {
  14   float: right;
  15   margin-top: 15px;
  16   margin-right: 20px;
  17   border: 2px solid #fff;
  18   border-radius: 18px;
  19   padding: 0 10px;
  20   font-size: 14px;
  21 }
  22 .account .alias {
  23   height: 25px;
  24 }
  25 .account span {
  26   display: block;
  27   padding-top: 20px;
  28   font-size: 18px;
  29   font-weight: bold;
  30   width: 120px;
  31   overflow: hidden;
  32   text-overflow: ellipsis;
  33   white-space: nowrap;
  34 }
  35
  36 .balance {
  37   margin-top: 20px;
  38   text-align: center;
  39   padding: 0 30px 20px;
  40 }
  41 .balance .token-icon {
  42   display: inline-flex;
  43   height: 40px;
  44   width: 40px;
  45   /* background: #fff; */
  46   /* border: 1px solid #dedede; */
  47   /* border-radius: 25px; */
  48   padding: 8px;
  49   margin: 8px;
  50 }
  51 .balance .amount {
  52   padding-bottom: 10px;
  53 }
  54 .balance .token-amount {
  55   font-size: 32px;
  56 }
  57 .qrcode {
  58   margin-left: 5px;
  59   vertical-align: middle;
  60   cursor: pointer;
  61 }
  62 .btn-transfer {
  63   width: 200px;
  64   font-size: 20px;
  65   line-height: 22px;
  66   height: 40px;
  67   line-height: 40px;
  68 }
  69
  70 .transactions {
  71   font-size: 14px;
  72   /* line-height: 40px; */
  73   /* display: contents; */
  74 }
  75 .transactions h3 {
  76   padding: 10px;
  77   margin: 0;
  78   color: #cacaca;
  79 }
  80 .transactions .list {
  81   padding: 0 10px;
  82 }
  83 .list-item {
  84   display: flex;
  85   padding: 5px 10px;
  86   border-bottom: 1px solid #5e5e5e;
  87 }
  88
  89 .list-item .value {
  90   position: absolute;
  91   right: 20px;
  92   margin-top: 13px;
  93 }
  94 </style>
  95
  96 <template>
  97   <div class="warp">
  98     <section class="bg-green">
  99       <div class="row account">
 100           <a class="btn-menu" href="#"><i class="iconfont icon-menu" @click="openMenu"></i></a>
 101           <span class="btn-toggle">
 102             <select>
 103               <option value="">BYTOM主网络</option>
 104               <option value="">BYTOM测试网络</option>
 105             </select>
 106           </span>
 107           <span class="alias">{{accountInfo.alias}}</span>
 108       </div>
 109       <div class="row balance">
 110           <img src="../../assets/logo.png" class="token-icon">
 111           <div class="amount">
 112               <div class="token-amount">{{accountInfo.balance}} BTM</div>
 113               <p class="account-address">{{accountInfo.address_short}}<i class="iconfont qrcode" @click="showQrcode">&#xe7dd;</i></p>
 114           </div>
 115           <a href="#" class="btn btn-primary btn-transfer" @click="transferOpen">转账</a>
 116       </div>
 117     </section>
 118
 119     <section class="transactions">
 120       <h3 class="color-gray">交易记录</h3>
 121       <ul class="list">
 122         <li class="list-item" v-for="(transcation, index) in latestTranscations" v-if="index < 4">
 123             <div>
 124               <div class="time">{{transcation.timestamp | moment}}</div>
 125               <div class="addr">{{transcation.address}}</div>
 126             </div>
 127             <div class="value">{{transcation.direct}} {{transcation.val}} BTM</div>
 128         </li>
 129         <span v-else style="width: 22px; margin: 0px auto; font-weight: bold; font-size: 22px;">...</span>
 130       </ul>
 131     </section>
 132
 133     <!-- modal -->
 134     <div v-show="maskOpen" class="mask"></div>
 135     <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
 136     <transition name="left-menu"
 137         enter-active-class="animated slideInLeft faster"
 138         leave-active-class="animated slideOutLeft faster"
 139         v-on:after-leave="afterLeave">
 140         <Menu v-show="menuOpen" @closed="menuOpen=false" @account-change="selectedAccountChange"></Menu>
 141     </transition>
 142
 143     <Qrcode ref="qrcode"></Qrcode>
 144     <Transfer ref="transfer" @on-success="refreshTransactions"></Transfer>
 145
 146   </div>
 147 </template>
 148
 149 <script>
 150 import Menu from "./menu";
 151 import Qrcode from "./components/qrcode";
 152 import Transfer from "./components/transfer";
 153 import TransList from "./components/trans-list";
 154 import TransDetail from "./components/trans-detail";
 155 import bytom from "../script/bytom";
 156 export default {
 157   name: "",
 158   components: {
 159     Menu,
 160     Qrcode,
 161     Transfer,
 162     TransDetail
 163   },
 164   data() {
 165     return {
 166       menuOpen: false,
 167       maskOpen: false,
 168       accountInfo: {},
 169       latestTranscations: []
 170     };
 171   },
 172   methods: {
 173     openMenu: function() {
 174       this.maskOpen = true;
 175       this.menuOpen = true;
 176       this.$refs.qrcode.close();
 177     },
 178     shortAddress(address) {
 179       return (
 180         address.substr(0, 7) + "..." + address.substr(address.length - 7, 7)
 181       );
 182     },
 183     selectedAccountChange: function(accountInfo) {
 184       console.log(accountInfo);
 185
 186       this.accountInfo = accountInfo;
 187       this.accountInfo.address_short = this.shortAddress(
 188         this.accountInfo.address
 189       );
 190       this.refreshTransactions();
 191     },
 192     afterLeave: function() {
 193       this.maskOpen = false;
 194     },
 195     showQrcode: function() {
 196       this.$refs.qrcode.open(this.accountInfo.address);
 197     },
 198     transferOpen: function() {
 199       this.$refs.transfer.open(this.accountInfo);
 200     },
 201     refreshTransactions: function() {
 202       bytom.Transaction.list(
 203         this.accountInfo.guid,
 204         this.accountInfo.address
 205       ).then(ret => {
 206         let transactions = ret.data.transactions;
 207         if (transactions == null) {
 208           this.latestTranscations = [];
 209           return;
 210         }
 211
 212         transactions.forEach(transaction => {
 213           let inputSum = 0;
 214           let outoutSum = 0;
 215           let inputAddresses = [],
 216             outputAddresses = [];
 217           transaction.inputs.forEach(input => {
 218             if (input.address == this.accountInfo.address) {
 219               inputSum += input.amount;
 220               return;
 221             }
 222
 223             inputAddresses.push(input.address);
 224           });
 225
 226           transaction.outputs.forEach(output => {
 227             if (output.address == this.accountInfo.address) {
 228               outoutSum += output.amount;
 229               return;
 230             }
 231
 232             outputAddresses.push(output.address);
 233           });
 234           console.log(112, inputAddresses, outputAddresses);
 235
 236           let val = outoutSum - inputSum;
 237           if (val > 0) {
 238             transaction.direct = "+";
 239             transaction.address = this.shortAddress(inputAddresses.pop());
 240           } else {
 241             val = inputSum - outoutSum;
 242             transaction.direct = "-";
 243             transaction.address = this.shortAddress(outputAddresses.pop());
 244           }
 245           transaction.val = Number(val / 100000000).toFixed(8);
 246           // console.log(111, transaction, val);
 247         });
 248         console.log(transactions);
 249         this.latestTranscations = transactions;
 250       });
 251     }
 252   },
 253   mounted() {
 254     this.refreshTransactions();
 255   }
 256 };
 257 </script>