|
|
@@ -0,0 +1,237 @@
|
|
|
+import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
|
+import styles from "./index.module.scss";
|
|
|
+import { Button, Form, Input, Radio } from "antd";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+import TextArea from "antd/es/input/TextArea";
|
|
|
+import classNames from "classnames";
|
|
|
+import { ArrowUpOutlined } from "@ant-design/icons";
|
|
|
+import http from "@/utils/http";
|
|
|
+function Z1Gather() {
|
|
|
+ const timeRef = useRef(-1);
|
|
|
+ useEffect(() => {
|
|
|
+ // 修改样式为移动端兼容
|
|
|
+ const rootDom: HTMLDivElement = document.querySelector("#root")!;
|
|
|
+ rootDom.style.minWidth = "100%";
|
|
|
+ rootDom.style.minHeight = "100%";
|
|
|
+
|
|
|
+ rootDom.style.height = window.innerHeight + "px";
|
|
|
+
|
|
|
+ window.addEventListener(
|
|
|
+ "resize",
|
|
|
+ () => {
|
|
|
+ clearTimeout(timeRef.current);
|
|
|
+ timeRef.current = window.setTimeout(() => {
|
|
|
+ rootDom.style.height = window.innerHeight + "px";
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ true
|
|
|
+ );
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const [topShow, setTopShow] = useState(false);
|
|
|
+
|
|
|
+ // 页面滚动
|
|
|
+ useEffect(() => {
|
|
|
+ window.addEventListener(
|
|
|
+ "scroll",
|
|
|
+ () => {
|
|
|
+ const sroolDom: HTMLDivElement = document.querySelector("#Z1Gather")!;
|
|
|
+ setTopShow(sroolDom.scrollTop >= 150);
|
|
|
+ },
|
|
|
+ true
|
|
|
+ );
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const toTopFu = useCallback(() => {
|
|
|
+ const sroolDom: HTMLDivElement = document.querySelector("#Z1Gather")!;
|
|
|
+ sroolDom.scrollTo({ top: 0, behavior: "smooth" });
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 设置表单初始数据(区分编辑和新增)
|
|
|
+ const FormBoxRef = useRef<any>({});
|
|
|
+ // 没有通过校验
|
|
|
+ const onFinishFailed = useCallback(() => {
|
|
|
+ return MessageFu.warning("Invalid input!");
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取收集问卷列表-导出表格
|
|
|
+ */
|
|
|
+ const API_btnOk = (data: any) => {
|
|
|
+ return http.post("show/questionnaire/submit", data);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 通过校验点击确定
|
|
|
+ const onFinish = useCallback(async (values: any) => {
|
|
|
+ const res = await API_btnOk(values);
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success("提交成功!");
|
|
|
+ window.setTimeout(() => {
|
|
|
+ window.opener = null;
|
|
|
+ window.open("", "_self");
|
|
|
+ window.close();
|
|
|
+ FormBoxRef.current.resetFields();
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.Z1Gather} id="Z1Gather">
|
|
|
+ <div className="main">
|
|
|
+ <h1>2023 Print China_Contact us</h1>
|
|
|
+ <div className="formBox">
|
|
|
+ <Form
|
|
|
+ ref={FormBoxRef}
|
|
|
+ name="basic"
|
|
|
+ onFinish={onFinish}
|
|
|
+ onFinishFailed={onFinishFailed}
|
|
|
+ autoComplete="off"
|
|
|
+ >
|
|
|
+ <Form.Item
|
|
|
+ label="Name"
|
|
|
+ name="name"
|
|
|
+ rules={[{ required: true, message: "not null!" }]}
|
|
|
+ getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ >
|
|
|
+ <Input maxLength={15} showCount placeholder="please enter" />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ className="staFormItem"
|
|
|
+ label="Job Title"
|
|
|
+ name="jobTitle"
|
|
|
+ rules={[{ required: true, message: "not null!" }]}
|
|
|
+ >
|
|
|
+ <Radio.Group>
|
|
|
+ <Radio value="Decision Maker">1. Decision Maker</Radio>
|
|
|
+ <Radio value="Influencer">2. Influencer</Radio>
|
|
|
+ <Radio value="Employee">3. Employee</Radio>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="Company Name"
|
|
|
+ name="companyName"
|
|
|
+ rules={[{ required: true, message: "not null!" }]}
|
|
|
+ getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ >
|
|
|
+ <Input maxLength={15} showCount placeholder="please enter" />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="Email"
|
|
|
+ name="email"
|
|
|
+ rules={[
|
|
|
+ { required: true, message: "not null!" },
|
|
|
+ // {
|
|
|
+ // pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
|
|
|
+ // message: "Invalid input!",
|
|
|
+ // },
|
|
|
+ ]}
|
|
|
+ getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ >
|
|
|
+ <Input maxLength={50} showCount placeholder="please enter" />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ className="staFormItem"
|
|
|
+ label="Should we call you?"
|
|
|
+ name="hasCall"
|
|
|
+ rules={[{ required: true, message: "not null!" }]}
|
|
|
+ >
|
|
|
+ <Radio.Group>
|
|
|
+ <Radio value={1}>1. Yes</Radio>
|
|
|
+ <Radio value={0}>2. No</Radio>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="Phone"
|
|
|
+ name="phone"
|
|
|
+ rules={[
|
|
|
+ { required: true, message: "not null!" },
|
|
|
+ // {
|
|
|
+ // pattern:
|
|
|
+ // /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
|
|
|
+ // message: "Invalid input!",
|
|
|
+ // },
|
|
|
+ ]}
|
|
|
+ getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ >
|
|
|
+ <Input maxLength={11} showCount placeholder="please enter" />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ className="staFormItem"
|
|
|
+ label="Area"
|
|
|
+ name="area"
|
|
|
+ rules={[{ required: true, message: "not null!" }]}
|
|
|
+ >
|
|
|
+ <Radio.Group>
|
|
|
+ <Radio value="Asia">1. Asia</Radio>
|
|
|
+ <Radio value="Europe">2. Europe</Radio>
|
|
|
+ <Radio value="America">3. America</Radio>
|
|
|
+ <Radio value="Africa">4. Africa</Radio>
|
|
|
+ <Radio value="Others">5. Others</Radio>
|
|
|
+ </Radio.Group>
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="Country"
|
|
|
+ name="country"
|
|
|
+ rules={[{ required: true, message: "not null!" }]}
|
|
|
+ getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ >
|
|
|
+ <Input maxLength={15} showCount placeholder="please enter" />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="Detailed request"
|
|
|
+ name="description"
|
|
|
+ rules={[
|
|
|
+ { required: true, message: "not null!" },
|
|
|
+ {
|
|
|
+ validator: (rule, value) => {
|
|
|
+ if (value) {
|
|
|
+ const txt = value
|
|
|
+ .replaceAll(" ", "")
|
|
|
+ .replaceAll("\n", "");
|
|
|
+ return txt === ""
|
|
|
+ ? Promise.reject("Invalid input!")
|
|
|
+ : Promise.resolve();
|
|
|
+ } else return Promise.resolve();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <TextArea
|
|
|
+ autoSize
|
|
|
+ placeholder="please enter"
|
|
|
+ showCount
|
|
|
+ maxLength={500}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ {/* 确定按钮 */}
|
|
|
+ <div className="btnOkBox">
|
|
|
+ <Button type="primary" htmlType="submit">
|
|
|
+ 提交问卷
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ {/* 滚动到顶部 */}
|
|
|
+ <div
|
|
|
+ onClick={toTopFu}
|
|
|
+ className={classNames("toTopBox", topShow ? "toTopBoxShow" : "")}
|
|
|
+ >
|
|
|
+ <ArrowUpOutlined />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const MemoZ1Gather = React.memo(Z1Gather);
|
|
|
+
|
|
|
+export default MemoZ1Gather;
|