e856dbabcee2868fff045b56e9f630ba7e7997ad.svn-base 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <div>
  3. <a-form style="max-width: 500px; margin: 40px auto 0;">
  4. <a-alert
  5. :closable="true"
  6. message="确认转账后,资金将直接打入对方账户,无法退回。"
  7. style="margin-bottom: 24px;"
  8. />
  9. <a-form-item
  10. label="付款账户"
  11. :labelCol="{span: 5}"
  12. :wrapperCol="{span: 19}"
  13. class="stepFormText"
  14. >
  15. ant-design@alipay.com
  16. </a-form-item>
  17. <a-form-item
  18. label="收款账户"
  19. :labelCol="{span: 5}"
  20. :wrapperCol="{span: 19}"
  21. class="stepFormText"
  22. >
  23. test@example.com
  24. </a-form-item>
  25. <a-form-item
  26. label="收款人姓名"
  27. :labelCol="{span: 5}"
  28. :wrapperCol="{span: 19}"
  29. class="stepFormText"
  30. >
  31. Alex
  32. </a-form-item>
  33. <a-form-item
  34. label="转账金额"
  35. :labelCol="{span: 5}"
  36. :wrapperCol="{span: 19}"
  37. class="stepFormText"
  38. >
  39. ¥ 5,000.00
  40. </a-form-item>
  41. <a-form-item :wrapperCol="{span: 19, offset: 5}">
  42. <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
  43. <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
  44. </a-form-item>
  45. </a-form>
  46. </div>
  47. </template>
  48. <script>
  49. export default {
  50. name: "Step2",
  51. data () {
  52. return {
  53. loading: false
  54. }
  55. },
  56. methods: {
  57. nextStep () {
  58. let that = this
  59. that.loading = true
  60. setTimeout(function () {
  61. that.$emit('nextStep')
  62. }, 1500)
  63. },
  64. prevStep () {
  65. this.$emit('prevStep')
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="less" scoped>
  71. .stepFormText {
  72. margin-bottom: 24px;
  73. .ant-form-item-label,
  74. .ant-form-item-control {
  75. line-height: 22px;
  76. }
  77. }
  78. </style>