发布需求功能开发

components/NavHeader/index.tsx

@@ -5,6 +5,7 @@ import styles from "./index.module.scss";
 import { useRouter } from "next/router";
 import LoginModal from "~/components/loginModal";
 import { useUser } from "~/lib/hooks";
+import PublishModal from "./publishModal";
 
 const items: TabsProps["items"] = [
   {
@@ -47,14 +48,15 @@ export default function NavHeader() {
     router.push(key);
   };
 
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [openLoginModal, setPpenLoginModal] = useState(false); //登录modal
+  const [openPublishModal, setOpenPublishModal] = useState(false); //发布modal
 
   const showModal = () => {
-    setIsModalOpen(true);
+    setPpenLoginModal(true);
   };
 
   const handleCancel = () => {
-    setIsModalOpen(false);
+    setPpenLoginModal(false);
   };
 
   return (
@@ -68,7 +70,11 @@ export default function NavHeader() {
           onChange={onChange}
         />
         <Space size={16} className={styles.btns}>
-          <Button type="primary" className={styles.btn1}>
+          <Button
+            type="primary"
+            className={styles.btn1}
+            onClick={() => setOpenPublishModal(true)}
+          >
             + 发布需求
           </Button>
           <Button className={styles.btn2}>加盟入驻</Button>
@@ -87,7 +93,8 @@ export default function NavHeader() {
           </Button>
         )}
       </div>
-      <LoginModal open={isModalOpen} onCancel={handleCancel}></LoginModal>
+      <LoginModal open={openLoginModal} onCancel={handleCancel}></LoginModal>
+      <PublishModal open={openPublishModal} onCancel={() => {setOpenPublishModal(false)}}></PublishModal>
     </div>
   );
 }

components/NavHeader/publishModal/api/index.ts

+import request, { Response } from "~/api/request"
+
+export interface TypeResp {
+  id: number;
+  typeName: string;
+}
+
+export interface PublishParams {
+  userAccountId: number; //账号id
+  publishPhone: number; //手机号
+  publishName: string;  //发布名称
+  requirementTypeId: number;  //需求类型
+  requireDescription: string; //需求描述
+}
+
+export default {
+  /**
+   * 需求类型
+   * @returns 
+   */
+  listType(): Promise<Response<Array<TypeResp>>>{
+    return request('/release/requirements/listType')
+  },
+  /**
+   * 需求发布
+   * @param params 
+   * @returns 
+   */
+  publish(params: PublishParams): Promise<Response<any>>{
+    return request('/release/requirements/publish', 'post', params);
+  }
+}
\ No newline at end of file

components/NavHeader/publishModal/index.module.scss

+.modal {
+  width: 460px;
+
+  :global .ant-modal-content {
+    border-radius: 0;
+  }
+}

components/NavHeader/publishModal/index.tsx

+import { Button, Form, Input, Modal, Select } from "antd";
+import { useEffect, useState } from "react";
+import api, { PublishParams, TypeResp } from "./api";
+import styles from "./index.module.scss";
+
+type Props = {
+  open?: boolean;
+  onOk?: () => void;
+  onCancel?: () => void;
+};
+export default function PublishModal(props: Props) {
+  const [types, setTypes] = useState<Array<TypeResp>>([]); //需求类型
+  const [params, setParams] = useState<PublishParams>({
+    userAccountId: -1,
+    publishName: "",
+    publishPhone: -1,
+    requireDescription: "",
+    requirementTypeId: -1,
+  });
+  const [form] = Form.useForm();
+  console.log("form", form);
+
+  useEffect(() => {
+    api.listType().then((res) => {
+      setTypes(res.result || []);
+    });
+  }, []);
+
+  const onFinish = (values: any) => {
+    console.log("Success:", values);
+    values.publishPhone = Number(values.publishPhone);
+    api
+      .publish({
+        ...params,
+        ...values,
+      })
+      .then((res) => {
+        if (res.code !== "-1") {
+          props.onCancel && props.onCancel();
+          setTimeout(() => {
+            form.resetFields();
+          }, 500);
+        }
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  return (
+    <Modal
+      open={props.open}
+      onOk={props.onOk}
+      onCancel={props.onCancel}
+      title="需求发布"
+      className={styles.modal}
+      width={460}
+      footer={null}
+    >
+      <Form
+        labelCol={{ span: 5 }}
+        labelAlign="left"
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        form={form}
+      >
+        <Form.Item
+          label="姓名"
+          name="publishName"
+          rules={[{ required: true, message: "请输入姓名！" }]}
+        >
+          <Input placeholder="输入姓名"></Input>
+        </Form.Item>
+        <Form.Item
+          label="手机号"
+          name="publishPhone"
+          rules={[{ required: true, message: "请输入手机号！" }]}
+        >
+          <Input placeholder="输入手机号"></Input>
+        </Form.Item>
+        <Form.Item
+          label="需求类型"
+          name="requirementTypeId"
+          rules={[{ required: true, message: "请选择需求类型！" }]}
+        >
+          <Select
+            placeholder="选择需求类型"
+            options={types}
+            fieldNames={{ label: "typeName", value: "id" }}
+          ></Select>
+        </Form.Item>
+        <Form.Item
+          name="requireDescription"
+          rules={[{ required: true, message: "请输入需求描述！" }]}
+        >
+          <Input.TextArea
+            placeholder="项目需求描述"
+            style={{ height: 162 }}
+          ></Input.TextArea>
+        </Form.Item>
+        <Form.Item>
+          <Button
+            type="primary"
+            htmlType="submit"
+            style={{ width: "100%", height: 40, borderRadius: 0 }}
+          >
+            立即发布
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}