From f194e543b0647d0793cd428a329d391beae92b8e Mon Sep 17 00:00:00 2001
From: cxz66666 <1092889706@qq.com>
Date: Sat, 12 Sep 2020 20:20:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Sheet.js | 154 ++++++++++++++++++++++------------------
1 file changed, 85 insertions(+), 69 deletions(-)
diff --git a/src/components/Sheet.js b/src/components/Sheet.js
index a695661..594068c 100644
--- a/src/components/Sheet.js
+++ b/src/components/Sheet.js
@@ -24,8 +24,11 @@ class NewForm extends React.Component {
firstWish: undefined,
secondWish: undefined,
visible: false,
+ isFinishSubmit: false,
+ confirmLoading: false,
};
}
+
componentDidMount() {
this.loadLocalStorage();
this.props.form.validateFields(["firstWish"], { force: true });
@@ -45,78 +48,80 @@ class NewForm extends React.Component {
};
handleSubmit = (e) => {
e.preventDefault();
- const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
- confirmAlert({
- title: "提交报名表",
- message:
- "您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。",
- buttons: [
- {
- label: "Yes",
- onClick: () => {
- validateFieldsAndScroll((err, values) => {
- if (err) {
- message.error("填写不正确，请按照提示修改");
- } else {
- // console.log(values);
- let addForm = async () => {
- let result = await axios("api/submit", {
- headers: {
- "Content-Type": "application/x-www-form-urlencoded",
- },
- method: "POST",
- data: qs.stringify({ dto: JSON.stringify(values) }),
- });
- this.saveLocalStorage();
- if (result.data.status === "success") {
- message.success(
- "提交成功！后续的面试时间会以短信形式通知，期待你的加入！"
- );
- //maybe this is useless but I really don't want to delete it
- successInform(
- values.phone,
- values.name,
- values.id_student,
- values.firstWish,
- values.secondWish
- );
- this.setState({ visible: true });
- } else {
- if (result.data.errorMsg === "TICKET_NOT_LEGEAL") {
- message.error("提交失败！请检查报名表填写是否正确。");
- } else if (
- result.data.errorMsg === "TICKET_INFO_INCOMPLETE"
- ) {
- message.error("提交失败！请检查报名表填写是否完整。");
- } else if (result.data.errorMsg === "TICKET_ALREADY_OK") {
- message.error(
- "我们已为您分配了面试场次，请注意短信通知，请勿重复提交!"
- );
- } else {
- message.error("提交失败！可能是网络问题。");
- }
- }
- };
- addForm();
- }
- });
- },
- },
- {
- label: "No",
- onClick: () => {},
- },
- ],
+ this.setState({ visible: true, isFinishSubmit: false });
+ };
+ handleSuccessSubmit = () => {
+ this.setState({ isFinishSubmit: true, confirmLoading: false });
+ };
+ handleFailSubmit = () => {
+ this.setState({
+ isFinishSubmit: false,
+ confirmLoading: false,
+ visible: false,
});
};
+ handleStartSubmit = () => {
+ this.setState({ confirmLoading: true });
+ };
handleCancel = (e) => {
this.setState({
visible: false,
+ isFinishSubmit: false,
+ confirmLoading: false,
});
};
handleOk = (e) => {
this.setState({
- visible: false,
+ visible: true,
+ });
+ const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
+ validateFieldsAndScroll((err, values) => {
+ if (err) {
+ message.error("填写不正确，请按照提示修改");
+ } else {
+ // console.log(values);
+ let addForm = async () => {
+ this.handleStartSubmit();
+ let result = await axios("api/submit", {
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
+ },
+ method: "POST",
+ data: qs.stringify({ dto: JSON.stringify(values) }),
+ });
+
+ this.saveLocalStorage();
+ if (result.data.status === "success") {
+ message.success(
+ "提交成功！后续的面试时间会以短信形式通知，期待你的加入！",
+ 5
+ );
+ //maybe this is useless but I really don't want to delete it
+ successInform(
+ values.phone,
+ values.name,
+ values.id_student,
+ values.firstWish,
+ values.secondWish
+ );
+ this.handleSuccessSubmit();
+ } else {
+ if (result.data.errorMsg === "TICKET_NOT_LEGEAL") {
+ message.error("提交失败！请检查报名表填写是否正确。");
+ } else if (result.data.errorMsg === "TICKET_INFO_INCOMPLETE") {
+ message.error("提交失败！请检查报名表填写是否完整。");
+ } else if (result.data.errorMsg === "TICKET_ALREADY_OK") {
+ message.error(
+ "我们已为您分配了面试场次，请注意短信通知，请勿重复提交!"
+ );
+ } else {
+ message.error("提交失败！可能是网络问题。");
+ }
+ this.handleFailSubmit();
+ }
+ };
+ addForm();
+ }
});
};
validator = (rule, value, callback) => {
@@ -171,7 +176,18 @@ class NewForm extends React.Component {
"【财外部】说说令你印象最深刻的理财经历，可以是任何和理财有关的哦",
],
];
-
+ const ToolTips = this.state.isFinishSubmit ? (
+ <>
+ 提交报名表后，我们强烈建议您加入QQ纳新咨询群，群号:1126888868
+ 
+
+ ) : (
+ <>
+
+ 您填写的表格已经保存在浏览器中，之后可以修改后覆盖原提交。请点击按钮进行提交。
+
+
+ );
const tailFormItemLayout = {
wrapperCol: {
xs: {
@@ -531,15 +547,15 @@ class NewForm extends React.Component {
- 提交报名表后，我们强烈建议您加入QQ纳新咨询群，群号:1126888868
-
+ {ToolTips}
);