功能：租赁租期默认，租期时间判断

.eslintrc.json

@@ -7,6 +7,9 @@
   "extends": [
     "airbnb-base",
     "next/core-web-vitals",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
     "plugin:prettier/recommended"
   ],
   "rules": {
@@ -69,7 +72,9 @@
         "unused-imports/no-unused-vars": [
           "error",
           { "argsIgnorePattern": "^_" }
-        ]
+        ],
+        "jsx-a11y/click-events-have-key-events": "off",
+        "jsx-a11y/no-static-element-interactions": "off"
       }
     }
   ]

pages/equipmentLeasing/detail/[id].page.tsx

@@ -14,6 +14,7 @@ import {
   DatePicker,
 } from 'antd';
 import { RangePickerProps } from 'antd/es/date-picker';
+import dayjs from 'dayjs';
 import moment from 'moment';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -23,6 +24,7 @@ import { UserContext } from '~/lib/userProvider';
 
 import api, { GetWebDeviceDetailResult, GetWebDeviceWareSkuById, GetLeaseGoodsResult } from './api';
 import flowPat from './assets/flow-path.png';
+// eslint-disable-next-line import/no-cycle
 import OrderForGoods from './components/orderForGoods';
 import ImagePreview from './components/picture-preview';
 import { Box } from './styled';
@@ -75,10 +77,10 @@ export default function EquipmentLeasingDetail() {
   const [form] = Form.useForm();
   const [formDate] = Form.useForm();
   const tagsData = [
-    { id: 0, label: '1-7天', disable: false },
-    { id: 1, label: '8-15天', disable: false },
-    { id: 2, label: '16-30天', disable: false },
-    { id: 3, label: '30天以上', disable: false },
+    { id: 0, label: '1-7天', disable: false, minDay: 1, maxDay: 7 },
+    { id: 1, label: '8-15天', disable: false, minDay: 8, maxDay: 15 },
+    { id: 2, label: '16-30天', disable: false, minDay: 16, maxDay: 30 },
+    { id: 3, label: '31天以上', disable: false, minDay: 31, maxDay: -1 },
   ];
 
   const [discount, setDiscount] = useState<GetLeaseGoodsResult | null>();
@@ -86,6 +88,17 @@ export default function EquipmentLeasingDetail() {
   const [selectedTagsData, setSelectedTagsData] = useState<number>();
   const [shopDetail, setShopDetail] = useState<ShopDetail>();
 
+  // 获取价格
+  const getPrice = (tag: number) => {
+    const Id = wareSkuList?.filter((item) => item.id === form.getFieldValue('id'))[0].productSpec;
+    if (Id) {
+      api.GoodsPriceDetail({ leaseTerm: tag, productSpecId: Id }).then((res) => {
+        setDiscount(res.result);
+      });
+    }
+  };
+
+  // 显示弹窗
   const showModal = () => {
     if (userInfo) {
       setIsModalOpen(true);
@@ -101,14 +114,32 @@ export default function EquipmentLeasingDetail() {
     }
   };
 
+  // 租期天数
+  const [days, setDays] = useState<number>();
+
+  // 规格弹窗选择规格之后点击提交
   const handleOk = () => {
     setLoading(true);
     form
       .validateFields()
-      .then(async (values) => {
+      .then(async (_values) => {
         setLoading(false);
         setIsModalOpen(false);
         setIsModalDateOpen(true);
+        // 当前选择的租期范围
+        const leaseTime = tagsData.find((i) => i.id === selectedTagsData);
+        // 设置日期默认值
+        formDate.setFieldValue('dateDetail', [
+          dayjs(),
+          dayjs().add(
+            Number(leaseTime?.minDay) > 1
+              ? Number(leaseTime?.minDay) - 1
+              : Number(leaseTime?.minDay),
+            'day',
+          ),
+        ]);
+        // 设置默认天数
+        setDays(leaseTime?.minDay);
       })
       .catch((err) => {
         message
@@ -120,9 +151,23 @@ export default function EquipmentLeasingDetail() {
       });
   };
 
-  const [days, setDays] = useState<number>();
-
+  // 确认租期点击事件
   const handleOkDate = async () => {
+    // 当前选择的租期范围
+    const leaseTime = tagsData.find((i) => i.id === selectedTagsData);
+    // 判断租期
+    if (leaseTime?.maxDay === -1 && Number(days) < Number(leaseTime?.minDay)) {
+      message.warning(`租期最少${leaseTime?.minDay}天`);
+      return;
+    }
+    if (leaseTime?.maxDay !== -1 && Number(leaseTime) < Number(leaseTime?.minDay)) {
+      message.warning(`租期至少${leaseTime?.minDay}天`);
+      return;
+    }
+    if (leaseTime?.maxDay !== -1 && Number(days) > Number(leaseTime?.maxDay)) {
+      message.warning(`租期最多${leaseTime?.maxDay}天`);
+      return;
+    }
     setLoading(true);
     try {
       const result = await Promise.all([form.validateFields(), formDate.validateFields()]);
@@ -153,6 +198,7 @@ export default function EquipmentLeasingDetail() {
     }
   };
 
+  // 选择租期点击事件
   const handleChangeDate = (tag: number, checked: boolean, disable: boolean) => {
     if (checked && !disable) {
       const nextSelectedTags = checked ? tag : tagsData.filter((t) => t.id !== tag)[0].id;
@@ -162,23 +208,22 @@ export default function EquipmentLeasingDetail() {
     }
   };
 
-  const getPrice = (tag: number) => {
-    const Id = wareSkuList?.filter((item) => item.id === form.getFieldValue('id'))[0].productSpec;
-    if (Id) {
-      api.GoodsPriceDetail({ leaseTerm: tag, productSpecId: Id }).then((res) => {
-        setDiscount(res.result);
-      });
-    }
-  };
-
   const onChangeNum = (value: number | string | null) => {
     console.log('changed', value);
   };
+
+  // 选择租期返回事件
   const goBack = () => {
+    // 日期选择弹窗隐藏
     setIsModalDateOpen(false);
+    // 租赁弹窗显示
     setIsModalOpen(true);
+    // 重置日期选择表单
+    formDate.resetFields();
   };
-  const onchanges = (values: any) => {
+
+  // 租期选择监听事件
+  const onDateChanges = (values: any) => {
     if (values) {
       const day = new Date(values[1]).getTime() - new Date(values[0]).getTime();
       const totalDays = Math.floor(day / (1000 * 3600 * 24));
@@ -397,7 +442,7 @@ export default function EquipmentLeasingDetail() {
                 <RangePicker
                   style={{ width: 376, marginTop: 10 }}
                   disabledDate={disabledDate}
-                  onChange={onchanges}
+                  onChange={onDateChanges}
                 />
               </Form.Item>
             </Form>