改-飞手培训-自适应样式修改

改-飞手培训-报名学习课程-手机号验证，城市数据提交为最后一级

components/NavHeader/publishModal/index.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { useGeolocation } from "~/lib/hooks";
 import api, { PublishParams, TypeResp } from "./api";
 import styles from "./index.module.scss";
+import {phoneNumber} from '~/lib/validateUtils'
 
 type Props = {
   open?: boolean;
@@ -80,7 +81,10 @@ export default function PublishModal(props: Props) {
           name="publishPhone"
           rules={[{ required: true, message: "请输入手机号！" }]}
         >
-          <Input placeholder="输入手机号"></Input>
+          <Input
+           onInput={phoneNumber} maxLength={11}
+           allowClear
+           placeholder="输入手机号"></Input>
         </Form.Item>
         <Form.Item
           label="需求类型"

lib/validateUtils.ts

+// 不能输入数字，其他可惜输入
+export const exceptNumber = (val: any) => {
+  val.target.value = val.target.value
+    .replace(/1?(\d|([1-9]\d+))(.\d+)?$/g, "")
+    .replace(/\s/g, "");
+};
+
+// 只能输入正整数
+export const onlyNumberPositive = (val: any) => {
+  // eslint-disable-next-line eqeqeq
+  if (val.target.value == 0) {
+    val.target.value = val.target.value.replace(/0/g, "");
+  }
+  val.target.value = val.target.value.replace(/\D/g, "");
+};
+
+// 不能输入汉字，其他可输入
+export const exceptChinese = (val: any) => {
+  val.target.value = val.target.value
+    .replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, "")
+    .replace(/\s/g, "");
+};
+
+// 只能输入字母和中文，不能输入数字和符号
+export const onlyCharacter = (val: any) => {
+  val.target.value = val.target.value
+    .replace(/[^a-zA-Z\u4E00-\u9FA5]/g, "")
+    .replace(/\s/g, "");
+};
+
+// 手机号输入，限制11位
+export const phoneNumber = (val: any) => {
+  if (val.target.value.length > 11) {
+    val.target.value = val.target.value.slice(0, 11);
+  } else {
+    val.target.value = val.target.value.replace(/\D/g, "");
+  }
+};
+
+// 开头不能输入空格
+export const noSpaceFront = (val: any) => {
+  val.target.value = val.target.value.replace(/^\s/g, "");
+};

pages/flyingHandService/index.page.tsx

@@ -8,6 +8,7 @@ import ContentBox from "~/components/contentBox";
 import api, { Flying, SkillsType, RegionResp } from "./api";
 import { useRouter } from "next/router";
 import { UserContext } from "~/lib/userProvider";
+import {phoneNumber} from '~/lib/validateUtils'
 interface FilterInfoParams {
   regionId?: number;
   flightSkillsId?: number;
@@ -239,7 +240,10 @@ export default function FlyingHandService() {
    .then(async (values) => {
      setLoading(true);
      try{
-      const res = await api.PilotRegistrations(values)
+      const res = await api.PilotRegistrations({
+        ...values,
+        city: values.city[values.city.length-1] || null
+      })
       if (res.code === "200") {
       setLoading(false);
       setIsModalOpen(false);
@@ -326,7 +330,7 @@ export default function FlyingHandService() {
           <Button
             type="primary"
             className="btn"
-            onClick={() => userInfo ? setIsModalOpen(true) : setNeedLogin(true)}
+            onClick={() => userInfo ?  setIsModalOpen(true) : setNeedLogin(true)}
           >
             报名学习课程
           </Button>
@@ -363,7 +367,7 @@ export default function FlyingHandService() {
             <Input placeholder="姓名" />
           </Form.Item>
           <Form.Item style={{flex:1}} name="telephone" rules={[{ required: true, message: '请输入手机号!' }]}>
-            <Input  placeholder="手机号" />
+            <Input onInput={phoneNumber} allowClear maxLength={11} placeholder="手机号" />
           </Form.Item>
       </div>
        <Form.Item

pages/flyingHandService/styled.tsx

@@ -54,6 +54,7 @@ export const Box = styled.div`
       position: relative;
     }
     &-bottom {
+      width: 220px;
       padding: 9px 12px 12px;
       border-radius: 0px 0px 6px 6px;
       background-color: #fff;