增加loading

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;
+    this.setState({ visible: true, isFinishSubmit: false });
-    confirmAlert({
+  };
-      title: "提交报名表",
+  handleSuccessSubmit = () => {
-      message:
+    this.setState({ isFinishSubmit: true, confirmLoading: false });
-        "您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。",
+  };
-      buttons: [
+  handleFailSubmit = () => {
-        {
+    this.setState({
-          label: "Yes",
+      isFinishSubmit: false,
-          onClick: () => {
+      confirmLoading: false,
-            validateFieldsAndScroll((err, values) => {
+      visible: false,
-              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: () => {},
-        },
-      ],
     });
   };
+  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 ? (
+      <>
+        <p>提交报名表后，我们强烈建议您加入QQ纳新咨询群，群号:1126888868</p>
+        <img src={qrqq} alt="二维码" width={250} />
+      </>
+    ) : (
+      <>
+        <p>
+          您填写的表格已经保存在浏览器中，之后可以修改后覆盖原提交。请点击按钮进行提交。
+        </p>
+      </>
+    );
     const tailFormItemLayout = {
       wrapperCol: {
         xs: {
@@ -531,15 +547,15 @@ class NewForm extends React.Component {
           </Button>
         </Form.Item>
         <Modal
-          title="提交成功！"
+          title={this.state.isFinishSubmit ? "提交成功！" : "提交表单"}
           visible={this.state.visible}
-          onOk={this.handleOk}
+          onOk={this.state.isFinishSubmit ? this.handleCancel : this.handleOk}
           onCancel={this.handleCancel}
-          okText="这就加群"
+          okText={this.state.isFinishSubmit ? "这就加群" : "提交"}
           cancelText="我再想想"
+          confirmLoading={this.state.confirmLoading}
         >
-          <p>提交报名表后，我们强烈建议您加入QQ纳新咨询群，群号:1126888868</p>
+          {ToolTips}
-          <img src={qrqq} alt="二维码" width={250} />
         </Modal>
       </Form>
     );