转账

src/views/Owner.vue

@@ -14,26 +14,33 @@
 
           <span class="title-decoration dlg-line">接受地址</span>
           <v-text-field
+            autofocus
+            single-line
+            :error-messages="wrongAddress"
             :value="targetAddress"
             @input="changeTargetAddress"
           ></v-text-field>
 
           <div class="group-line">
-            <span class="title-decoration">转账金额</span>
+            <span class="title-decoration title-left">转账金额</span>
             <v-text-field
+              single-line
+              :error-messages="wrongAmount"
               :value="transferAmount"
               @input="changeTransferAmount"
             ></v-text-field>
-            <span class="title-decoration">TIC</span>
+            <span class="title-decoration title-right">TIC</span>
           </div>
 
           <div class="group-line">
-            <span class="title-decoration">手续费</span>
+            <span class="title-decoration title-left">手续费</span>
             <v-text-field
+              single-line
+              :error-messages="wrongFee"
               :value="transferFee"
               @input="changeTransferFee"
             ></v-text-field>
-            <span class="title-decoration">TIC</span>
+            <span class="title-decoration title-right">TIC</span>
           </div>
 
           <span class="title-decoration dlg-line">备注</span>
@@ -44,8 +51,14 @@
         </section>
         <v-card-actions>
           <v-spacer></v-spacer>
+          <span class="result-hint">{{ transferResult }}</span>
           <v-btn color="grey darken-1" flat @click="hideTransferDlg">关闭</v-btn>
-          <v-btn color="blue darken-1" flat @click="hideTransferDlg">转账</v-btn>
+          <v-btn
+            color="blue darken-1"
+            flat
+            @click="performTransfer"
+            :loading="submitting"
+          >转账</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -135,6 +148,11 @@ export default {
       'transferAmount',
       'transferFee',
       'transferRemark',
+      'submitting',
+      'wrongAddress',
+      'wrongAmount',
+      'wrongFee',
+      'transferResult'
     ]),
     ...mapGetters([]),
   },
@@ -142,6 +160,7 @@ export default {
   methods: {
     ...mapActions([
       'updateOwnerInfo',
+      'performTransfer',
     ]),
     ...mapMutations([
       'inputFilter',
@@ -186,10 +205,17 @@ export default {
         text-align: left;
         color: $primaryColor;
         margin-top: $baseMargin;
-        min-width: 5em;
         font-weight: bold;
       }
 
+      .title-left {
+        min-width: 5em;
+      }
+
+      .title-right {
+        margin-left: $baseMargin;
+      }
+
       .address-decoration {
         text-align: left;
         color: grey;
@@ -209,6 +235,10 @@ export default {
         }
       }
     }
+
+    .result-hint {
+      margin-right: 1.2em;
+    }
   }
 }