12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <template>
- <div>
- <a-form style="max-width: 500px; margin: 40px auto 0;">
- <a-alert
- :closable="true"
- message="确认转账后,资金将直接打入对方账户,无法退回。"
- style="margin-bottom: 24px;"
- />
- <a-form-item
- label="付款账户"
- :labelCol="{span: 5}"
- :wrapperCol="{span: 19}"
- class="stepFormText"
- >
- ant-design@alipay.com
- </a-form-item>
- <a-form-item
- label="收款账户"
- :labelCol="{span: 5}"
- :wrapperCol="{span: 19}"
- class="stepFormText"
- >
- test@example.com
- </a-form-item>
- <a-form-item
- label="收款人姓名"
- :labelCol="{span: 5}"
- :wrapperCol="{span: 19}"
- class="stepFormText"
- >
- Alex
- </a-form-item>
- <a-form-item
- label="转账金额"
- :labelCol="{span: 5}"
- :wrapperCol="{span: 19}"
- class="stepFormText"
- >
- ¥ 5,000.00
- </a-form-item>
- <a-form-item :wrapperCol="{span: 19, offset: 5}">
- <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
- <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
- </a-form-item>
- </a-form>
- </div>
- </template>
- <script>
- export default {
- name: "Step2",
- data () {
- return {
- loading: false
- }
- },
- methods: {
- nextStep () {
- let that = this
- that.loading = true
- setTimeout(function () {
- that.$emit('nextStep')
- }, 1500)
- },
- prevStep () {
- this.$emit('prevStep')
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .stepFormText {
- margin-bottom: 24px;
- .ant-form-item-label,
- .ant-form-item-control {
- line-height: 22px;
- }
- }
- </style>
|