shaogen1995 2 лет назад
Родитель
Сommit
e74ec4b85d

+ 2 - 0
后台/src/App.tsx

@@ -10,6 +10,7 @@ import UpAsyncLoding from "./components/UpAsyncLoding";
 import MessageCom from "./components/Message";
 const Layout = React.lazy(() => import("./pages/Layout"));
 const Login = React.lazy(() => import("./pages/Login"));
+const Gather = React.lazy(() => import("./pages/Z1Gather"));
 
 export default function App() {
   return (
@@ -20,6 +21,7 @@ export default function App() {
           <Switch>
             {/* 测试页面 */}
             <Route path="/login" component={Login} />
+            <Route path="/Zgather" component={Gather} />
             <AuthRoute path="/" component={Layout} />
           </Switch>
         </React.Suspense>

+ 10 - 4
后台/src/pages/Layout/index.tsx

@@ -73,15 +73,21 @@ function Layout() {
         path: "/manual",
         Com: React.lazy(() => import("../A8Manual")),
       },
+    ];
+  }, []);
 
-      {
+  useEffect(() => {
+    // 如果是超级管理员
+    const userInfo = getTokenInfo().user;
+    if (userInfo.isAdmin === 1) {
+      list.push({
         id: 900,
         name: "用户管理",
         path: "/user",
         Com: React.lazy(() => import("../A9User")),
-      },
-    ];
-  }, []);
+      });
+    }
+  }, [list]);
 
   // 点击跳转
   const pathCutFu = useCallback((path: string) => {

+ 124 - 0
后台/src/pages/Z1Gather/index.module.scss

@@ -0,0 +1,124 @@
+.Z1Gather {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  overflow-y: auto;
+  background-color: #f5f5f5;
+
+  :global {
+    .main {
+      padding: 0 60px 100px;
+      width: 1000px;
+      margin: 0 auto;
+      background-color: #fff;
+
+      h1 {
+        font-size: 22px;
+        height: 50px;
+        line-height: 50px;
+        border-bottom: 1px solid #ccc;
+      }
+
+      .formBox {
+        margin-top: 20px;
+
+        .ant-row {
+          display: block;
+
+          textarea {
+            min-height: 150px;
+          }
+        }
+
+        .ant-form-item-label {
+          width: 100%;
+          text-align: left;
+          font-weight: 700;
+        }
+
+        .ant-form-item-explain-error {
+          text-align: left;
+        }
+
+        .staFormItem {
+          .ant-form-item-control-input-content {
+
+            .ant-radio-group {
+              display: flex;
+              flex-direction: column;
+
+              .ant-radio-wrapper {
+                height: 32px;
+                line-height: 32px;
+              }
+            }
+          }
+        }
+
+        .btnOkBox {
+          width: 900px;
+          background-color: #fff;
+          position: fixed;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          bottom: 0px;
+          height: 70px;
+          left: 50%;
+          transform: translateX(-50%);
+          padding: 0 60px;
+        }
+      }
+
+      .toTopBox {
+        opacity: 0;
+        pointer-events: auto;
+        transition: all .3s;
+        position: fixed;
+        left: calc(50% + 530px);
+        bottom: 50px;
+        transform: translateX(-50%);
+        width: 50px;
+        height: 50px;
+        background-color: rgba(0, 0, 0, .6);
+        border-radius: 50%;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        font-size: 24px;
+      }
+
+      .toTopBoxShow {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
+  // 移动端
+  @media screen and (max-width: 1140px) {
+    :global {
+      .main {
+        width: 100vw;
+        padding: 0 20px 100px;
+        background-color: #f5f5f5;
+
+        h1 {
+          font-size: 18px;
+        }
+
+        .formBox {
+          .btnOkBox {
+            background-color: #f5f5f5;
+          }
+        }
+        .toTopBox{
+          left: auto;
+          right: 0px;
+        }
+      }
+    }
+  }
+}

+ 237 - 0
后台/src/pages/Z1Gather/index.tsx

@@ -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;

+ 6 - 6
后台/src/utils/http.ts

@@ -7,10 +7,10 @@ import { domShowFu } from "./domShow";
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
-  process.env.NODE_ENV === "development"
-    ? "http://192.168.20.55:8045/api/"
-    : "";
-  // process.env.NODE_ENV === "development" ? "https://bengbubwg.4dage.com" : "";
+  // process.env.NODE_ENV === "development"
+  //   ? "http://192.168.20.55:8045/api/"
+  //   : "";
+  process.env.NODE_ENV === "development" ? "https://haidebao.4dage.com" : "";
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module "axios" {
@@ -23,10 +23,10 @@ declare module "axios" {
 // 创建 axios 实例
 const http = axios.create({
   // --------线下的地址不用加/api/
-  baseURL: baseURL,
+  // baseURL: baseURL,
 
   // --------打包或线上环境接口需要加上api/
-  // baseURL: baseURL + "/api/",
+  baseURL: baseURL + "/api/",
   timeout: 5000,
 });