79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<template>
|
|
<div class="step2">
|
|
<a-alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon />
|
|
<a-descriptions :column="1" class="mt-5">
|
|
<a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
|
|
<a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
|
|
<a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
|
|
<a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-divider />
|
|
<BasicForm @register="register" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import { BasicForm, useForm } from '/@/components/Form';
|
|
import { step2Schemas } from './data';
|
|
import { Alert, Divider, Descriptions } from 'ant-design-vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
BasicForm,
|
|
[Alert.name]: Alert,
|
|
[Divider.name]: Divider,
|
|
[Descriptions.name]: Descriptions,
|
|
[Descriptions.Item.name]: Descriptions.Item,
|
|
},
|
|
emits: ['next', 'prev'],
|
|
setup(_, { emit }) {
|
|
const [register, { validate, setProps }] = useForm({
|
|
labelWidth: 80,
|
|
schemas: step2Schemas,
|
|
actionColOptions: {
|
|
span: 14,
|
|
},
|
|
resetButtonOptions: {
|
|
text: '上一步',
|
|
},
|
|
submitButtonOptions: {
|
|
text: '提交',
|
|
},
|
|
resetFunc: customResetFunc,
|
|
submitFunc: customSubmitFunc,
|
|
});
|
|
|
|
async function customResetFunc() {
|
|
emit('prev');
|
|
}
|
|
|
|
async function customSubmitFunc() {
|
|
try {
|
|
const values = await validate();
|
|
setProps({
|
|
submitButtonOptions: {
|
|
loading: true,
|
|
},
|
|
});
|
|
setTimeout(() => {
|
|
setProps({
|
|
submitButtonOptions: {
|
|
loading: false,
|
|
},
|
|
});
|
|
emit('next', values);
|
|
}, 1500);
|
|
} catch (error) {}
|
|
}
|
|
|
|
return { register };
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.step2 {
|
|
width: 450px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|