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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| <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>
|
|
