From a04b526f34345c29d61704a1e0d3f3a460fa4679 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Mon, 23 Jul 2018 23:36:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EResult?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/Step3.vue    |  9 +++---
 src/components/result/Result.vue | 48 ++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/components/result/Result.vue

diff --git a/src/components/form/Step3.vue b/src/components/form/Step3.vue
index c2299ba..8695f82 100644
--- a/src/components/form/Step3.vue
+++ b/src/components/form/Step3.vue
@@ -1,10 +1,8 @@
 <template>
   <div>
     <a-form style="max-width: 500px; margin: 40px auto 0;">
-      <a-form-item :wrapperCol="{span: 15, offset: 9}">
-        success
-      </a-form-item>
-      <a-form-item :wrapperCol="{span: 19, offset: 5}">
+      <result title="支付完成" :is-success="true" />
+      <a-form-item :wrapperCol="{span: 16, offset: 8}">
         <a-button type="primary" @click="doOnceAgin">再转一笔</a-button>
         <a-button style="margin-left: 8px">查看账单</a-button>
       </a-form-item>
@@ -16,9 +14,10 @@
 import AForm from 'vue-antd-ui/es/form/Form'
 import AFormItem from 'vue-antd-ui/es/form/FormItem'
 import AButton from 'vue-antd-ui/es/button/button'
+import Result from '../result/Result'
 export default {
   name: 'Step3',
-  components: {AButton, AFormItem, AForm},
+  components: {Result, AButton, AFormItem, AForm},
   methods: {
     doOnceAgin () {
       this.$emit('finish')
diff --git a/src/components/result/Result.vue b/src/components/result/Result.vue
new file mode 100644
index 0000000..f5265f1
--- /dev/null
+++ b/src/components/result/Result.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="result">
+    <div >
+      <a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'" />
+    </div>
+    <div class="title">{{title}}</div>
+    <div>
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import AIcon from 'vue-antd-ui/es/icon/icon'
+export default {
+  name: 'Result',
+  components: {AIcon},
+  props: ['isSuccess', 'title']
+}
+</script>
+
+<style lang="less" scoped>
+  .result{
+    text-align: center;
+    text-align: center;
+    width: 72%;
+    margin: 0 auto;
+    .icon{
+      font-size: 72px;
+      line-height: 72px;
+      margin-bottom: 24px;
+    }
+    .success {
+      color: green;
+    }
+    .error {
+      color: red;
+    }
+    .title{
+      font-size: 24px;
+      color: rgba(0,0,0,.85);
+      font-weight: 500;
+      line-height: 32px;
+      margin-bottom: 16px;
+    }
+  }
+
+</style>