src/popup/framework/components/menu/main.vue

   1 <style>
   2 .btn-close {
   3   color: #ffffff;
   4   font-weight: bold;
   5   position: absolute;
   6   right: 10px;
   7   top: 10px;
   8 }
   9 .mc-wrap {
  10   position: fixed;
  11   top: 0;
  12   left: 0;
  13   right: 0;
  14   bottom: 0;
  15   z-index: 9999;
  16   width: 60%;
  17   height: 100%;
  18   padding: 40px;
  19   background-color: #3c454b;
  20 }
  21
  22 .mc2warp {
  23   height: 100%;
  24   position: absolute;
  25   top: 0;
  26   left: 0;
  27   right: 0;
  28   padding: 40px;
  29 }
  30 .account-list {
  31   width: 100%;
  32   height: 230px;
  33   overflow-x: hidden;
  34   overflow-y: scroll;
  35 }
  36 .account-list::-webkit-scrollbar {
  37   display: none;
  38 }
  39 .account-list ul {
  40   margin-top: 30px;
  41 }
  42 .account-list i {
  43   font-size: 28px;
  44   line-height: 45px;
  45   margin-right: 18px;
  46 }
  47
  48 ul {
  49   display: grid;
  50 }
  51 ul li {
  52   display: flex;
  53   padding: 5px 0;
  54 }
  55 li i {
  56   margin: 0 8px;
  57 }
  58 li:active,
  59 li:hover,
  60 li.active {
  61   background-color: #1bc1b0;
  62   border-radius: 8px;
  63   cursor: pointer;
  64 }
  65 .acc-alias {
  66   width: 150px;
  67   overflow: hidden;
  68   white-space: nowrap;
  69   text-overflow: ellipsis;
  70 }
  71 </style>
  72
  73 <template>
  74   <div class="mc-wrap bg-gray">
  75     <section>
  76       <i class="iconfont btn-close" @click="close">&#xe605;</i>
  77       <h3>账号切换</h3>
  78     </section>
  79     <section class="account-list">
  80       <ul>
  81         <!--  class="active" -->
  82         <div v-for="(account, index) in accounts">
  83             <li :class="(currentAccount != undefined && account.address == currentAccount.address) ? 'active': ''" @click="accountSelected(account)">
  84               <i class="iconfont icon-user"></i>
  85               <div>
  86                   <p v-if="account.alias" class="acc-alias">{{account.alias}}</p>
  87                   <p v-else>账户{{index+1}}</p>
  88                   <p>{{account.balance}} BTM</p>
  89               </div>
  90           </li>
  91         </div>
  92
  93       </ul>
  94     </section>
  95     <hr>
  96     <section class="menu-list">
  97         <ul>
  98             <li @click="currView='creation'"><i class="iconfont icon-plusbox"></i>创建账户</li>
  99             <!-- <li @click="currView='recovery'"><i class="iconfont icon-import"></i>导入账号</li> -->
 100             <li @click="currView='backup'"><i class="iconfont icon-backup"></i>备份</li>
 101             <li @click="currView='help'"><i class="iconfont icon-help"></i>帮助</li>
 102             <li @click="currView='settings'"><i class="iconfont icon-settings"></i>设置</li>
 103         </ul>
 104     </section>
 105
 106     <!-- modal -->
 107     <transition-group name="menus">
 108       <Creation key="creation" v-show="view.creation" @closed="currView=''"></Creation>
 109       <Recovery key="recovery" v-show="view.recovery" @closed="currView=''"></Recovery>
 110       <Bakcup key="backup" v-show="view.backup" @closed="currView=''"></Bakcup>
 111       <Help key="help" v-show="view.help" @closed="currView=''"></Help>
 112       <Settings key="settings" v-show="view.settings" @closed="currView=''"></Settings>
 113     </transition-group>
 114   </div>
 115 </template>
 116
 117 <script>
 118 import Creation from "./page/creation";
 119 import Recovery from "./page/recovery";
 120 import Bakcup from "./page/backup";
 121 import Help from "./page/help";
 122 import Settings from "./page/settings";
 123 import bytom from "../../../script/bytom";
 124 export default {
 125   name: "",
 126   components: {
 127     Creation,
 128     Recovery,
 129     Bakcup,
 130     Help,
 131     Settings
 132   },
 133   data() {
 134     return {
 135       currView: "",
 136       accounts: [],
 137       currentAccount: ""
 138     };
 139   },
 140   computed: {
 141     view() {
 142       const { currView } = this;
 143       return {
 144         creation: currView === "creation",
 145         recovery: currView === "recovery",
 146         backup: currView === "backup",
 147         help: currView === "help",
 148         settings: currView === "settings"
 149       };
 150     }
 151   },
 152   watch: {
 153     currView: function() {
 154       if (this.currView == "" || this.accounts.length == 0) {
 155         this.refresh();
 156       }
 157     }
 158   },
 159   methods: {
 160     close: function() {
 161       this.$emit("closed");
 162     },
 163     accountSelected: function(accountInfo) {
 164       this.currentAccount = accountInfo;
 165       this.$emit("account-change", this.currentAccount);
 166       this.close();
 167     },
 168     refresh: function(accountInfo) {
 169       bytom.Account.list().then(accounts => {
 170         console.log(222, accounts);
 171         if (accounts.length == 0) {
 172           return;
 173         }
 174
 175         this.accounts = accounts;
 176         this.currentAccount = accounts[0];
 177         this.$emit("account-change", this.currentAccount);
 178       });
 179     }
 180   },
 181   mounted() {
 182     this.refresh();
 183   }
 184 };
 185 </script>