mirror of
https://github.com/iczer/vue-antd-admin.git
synced 2025-04-06 03:57:44 +08:00
88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<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>
|
|
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 AAlert from 'vue-antd-ui/es/alert/index'
|
|
export default {
|
|
name: 'Step2',
|
|
components: {AAlert, AButton, AFormItem, AForm},
|
|
data () {
|
|
return {
|
|
loading: false
|
|
}
|
|
},
|
|
methods: {
|
|
nextStep () {
|
|
let _this = this
|
|
_this.loading = true
|
|
setTimeout(function () {
|
|
_this.$emit('nextStep')
|
|
}, 1500)
|
|
},
|
|
prevStep () {
|
|
this.$emit('prevStep')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.stepFormText {
|
|
margin-bottom: 24px;
|
|
:global {
|
|
.ant-form-item-label,
|
|
.ant-form-item-control {
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|