src/app/home/menu.vue

   1 <style scoped>
   2 .mc-wrap {
   3     position: fixed;
   4     top: 0;
   5     left: 0;
   6     right: 0;
   7     bottom: 0;
   8     z-index: 994;
   9     width: 55%;
  10     height: 100%;
  11     padding: 40px;
  12     background-color: #3c454b;
  13 }
  14 .accounts {
  15     width: 100%;
  16     height: 200px;
  17     overflow-x: hidden;
  18     overflow-y: scroll;
  19     margin-bottom: 25px;
  20 }
  21 .accounts::-webkit-scrollbar {
  22     display: none;
  23 }
  24 .accounts i {
  25     font-size: 24px;
  26 }
  27
  28 .menu {
  29     border-top: 1px solid #c9c9c9;
  30     padding-top: 15px;
  31 }
  32 .account {
  33     width: 150px;
  34     display: inline-block;
  35     vertical-align: middle;
  36 }
  37 .account-alias {
  38     width: 150px;
  39     font-size: 19px;
  40     overflow: hidden;
  41     white-space: nowrap;
  42     text-overflow: ellipsis;
  43 }
  44 .account-asset {
  45     font-size: 15px;
  46 }
  47 </style>
  48
  49 <template>
  50     <div>
  51         <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
  52         <div v-show="maskShow" class="mask"></div>
  53         <transition name="left-menu" v-on:after-leave="close" enter-active-class="animated slideInLeft faster" leave-active-class="animated slideOutLeft faster">
  54             <div v-show="show" class="mc-wrap">
  55                 <MenuPage :title="$t('menu.title')" @back="close">
  56                     <div class="list accounts">
  57                         <div v-for="(account, index) in accounts" :key="index" @click="accountSelected(account)">
  58                             <div :class="(currAccount != undefined && account.address == currAccount.address) ? 'list-item active': 'list-item'">
  59                                 <i class="iconfont icon-user"></i>
  60                                 <div class="account">
  61                                     <div class="account-alias">{{account.alias}}</div>
  62                                     <div class="account-asset">{{account.balance}} BTM</div>
  63                                 </div>
  64                             </div>
  65                         </div>
  66                     </div>
  67                     <div class="list menu">
  68                         <div class="list-item" @click="currView='creation'">
  69                             <i class="iconfont icon-plusbox"></i>{{ $t('menu.createAccount') }}
  70                         </div>
  71                         <div class="list-item" @click="currView='backup'">
  72                             <i class="iconfont icon-backup"></i>{{ $t('menu.backup') }}
  73                         </div>
  74                         <div class="list-item" @click="currView='help'">
  75                             <i class="iconfont icon-help"></i>{{ $t('menu.help') }}
  76                         </div>
  77                         <div class="list-item" @click="currView='settings'">
  78                             <i class="iconfont icon-settings"></i>{{ $t('menu.setting') }}
  79                         </div>
  80                     </div>
  81                 </MenuPage>
  82
  83                 <!-- child-page -->
  84                 <div>
  85                     <Creation key="creation" v-show="view.creation" @on-back="accountSelected" @on-exit="close"></Creation>
  86                     <Recovery key="recovery" v-show="view.recovery" @on-back="goBack" @on-exit="close"></Recovery>
  87                     <Bakcup key="backup" v-show="view.backup" @on-back="goBack" @on-exit="close"></Bakcup>
  88                     <Help key="help" v-show="view.help" @on-back="goBack" @on-exit="close"></Help>
  89                     <Settings key="settings" v-show="view.settings" @on-back="goBack" @on-exit="close"></Settings>
  90                 </div>
  91             </div>
  92         </transition>
  93     </div>
  94 </template>
  95
  96 <script>
  97 import Creation from "./menu-creation";
  98 import Recovery from "./menu-recovery";
  99 import Bakcup from "./menu-backup";
 100 import Help from "./menu-help";
 101 import Settings from "./menu-settings";
 102 export default {
 103     props: {
 104         accounts: "",
 105         selectedAccount: ""
 106     },
 107     name: "",
 108     components: {
 109         Creation,
 110         Recovery,
 111         Bakcup,
 112         Help,
 113         Settings
 114     },
 115     data() {
 116         return {
 117             show: false,
 118             maskShow: false,
 119             currView: "",
 120             currAccount: ""
 121         };
 122     },
 123     computed: {
 124         view() {
 125             const { currView } = this;
 126             return {
 127                 creation: currView === "creation",
 128                 recovery: currView === "recovery",
 129                 backup: currView === "backup",
 130                 help: currView === "help",
 131                 settings: currView === "settings"
 132             };
 133         }
 134     },
 135     watch: {
 136         selectedAccount(newVal) {
 137             this.currAccount = newVal
 138         }
 139     },
 140     methods: {
 141         open: function (child) {
 142             this.show = true;
 143             this.maskShow = true;
 144             this.currView = child;
 145         },
 146         close: function () {
 147             this.show = false;
 148             this.maskShow = false;
 149             this.currView = "";
 150         },
 151         goBack: function (from) {
 152             this.currView = "";
 153         },
 154         accountSelected: function (accountInfo) {
 155             // this.accounts.push(accountInfo);
 156             // this.currAccount = accountInfo;
 157             this.$emit("on-account-change", accountInfo);
 158             this.close();
 159         },
 160     }
 161 };
 162 </script>