添-飞手培训-报名学习课程

pages/flyingHandService/api/index.tsx

@@ -29,16 +29,29 @@ export interface ListPageFlyingInfoResp {
 
 export interface SkillsType {
   type: string;
-  id: 1,
-  skillsName: string
+  id: number,
+  skillsName: string,
+  label:string | number,
+  value:string | number
 }
 
 export interface RegionResp {
-  "childInfo": RegionResp[] | null,
-  "id": number,
-  "level": number,
-  "name": string,
-  "pid": number
+  childInfo: RegionResp[] | null,
+  id: number,
+  level: number,
+  name: string,
+  pid: number
+}
+
+export interface PilotRegistrationParams {
+  city?: number,
+  drivingLicense?: number,
+  industryAppAuth?: Array<number>,
+  province?: number,
+  remark?: string,
+  telephone?: string,
+  uavLicenseLevelOne?: number,
+  uavLicenseLevelTwo?: number
 }
 
 export default {
@@ -55,4 +68,7 @@ export default {
   IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
     return request('/release/curriculum/getIndustryFlightSkills');
   },
+  PilotRegistrations: (params:PilotRegistrationParams): Promise<Response<Array<SkillsType>>> => {
+    return request('/release/curriculum/pilotRegistration',"post",params);
+  },
 }
\ No newline at end of file

pages/flyingHandService/index.page.tsx

 import React, { useEffect, useState } from "react";
 import { Box } from "./styled";
 import Image from "next/image";
-import { Button, Select, Space, Pagination, Cascader, Modal } from "antd";
+import { Button, Select, Space, Pagination, Cascader, Modal , Form ,Input,Checkbox, message} from "antd";
+import type { CheckboxValueType } from 'antd/es/checkbox/Group';
 import Layout from "~/components/layout";
 import ContentBox from "~/components/contentBox";
 import api, { Flying, SkillsType, RegionResp } from "./api";
@@ -13,6 +14,7 @@ interface FilterInfoParams {
 }
 
 export default function FlyingHandService() {
+  const {Option} = Select
   const router = useRouter();
   const [list, setList] = useState([
     "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg",
@@ -163,7 +165,12 @@ export default function FlyingHandService() {
       setSkills(res.result || []);
     });
     api.IndustryFlightSkills().then((res) => {
-      setFlightSkillsList(res.result || []);
+      const list = res.result?.map((item)=>{
+        item.label = item.skillsName
+        item.value = item.id
+        return item
+      })
+      setFlightSkillsList(list || []);
     });
   }, []);
 
@@ -185,18 +192,29 @@ export default function FlyingHandService() {
   //报名
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [loading, setLoading] = useState(false);
-  const handleOk = () => {
+  const handleOk = async (values: any) => {
+      const value = form.getFieldsValue()
     setLoading(true);
-    setTimeout(() => {
+    try{
+      const res = await api.PilotRegistrations(value)
       setLoading(false);
       setIsModalOpen(false);
-    }, 3000);
+      form.resetFields()
+      message.success('报名成功')
+    }catch(e:any){
+      message.error(e.message)
+    }
   };
 
   const handleCancel = () => {
     setIsModalOpen(false);
   };
 
+  const [form] = Form.useForm();
+  const onChangeCheck = (checkedValues: CheckboxValueType[]) => {
+    console.log('checked = ', checkedValues);
+  };
+
   return (
     <Layout>
       <Box>
@@ -272,7 +290,7 @@ export default function FlyingHandService() {
           getContainer={false}
           footer={[
             <Button
-              style={{ width: "100%" }}
+              style={{ width: "100%" ,background: "linear-gradient(135deg, #278EFF 0%, #0052DA 100%)",height: 40 }}
               key="submit"
               type="primary"
               loading={loading}
@@ -282,9 +300,79 @@ export default function FlyingHandService() {
             </Button>,
           ]}
         >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
+          <Form
+        form={form}
+        layout="vertical"
+        name="application"
+        initialValues={{ modifier: 'public' }}
+      >
+      <div style={{display:"flex",justifyContent:"space-between"}}>
+        <Form.Item style={{flex:1,marginRight:16}}
+            name="name"
+            rules={[{ required: true, message: 'Please input the title of collection!' }]}
+          >
+            <Input placeholder="姓名" />
+          </Form.Item>
+          <Form.Item style={{flex:1}} name="telephone">
+            <Input  placeholder="手机号" />
+          </Form.Item>
+      </div>
+       <Form.Item
+        name="city"
+        rules={[{ required: true, message: 'Please select gender!' }]}
+      >
+        <Cascader
+                allowClear
+                placeholder="地域"
+                className="selectItem"
+                size="large"
+                fieldNames={{
+                  label: "name",
+                  value: "id",
+                  children: "childInfo",
+                }}
+                options={secondDistrictInfo}
+                changeOnSelect
+              />
+      </Form.Item>
+       
+       <Form.Item
+        name="drivingLicense"
+        rules={[{ required: true, message: 'Please select gender!' }]}
+      >
+        <Select placeholder="是否有驾照">
+        <Option value="0">是</Option>
+          <Option value="1">否</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name="uavLicenseLevelOne"
+        rules={[{ required: true, message: 'Please select gender!' }]}
+      >
+            <Cascader
+                allowClear
+                placeholder="是否有无人机执照"
+                className="selectItem"
+                size="large"
+                fieldNames={{
+                  label: "licenseType",
+                  value: "id",
+                  children: "childLicenses",
+                }}
+                options={skills}
+                changeOnSelect
+              />
+      </Form.Item>
+        <Form.Item name="industryAppAuth" label="行业应用认证（多选）" className="collection-create-form_last-form-item">
+        <Checkbox.Group
+          options={flightSkillsList}
+          onChange={onChangeCheck}
+        />
+        </Form.Item>
+        <Form.Item name="remark">
+            <Input  placeholder="备注" />
+          </Form.Item>
+         </Form>
         </Modal>
 
         <ContentBox