转账对话框

src/views/Owner.vue

@@ -1,12 +1,71 @@
 <template>
   <div class="owner-page">
+    <v-dialog
+      :value="transferVisible"
+      @input="toggleTransferDlg"
+      :width="500"
+      :max-width="600"
+      persistent
+    >
+      <v-card>
+        <section class='dlg-body'>
+          <span class="title-decoration dlg-line">我的地址</span>
+          <span class="address-decoration dlg-line">{{ address }}</span>
+
+          <span class="title-decoration dlg-line">接受地址</span>
+          <v-text-field
+            :value="targetAddress"
+            @input="changeTargetAddress"
+          ></v-text-field>
+
+          <div class="group-line">
+            <span class="title-decoration">转账金额</span>
+            <v-text-field
+              :value="transferAmount"
+              @input="changeTransferAmount"
+            ></v-text-field>
+            <span class="title-decoration">TIC</span>
+          </div>
+
+          <div class="group-line">
+            <span class="title-decoration">手续费</span>
+            <v-text-field
+              :value="transferFee"
+              @input="changeTransferFee"
+            ></v-text-field>
+            <span class="title-decoration">TIC</span>
+          </div>
+
+          <span class="title-decoration dlg-line">备注</span>
+          <v-text-field
+            :value="transferRemark"
+            @input="changeTransferRemark"
+          ></v-text-field>
+        </section>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey darken-1" flat @click="hideTransferDlg">关闭</v-btn>
+          <v-btn color="blue darken-1" flat @click="hideTransferDlg">转账</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
     <div class="card-content">
       <div class="app-card elevation-1">
-        <div>主人地址 <br> <span>{{ address }} </span> </div>
+        <div class="card-body">
+          <span>主人地址</span>
+          <span>{{ address }}</span>
+        </div>
       </div>
       <div class="app-sep"></div>
       <div class="app-card elevation-1">
-        <div>余额 <br><span> {{ balance }} </span></div>
+        <div class="card-body">
+          <span>余额: {{ balance }}</span>
+          <v-btn
+            @click="showTransferDlg"
+            color="info"
+          >转账</v-btn>
+        </div>
       </div>
     </div>
     <div class="table-content elevation-1">
@@ -71,6 +130,11 @@ export default {
       'filter',
       'balance',
       'address',
+      'transferVisible',
+      'targetAddress',
+      'transferAmount',
+      'transferFee',
+      'transferRemark',
     ]),
     ...mapGetters([]),
   },
@@ -83,7 +147,20 @@ export default {
       'inputFilter',
       'setBalance', // luk: 发现不写这句也没影响。但还是写吧，万一有用呢。
       'setAddress',
+      'toggleTransferDlg',
+      'changeTargetAddress',
+      'changeTransferAmount',
+      'changeTransferFee',
+      'changeTransferRemark',
     ]),
+
+    showTransferDlg() {
+      this.toggleTransferDlg(true)
+    },
+
+    hideTransferDlg() {
+      this.toggleTransferDlg(false)
+    },
   },
 
   mounted() {
@@ -96,6 +173,45 @@ export default {
 <style scoped lang="scss">
 @import "../styles/share";
 
+.v-dialog.v-dialog--active {
+  .v-card {
+    padding: 1.8em 2em 0;
+
+    .dlg-body {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+
+      .title-decoration {
+        text-align: left;
+        color: $primaryColor;
+        margin-top: $baseMargin;
+        min-width: 5em;
+        font-weight: bold;
+      }
+
+      .address-decoration {
+        text-align: left;
+        color: grey;
+      }
+
+      .v-input {
+        padding-top: 0;
+        margin-top: 0;
+      }
+
+      .group-line {
+        display: flex;
+        align-items: flex-start;
+
+        .v-input {
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
 .owner-page {
   display: flex;
   flex-direction: column;
@@ -110,6 +226,15 @@ export default {
       flex: 1;
       height: 100px;
       background-color: white;
+
+      .card-body {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
     }
 
     .app-sep {