feat: comlete all step-form

lbwa · Oct 5, 2018 · e18ab57 · e18ab57
1 parent 888c45b
commit e18ab57
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 10 deletions.
diff --git a/src/view/Form/Step/Confirm.vue b/src/view/Form/Step/Confirm.vue
@@ -34,6 +34,7 @@
       <el-form-item :label="text.password" prop="password">
         <el-input
           type="password"
+          placeholder='Password: admin'
           v-model="confirmForm.password"
           :style="{ width: '80%' }"
           clearable>
@@ -76,7 +77,9 @@ export default {
         receiverAccount: '收款人账号',
         receiverName: '收款人姓名',
         amount: '转账金额',
-        password: '支付密码'
+        password: '支付密码',
+        tipsTitle: '提示信息',
+        tipsMessage: '密码错误'
       }
     }
   },
@@ -94,10 +97,9 @@ export default {
         })
         .catch((e) => {
           this.loading = false
-          this.$message({
-            showClose: true,
-            message: '密码错误',
-            type: 'error'
+          this.$notify.error({
+            title: this.text.tipsTitle,
+            message: this.text.tipsMessage
           })
           console.error(e)
         })

diff --git a/src/view/Form/Step/Success.vue b/src/view/Form/Step/Success.vue
@@ -1,22 +1,59 @@
 <template>
   <div class="step-form__container">
+    <div class="success__form__header">
+      <i class="el-icon-success success__form__icon"></i>
+      <h2 class="success__form__title">{{text.success}}</h2>
+      <p class="success__form__description">{{text.description}}</p>
+    </div>
     <el-form
       class="success__form"
-      label-width="20%"
+      label-width="30%"
       size="small"
     >
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">{{btnText}}</el-button>
-      </el-form-item>
+      <el-form-item
+        :label="text.payAccount"
+      >{{form.payAccount}}</el-form-item>
+      <el-form-item
+        :label="text.receiverAccount"
+      >{{form.receiverAccount}}</el-form-item>
+      <el-form-item
+        :label="text.receiverName"
+      >{{form.receiverName}}</el-form-item>
+      <el-form-item
+        :label="text.amount"
+      >{{form.amount}}</el-form-item>
     </el-form>
+    <div class="success__form__button">
+      <el-button
+        type="primary"
+        @click="onSubmit"
+        size="small"
+      >{{text.morePayment}}</el-button>
+      <el-button
+        type="plain"
+        @click="onCheckBill"
+        size="small"
+      >{{text.checkBill}}</el-button>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   data () {
     return {
-      btnText: '再转一笔'
+      text: {
+        success: '操作成功',
+        description: '预计两小时内到账',
+        payAccount: '付款账户',
+        receiverAccount: '收款账户',
+        receiverName: '收款人姓名',
+        amount: '转账金额',
+        morePayment: '再转一笔',
+        checkBill: '检查账单'
+      }
     }
   },
 
@@ -26,18 +63,44 @@ export default {
     },
     onSubmit () {
       this.$router.push('info')
+    },
+    onCheckBill () {
+      this.$notify.success({
+        title: '确认信息',
+        message: `${this.text.checkBill} 页面实现中`
+      })
     }
   },
 
+  computed: {
+    ...mapState('formStep', [
+      'form'
+    ])
+  },
+
   created () {
     this.updateBreadcrumb()
   }
 }
 </script>
 
 <style lang="sass" scoped>
+@import '~STYLE/color/background.sass'
+
 .success
   &__form
     margin: 40px auto 0
+    padding: 24px 40px 10px
     max-width: 500px
+    background-color: $background-lighter
+
+    &__header, &__button
+      text-align: center
+
+    &__button
+      margin: 36px 0 8px
+
+    &__icon
+      font-size: 70px
+      color: green
 </style>