src/popup/home/components/menu-creation.vue

   1 <style scoped>
   2 .form {
   3   margin: 50px 0;
   4 }
   5 .form-item .btn {
   6   width: 200px;
   7   margin-top: 15px;
   8 }
   9 </style>
  10
  11 <template>
  12     <MenuPage :title="$t('createAccount.title')" @back="back">
  13       <div class="form">
  14           <div class="form-item">
  15             <label class="form-item-label">{{ $t('createAccount.accountAlias') }}</label>
  16             <div class="form-item-content" style="margin-left: 76px;">
  17               <input type="text" v-model="formItem.accAlias">
  18             </div>
  19           </div>
  20           <div class="form-item">
  21             <label class="form-item-label">{{ $t('createAccount.keyAlias') }}</label>
  22             <div class="form-item-content" style="margin-left: 76px;">
  23               <input type="text" v-model="formItem.keyAlias">
  24             </div>
  25           </div>
  26           <div class="form-item">
  27             <label class="form-item-label">{{ $t('createAccount.keyPassword') }}</label>
  28             <div class="form-item-content" style="margin-left: 76px;">
  29               <input type="password" v-model="formItem.passwd1">
  30             </div>
  31           </div>
  32           <div class="form-item">
  33             <label class="form-item-label">{{ $t('createAccount.confirmPassword') }}</label>
  34             <div class="form-item-content" style="margin-left: 76px;">
  35               <input type="password" v-model="formItem.passwd2">
  36             </div>
  37           </div>
  38           <div class="tips">{{tips}}</div>
  39           <div class="form-item bg-gray" style="text-align: center">
  40             <div class="btn bg-green" @click="create">{{ $t('createAccount.create') }}</div>
  41           </div>
  42         </div>
  43     </MenuPage>
  44 </template>
  45
  46 <script>
  47 import bytom from "../../script/bytom";
  48 export default {
  49   name: "",
  50   components: {},
  51   data() {
  52     return {
  53       formItem: {
  54         accAlias: "",
  55         keyAlias: "",
  56         passwd1: "",
  57         passwd2: ""
  58       },
  59       tips: ""
  60     };
  61   },
  62   methods: {
  63     back: function() {
  64       this.$emit("on-back", "creation");
  65     },
  66     close: function() {
  67       this.$emit("on-exit", "creation");
  68     },
  69     create: function() {
  70       if (this.formItem.passwd1 != this.formItem.passwd2) {
  71         this.tips = "两次密码不一致，请检查后再试";
  72         return;
  73       }
  74
  75       let loader = this.$loading.show({
  76         container: this.fullPage ? null : this.$refs.formContainer,
  77         canCancel: true,
  78         onCancel: this.onCancel
  79       });
  80
  81       bytom.Account.create(
  82         this.formItem.accAlias,
  83         this.formItem.keyAlias,
  84         this.formItem.passwd1
  85       )
  86         .then(res => {
  87           console.log(res);
  88           this.formItem = {};
  89           loader.hide();
  90           this.back();
  91         })
  92         .catch(err => {
  93           console.log(err);
  94           loader.hide();
  95           this.$dialog.show({
  96             body: err.message
  97           });
  98           // this.tips = err.message;
  99         });
 100     }
 101   },
 102   mounted() {}
 103 };
 104 </script>