Merge remote-tracking branch 'origin/caoyun'

next.config.js

 /** @type {import('next').NextConfig} */
-let distDir = ".dev"; //默认输出目录
+let distDir = '.dev' //默认输出目录
 
-if (process.env.NODE_ENV === "production") {
+if (process.env.NODE_ENV === 'production') {
   //生产环境用另一个目录构建，防止与dev冲突
-  distDir = ".next";
+  distDir = '.next'
 }
 
 const nextConfig = {
   distDir,
   reactStrictMode: true,
-  transpilePackages: ["antd"],
-  output: "standalone",
+  transpilePackages: ['antd'],
+  output: 'standalone',
   compiler: {
     styledComponents: true,
   },
   redirects() {
     return [
       {
-        source: "/",
-        destination: "/home",
+        source: '/',
+        destination: '/home',
         permanent: true,
       },
-    ];
+    ]
   },
   async rewrites() {
     return [
       {
-        source: "/local/:path*",
+        source: '/local/:path*',
         //destination: "https://iuav.mmcuav.cn/:path*",
-        destination: "https://test.iuav.shop/:path*",
+        destination: 'https://test.iuav.shop/:path*',
       },
-    ];
+    ]
   },
   images: {
     remotePatterns: [
       {
-        protocol: "http",
-        hostname: "**",
+        protocol: 'http',
+        hostname: '**',
       },
       {
-        protocol: "https",
-        hostname: "**",
+        protocol: 'https',
+        hostname: '**',
       },
     ],
   },
-  pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
-};
+  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
+}
 
-module.exports = nextConfig;
+module.exports = nextConfig

pages/equipmentLeasing/api/index.tsx

-import request, { Response } from '~/api/request';
+import request, { Response } from '~/api/request'
 
 export interface ListPageDeviceInfoParams {
-  "brandId"?: number,
-  "districtId"?: number,
-  "modelId"?: number,
-  "pageNo": number,
-  "pageSize": number,
-  "partsId"?: number,
-  "productCategoryId"?: number,
-  "qualityId"?: number
+  brandId?: number
+  districtId?: number
+  modelId?: number
+  pageNo: number
+  pageSize: number
+  partsId?: number
+  productCategoryId?: number
+  qualityId?: number
 }
 
 export interface Device {
-        id: number,
-        wareNo: string,
-        wareTitle: string,
-        wareTypeId: number,
-        wareStatus: number,
-        minDeposit: number,
-        minRent: number,
-        totalStock: number,
-        totalSale: number,
-        propInfoId: null,
-        createTime: string,
-        wareImgs: [
-            {
-                id: number,
-                wareInfoId: number,
-                imgUrl: string,
-                imgType: number
-            }
-        ],
-        tags: string[]
+  id: number
+  goodsName: string
+  images: string
+  price: number | null
 }
 
 export interface Advertisement {
-    id:number,
-    imageUrl:string
+  id: number
+  imageUrl: string
 }
 
 export interface ListPageDeviceInfoResp {
-  "pageNo": 1,
-  "pageSize": 10,
-  "list": Array<Device>,
-  "totalCount": 0,
-  "totalPage": 0
+  pageNo: 1
+  pageSize: 10
+  list: Array<Device>
+  totalCount: 0
+  totalPage: 0
 }
 
-
 export default {
   //web-设备租赁-分页
-  listPageDeviceInfo: (params: ListPageDeviceInfoParams,options = {}): Promise<Response<ListPageDeviceInfoResp>> => {
-    return request('/pms/webDevice/deviceList', 'post', params, options)
+  listPageDeviceInfo: (
+    params: ListPageDeviceInfoParams,
+    options = {}
+  ): Promise<Response<ListPageDeviceInfoResp>> => {
+    return request('/pms/product/mall/deviceList', 'post', params, options)
   },
   //web-设备租赁-广告
   listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => {
     return request('/pms/webDevice/ad', 'get')
-  }
-}
\ No newline at end of file
+  },
+}

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

-import React, { useEffect , useState , useContext } from 'react'
-import {useRouter} from 'next/router';
-import Layout from "~/components/layout";
-import {Box} from './styled';
-import ImagePreview from './components/picture-preview';
-import { Button , Image as AImage , Divider , Select,Modal ,Tag,Space,Form,message} from 'antd';
-import Image from 'next/image';
-import errImg from "~/assets/errImg";
-import api,{GetWebDeviceDetailResult,GetWebDeviceWareSkuById} from './api';
-import { UserContext } from "~/lib/userProvider";
+import React, { useEffect, useState, useContext } from 'react'
+import { useRouter } from 'next/router'
+import Layout from '~/components/layout'
+import { Box } from './styled'
+import ImagePreview from './components/picture-preview'
+import OrderForGoods from './components/orderForGoods'
+import moment from 'moment'
+import {
+  Button,
+  Image as AImage,
+  Divider,
+  Select,
+  Modal,
+  Tag,
+  Space,
+  Form,
+  message,
+  InputNumber,
+  DatePicker,
+} from 'antd'
+import Image from 'next/image'
+import errImg from '~/assets/errImg'
+import api, { GetWebDeviceDetailResult, GetWebDeviceWareSkuById } from './api'
+import { UserContext } from '~/lib/userProvider'
 import flowPat from './assets/flow-path.png'
-
+import { RangePickerProps } from 'antd/es/date-picker'
+const { RangePicker } = DatePicker
 const { CheckableTag } = Tag
 
+export interface ShopDetail {
+  dateDetail: Array<Date>
+  num: number
+  id: number
+}
+
 export default function EquipmentLeasingDetail() {
-  const router = useRouter();
-  const { userInfo, setNeedLogin } = useContext(UserContext);
-  const [id, setId] = useState<number | null>(null);
-  
-  const [detail,setDetail] = useState<GetWebDeviceDetailResult | null>()
-  const [wareSkuList,setWareSkuList] = useState<GetWebDeviceWareSkuById[] | undefined>()
+  const router = useRouter()
+  const { userInfo, setNeedLogin } = useContext(UserContext)
+  const [id, setId] = useState<number | null>(null)
 
-  useEffect(()=>{
+  const [detail, setDetail] = useState<GetWebDeviceDetailResult | null>()
+  const [wareSkuList, setWareSkuList] = useState<
+    GetWebDeviceWareSkuById[] | undefined
+  >()
+
+  useEffect(() => {
     setId(Number(router.query.id))
-  },[router])
+  }, [router])
 
-  useEffect(()=>{
+  useEffect(() => {
     if (id) {
       api
         .listDetailDeviceInfo({
-          id:id
+          goodsId: id,
         })
         .then((res) => {
-          setDetail(res.result || null);
-        });
-      api
-        .listWareSkuById({
-          id:id
+          setDetail(res.result || null)
+          console.log(
+            res.result?.goodsSpec.map((item) => item.productSpecList).flat()
+          )
+          const wareList = res.result?.goodsSpec.map(
+            (item) => item.productSpecList
+          )
+          if (wareList) {
+            const wareSkuList: GetWebDeviceWareSkuById[] = wareList.flat()
+            setWareSkuList(wareSkuList)
+          }
         })
-        .then((res) => {
-          res.result?.map(item=>{
-            return item
-          })
-          setWareSkuList(res.result || undefined);
-        });
     }
-  },[id])
+  }, [id])
 
   //租赁弹框
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [form] = Form.useForm();
-  const tagsData = ['3-7天', '8-15天', '16-30天', '30天以上'];
-  const [selectedTags, setSelectedTags] = useState<number>();
-  const [selectedTagsData, setSelectedTagsData] = useState<string>();
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isModalDateOpen, setIsModalDateOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [isorderForGoods, setIsorderForGoods] = useState(false)
+  const [form] = Form.useForm()
+  const [formDate] = Form.useForm()
+  const tagsData = [
+    { label: '3-7天', disable: false },
+    { label: '8-15天', disable: false },
+    { label: '16-30天', disable: false },
+    { label: '30天以上', disable: false },
+  ]
+  const [selectedTags, setSelectedTags] = useState<number>()
+  const [selectedTagsData, setSelectedTagsData] = useState<string>()
+  const [shopDetail, setShopDetail] = useState<ShopDetail>()
 
   const showModal = () => {
     if (userInfo) {
-      setIsModalOpen(true);
+      setIsModalOpen(true)
       if (wareSkuList?.length) {
-        setSelectedTags(wareSkuList[0].id);
-        form.setFieldValue("id",wareSkuList[0].id)
-        setSelectedTagsData("3-7天")
-        form.setFieldValue("date","3-7天")
+        setSelectedTags(wareSkuList[0].id)
+        form.setFieldValue('id', wareSkuList[0].id)
+        setSelectedTagsData('3-7天')
+        form.setFieldValue('date', '3-7天')
       }
-    }else{
+    } else {
       setNeedLogin(true)
     }
-  };
+  }
 
   const handleOk = () => {
-    setLoading(true);
+    setLoading(true)
     form
-    .validateFields()
-    .then(async (values) => {
-      form.resetFields()
-      message.success("租赁成功")
-      setLoading(false);
-      setIsModalOpen(false);
-    //   try{
-    //    const res = await api.listWareSkuUpdate(values)
-    //    if (res.code === "200") {
-    //    setLoading(false);
-    //    setIsModalOpen(false);
-    //    form.resetFields()
-    //    message.success('租赁成功')
-    //    }else{
-    //      setLoading(false);
-    //      message.error(res.message)
-    //    }
-       
-    //  }catch(e:any){
-    //    message.error(e.message)
-    //  }
-    }).catch((err) => {
-     message
-       .warning({
-         content: err.errorFields[0].errors[0],
-       })
-       .then();
-       setLoading(false);
-   });
-     
-  };
+      .validateFields()
+      .then(async (values) => {
+        setLoading(false)
+        setIsModalOpen(false)
+        setIsModalDateOpen(true)
+      })
+      .catch((err) => {
+        message
+          .warning({
+            content: err.errorFields[0].errors[0],
+          })
+          .then()
+        setLoading(false)
+      })
+  }
+
+  const [days, setDays] = useState<number>()
+
+  const handleOkDate = async () => {
+    setLoading(true)
+    try {
+      const result = await Promise.all([
+        form.validateFields(),
+        formDate.validateFields(),
+      ])
+      if (result) {
+        setLoading(false)
+        setIsModalOpen(false)
+        setIsModalDateOpen(false)
+        setIsorderForGoods(true)
+        setShopDetail({ ...result[0], ...result[1] })
+      }
+    } catch (error) {
+      setLoading(false)
+    }
+  }
 
   const handleCancel = () => {
-    setIsModalOpen(false);
-  };
-  
-  const handleChange = (tag: number, checked: boolean) => {
-   if (checked) {
-    const nextWareSkuList = checked
-    ? tag
-    : wareSkuList?.filter((t) => t.id !== tag)[0].id;
-    console.log('You are interested in: ', nextWareSkuList);
-    setSelectedTags(nextWareSkuList);
-    form.setFieldValue("id",tag)
-   }
-  };
+    setIsModalOpen(false)
+    setIsModalDateOpen(false)
+    form.resetFields()
+    formDate.resetFields()
+  }
 
-  const handleChangeDate = (tag: string, checked: boolean) => {
+  const handleChange = (tag: number, checked: boolean) => {
     if (checked) {
+      const nextWareSkuList = checked
+        ? tag
+        : wareSkuList?.filter((t) => t.id !== tag)[0].id
+      console.log('You are interested in: ', nextWareSkuList)
+      setSelectedTags(nextWareSkuList)
+      form.setFieldValue('id', tag)
+    }
+  }
+
+  const handleChangeDate = (
+    tag: string,
+    checked: boolean,
+    disable: boolean
+  ) => {
+    if (checked && !disable) {
       const nextSelectedTags = checked
-      ?  tag
-      : tagsData.filter((t) => t !== tag)[0];
-    console.log('You are interested in: ', nextSelectedTags);
-    setSelectedTagsData(nextSelectedTags);
-    form.setFieldValue("date",tag)
+        ? tag
+        : tagsData.filter((t) => t.label !== tag)[0].label
+      console.log('You are interested in: ', nextSelectedTags)
+      setSelectedTagsData(nextSelectedTags)
+      form.setFieldValue('date', tag)
+    }
+  }
+
+  const onChangeNum = (value: number | string | null) => {
+    console.log('changed', value)
+  }
+  const goBack = () => {
+    setIsModalDateOpen(false)
+    setIsModalOpen(true)
+  }
+  const onchanges = (values: any) => {
+    if (values) {
+      const day = new Date(values[1]).getTime() - new Date(values[0]).getTime()
+      const totalDays = Math.floor(day / (1000 * 3600 * 24))
+      setDays(totalDays)
+    } else {
+      setDays(undefined)
     }
-  };
+  }
+
+  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
+    return current && current < moment().endOf('day')
+  }
 
   return (
     <Layout>
-      <Box>
-        <div className='item'>
-          <ImagePreview imgList={detail?.wareImgs!}/>
-          <div className='item-right'>
-            <div className='title'>{detail?.wareTitle}</div>
-              {
-                detail?.tags?.length ? 
-                (<div className='function'>
-                {detail?.tags?.map(item=>(<div key={item} className='function-item'>{item}</div>))}
-               </div>) : (<div className='function not'></div>)
-              }
-            <div className='menoy'>
-              <span className='menoy-left'>{`¥${detail?.minRent}`}</span>
-              <span className='menoy-right'>/天起</span>
-            </div>
-            <div className='classification'>
-              <div className='top'>
-                <div className='left'>
-                  <span className='label'>选择</span>
-                  <span className='value'>商品分类</span>
+      {!isorderForGoods ? (
+        <Box>
+          <div className="item">
+            <ImagePreview imgList={detail?.images!} />
+            <div className="item-right">
+              <div className="title">{detail?.goodsName}</div>
+              {detail?.otherService?.length ? (
+                <div className="function">
+                  {detail?.otherService?.map((item) => (
+                    <div key={item.id} className="function-item">
+                      {item.serviceName}
+                    </div>
+                  ))}
                 </div>
-                <div className='right'>
-                <Select
-                    className="selectItem"
-                    defaultActiveFirstOption
-                    defaultValue={wareSkuList}
-                    style={{ width: 120 }}
-                    bordered={false}
-                    options={wareSkuList}
-                    fieldNames={{label:"skuTitle",value:"id"}}
-                    placeholder="选择商品"
-                  />
+              ) : (
+                <div className="function not"></div>
+              )}
+              <div className="menoy">
+                <span className="menoy-left">{`¥${detail?.price! | 0}`}</span>
+                <span className="menoy-right">/天起</span>
+              </div>
+              <div className="classification">
+                <div className="top">
+                  <div className="left">
+                    <span className="label">选择</span>
+                    <span className="value">商品分类</span>
+                  </div>
+                  <div className="right">
+                    <Select
+                      className="selectItem"
+                      defaultActiveFirstOption
+                      defaultValue={wareSkuList}
+                      style={{ width: 120 }}
+                      bordered={false}
+                      options={wareSkuList}
+                      fieldNames={{ label: 'specName', value: 'id' }}
+                      placeholder="选择商品"
+                    />
+                  </div>
+                </div>
+                <div className="bottom">
+                  <span className="label">发货</span>
+                  <span className="value">顺丰到付</span>
                 </div>
               </div>
-              <div className='bottom'>
-              <span className='label'>发货</span>
-                  <span className='value'>顺丰到付</span>
+              <div className="botton-btn">
+                {/* <Button className='btn-left' size='small' type="primary">成为渠道商</Button> */}
+                <Button
+                  className="btn-right"
+                  size="small"
+                  type="primary"
+                  onClick={showModal}
+                >
+                  立即租赁
+                </Button>
               </div>
             </div>
-            <div className='botton-btn'>
-                  {/* <Button className='btn-left' size='small' type="primary">成为渠道商</Button> */}
-                  <Button className='btn-right' size='small' type="primary" onClick={showModal}>立即租赁</Button>
-            </div>
           </div>
-        </div>
-        <div className='flow-path'>
-              <Image className='image' fill src={flowPat.src} alt="" />
-        </div>
-        <div className='prompt'>
-          更多租金规则请前往【云享飞】微信小程序查
-        </div>
-        <Divider className='divider'>商品详情</Divider>
-        {
-          detail?.wareDetailContent ? <div style={{ textAlign: "center" }} dangerouslySetInnerHTML={{ __html: detail?.wareDetailContent}}>
-          </div> : <div style={{ textAlign: "center" }} ></div>
-        }
-      {/* 立即租赁 */}
-      <Modal
-       wrapClassName='application'
-       open={isModalOpen}
-       onOk={handleOk}
-       onCancel={handleCancel}
-       getContainer={false}
-       footer={[
-        <Button
-          style={{ width: "100%" ,height: 44 }}
-          key="submit"
-          type="primary"
-          loading={loading}
-          onClick={handleOk}
-        >
-          立即租赁
-        </Button>,
-      ]}
-      >
-        <div className='title'>
-          <div className="left"></div>
-          <div className="right">
-            <div className="top">
-            <span className='tag'>¥</span>
-            <span className='money'>{detail?.minRent}</span>
-            <span className='unit'>/天</span>
-            </div>
-            <div className="bottom">渠道免押金</div>
+          <div className="flow-path">
+            <Image className="image" fill src={flowPat.src} alt="" />
           </div>
-        </div>
-      <Form
-        form={form}
-        layout="vertical"
-        name="application"
-        initialValues={{ modifier: 'public' }}
-      >
-      <Form.Item style={{flex:1,marginRight:16}} name="id" label="选择商品">
-       <Space size={[0, 8]} wrap>
-       {wareSkuList?.map((tag) => (
-         <CheckableTag
-           style={{height:28,lineHeight:"28px"}}
-           key={tag.id}
-           checked={wareSkuList?.some(item=>tag.id === selectedTags)}
-           onChange={(checked) => handleChange(tag.id, checked)}
-         >
-           {tag.skuTitle}
-         </CheckableTag>
-       ))}
-      </Space>
-      </Form.Item>
-      <Form.Item style={{flex:1,marginRight:16}} name="date" label="租期天数（拿到和归还当天不算入租期）">
-      <Space size={[0, 8]} wrap>
-        {tagsData.map((tag) => (
-          <CheckableTag
-            key={tag}
-            checked={tag === selectedTagsData}
-            onChange={(checked) => handleChangeDate(tag, checked)}
+          <div className="prompt">更多租金规则请前往【云享飞】微信小程序查</div>
+          <Divider className="divider">商品详情</Divider>
+          {detail?.goodsDetail.content ? (
+            <div
+              style={{ textAlign: 'center' }}
+              dangerouslySetInnerHTML={{ __html: detail?.goodsDetail.content }}
+            ></div>
+          ) : (
+            <div style={{ textAlign: 'center' }}></div>
+          )}
+          {/* 立即租赁 */}
+          <Modal
+            wrapClassName="application"
+            open={isModalOpen}
+            onOk={handleOk}
+            onCancel={handleCancel}
+            getContainer={false}
+            footer={[
+              <Button
+                style={{ width: '100%', height: 44 }}
+                key="submit"
+                type="primary"
+                loading={loading}
+                onClick={handleOk}
+              >
+                立即租赁
+              </Button>,
+            ]}
+          >
+            <div className="title">
+              <div className="left"></div>
+              <div className="right">
+                <div className="top">
+                  <span className="tag">¥</span>
+                  <span className="money">{detail?.price}</span>
+                  <span className="unit">/天</span>
+                </div>
+                <div className="bottom">渠道免押金</div>
+              </div>
+            </div>
+            <Form
+              form={form}
+              layout="vertical"
+              name="application"
+              initialValues={{ modifier: 'public' }}
+              className="form-data"
+            >
+              <Form.Item
+                style={{ flex: 1, marginRight: 16 }}
+                name="id"
+                label="选择商品"
+              >
+                <Space size={[0, 8]} wrap>
+                  {wareSkuList?.map((tag) => (
+                    <CheckableTag
+                      style={{ height: 28, lineHeight: '28px' }}
+                      key={tag.id}
+                      checked={wareSkuList?.some(
+                        (item) => tag.id === selectedTags
+                      )}
+                      onChange={(checked) => handleChange(tag.id, checked)}
+                    >
+                      {tag.specName}
+                    </CheckableTag>
+                  ))}
+                </Space>
+              </Form.Item>
+              <Form.Item
+                style={{ flex: 1, marginRight: 16 }}
+                name="date"
+                label="租期天数（拿到和归还当天不算入租期）"
+              >
+                <Space size={[0, 8]} wrap>
+                  {tagsData.map((tag) => (
+                    <CheckableTag
+                      key={tag.label}
+                      checked={tag.label === selectedTagsData}
+                      onChange={(checked) =>
+                        handleChangeDate(tag.label, checked, tag.disable)
+                      }
+                      className={`tagsData ${
+                        tag.disable ? 'disable tagsDisable' : ''
+                      }`}
+                    >
+                      {tag.label}
+                    </CheckableTag>
+                  ))}
+                </Space>
+              </Form.Item>
+              <div className="num-box">
+                <div className="num-left">
+                  <div className="label">租赁数量</div>
+                  <div className="inventory">库存9件</div>
+                </div>
+                <div className="num-right">
+                  <Form.Item style={{ flex: 1, marginRight: 16 }} name="num">
+                    <InputNumber
+                      min={1}
+                      max={10}
+                      defaultValue={1}
+                      onChange={onChangeNum}
+                    />
+                  </Form.Item>
+                </div>
+              </div>
+            </Form>
+          </Modal>
+
+          <Modal
+            wrapClassName="applicationDate"
+            open={isModalDateOpen}
+            onOk={handleOkDate}
+            onCancel={handleCancel}
+            getContainer={false}
+            width={420}
+            footer={[
+              <Button
+                style={{ width: '100%', height: 44 }}
+                key="submit"
+                type="primary"
+                loading={loading}
+                onClick={handleOkDate}
+              >
+                确认租期{days ? `${days}天` : null}
+              </Button>,
+            ]}
           >
-            {tag}
-          </CheckableTag>
-        ))}
-      </Space>
-      </Form.Item>
-      </Form>
-      </Modal>
-      </Box>
+            <div className="title">
+              <div className="left" onClick={goBack}>
+                {'<'}
+              </div>
+              <div className="right">选择租期</div>
+            </div>
+            <Form
+              form={formDate}
+              layout="vertical"
+              name="applicationDate"
+              initialValues={{ modifier: 'public' }}
+              className="form-data"
+            >
+              <Form.Item
+                style={{ flex: 1, marginRight: 16 }}
+                name="dateDetail"
+                rules={[{ required: true, message: '请选择日期' }]}
+              >
+                <RangePicker
+                  style={{ width: 376, marginTop: 10 }}
+                  disabledDate={disabledDate}
+                  onChange={onchanges}
+                />
+              </Form.Item>
+            </Form>
+            <div className="bottom-item">
+              <div className="label">租金合计</div>
+              <div className="price">
+                <div className="left">¥700</div>
+                <div className="right">(日均175)</div>
+              </div>
+            </div>
+          </Modal>
+        </Box>
+      ) : (
+        <OrderForGoods
+          setIsorderForGoods={setIsorderForGoods}
+          shopDetail={shopDetail}
+          days={days}
+          detailData={detail}
+        />
+      )}
     </Layout>
   )
 }

pages/equipmentLeasing/detail/api/index.tsx

-import request, { Response } from '~/api/request';
+import request, { Response } from '~/api/request'
 
 export interface GetWebDeviceDetailParams {
-  id:number
+  goodsId: number
 }
 
 export interface WareImgsType {
-  id: number,
-  wareInfoId: number | null,
-  imgUrl: string,
+  id: number
+  imgUrl: string
   imgType: number
 }
 
 export interface GetWebDeviceDetailResult {
-      id: number,
-      wareNo: string,
-      wareTitle: string,
-      wareTypeId: number,
-      wareStatus: number,
-      payStatus: number,
-      minDeposit: number,
-      maxDeposit: number,
-      minRent: number,
-      maxRent: number,
-      totalStock: number,
-      totalSale: number,
-      skuNum: number,
-      tags: [
-        string,
-        string
-      ],
-      wareImgs: Array<WareImgsType>,
-      warePropDTO: number | null,
-      wareDetailContent: string | TrustedHTML
+  id: number
+  images: {
+    id: number
+    imgUrl: string
+    imgType: number
+  }[]
+  goodsVideo: string
+  goodsVideoId: number
+  goodsName: string
+  goodsDetail: {
+    id: number
+    goodsDesc: string
+    content: string | null
+    remark: string | null
+  }
+  directoryId: number
+  categoryByOne: number
+  categoryByTwo: null
+  tag: null
+  shelfStatus: number
+  goodsSpec: {
+    productSpecList: GetWebDeviceWareSkuById[]
+  }[]
+  otherService?: {
+    id: number
+    saleServiceId: string
+    serviceName: string
+  }[]
+  price: number | null
+  goodsNo: string
 }
 
-
 export interface PriceList {
-  id: number,
-  wareInfoId: number,
-  skuInfoId: number,
-  rentPrice: number,
-  minDay: number,
-  maxDay: number,
+  id: number
+  wareInfoId: number
+  skuInfoId: number
+  rentPrice: number
+  minDay: number
+  maxDay: number
   createTime: null
-} 
+}
 export interface GetWebDeviceWareSkuById {
-  id: number,
-  wareInfoId: number,
-  skuTitle: string,
-  rentPrice: number | null,
-  rentDeposit: number,
-  stockNum: number,
-  saleNum: number,
-  createTime: string,
-  updateTime: null,
-  skuPriceDTOList: Array<PriceList>,
+  id: number
+  productSpec: number
+  productSkuId: number
+  specName: string
+  specImage: string
+  partNo: string
+  versionDesc: string
+  createTime: string | null
+  productSpecCPQVO: string | null
 }
 
 export interface WebDeviceUpdateParams {
-  id?:number,
-  inventoryId?:number,
-  inventoryUsage?:string,
-  startDay?:string
-  endDay?:string,
+  id?: number
+  inventoryId?: number
+  inventoryUsage?: string
+  startDay?: string
+  endDay?: string
 }
 
 export default {
   //web-设备租赁-详情
-  listDetailDeviceInfo: (params: GetWebDeviceDetailParams): Promise<Response<GetWebDeviceDetailResult>> => {
-    return request('/pms/webDevice/detail', 'get', params)
-  },
-  //web-设备租赁-商品
-  listWareSkuById: (params: GetWebDeviceDetailParams): Promise<Response<GetWebDeviceWareSkuById[]>> => {
-    return request('/pms/appDevice/listWareSkuById', 'get', params)
+  listDetailDeviceInfo: (
+    params: GetWebDeviceDetailParams
+  ): Promise<Response<GetWebDeviceDetailResult>> => {
+    return request('/pms/product/mall/getLeaseGoodsDetail', 'get', params)
   },
   //web-设备租赁-立即租赁
-  listWareSkuUpdate: (params: WebDeviceUpdateParams): Promise<Response<number>> => {
+  listWareSkuUpdate: (
+    params: WebDeviceUpdateParams
+  ): Promise<Response<number>> => {
     return request('/pms/appDevice/update', 'post', params)
-  }
-}
\ No newline at end of file
+  },
+}

pages/equipmentLeasing/detail/components/orderForGoods/api/index.tsx

+import request, { Response } from '~/api/request'
+
+export interface GetWebDeviceDetailParams {
+  actualPay: number
+  deposit: number
+  endDate: string
+  orderReceipt: {
+    detailAddress: string
+    receiptMethod: number
+    region: string
+    takeName: string
+    takePhone: number
+  }
+  rentPrice: number
+  returnDate: string
+  shouldPay: number
+  specsId: number
+  startDate: string
+  wareDescription: string
+  wareImg: string
+  wareInfoId: number
+  wareNo: string
+  wareNum: number
+  wareTitle: string
+  remark?: string
+}
+
+export interface WareImgsType {
+  id: number
+  imgUrl: string
+  imgType: number
+}
+
+export interface UserAddress {
+  id: number
+  takeName: string
+  takePhone: string
+  takeRegion: string
+  takeAddress: string
+  type: number
+}
+
+export interface GetWebDeviceWareSkuById {
+  balance: number
+  nickName: string
+}
+
+export default {
+  //web-地址管理-查询用户地址列表-条件查询
+  listUserAddress: (params: {}): Promise<Response<UserAddress[]>> => {
+    return request('/oms/user-address/selectList', 'POST', params)
+  },
+  //web-设备租赁-下单
+  FeignAddLease: (
+    params: GetWebDeviceDetailParams
+  ): Promise<Response<GetWebDeviceWareSkuById[]>> => {
+    return request('/pms/appDevice/listWareSkuById', 'post', params)
+  },
+}

pages/equipmentLeasing/detail/components/orderForGoods/index.tsx

+import React, { useEffect, useState } from 'react'
+import { OrderForGoodsBox } from './styled'
+import type { FormInstance, RadioChangeEvent } from 'antd'
+import { Button, Radio, Space, Input, message } from 'antd'
+import api, { UserAddress } from './api'
+import moment from 'moment'
+import { ShopDetail } from '../../[id].page'
+import { GetWebDeviceDetailResult } from '../../api'
+const { TextArea } = Input
+
+interface PropsBox {
+  setIsorderForGoods: (boolean: boolean) => void
+  detailData?: GetWebDeviceDetailResult | null
+  days?: number
+  shopDetail?: ShopDetail
+}
+
+export default function OrderForGoods(props: PropsBox) {
+  const { setIsorderForGoods, shopDetail, days, detailData } = props
+  const [value, setValue] = useState(1)
+  const [areaValue, setAreaValue] = useState<string>()
+  const [list, setList] = useState<Array<UserAddress> | null>()
+  const [detail, setDetail] = useState<ShopDetail>()
+  const onChange = (e: RadioChangeEvent) => {
+    console.log('radio checked', e.target.value)
+    setValue(e.target.value)
+  }
+  const onChangeValue = (index: number) => {
+    setValue(index)
+  }
+  const detailSumbit = () => {
+    message.success('提交成功')
+    console.log(shopDetail)
+    console.log(list![value])
+    console.log(areaValue)
+    console.log(detailData)
+
+    console.log(list![value].takeAddress)
+    console.log(list![value].takeRegion)
+    console.log(list![value].takeName)
+    console.log(Number(list![value].takePhone))
+
+    if (detailData && shopDetail && list) {
+      const pushList = {
+        actualPay: shopDetail.num * detailData.price!,
+        deposit: 0,
+        endDate: moment(new Date(shopDetail.dateDetail[1])).format(
+          'YYYY-MM-DD'
+        ),
+        orderReceipt: {
+          detailAddress: list[value].takeAddress,
+          receiptMethod: 0,
+          region: list[value].takeRegion,
+          takeName: list[value].takeName,
+          takePhone: Number(list[value].takePhone),
+        },
+        rentPrice: shopDetail.num * detailData.price!,
+        returnDate: moment(new Date(shopDetail.dateDetail[1])).format(
+          'YYYY-MM-DD'
+        ),
+        shouldPay: shopDetail.num * detailData.price!,
+        specsId: shopDetail.id,
+        startDate: moment(new Date(shopDetail.dateDetail[0]!)).format(
+          'YYYY-MM-DD'
+        ),
+        wareDescription: detailData.goodsName,
+        wareImg: detailData.images[0].imgUrl,
+        wareInfoId: shopDetail.id,
+        wareNo: detailData.goodsNo,
+        wareNum: shopDetail.num,
+        wareTitle: detailData.goodsName,
+        remark: areaValue,
+      }
+
+      api.FeignAddLease(pushList).then((res) => {
+        console.log(res)
+      })
+    }
+    // setIsorderForGoods(false)
+  }
+
+  useEffect(() => {
+    console.log(days)
+
+    api
+      .listUserAddress({})
+      .then((res) => {
+        console.log(res)
+        setList(res.result)
+        res.result?.map((item, index) => {
+          if (item.type === 0) {
+            setValue(index)
+          }
+        })
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+    if (shopDetail) {
+      setDetail(shopDetail)
+    }
+  }, [])
+  return (
+    <OrderForGoodsBox>
+      <div className="address">
+        <div className="top">
+          <div className="left">确认收货地址</div>
+          <div className="right">
+            <Button type="link" style={{ color: '#007aff' }}>
+              管理收货地址
+            </Button>
+          </div>
+        </div>
+        <div className="bottom">
+          {list?.map((item, index) => (
+            <div
+              key={item.id}
+              className={`item ${value === index ? 'active' : ''}`}
+              onClick={() => onChangeValue(index)}
+            >
+              <div className="left">
+                <div className="active">
+                  <div className="icon"></div>
+                  <div className="label">寄送至</div>
+                </div>
+                <Radio.Group onChange={onChange} value={value}>
+                  <Space direction="vertical">
+                    <Radio value={index}>{item.takeAddress}</Radio>
+                  </Space>
+                </Radio.Group>
+              </div>
+              {value === index ? (
+                <div className="right">
+                  <Button type="link" style={{ color: '#007aff' }}>
+                    修改地址
+                  </Button>
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="info">
+        <div className="title">确认订单信息</div>
+        <div className="table">
+          <div className="table-title">
+            <div className="table-item" style={{ width: 290 }}>
+              宝贝
+            </div>
+            <div className="table-item" style={{ width: 130 }}>
+              单价
+            </div>
+            <div className="table-item" style={{ width: 130 }}>
+              数量
+            </div>
+            <div className="table-item" style={{ width: 300 }}>
+              租期
+            </div>
+            <div className="table-item" style={{ width: 135 }}>
+              合计
+            </div>
+          </div>
+          <div className="table-body">
+            <div className="body-item article" style={{ width: 290 }}>
+              <div className="image"></div>
+              <div className="right">
+                <div className="top">
+                  智多星航电版智多星航电版智多星航电版智多
+                </div>
+                <div className="bottom">
+                  商品简介商品简介商品简介商品简介商品简介
+                </div>
+              </div>
+            </div>
+            <div className="body-item" style={{ width: 130 }}>
+              800.00/天
+            </div>
+            <div className="body-item" style={{ width: 130 }}>
+              1
+            </div>
+            <div className="body-item lease-term" style={{ width: 300 }}>
+              {moment(new Date(shopDetail?.dateDetail[0]!)).format(
+                'YYYY/MM/DD'
+              )}
+              <div className="num">{days}天</div>
+              {moment(new Date(shopDetail?.dateDetail[1]!)).format(
+                'YYYY/MM/DD'
+              )}
+            </div>
+            <div className="body-item total-price" style={{ width: 135 }}>
+              800.00
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="notes">
+        <div className="left">
+          <div className="label">备注：</div>
+          <TextArea
+            value={areaValue}
+            onChange={(e) => setAreaValue(e.target.value)}
+            placeholder="请输入备注"
+            autoSize={{ minRows: 3, maxRows: 5 }}
+            style={{ width: 385, height: 72 }}
+          />
+        </div>
+        <div className="right">
+          <div className="top">
+            <div className="font">
+              <div className="label">运费：</div>
+              <div className="value">邮寄到付,由客户自己承担</div>
+            </div>
+            <div className="price">200.00</div>
+          </div>
+          <div className="bottom">
+            <div className="font">
+              <div className="label">押金：</div>
+              <div className="value">渠道商可免押金</div>
+            </div>
+            <div className="price">1000.00</div>
+          </div>
+        </div>
+      </div>
+      <div className="detail-box">
+        <div className="right-box">
+          <div className="detail">
+            <div className="top">
+              <div className="label">实付款</div>
+              <div className="price">¥20000.00</div>
+            </div>
+            <div className="bottom">
+              <div className="value">寄送至</div>
+              <div className="value-content">
+                广东省深圳市南山区国际创谷6栋国际创谷6
+              </div>
+            </div>
+          </div>
+          <div className="detail-sumbit">
+            <Button className="btn" onClick={detailSumbit}>
+              提交订单
+            </Button>
+          </div>
+        </div>
+      </div>
+    </OrderForGoodsBox>
+  )
+}

pages/equipmentLeasing/detail/components/orderForGoods/styled.tsx

+import styled from 'styled-components'
+
+export const OrderForGoodsBox = styled.div`
+  box-sizing: border-box;
+  width: 1000px;
+  .address {
+    .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #e6e6e6;
+      height: 30px;
+      line-height: 30px;
+      margin-top: 30px;
+      .left {
+        font-size: 14px;
+        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+        font-weight: bold;
+        color: #333333;
+        line-height: 18px;
+      }
+      .right {
+        .btn {
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: #007aff;
+          line-height: 19px;
+        }
+      }
+    }
+    .bottom {
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 1000px;
+        height: 48px;
+        border: 1px solid transparent;
+        margin-top: 8px;
+        &.active {
+          background: #fff1e8;
+          border-radius: 6px;
+          border: 1px solid #ff552d;
+        }
+        .left {
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          .active {
+            margin-right: 18px;
+            display: flex;
+            .icon {
+              width: 15px;
+              height: 22px;
+              background: #ff552d;
+              margin-left: 17px;
+            }
+            .label {
+              font-size: 14px;
+              font-family: MicrosoftYaHei;
+              color: #000000;
+              line-height: 19px;
+              margin-left: 18px;
+            }
+          }
+        }
+        .right {
+          margin-right: 22px;
+        }
+      }
+    }
+  }
+  .info {
+    margin-top: 30px;
+    .title {
+      font-size: 14px;
+      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+      font-weight: bold;
+      color: #333333;
+      line-height: 18px;
+    }
+    .table {
+      .table-title {
+        display: flex;
+        align-items: center;
+        width: 1000px;
+        border-bottom: 1px solid #e6e6e6;
+        padding: 10px 0;
+        margin-top: 20px;
+        .table-item {
+          text-align: center;
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: #000000;
+          line-height: 19px;
+        }
+      }
+      .table-body {
+        display: flex;
+        align-items: center;
+        height: 100px;
+        margin-top: 10px;
+        .body-item {
+          text-align: center;
+          &.article {
+            display: flex;
+            justify-content: space-between;
+            .image {
+              width: 80px;
+              height: 80px;
+              background-color: pink;
+              margin-right: 10px;
+            }
+            .right {
+              .top {
+                width: 171px;
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #141414;
+                line-height: 20px;
+              }
+              .bottom {
+                width: 171px;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #929295;
+                line-height: 17px;
+              }
+            }
+          }
+          &.lease-term {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .num {
+              width: 62px;
+              height: 24px;
+              background: #ff552d;
+              border-radius: 2px;
+              position: relative;
+              margin: 0 15px;
+              line-height: 24px;
+              font-size: 14px;
+              font-family: MicrosoftYaHei;
+              color: #ffffff;
+              &::before {
+                content: '';
+                width: 10px;
+                height: 1px;
+                background-color: #ff552d;
+                position: absolute;
+                left: -10px;
+                top: 50%;
+                transform: translateY(-50%);
+              }
+              &::after {
+                content: '';
+                width: 10px;
+                height: 1px;
+                background-color: #ff552d;
+                position: absolute;
+                right: -10px;
+                top: 50%;
+                transform: translateY(-50%);
+              }
+            }
+          }
+          &.total-price {
+            font-size: 14px;
+            font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+            font-weight: bold;
+            color: #ff3100;
+            line-height: 18px;
+          }
+        }
+      }
+    }
+  }
+  .notes {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 1000px;
+    height: 110px;
+    background: #e1efff;
+    border: 1px solid #d0eaf5;
+    padding: 0 22px 0 16px;
+    .left {
+      display: flex;
+      align-items: top;
+      .label {
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: #000000;
+        margin-top: 4px;
+      }
+    }
+    .right {
+      width: 430px;
+      .top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .font {
+        display: flex;
+      }
+      .bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 18px;
+      }
+      .label {
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: #000000;
+        line-height: 19px;
+        margin-right: 12px;
+      }
+      .value {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #2b2b2b;
+        line-height: 20px;
+      }
+      .price {
+        font-size: 14px;
+        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+        font-weight: bold;
+        color: #ff3100;
+        line-height: 18px;
+      }
+    }
+  }
+  .detail-box {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 26px;
+    .right-box {
+      .detail {
+        width: 477px;
+        height: 110px;
+        border: 1px solid #ff5001;
+        padding: 16px 19px 19px 19px;
+        .top {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          .label {
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: #474747;
+            line-height: 19px;
+            margin-right: 10px;
+          }
+          .price {
+            font-size: 26px;
+            font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+            font-weight: bold;
+            color: #ff552d;
+            line-height: 33px;
+          }
+        }
+        .bottom {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          margin-top: 15px;
+          .value {
+            font-size: 12px;
+            font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+            font-weight: bold;
+            color: #000000;
+            line-height: 15px;
+            margin-right: 10px;
+          }
+          .value-content {
+            font-size: 12px;
+            font-family: MicrosoftYaHei;
+            color: #333333;
+            line-height: 16px;
+          }
+        }
+      }
+      .detail-sumbit {
+        display: flex;
+        justify-content: flex-end;
+        .btn {
+          width: 182px;
+          height: 39px;
+          background: #ff552d;
+          border: 1px solid #ff5001;
+          border-radius: 0;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+`

pages/equipmentLeasing/detail/components/picture-preview/index.tsx

-import React , {useState,useRef} from 'react'
-import {Box} from './styled';
-import { LeftOutlined , RightOutlined } from '@ant-design/icons';
-import {WareImgsType} from '../../api';
+import React, { useState, useRef } from 'react'
+import { Box } from './styled'
+import { LeftOutlined, RightOutlined } from '@ant-design/icons'
+import { WareImgsType } from '../../api'
 
-interface ImagesType{
+interface ImagesType {
   imgList: Array<WareImgsType>
 }
-export default function PicturePreview(props:ImagesType) {
-    const {imgList} = props
-    console.log(imgList);
-    
-    const mask =useRef<HTMLDivElement>(null!)
-    const moveBox =useRef<HTMLDivElement>(null!)
-    const big =useRef<HTMLImageElement>(null!)
-    const [moveLeft,setMoveLeft] = useState(0) // 根据这个值设置图片列表向左偏移
-    // const imgList = [
-    //     'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-    //     'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
-    //     'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
-    //     'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-    //     'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-    //     'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-    //     'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
-    //   ]
+export default function PicturePreview(props: ImagesType) {
+  const { imgList } = props
 
-      const [activeImgIndex,setActiveImgIndex] = useState(0)
+  const mask = useRef<HTMLDivElement>(null!)
+  const moveBox = useRef<HTMLDivElement>(null!)
+  const big = useRef<HTMLImageElement>(null!)
+  const [moveLeft, setMoveLeft] = useState(0) // 根据这个值设置图片列表向左偏移
+  // const imgList = [
+  //     'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+  //     'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+  //     'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+  //     'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+  //     'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+  //     'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+  //     'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+  //   ]
 
-    // 改变预览图
-   const handleChangeImg = (index:number) => {
-        if (index <= moveLeft + 3) setActiveImgIndex(index)
-      }
-      // 移动缩略图
-    const handleSlide = (direction:string) => {
-        //左侧按钮
-        if (direction == 'left') {
-          moveLeft == 0 ? setMoveLeft(0) : setMoveLeft((props)=>props - 1)
-        } else { // 右侧按钮
-          if (imgList.length > 4) {
-            moveLeft >= imgList.length - 4 ? setMoveLeft(imgList.length - 4) : setMoveLeft((props)=>props + 1)
-          }
-        }
-      }
-      // 图片放大镜
-     const handleMouseMove = (event:React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-        let left = event.nativeEvent.offsetX - mask.current.offsetWidth / 2;
-        let top = event.nativeEvent.offsetY - mask.current.offsetHeight / 2;
-        // 最右侧和最下侧的临界值
-        const maxLeft = moveBox.current.offsetWidth - mask.current.offsetWidth
-        const maxTop = moveBox.current.offsetHeight - mask.current.offsetHeight
-        //约束范围
-        if (left <= 0) left = 0;
-        if (left >= maxLeft) left = maxLeft
-        if (top <= 0) top = 0;
-        if (top >= maxTop) top = maxTop
-        // 设置放大范围遮罩层位置
-        mask.current.style.left = left + "px";
-        mask.current.style.top = top + "px";
-        // 设置大图图片位置，可以用background代替这个方案，有兴趣可以尝试
-        big.current.style.left = -3 * left + "px"; // 3这个值是 大图除以小图算出来的比例 这里大图是900px 小图是300px
-        big.current.style.top = -3 * top + "px";
+  const [activeImgIndex, setActiveImgIndex] = useState(0)
+
+  // 改变预览图
+  const handleChangeImg = (index: number) => {
+    if (index <= moveLeft + 3) setActiveImgIndex(index)
+  }
+  // 移动缩略图
+  const handleSlide = (direction: string) => {
+    //左侧按钮
+    if (direction == 'left') {
+      moveLeft == 0 ? setMoveLeft(0) : setMoveLeft((props) => props - 1)
+    } else {
+      // 右侧按钮
+      if (imgList.length > 4) {
+        moveLeft >= imgList.length - 4
+          ? setMoveLeft(imgList.length - 4)
+          : setMoveLeft((props) => props + 1)
       }
+    }
+  }
+  // 图片放大镜
+  const handleMouseMove = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    let left = event.nativeEvent.offsetX - mask.current.offsetWidth / 2
+    let top = event.nativeEvent.offsetY - mask.current.offsetHeight / 2
+    // 最右侧和最下侧的临界值
+    const maxLeft = moveBox.current.offsetWidth - mask.current.offsetWidth
+    const maxTop = moveBox.current.offsetHeight - mask.current.offsetHeight
+    //约束范围
+    if (left <= 0) left = 0
+    if (left >= maxLeft) left = maxLeft
+    if (top <= 0) top = 0
+    if (top >= maxTop) top = maxTop
+    // 设置放大范围遮罩层位置
+    mask.current.style.left = left + 'px'
+    mask.current.style.top = top + 'px'
+    // 设置大图图片位置，可以用background代替这个方案，有兴趣可以尝试
+    big.current.style.left = -3 * left + 'px' // 3这个值是 大图除以小图算出来的比例 这里大图是900px 小图是300px
+    big.current.style.top = -3 * top + 'px'
+  }
   return (
     <Box>
-        <div className="img_wrapper">
+      <div className="img_wrapper">
         <div className="img_content">
-        {/* <!--    蒙层，绑定鼠标事件   --> */}
-        <div className="movebox"
-            onMouseMove={(e)=>handleMouseMove(e)}
-            ref={moveBox}>
-        </div>
-        {/* <!--    主图   --> */}
-        <img src={imgList && imgList[activeImgIndex].imgUrl}
+          {/* <!--    蒙层，绑定鼠标事件   --> */}
+          <div
+            className="movebox"
+            onMouseMove={(e) => handleMouseMove(e)}
+            ref={moveBox}
+          ></div>
+          {/* <!--    主图   --> */}
+          <img
+            src={imgList && imgList[activeImgIndex].imgUrl}
             className="img_small"
-            alt=""/>
-        {/* <!--  放大区域 --> */}
-        <div className="mask"
-            ref={mask}></div>
-        {/* <!-- 大图预览图 --> */}
-        <div className="img_big">
-            <img src={imgList && imgList[activeImgIndex].imgUrl}
-                ref={big}
-                alt=""/>
-        </div>
+            alt=""
+          />
+          {/* <!--  放大区域 --> */}
+          <div className="mask" ref={mask}></div>
+          {/* <!-- 大图预览图 --> */}
+          <div className="img_big">
+            <img
+              src={imgList && imgList[activeImgIndex].imgUrl}
+              ref={big}
+              alt=""
+            />
+          </div>
         </div>
         {/* <!--    缩略图列表     --> */}
         <div className="img_list_wrapper">
-            {imgList?.length>4 && <LeftOutlined className="el-icon-arrow-left" onClick={()=>handleSlide('left')}/>}
-        <div className="img_list_content">
-            <div className="img_list"
-                style={{marginLeft: - moveLeft * 25  + '%'}}>
-                  {
-                    imgList?.map((item,index)=>(
-                        <img
-                        onMouseOver={()=>handleChangeImg(index)}
-                        key={index}
-                        className={`${activeImgIndex === index ? 'activeImg' : ''}`}
-                        src={item.imgUrl}
-                        alt="" />
-                    ))
-                  } 
-             </div>
-             </div>
-                 { imgList?.length>4 && <RightOutlined className="el-icon-arrow-right" onClick={()=>handleSlide('right')}/>}
-             </div>
-         </div>
+          {imgList?.length > 4 && (
+            <LeftOutlined
+              className="el-icon-arrow-left"
+              onClick={() => handleSlide('left')}
+            />
+          )}
+          <div className="img_list_content">
+            <div
+              className="img_list"
+              style={{ marginLeft: -moveLeft * 25 + '%' }}
+            >
+              {imgList?.map((item, index) => (
+                <img
+                  onMouseOver={() => handleChangeImg(index)}
+                  key={index}
+                  className={`${activeImgIndex === index ? 'activeImg' : ''}`}
+                  src={item.imgUrl}
+                  alt=""
+                />
+              ))}
+            </div>
+          </div>
+          {imgList?.length > 4 && (
+            <RightOutlined
+              className="el-icon-arrow-right"
+              onClick={() => handleSlide('right')}
+            />
+          )}
+        </div>
+      </div>
     </Box>
   )
 }

pages/equipmentLeasing/detail/styled.tsx

-import styled from "styled-components"
+import styled from 'styled-components'
 
 export const Box = styled.div`
-    box-sizing: border-box;
-    width: 1200px;
-    background-color: #fff;
-    padding: 42px 0 24px 24px;
-    .item{
+  box-sizing: border-box;
+  width: 1200px;
+  background-color: #fff;
+  padding: 42px 0 24px 24px;
+  .item {
+    display: flex;
+    &-right {
+      height: 300px;
+      margin-left: 30px;
+      .title {
+        height: 26px;
+        font-size: 28px;
+        margin-top: 5px;
+        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+        font-weight: bold;
+        color: #090909;
+        line-height: 26px;
+      }
+      .function {
         display: flex;
-        &-right{
-            height: 300px;
-            margin-left: 30px;
-            .title{
-                height: 26px;
-                font-size: 28px;
-                margin-top: 5px;
-                font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-                font-weight: bold;
-                color: #090909;
-                line-height: 26px;
-            }
-            .function{
-                display: flex;
-                align-items: center;
-                justify-content: space-evenly;
-                width: 375px;
-                height: 45px;
-                margin-top: 17px;
-                background: linear-gradient(90deg, #D7F7F5 0%, #EEFDE9 100%);
-                &.not{
-                    background: none;
-                }
-                &-item{
-                }
-            }
-            .menoy{
-                margin-top: 17px;
-                &-left{
-                    width: 79px;
-                    height: 41px;
-                    font-size: 32px;
-                    font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-                    font-weight: bold;
-                    color: #EF2E00;
-                    line-height: 41px;
-                }
-                &-right{
-                    width: 40px;
-                    height: 20px;
-                    font-size: 16px;
-                    font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-                    font-weight: bold;
-                    color: #EF2E00;
-                    line-height: 20px;
-                }
-            }
-            .classification{
-                margin-top: 28px;
-                width: 375px;
-                height: 50px;
-                .label{
-                    height: 21px;
-                    font-size: 16px;
-                    font-family: MicrosoftYaHei;
-                    color: #9A9A9A;
-                    line-height: 21px;
-                    margin-right: 36px;
-                }
-                .value{
-                    height: 21px;
-                    font-size: 16px;
-                    font-family: MicrosoftYaHei;
-                    color: #151515;
-                    line-height: 21px;
-                }
-                .top{
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    .left{
-                    }
-                    .right{
-                        .selectItem{
-                            .ant-select-selection-placeholder {
-                            color: #000;
-                            }
-                        }
-                    }
-                }
-                .bottom{
-                    margin-top: 5px;
-                }
-            }
-            .botton-btn{
-                margin-top: 30px;
-                .btn-left{
-                        width: 207px;
-                        height: 40px;
-                        background-color: #FFE4D1;
-                        border: 1px solid #EBBAAF;
-                        font-family: MicrosoftYaHei;
-                        color: #FF552D;
-                        letter-spacing: 1px;
-                        margin-right: 12px;
-                    }
-                .btn-right{
-                    width: 207px;
-                    height: 40px;
-                    background: #FF552D;
-                    font-family: MicrosoftYaHei;
-                    color: #FFFFFF;
-                    letter-spacing: 1px;
-                }
+        align-items: center;
+        justify-content: space-evenly;
+        width: 375px;
+        height: 45px;
+        margin-top: 17px;
+        background: linear-gradient(90deg, #d7f7f5 0%, #eefde9 100%);
+        &.not {
+          background: none;
+        }
+        &-item {
+        }
+      }
+      .menoy {
+        margin-top: 17px;
+        &-left {
+          width: 79px;
+          height: 41px;
+          font-size: 32px;
+          font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+          font-weight: bold;
+          color: #ef2e00;
+          line-height: 41px;
+        }
+        &-right {
+          width: 40px;
+          height: 20px;
+          font-size: 16px;
+          font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+          font-weight: bold;
+          color: #ef2e00;
+          line-height: 20px;
+        }
+      }
+      .classification {
+        margin-top: 28px;
+        width: 375px;
+        height: 50px;
+        .label {
+          height: 21px;
+          font-size: 16px;
+          font-family: MicrosoftYaHei;
+          color: #9a9a9a;
+          line-height: 21px;
+          margin-right: 36px;
+        }
+        .value {
+          height: 21px;
+          font-size: 16px;
+          font-family: MicrosoftYaHei;
+          color: #151515;
+          line-height: 21px;
+        }
+        .top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .left {
+          }
+          .right {
+            .selectItem {
+              .ant-select-selection-placeholder {
+                color: #000;
+              }
             }
+          }
+        }
+        .bottom {
+          margin-top: 5px;
+        }
+      }
+      .botton-btn {
+        margin-top: 30px;
+        .btn-left {
+          width: 207px;
+          height: 40px;
+          background-color: #ffe4d1;
+          border: 1px solid #ebbaaf;
+          font-family: MicrosoftYaHei;
+          color: #ff552d;
+          letter-spacing: 1px;
+          margin-right: 12px;
         }
+        .btn-right {
+          width: 207px;
+          height: 40px;
+          background: #ff552d;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          letter-spacing: 1px;
+        }
+      }
     }
+  }
 
-    .flow-path{
-        width: 100%;
-        height: 192px;
-        text-align: center;
-        margin-top: 72px;
-        position: relative;
-        .image{
-            margin: 0 auto;
-        }
+  .flow-path {
+    width: 100%;
+    height: 192px;
+    text-align: center;
+    margin-top: 72px;
+    position: relative;
+    .image {
+      margin: 0 auto;
     }
-    .prompt{
-        width: 420px;
-        height: 25px;
-        font-size: 20px;
-        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-        font-weight: bold;
-        color: #2B2B2B;
-        line-height: 25px;
-        margin: 30px auto 58px auto;
+  }
+  .prompt {
+    width: 420px;
+    height: 25px;
+    font-size: 20px;
+    font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+    font-weight: bold;
+    color: #2b2b2b;
+    line-height: 25px;
+    margin: 30px auto 58px auto;
+  }
+  .divider {
+    display: flex;
+    justify-content: center;
+    margin: 46px 0 30px !important;
+
+    &::before {
+      width: 65px !important;
     }
-    .divider {
-        display: flex;
-        justify-content: center;
-        margin: 46px 0 30px !important;
 
-        &::before {
-            width: 65px !important;
-        }
+    &::after {
+      width: 65px !important;
+    }
 
-        &::after {
-            width: 65px !important;
+    .ant-divider-inner-text {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #989898;
+    }
+  }
+  .application {
+    .title {
+      display: flex;
+      align-items: center;
+      padding-bottom: 25px;
+      .left {
+        width: 58px;
+        height: 58px;
+        background: #d8d8d8;
+        border-radius: 2px;
+      }
+      .right {
+        margin-left: 15px;
+        .top {
+          .tag {
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ff0f0f;
+          }
+          .money {
+            font-size: 22px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ff0f0f;
+          }
+          .unit {
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ff0f0f;
+          }
         }
-
-        .ant-divider-inner-text {
-            font-size: 16px;
+        .bottom {
+          width: 65px;
+          height: 18px;
+          font-size: 13px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #121212;
+          line-height: 18px;
+        }
+      }
+    }
+    .form-data {
+      .tagsData {
+        position: relative;
+        &.disable {
+          cursor: no-drop;
+        }
+        &.tagsDisable::after {
+          content: '缺货';
+          position: absolute;
+          top: -10px;
+          right: -10px;
+          border-radius: 5px 0;
+          width: 37px;
+          height: 14px;
+          line-height: 14px;
+          text-align: center;
+          background-color: #ccc;
+          font-size: 12px;
+          color: rgb(248, 248, 248);
+        }
+      }
+      .num-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .num-left {
+          display: flex;
+          align-items: center;
+          .label {
+            font-size: 14px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #989898;
+            color: #121212;
+            margin-right: 5px;
+          }
+          .inventory {
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #acacac;
+          }
         }
+      }
     }
-    .application{
-        .title{
-            display: flex;
-            align-items: center;
-            padding-bottom: 25px;
-            .left{
-                width: 58px;
-                height: 58px;
-                background: #D8D8D8;
-                border-radius: 2px;
-            }
-            .right{
-                margin-left: 15px;
-                .top{
-                    .tag{
-                        font-size: 14px;
-                        font-family: PingFangSC-Regular, PingFang SC;
-                        font-weight: 400;
-                        color: #FF0F0F; 
-                    }
-                    .money{
-                        font-size: 22px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #FF0F0F;
-                    }
-                    .unit{
-                        font-size: 12px;
-                        font-family: PingFangSC-Regular, PingFang SC;
-                        font-weight: 400;
-                        color: #FF0F0F;
-                    }
-                }
-                .bottom{
-                    width: 65px;
-                    height: 18px;
-                    font-size: 13px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #121212;
-                    line-height: 18px;
-                }
-            }
+  }
+  .applicationDate {
+    .title {
+      display: flex;
+      align-items: center;
+      .left {
+        width: 10px;
+        cursor: pointer;
+      }
+      .right {
+        flex: 1;
+        text-align: center;
+      }
+    }
+    .bottom-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 50px;
+      line-height: 50px;
+      border-bottom: 1px solid #d9d9d9;
+      .label {
+        font-size: 14px;
+        font-family: ArialMT;
+        color: #2f2f2f;
+      }
+      .price {
+        display: flex;
+        .left {
+          font-size: 14px;
+          font-family: Arial-BoldMT, Arial;
+          font-weight: normal;
+          color: #ff552d;
+          margin-right: 4px;
+        }
+        .right {
+          font-size: 12px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #959595;
         }
+      }
     }
-`
\ No newline at end of file
+  }
+`

pages/equipmentLeasing/index.page.tsx

@@ -11,7 +11,7 @@ import { Box } from './styled'
 export async function getStaticProps() {
   //获取筛选数据，进行静态渲染
   return {
-    props: {}
+    props: {},
   }
 }
 
@@ -20,23 +20,31 @@ type Props = {}
 export default function EquipmentLeasing(props: Props) {
   const router = useRouter()
   const filter = useRef<any>()
-  const [productList, setProductList] = useState(Array<{ element: JSX.Element }>)
-  const [rightProductList, setRightProductList] = useState(Array<{ element: JSX.Element }>)
+  const [productList, setProductList] = useState(
+    Array<{ element: JSX.Element }>
+  )
+  const [rightProductList, setRightProductList] = useState(
+    Array<{ element: JSX.Element }>
+  )
 
   const leftDom = (item: Device) => {
     return (
-      <div key={item.id} className="item" onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}>
+      <div
+        key={item.id}
+        className="item"
+        onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}
+      >
         <div className="item-top">
           <div className="item-top-image">
-            <Image src={item.wareImgs[0].imgUrl} alt="error" fill />
+            <Image src={item.images} alt="error" fill />
           </div>
         </div>
         <div className="item-bottom">
-          <div className="item-bottom-title" title={item.wareTitle}>
-            {item.wareTitle}
+          <div className="item-bottom-title" title={item.goodsName}>
+            {item.goodsName}
           </div>
           <div className="item-bottom-price">
-            <span className="money">¥{item.minRent}</span>
+            <span className="money">¥{item.price}</span>
             <span className="unit">/天起</span>
           </div>
         </div>
@@ -56,14 +64,15 @@ export default function EquipmentLeasing(props: Props) {
   const [count, setCount] = useState(0) //商品总数
   const [abort, setAbort] = useState<AbortController | null>(null) //请求中断
   const [pageParams, setPageParams] = useState({
+    type: 1,
     pageNo: 1,
-    pageSize: 15
+    pageSize: 15,
   }) //分页器对象
 
   const onPageChange = (page: number, pageSize: number) => {
     setPageParams({
       ...pageParams,
-      pageNo: page
+      pageNo: page,
     })
   }
 
@@ -88,15 +97,15 @@ export default function EquipmentLeasing(props: Props) {
         {
           ...filterResult,
           ...pageParams,
-          ...rs
+          ...rs,
         },
         {
-          signal: abort?.signal
+          signal: abort?.signal,
         }
       )
-      .then(res => {
+      .then((res) => {
         setProductList(
-          res.result?.list?.map(item => {
+          res.result?.list?.map((item) => {
             return { element: leftDom(item) }
           }) || []
         )
@@ -104,15 +113,18 @@ export default function EquipmentLeasing(props: Props) {
       })
   }, [abort])
 
-  const onFilterChange = (filterResult: FilterResult, adapterFilterResult: AdapterResult) => {
+  const onFilterChange = (
+    filterResult: FilterResult,
+    adapterFilterResult: AdapterResult
+  ) => {
     console.log('filterResult', filterResult, adapterFilterResult)
     setFilterResult(adapterFilterResult)
   }
 
   useEffect(() => {
-    api.listAdvertisementInfo().then(res => {
+    api.listAdvertisementInfo().then((res) => {
       setRightProductList(
-        res.result?.map(item => {
+        res.result?.map((item) => {
           return { element: rightDom(item) }
         }) || []
       )
@@ -134,21 +146,35 @@ export default function EquipmentLeasing(props: Props) {
   return (
     <Layout>
       <Box>
-        <Filter types={['地域', '设备品牌', '设备型号']} showResultItem onChange={onFilterChange} ref={filter}></Filter>
+        <Filter
+          types={['地域', '设备品牌', '设备型号']}
+          showResultItem
+          onChange={onFilterChange}
+          ref={filter}
+        ></Filter>
         <div style={{ paddingTop: 13 }}>
           <ContentBox
             boxIndex={5}
             leftcontentstyle={{
               width: '1010px',
-              margin: { top: 0, right: '12px', bottom: '12px', left: 0 }
+              margin: { top: 0, right: '12px', bottom: '12px', left: 0 },
             }}
             leftRenderDom={{
               columns: productList,
               pagination: (
                 <div className="pagination-page">
-                  <Pagination current={pageParams.pageNo} pageSize={pageParams.pageSize} showSizeChanger={false} showQuickJumper total={count} onChange={onPageChange} hideOnSinglePage={true} style={{ marginTop: 20 }} />
+                  <Pagination
+                    current={pageParams.pageNo}
+                    pageSize={pageParams.pageSize}
+                    showSizeChanger={false}
+                    showQuickJumper
+                    total={count}
+                    onChange={onPageChange}
+                    hideOnSinglePage={true}
+                    style={{ marginTop: 20 }}
+                  />
                 </div>
-              )
+              ),
             }}
             rightRenderDom={{ columns: rightProductList }}
           />

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

-import React, { useEffect, useState } from "react";
-import Layout from "~/components/layout";
-import { Box } from "./styled";
-import { Button } from "antd";
-import { useRouter } from "next/router";
-import { ParsedUrlQuery } from "querystring";
+import React, { useEffect, useState } from 'react'
+import Layout from '~/components/layout'
+import { Box } from './styled'
+import { Button, Tabs } from 'antd'
+import { useRouter } from 'next/router'
+import { ParsedUrlQuery } from 'querystring'
+import type { TabsProps } from 'antd'
+import api, { ListPageFlyingInfoResp } from './api'
 
-interface RouterDetail {
-  videoUrl:string | '',
-  curriculumName:string
+const contentStyle: React.CSSProperties = {
+  width: '100%',
 }
 
 export default function FlyingDetail() {
-  
-  const router = useRouter();
-  const [detail,setDetail] =useState<ParsedUrlQuery | RouterDetail>()
-  useEffect(()=>{
-    setDetail(router.query)
-  },[router])
+  const router = useRouter()
+  const [detail, setDetail] = useState<ListPageFlyingInfoResp | null>()
+  const onChange = (key: string) => {
+    console.log(key)
+  }
+
+  const items: TabsProps['items'] = [
+    {
+      key: '1',
+      label: `介绍`,
+      children: (
+        <div className="body">
+          <div className="top">
+            <div className="title">课程简介</div>
+            <div className="content">{detail?.curriculumDesc}</div>
+          </div>
+          {/* <div className="bottom">详情</div> */}
+        </div>
+      ),
+    },
+  ]
+
+  useEffect(() => {
+    if (Object.keys(router.query).length) {
+      api
+        .listPageJobServicesInfo({ id: Number(router.query.id) })
+        .then((res) => {
+          console.log(res)
+          setDetail(res.result)
+        })
+    }
+  }, [router])
   return (
-    <Layout>
+    <Layout contentStyle={contentStyle}>
       <Box>
-        <div className="box-top">
-          <div className="left">{detail?.curriculumName}</div>
-          <div className="right">
-            {/* <Button
+        <div className="box">
+          <div className="box-body">
+            <video
+              className="body-video"
+              controls
+              src={detail?.videoUrl as string}
+            />
+          </div>
+          <div className="box-bottom">
+            <div className="left">
+              <div className="top">{detail?.curriculumName}</div>
+              <div className="bottom">免费</div>
+            </div>
+            <div className="right">
+              {/* <Button
               type="primary"
               className="btn"
               onClick={() =>
@@ -32,12 +70,18 @@ export default function FlyingDetail() {
             >
               去考试
             </Button> */}
+            </div>
           </div>
         </div>
-        <div className="box-body">
-          <video className="body-video" controls src={detail?.videoUrl as string} />
+        <div className="detail">
+          <Tabs
+            className="tabs"
+            defaultActiveKey="1"
+            items={items}
+            onChange={onChange}
+          />
         </div>
       </Box>
     </Layout>
-  );
+  )
 }

pages/flyingHandService/detail/api/index.tsx

+import request, { Response } from '~/api/request'
+
+export interface ListPageFlyingInfoParams {
+  id: number
+}
+
+export interface Flying {
+  id: number
+  price: number
+  supplierName: string
+  curriculumName: string
+  free: 0 | 1
+  curriculumDesc: string
+  videoUrl: string
+}
+
+export interface ListPageFlyingInfoResp {
+  id: number
+  price: number | null
+  supplierName: string
+  curriculumName: string
+  free: number
+  flightSkills: number
+  flightSkillsName1: string
+  flightSkillsName2: string
+  curriculumDesc: string
+  surfaceUrl: string | null
+  videoUrl: string
+  detailContent: null
+}
+
+export default {
+  //web-飞手培训-详情
+  listPageJobServicesInfo: (
+    params: ListPageFlyingInfoParams
+  ): Promise<Response<ListPageFlyingInfoResp>> => {
+    return request('/release/curriculum/curriculumDetails', 'get', params)
+  },
+}

pages/flyingHandService/detail/styled.tsx

-import styled from "styled-components";
+import styled from 'styled-components'
 
 export default function Style() {
-  return <></>;
+  return <></>
 }
 
 export const Box = styled.div`
   box-sizing: border-box;
-  .box-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0;
-    .left {
-      height: 25px;
-      font-size: 20px;
-      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-      font-weight: bold;
-      color: #000000;
-      line-height: 25px;
+  .box {
+    background-color: #fff;
+    height: 586px;
+    padding-top: 20px;
+    .box-body {
+      margin: 0 auto;
+      display: flex;
+      width: 1200px;
+      height: 470px;
+      /* background: #111111; */
+      .body-video {
+        width: 1200px;
+        height: 470px;
+      }
+      /* .right-box {
+        width: 362px;
+        height: 470px;
+        background: #1b2128;
+        .tabs {
+          color: #fff;
+        }
+      } */
     }
-    .right {
-      .btn {
-        width: 180px;
+    .box-bottom {
+      margin: 0 auto;
+      width: 1200px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 0 38px 0;
+      .left {
         height: 50px;
-        background: linear-gradient(135deg, #278eff 0%, #0052da 100%);
-        border-radius: 6px;
-        font-size: 20px;
-        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-        font-weight: bold;
-        color: #ffffff;
-        &:hover {
-          opacity: 0.8;
+        .top {
+          font-size: 24px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #000000;
+          margin-bottom: 10px;
+        }
+        .bottom {
+          font-size: 18px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ff552d;
+        }
+      }
+      .right {
+        .btn {
+          width: 180px;
+          height: 50px;
+          background: linear-gradient(135deg, #278eff 0%, #0052da 100%);
+          border-radius: 6px;
+          font-size: 20px;
+          font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+          font-weight: bold;
+          color: #ffffff;
+          &:hover {
+            opacity: 0.8;
+          }
         }
       }
     }
   }
-  .box-body {
-    margin-top: 20px;
+  .detail {
+    margin: 0 auto;
     width: 1200px;
-    height: 675px;
-    background: #111111;
-    .body-video {
-      width: 1200px;
-      height: 675px;
+    height: 420px;
+    background: #ffffff;
+    box-shadow: 0px 2px 6px 0px rgba(183, 188, 197, 0.1);
+    border-radius: 12px;
+    margin-top: 16px;
+    padding: 20px;
+    .tabs {
+      .body {
+        .top {
+          .title {
+            font-size: 18px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+          }
+          .content {
+            font-size: 18px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #27323f;
+            margin-top: 10px;
+          }
+        }
+        .bottom {
+          font-size: 18px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #000000;
+          margin-top: 29px;
+        }
+      }
     }
   }
-`;
+`

pages/flyingHandService/index.page.tsx

-import { Button, Cascader, Checkbox, Form, Input, Modal, Pagination, Select, Space, message } from 'antd'
+import {
+  Button,
+  Cascader,
+  Checkbox,
+  Form,
+  Input,
+  Modal,
+  Pagination,
+  Select,
+  Space,
+  message,
+} from 'antd'
 import type { CheckboxValueType } from 'antd/es/checkbox/Group'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
@@ -19,10 +30,19 @@ export default function FlyingHandService() {
   const { Option } = Select
   const router = useRouter()
   const { userInfo, setNeedLogin } = useContext(UserContext)
-  const [list, setList] = useState(['https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg', 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg'])
-  const [productList, setProductList] = useState(Array<{ element: JSX.Element }>)
-  const [rightDomList, setRightDomList] = useState(Array<{ element: JSX.Element }>)
-  const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp>)
+  const [list, setList] = useState([
+    'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg',
+    'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg',
+  ])
+  const [productList, setProductList] = useState(
+    Array<{ element: JSX.Element }>
+  )
+  const [rightDomList, setRightDomList] = useState(
+    Array<{ element: JSX.Element }>
+  )
+  const [secondDistrictInfo, setSecondDistrictInfo] = useState(
+    Array<RegionResp>
+  )
   const [skills, setSkills] = useState(Array<RegionResp>)
   const [skillsDefault, setSkillsDefault] = useState<Array<number>>()
   const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>)
@@ -36,15 +56,16 @@ export default function FlyingHandService() {
           userInfo
             ? router.push({
                 pathname: `/flyingHandService/detail/${item.id}`,
-                query: {
-                  videoUrl: item.videoUrl,
-                  curriculumName: item.curriculumName
-                }
               })
             : setNeedLogin(true)
-        }}>
+        }}
+      >
         <div className="item-top">
-          <Image src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt="#" fill />
+          <Image
+            src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`}
+            alt="#"
+            fill
+          />
         </div>
         <div className="item-bottom">
           <div className="bottom-title">{item.curriculumName}</div>
@@ -79,7 +100,7 @@ export default function FlyingHandService() {
 
   const [pageParams, setPageParams] = useState({
     pageNo: 1,
-    pageSize: 12
+    pageSize: 12,
   }) //分页器对象
 
   const [filterParams, setFilterParams] = useState<FilterInfoParams>()
@@ -90,7 +111,7 @@ export default function FlyingHandService() {
   const onPageChange = (page: number, pageSize: number) => {
     setPageParams({
       ...pageParams,
-      pageNo: page
+      pageNo: page,
     })
   }
 
@@ -112,11 +133,11 @@ export default function FlyingHandService() {
       .listPageJobServicesInfo({
         ...pageParams,
         ...filterParams,
-        ...queryVal
+        ...queryVal,
       })
-      .then(res => {
+      .then((res) => {
         setProductList(
-          res.result?.list?.map(item => {
+          res.result?.list?.map((item) => {
             return { element: leftDom(item) }
           }) || []
         )
@@ -139,10 +160,10 @@ export default function FlyingHandService() {
     } else {
       setFlightDefault(null)
     }
-    setFilterParams(props => {
+    setFilterParams((props) => {
       return {
         ...props,
-        licenseId: Number(value)
+        licenseId: Number(value),
       }
     })
   }
@@ -154,10 +175,10 @@ export default function FlyingHandService() {
     } else {
       setSkillsDefault([])
     }
-    setFilterParams(props => {
+    setFilterParams((props) => {
       return {
         ...props,
-        flightSkillsId: (value && value[value.length - 1]) || undefined
+        flightSkillsId: (value && value[value.length - 1]) || undefined,
       }
     })
   }
@@ -170,10 +191,10 @@ export default function FlyingHandService() {
     //     regionId: (value && value[value.length - 1]) || undefined,
     //   };
     // });
-    setFilterParams(props => {
+    setFilterParams((props) => {
       return {
         ...props,
-        regionId: value || undefined
+        regionId: value || undefined,
       }
     })
   }
@@ -184,14 +205,14 @@ export default function FlyingHandService() {
         return { element: rightDom(item) }
       })
     )
-    api.region().then(res => {
+    api.region().then((res) => {
       setSecondDistrictInfo(res.result || [])
     })
-    api.PilotLicense().then(res => {
+    api.PilotLicense().then((res) => {
       setSkills(res.result || [])
     })
-    api.IndustryFlightSkills().then(res => {
-      const list = res.result?.map(item => {
+    api.IndustryFlightSkills().then((res) => {
+      const list = res.result?.map((item) => {
         item.label = item.skillsName
         item.value = item.id
         return item
@@ -211,10 +232,10 @@ export default function FlyingHandService() {
       } else {
         setFlightDefault(queryVal.licenseId)
       }
-      setFilterParams(props => {
+      setFilterParams((props) => {
         return {
           ...props,
-          ...queryVal
+          ...queryVal,
         }
       })
     }
@@ -226,16 +247,19 @@ export default function FlyingHandService() {
   const handleOk = async (values: any) => {
     form
       .validateFields()
-      .then(async values => {
+      .then(async (values) => {
         setLoading(true)
         try {
           const res = await api.PilotRegistrations({
             ...values,
             city: values.city[values.city.length - 1] || undefined,
             province: values.city[0] || undefined,
-            uavLicenseLevelOne: values.uavLicenseLevelOne && values.uavLicenseLevelOne[0],
-            uavLicenseLevelTow: values.uavLicenseLevelOne && values.uavLicenseLevelOne[1],
-            uavLicenseLevelThree: values.uavLicenseLevelOne && values.uavLicenseLevelOne[2]
+            uavLicenseLevelOne:
+              values.uavLicenseLevelOne && values.uavLicenseLevelOne[0],
+            uavLicenseLevelTow:
+              values.uavLicenseLevelOne && values.uavLicenseLevelOne[1],
+            uavLicenseLevelThree:
+              values.uavLicenseLevelOne && values.uavLicenseLevelOne[2],
           })
           if (res.code === '200') {
             setLoading(false)
@@ -250,10 +274,10 @@ export default function FlyingHandService() {
           message.error(e.message)
         }
       })
-      .catch(err => {
+      .catch((err) => {
         message
           .warning({
-            content: err.errorFields[0].errors[0]
+            content: err.errorFields[0].errors[0],
           })
           .then()
       })
@@ -289,7 +313,17 @@ export default function FlyingHandService() {
                 onChange={onChangeRegion}
                 changeOnSelect
               /> */}
-              <Select className="selectItem" bordered={false} popupMatchSelectWidth={false} placeholder="省份" size="large" onChange={onChangeRegion} options={secondDistrictInfo} fieldNames={{ value: 'id', label: 'name' }} allowClear />
+              <Select
+                className="selectItem"
+                bordered={false}
+                popupMatchSelectWidth={false}
+                placeholder="省份"
+                size="large"
+                onChange={onChangeRegion}
+                options={secondDistrictInfo}
+                fieldNames={{ value: 'id', label: 'name' }}
+                allowClear
+              />
               <Cascader
                 allowClear
                 placeholder="考证"
@@ -299,17 +333,34 @@ export default function FlyingHandService() {
                 fieldNames={{
                   label: 'licenseType',
                   value: 'id',
-                  children: 'childLicenses'
+                  children: 'childLicenses',
                 }}
                 options={skills}
-                onChange={value => onChange(value)}
+                onChange={(value) => onChange(value)}
                 changeOnSelect
                 value={skillsDefault}
               />
-              <Select className="selectItem" bordered={false} popupMatchSelectWidth={false} placeholder="技能" size="large" onChange={value => onProvinceChange(value)} options={flightSkillsList} fieldNames={{ value: 'id', label: 'skillsName' }} allowClear value={flightDefault} />
+              <Select
+                className="selectItem"
+                bordered={false}
+                popupMatchSelectWidth={false}
+                placeholder="技能"
+                size="large"
+                onChange={(value) => onProvinceChange(value)}
+                options={flightSkillsList}
+                fieldNames={{ value: 'id', label: 'skillsName' }}
+                allowClear
+                value={flightDefault}
+              />
             </Space>
           </div>
-          <Button type="primary" className="btn" onClick={() => (userInfo ? setIsModalOpen(true) : setNeedLogin(true))}>
+          <Button
+            type="primary"
+            className="btn"
+            onClick={() =>
+              userInfo ? setIsModalOpen(true) : setNeedLogin(true)
+            }
+          >
             报名学习课程
           </Button>
         </div>
@@ -320,20 +371,52 @@ export default function FlyingHandService() {
           onCancel={handleCancel}
           getContainer={false}
           footer={[
-            <Button style={{ width: '100%', background: 'linear-gradient(135deg, #278EFF 0%, #0052DA 100%)', height: 40 }} key="submit" type="primary" loading={loading} onClick={handleOk}>
+            <Button
+              style={{
+                width: '100%',
+                background: 'linear-gradient(135deg, #278EFF 0%, #0052DA 100%)',
+                height: 40,
+              }}
+              key="submit"
+              type="primary"
+              loading={loading}
+              onClick={handleOk}
+            >
               立即报名
-            </Button>
-          ]}>
-          <Form form={form} layout="vertical" name="application" initialValues={{ modifier: 'public' }}>
+            </Button>,
+          ]}
+        >
+          <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: '请输入姓名!' }]}>
+              <Form.Item
+                style={{ flex: 1, marginRight: 16 }}
+                name="name"
+                rules={[{ required: true, message: '请输入姓名!' }]}
+              >
                 <Input placeholder="姓名" />
               </Form.Item>
-              <Form.Item style={{ flex: 1 }} name="telephone" rules={[{ required: true, message: '请输入手机号!' }]}>
-                <Input onInput={phoneNumber} allowClear maxLength={11} placeholder="手机号" />
+              <Form.Item
+                style={{ flex: 1 }}
+                name="telephone"
+                rules={[{ required: true, message: '请输入手机号!' }]}
+              >
+                <Input
+                  onInput={phoneNumber}
+                  allowClear
+                  maxLength={11}
+                  placeholder="手机号"
+                />
               </Form.Item>
             </div>
-            <Form.Item name="city" rules={[{ required: true, message: '请选择城市!' }]}>
+            <Form.Item
+              name="city"
+              rules={[{ required: true, message: '请选择城市!' }]}
+            >
               <Cascader
                 allowClear
                 placeholder="城市"
@@ -341,7 +424,7 @@ export default function FlyingHandService() {
                 fieldNames={{
                   label: 'name',
                   value: 'id',
-                  children: 'childInfo'
+                  children: 'childInfo',
                 }}
                 options={secondDistrictInfo}
                 changeOnSelect
@@ -362,14 +445,21 @@ export default function FlyingHandService() {
                 fieldNames={{
                   label: 'licenseType',
                   value: 'id',
-                  children: 'childLicenses'
+                  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
+              name="industryAppAuth"
+              label="行业应用认证（多选）"
+              className="collection-create-form_last-form-item"
+            >
+              <Checkbox.Group
+                options={flightSkillsList}
+                onChange={onChangeCheck}
+              />
             </Form.Item>
             <Form.Item name="remark">
               <Input placeholder="备注" />
@@ -381,15 +471,24 @@ export default function FlyingHandService() {
           boxIndex={4}
           leftcontentstyle={{
             width: '925px',
-            margin: { top: 0, right: '10px', bottom: '10px', left: 0 }
+            margin: { top: 0, right: '10px', bottom: '10px', left: 0 },
           }}
           leftRenderDom={{
             columns: productList,
             pagination: (
               <div className="pagination-page">
-                <Pagination current={pageParams.pageNo} pageSize={pageParams.pageSize} showSizeChanger={false} showQuickJumper total={count} onChange={onPageChange} hideOnSinglePage={true} style={{ marginTop: 20 }} />
+                <Pagination
+                  current={pageParams.pageNo}
+                  pageSize={pageParams.pageSize}
+                  showSizeChanger={false}
+                  showQuickJumper
+                  total={count}
+                  onChange={onPageChange}
+                  hideOnSinglePage={true}
+                  style={{ marginTop: 20 }}
+                />
               </div>
-            )
+            ),
           }}
           rightRenderDom={{ columns: rightDomList }}
         />