iczer
7 years ago
parent
670b97e616
commit
ec40bd0d14
7 changed files with 261 additions and 5 deletions
@ -0,0 +1,70 @@ |
||||
<template> |
||||
<div> |
||||
<a-form style="max-width: 500px; margin: 40px auto 0;"> |
||||
<a-form-item |
||||
label="付款账户" |
||||
:labelCol="{span: 5}" |
||||
:wrapperCol="{span: 19}" |
||||
> |
||||
<a-select value="1" placeholder="ant-design@alipay.com"> |
||||
<a-select-option value="1">ant-design@alipay.com</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
<a-form-item |
||||
label="收款账户" |
||||
:labelCol="{span: 5}" |
||||
:wrapperCol="{span: 19}" |
||||
> |
||||
<a-input-group :compact="true" style="display: inline-block; vertical-align: middle"> |
||||
<a-select defaultValue="alipay" style="width: 100px"> |
||||
<a-select-option value="alipay">支付宝</a-select-option> |
||||
<a-select-option value="wexinpay">微信</a-select-option> |
||||
</a-select> |
||||
<a-input :style="{width: 'calc(100% - 100px)'}" value="test@example.com"/> |
||||
</a-input-group> |
||||
</a-form-item> |
||||
<a-form-item |
||||
label="收款人姓名" |
||||
:labelCol="{span: 5}" |
||||
:wrapperCol="{span: 19}" |
||||
> |
||||
<a-input value="Alex" /> |
||||
</a-form-item> |
||||
<a-form-item |
||||
label="转账金额" |
||||
:labelCol="{span: 5}" |
||||
:wrapperCol="{span: 19}" |
||||
> |
||||
<a-input prefix="￥" value="5000" /> |
||||
</a-form-item> |
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}"> |
||||
<a-button type="primary" @click="nextStep">下一步</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 ASelect from 'vue-antd-ui/es/select/index' |
||||
import AInputGroup from "vue-antd-ui/es/input/Group"; |
||||
import AInput from "vue-antd-ui/es/input/Input"; |
||||
|
||||
const ASelectOption = ASelect.Option |
||||
|
||||
export default { |
||||
name: 'Step1', |
||||
components: {AInput, AInputGroup, ASelectOption, ASelect, AButton, AFormItem, AForm}, |
||||
methods: { |
||||
nextStep () { |
||||
this.$emit('nextStep') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,87 @@ |
||||
<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> |
||||
@ -0,0 +1,32 @@ |
||||
<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}"> |
||||
<a-button type="primary" @click="doOnceAgin">再转一笔</a-button> |
||||
<a-button style="margin-left: 8px">查看账单</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' |
||||
export default { |
||||
name: 'Step3', |
||||
components: {AButton, AFormItem, AForm}, |
||||
methods: { |
||||
doOnceAgin () { |
||||
this.$emit('finish') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,57 @@ |
||||
<template> |
||||
<a-card :bordered="false"> |
||||
<a-steps class="steps" :current="current"> |
||||
<a-step title="填写转账信息" /> |
||||
<a-step title="确认转账信息" /> |
||||
<a-step title="完成" /> |
||||
</a-steps> |
||||
<div class="content"> |
||||
<step1 v-if="current === 0" @nextStep="nextStep"></step1> |
||||
<step2 v-if="current === 1" @nextStep="nextStep" @prevStep="prevStep"></step2> |
||||
<step3 v-if="current === 2" @prevStep="prevStep" @finish="finish"></step3> |
||||
</div> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import ACard from 'vue-antd-ui/es/card/Card' |
||||
import ASteps from 'vue-antd-ui/es/steps/index' |
||||
import Step1 from './Step1' |
||||
import Step2 from './Step2' |
||||
import Step3 from './Step3' |
||||
|
||||
const AStep = ASteps.Step |
||||
|
||||
export default { |
||||
name: 'StepForm', |
||||
components: {Step1, Step2, Step3, AStep, ASteps, ACard}, |
||||
data () { |
||||
return { |
||||
desc: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。', |
||||
current: 0 |
||||
} |
||||
}, |
||||
methods: { |
||||
nextStep () { |
||||
if (this.current < 2) { |
||||
this.current += 1 |
||||
} |
||||
}, |
||||
prevStep () { |
||||
if (this.current > 0) { |
||||
this.current -= 1 |
||||
} |
||||
}, |
||||
finish () { |
||||
this.current = 0 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.steps{ |
||||
max-width: 750px; |
||||
margin: 16px auto; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue