增加loading
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
be66c988b2
commit
f194e543b0
|
|
@ -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 ? (
|
||||
<>
|
||||
<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>
|
||||
<img src={qrqq} alt="二维码" width={250} />
|
||||
{ToolTips}
|
||||
</Modal>
|
||||
</Form>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue