1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <template>
| <div class="w-120 m-auto">
| <Alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon />
| <Descriptions :column="1" class="mt-5">
| <Descriptions.Item label="付款账户"> ant-design@alipay.com </Descriptions.Item>
| <Descriptions.Item label="收款账户"> test@example.com </Descriptions.Item>
| <Descriptions.Item label="收款人姓名"> Vben </Descriptions.Item>
| <Descriptions.Item label="转账金额"> 500元 </Descriptions.Item>
| </Descriptions>
| <Divider />
| <BasicForm @register="register" />
| </div>
| </template>
| <script lang="ts" setup>
| import { BasicForm, useForm } from '@/components/Form';
| import { step2Schemas } from './data';
| import { Alert, Divider, Descriptions } from 'ant-design-vue';
|
| const emit = defineEmits(['next', 'prev']);
|
| 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) {
| console.error(error);
| }
| }
| </script>
|
|
