加盟入驻模态框开发

components/NavHeader/index.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
 import LoginModal from "~/components/loginModal";
 import { useUser } from "~/lib/hooks";
 import PublishModal from "./publishModal";
+import JoinModal from "./joinModal";
 
 const items: TabsProps["items"] = [
   {
@@ -40,7 +41,7 @@ const items: TabsProps["items"] = [
 
 export default function NavHeader() {
   const router = useRouter();
-  const [currentPath, setCurrentPath] = useState('');
+  const [currentPath, setCurrentPath] = useState("");
   const user = useUser();
 
   useEffect(() => {
@@ -48,7 +49,6 @@ export default function NavHeader() {
     console.log("currentHash", currentPath);
   }, [router.route]);
 
-  
   const onChange = (key: string) => {
     router.push(key);
   };
@@ -64,6 +64,8 @@ export default function NavHeader() {
     setPpenLoginModal(false);
   };
 
+  const [openJoinModal, setOpenJoinModal] = useState(false); //加盟modal
+
   return (
     <div className={styles.navHeader}>
       <div className={styles.nav}>
@@ -82,11 +84,16 @@ export default function NavHeader() {
           >
             + 发布需求
           </Button>
-          <Button className={styles.btn2}>加盟入驻</Button>
+          <Button
+            className={styles.btn2}
+            onClick={() => setOpenJoinModal(true)}
+          >
+            加盟入驻
+          </Button>
         </Space>
         {user ? (
           <div className={styles.haedImg}>
-            <Avatar size={48} style={{ background: "#fff" }}></Avatar>
+            <Avatar size={36} style={{ background: "#bdbdbd" }}></Avatar>
           </div>
         ) : (
           <Button
@@ -99,7 +106,18 @@ export default function NavHeader() {
         )}
       </div>
       <LoginModal open={openLoginModal} onCancel={handleCancel}></LoginModal>
-      <PublishModal open={openPublishModal} onCancel={() => {setOpenPublishModal(false)}}></PublishModal>
+      <PublishModal
+        open={openPublishModal}
+        onCancel={() => {
+          setOpenPublishModal(false);
+        }}
+      ></PublishModal>
+      <JoinModal
+        open={openJoinModal}
+        onCancel={() => {
+          setOpenJoinModal(false);
+        }}
+      ></JoinModal>
     </div>
   );
 }

components/NavHeader/joinModal/api/index.ts

+import request, { Response } from "~/api/request"
+
+export interface ListTagResp {
+  id: number;
+  tagName: string;
+  tagImg?: string;
+  tagDescription: string;
+  createTime: string;
+}
+
+export default {
+  //加盟标签列表
+  listTag: (): Promise<Response<Array<ListTagResp>>> => {
+    return request('/userapp/cooperation/listTag')
+  }
+}
\ No newline at end of file

components/NavHeader/joinModal/index.module.scss

+.identityBtn {
+  box-sizing: border-box;
+  padding: 0 5px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform:translate(-50%, 0);
+  min-width: 100%;
+  height: 24px;
+  background: #e26329;
+  border-radius: 6px;
+  opacity: 0.95;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.modal {
+  :global .ant-modal-content {
+    border-radius: 6px;
+
+    .ant-modal-title{
+      text-align: center;
+    }
+  }
+}

components/NavHeader/joinModal/index.tsx

+import { Col, Modal, Row } from "antd";
+import Image from "next/image";
+import styles from "./index.module.scss";
+import img from "./assets/img.png";
+import { useEffect, useState } from "react";
+import api, { ListTagResp } from "./api";
+
+type Props = {
+  open?: boolean;
+  onOk?: () => void;
+  onCancel?: () => void;
+};
+export default function JoinModal(props: Props) {
+  const test = [
+    {
+      name: '飞手培训机构',
+      id: 0
+    }
+  ];
+  const [tagList, setTagList] = useState<ListTagResp[]>([]);
+
+  useEffect(() => {
+    api.listTag().then(res => {
+      setTagList(res.result || []);
+    })
+  }, [])
+  return (
+    <Modal
+      title="申请合作加盟"
+      open={props.open}
+      onOk={props.onOk}
+      onCancel={props.onCancel}
+      className={styles.modal}
+      width={460}
+      footer={null}
+    >
+      <Row style={{ padding: "22px 16px 20px 16px", gap: "16px 40px" }}>
+        {tagList.map((item) => {
+          return (
+            <Col
+              style={{ cursor: "pointer", height: 100, padding: 0 }}
+            >
+              <Image src={img} width={100} height={100} alt=""></Image>
+              <div className={styles.identityBtn}>{item.tagName}{">"}</div>
+            </Col>
+          );
+        })}
+      </Row>
+    </Modal>
+  );
+}