-
Notifications
You must be signed in to change notification settings - Fork 178
/
index.tsx
73 lines (63 loc) · 1.94 KB
/
index.tsx
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
import React, { useState } from 'react';
import { Button, Message, Card } from '@alifd/next';
import { useInterval } from './utils';
import styles from './index.module.scss';
interface DetailProcessFunc {
(): any;
}
export interface SuccessDetailProps {
statusCode: string;
description: string;
image: string;
buttonBackDesc: string;
buttonContinueDesc: string;
countDownSecnods: number;
onButtonBack: DetailProcessFunc;
onButtonContinue: DetailProcessFunc;
}
export default function SuccessDetail(props: SuccessDetailProps) {
const {
statusCode = '提交成功',
description = 's 后自动跳转至工单页',
image = 'https://img.alicdn.com/tfs/TB1UOSVoqL7gK0jSZFBXXXZZpXa-73-72.png',
buttonBackDesc = '返回列表',
buttonContinueDesc = '继续创建',
countDownSecnods = 5,
onButtonBack = null,
onButtonContinue = null,
} = props;
const [second, setSecond] = useState(countDownSecnods);
const gobackHandle = () => {
if (onButtonBack) {
onButtonBack();
} else {
Message.notice('返回列表函数响应');
}
};
useInterval(() => {
setSecond(second - 1);
if (second <= 0) {
gobackHandle();
}
}, second >= 0 ? 1000 : null);
const goContinueHandle = () => {
if (onButtonContinue) {
onButtonContinue();
} else {
Message.notice('继续创建函数响应');
}
};
return (
<Card free className={styles.SuccessDetail}>
<div>
<img src={image} className={styles.exceptionImage} alt="img" />
<h1 className={styles.statuscode}>{statusCode}</h1>
<div className={styles.description}>{`${second > 0 ? second : 0}${description}`}</div>
<div className={styles.operationWrap}>
<Button type="primary" onClick={gobackHandle} className={styles.mainAction}>{buttonBackDesc}</Button>
<Button onClick={goContinueHandle}>{buttonContinueDesc}</Button>
</div>
</div>
</Card>
);
}