add pages for menu

diff --git a/src/popup/framework/components/menu/main.vue b/src/popup/framework/components/menu/main.vue
index acf8702..864e00f 100644 (file)
--- a/src/popup/framework/components/menu/main.vue
+++ b/src/popup/framework/components/menu/main.vue
@@ -1,4 +1,4 @@
-<style scoped>
+<style>
 .btn-close {
   color: #ffffff;
   font-weight: bold;
@@ -16,6 +16,16 @@
   width: 60%;
   height: 100%;
   padding: 40px;
+  background-color: #3c454b;
+}
+
+.mc2warp {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 40px;
 }
 
 .account-list ul {
@@ -47,58 +57,93 @@ li.active {
 </style>
 
 <template>
-        <div class="mc-wrap bg-gray">
-            <section>
-                <i class="iconfont btn-close" @click="close">&#xe605;</i>
-            </section>
-            <section class="account-list">
-                <h2>账号切换</h2>
-                <ul>
-                    <li class="active">
-                        <i class="iconfont icon-user"></i>
-                        <div>
-                            <p>账号1</p>
-                            <p>1000 BTM</p>
-                        </div>
-                    </li>
-                    <li>
-                        <i class="iconfont icon-user"></i>
-                        <div>
-                            <p>账号2</p>
-                            <p>200 BTM</p>
-                        </div>
-                    </li>
-                    <li>
-                        <i class="iconfont icon-user"></i>
-                        <div>
-                            <p>账号3</p>
-                            <p>0 BTM</p>
-                        </div>
-                    </li>
-                </ul>
-            </section>
-            <hr>
-            <section class="menu-list">
-                <ul>
-                    <li><i class="iconfont icon-plusbox"></i>创建账户</li>
-                    <li><i class="iconfont icon-import"></i>导入账号</li>
-                    <li><i class="iconfont icon-backup"></i>备份种子</li>
-                    <li><i class="iconfont icon-help"></i>帮助</li>
-                    <li><i class="iconfont icon-settings"></i>设置</li>
-                </ul>
-            </section>
-        </div>
+  <div class="mc-wrap bg-gray">
+    <section>
+      <i class="iconfont btn-close" @click="close">&#xe605;</i>
+      <h3>账号切换</h3>
+    </section>
+    <section class="account-list">
+      <ul>
+        <li class="active">
+            <i class="iconfont icon-user"></i>
+            <div>
+                <p>账号1</p>
+                <p>1000 BTM</p>
+            </div>
+        </li>
+        <li>
+            <i class="iconfont icon-user"></i>
+            <div>
+                <p>账号2</p>
+                <p>200 BTM</p>
+            </div>
+        </li>
+        <li>
+            <i class="iconfont icon-user"></i>
+            <div>
+                <p>账号3</p>
+                <p>0 BTM</p>
+            </div>
+        </li>
+      </ul>
+    </section>
+    <hr>
+    <section class="menu-list">
+        <ul>
+            <li @click="currView='creation'"><i class="iconfont icon-plusbox"></i>创建账户</li>
+            <li @click="currView='recovery'"><i class="iconfont icon-import"></i>导入账号</li>
+            <li @click="currView='backup'"><i class="iconfont icon-backup"></i>备份种子</li>
+            <li @click="currView='help'"><i class="iconfont icon-help"></i>帮助</li>
+            <li @click="currView='settings'"><i class="iconfont icon-settings"></i>设置</li>
+        </ul>
+    </section>
+
+    <!-- modal -->
+    <transition-group name="menus">
+      <Creation key="creation" v-show="view.creation" @closed="currView=''"></Creation>
+      <Recovery key="recovery" v-show="view.recovery" @closed="currView=''"></Recovery>
+      <Bakcup key="backup" v-show="view.backup" @closed="currView=''"></Bakcup>
+      <Help key="help" v-show="view.help" @closed="currView=''"></Help>
+      <Settings key="settings" v-show="view.settings" @closed="currView=''"></Settings>
+    </transition-group>
+  </div>
 </template>
 
 <script>
+import Creation from "./page/creation";
+import Recovery from "./page/recovery";
+import Bakcup from "./page/backup";
+import Help from "./page/help";
+import Settings from "./page/settings";
 export default {
   name: "",
+  components: {
+    Creation,
+    Recovery,
+    Bakcup,
+    Help,
+    Settings
+  },
   data() {
-    return {};
+    return {
+      currView: ""
+    };
+  },
+  computed: {
+    view() {
+      const { currView } = this;
+      return {
+        creation: currView === "creation",
+        recovery: currView === "recovery",
+        backup: currView === "backup",
+        help: currView === "help",
+        settings: currView === "settings"
+      };
+    }
   },
   methods: {
     close: function() {
-      this.$emit("closeNotify");
+      this.$emit("closed");
     }
   }
 };

diff --git a/src/popup/framework/components/menu/page/backup.vue b/src/popup/framework/components/menu/page/backup.vue
new file mode 100644 (file)
index 0000000..28c5fc1
--- /dev/null
+++ b/src/popup/framework/components/menu/page/backup.vue
@@ -0,0 +1,32 @@
+<style scoped>
+.content {
+  margin: 30px 0;
+  padding: 0 10px;
+}
+</style>
+
+<template>
+    <div class="mc2warp bg-gray">
+        <section>
+            <i class="iconfont btn-close" @click="close">&#xe605;</i>
+            <h3>备份种子</h3>
+        </section>
+        <section class="content">
+          <div class="btn bg-green">备份</div>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  methods: {
+    close: function() {
+      this.$emit("closed", "");
+    }
+  }
+};
+</script>
\ No newline at end of file

diff --git a/src/popup/framework/components/menu/page/creation.vue b/src/popup/framework/components/menu/page/creation.vue
new file mode 100644 (file)
index 0000000..d2937a7
--- /dev/null
+++ b/src/popup/framework/components/menu/page/creation.vue
@@ -0,0 +1,52 @@
+<style scoped>
+.form{
+  margin: 50px 0;
+}
+.form-item .btn{
+  margin-top: 15px;
+}
+</style>
+
+<template>
+    <div class="mc2warp bg-gray">
+        <section>
+            <i class="iconfont btn-close" @click="close">&#xe605;</i>
+            <h3>创建账户</h3>
+        </section>
+        <section class="form">
+          <div class="form-item">
+            <label for="">账户别名</label>
+            <input type="text">
+          </div>
+          <div class="form-item">
+            <label for="">密钥别名</label>
+            <input type="text">
+          </div>
+          <div class="form-item">
+            <label for="">密码</label>
+            <input type="password">
+          </div>
+          <div class="form-item">
+            <label for="">重复密码</label>
+            <input type="password">
+          </div>
+          <div class="form-item bg-gray">
+            <div class="btn bg-green" @click="create">创建账户</div>
+          </div>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  methods: {
+    close: function() {
+      this.$emit("closed", "");
+    }
+  }
+};
+</script>
\ No newline at end of file

diff --git a/src/popup/framework/components/menu/page/help.vue b/src/popup/framework/components/menu/page/help.vue
new file mode 100644 (file)
index 0000000..451adb4
--- /dev/null
+++ b/src/popup/framework/components/menu/page/help.vue
@@ -0,0 +1,34 @@
+<style scoped>
+.content {
+  margin: 50px 0;
+  word-wrap: break-word;
+  font-size: 14px;
+}
+</style>
+
+<template>
+    <div class="mc2warp bg-gray">
+        <section>
+            <i class="iconfont btn-close" @click="close">&#xe605;</i>
+            <h3>帮助</h3>
+        </section>
+        <section class="content">
+          <p>帮助与信息页</p>
+          <a href="http://github.com/bytom/bytom/wiki" target="_blank">http://github.com/bytom/bytom/wiki</a>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  methods: {
+    close: function() {
+      this.$emit("closed", "");
+    }
+  }
+};
+</script>
\ No newline at end of file

diff --git a/src/popup/framework/components/menu/page/recovery.vue b/src/popup/framework/components/menu/page/recovery.vue
new file mode 100644 (file)
index 0000000..7f77093
--- /dev/null
+++ b/src/popup/framework/components/menu/page/recovery.vue
@@ -0,0 +1,34 @@
+<style scoped>
+.body{
+  padding: 20px 15px;
+}
+</style>
+
+<template>
+    <div class="mc2warp bg-gray">
+        <section>
+            <i class="iconfont btn-close" @click="close">&#xe605;</i>
+            <h3>导入账户</h3>
+        </section>
+        <section class="body">
+          <div class="form-item">
+              <input type="file">
+          </div>
+          <div class="btn bg-green" @click="recovery">从种子导入</div>
+        </section> 
+    </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  methods: {
+    close: function() {
+      this.$emit("closed", '');
+    }
+  }
+};
+</script>
\ No newline at end of file

diff --git a/src/popup/framework/components/menu/page/settings.vue b/src/popup/framework/components/menu/page/settings.vue
new file mode 100644 (file)
index 0000000..276ba0d
--- /dev/null
+++ b/src/popup/framework/components/menu/page/settings.vue
@@ -0,0 +1,50 @@
+<style scoped>
+.content{
+    margin: 50px 0;
+  font-size: 14px;
+}
+.content div{
+    margin: 20px 0;
+}
+</style>
+
+<template>
+    <div class="mc2warp bg-gray">
+        <section>
+            <i class="iconfont btn-close" @click="close">&#xe605;</i>
+            <h3>设置</h3>
+        </section>
+        <section class="content">
+            <div>
+                <p>钱包版本</p>
+                <p>1.0.1-2c74b9a</p>
+            </div>
+            <div>
+                <p>语言</p>
+                <select name="" id="">
+                    <option value="">中文</option>
+                </select>
+            </div>
+            <div>
+                <p>比原数量单位</p>
+                <select name="" id="">
+                    <option value="">BTM</option>
+                </select>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  methods: {
+    close: function() {
+      this.$emit("closed", '');
+    }
+  }
+};
+</script>
\ No newline at end of file

diff --git a/src/popup/framework/components/trans/transfer.vue b/src/popup/framework/components/trans/transfer.vue
index eb1daee..2e6b95d 100644 (file)
--- a/src/popup/framework/components/trans/transfer.vue
+++ b/src/popup/framework/components/trans/transfer.vue
@@ -75,7 +75,7 @@
               </div>
             </div>
         </section>
-        <section v-show="maskOpen" class="mask"></section>
+        <section v-show="maskShow" class="mask"></section>
         <section class="form">
           <div class="form-item-group">
             <div class="form-item">
@@ -144,6 +144,7 @@ export default {
   data() {
     return {
       show: false,
+      maskShow: false,
       confirmShow: false
     };
   },
@@ -152,12 +153,12 @@ export default {
       this.show = true;
     },
     confirmOpen: function() {
-      this.maskOpen = true;
+      this.maskShow = true;
       this.confirmShow = true;
     },
     confirmClose: function() {
       this.confirmShow = false;
-      this.maskOpen = false;
+      this.maskShow = false;
     }
   }
 };

diff --git a/src/popup/framework/home.vue b/src/popup/framework/home.vue
index dc539ee..8589965 100644 (file)
--- a/src/popup/framework/home.vue
+++ b/src/popup/framework/home.vue
@@ -139,7 +139,7 @@
         enter-active-class="animated slideInLeft faster" 
         leave-active-class="animated slideOutLeft faster" 
         v-on:after-leave="afterLeave">
-        <Menu v-show="menuOpen" @closeNotify="menuOpen=false"></Menu>
+        <Menu v-show="menuOpen" @closed="menuOpen=false"></Menu>
     </transition>
     
     <Qrcode ref="qrcode"></Qrcode>
@@ -185,8 +185,8 @@ export default {
   },
   mounted() {
     console.log(1111);
-    // this.openMenu()
-    this.transferOpen();
+    this.openMenu()
+    // this.transferOpen();
   }
 };
 </script>
\ No newline at end of file