添-飞手培训-详情-对接接口

添-设备租赁-列表-对接接口
添-设备租赁-详情-对接接口
添-设备租赁-立即租赁-下订单接口对接(未完成)

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

@@ -27,6 +27,12 @@ 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)
@@ -45,20 +51,20 @@ export default function EquipmentLeasingDetail() {
     if (id) {
       api
         .listDetailDeviceInfo({
-          id: id,
+          goodsId: id,
         })
         .then((res) => {
           setDetail(res.result || null)
-        })
-      api
-        .listWareSkuById({
-          id: id,
-        })
-        .then((res) => {
-          res.result?.map((item) => {
-            return item
-          })
-          setWareSkuList(res.result || undefined)
+          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)
+          }
         })
     }
   }, [id])
@@ -73,11 +79,12 @@ export default function EquipmentLeasingDetail() {
   const tagsData = [
     { label: '3-7天', disable: false },
     { label: '8-15天', disable: false },
-    { label: '16-30天', disable: true },
+    { 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) {
@@ -116,44 +123,21 @@ export default function EquipmentLeasingDetail() {
 
   const handleOkDate = async () => {
     setLoading(true)
-    const result = await Promise.all([
-      form.validateFields(),
-      formDate.validateFields(),
-    ])
-    console.log(result)
-    if (result) {
-    }
-    form
-      .validateFields()
-      .then(async (values) => {
+    try {
+      const result = await Promise.all([
+        form.validateFields(),
+        formDate.validateFields(),
+      ])
+      if (result) {
         setLoading(false)
         setIsModalOpen(false)
         setIsModalDateOpen(false)
         setIsorderForGoods(true)
-        //   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)
-      })
+        setShopDetail({ ...result[0], ...result[1] })
+      }
+    } catch (error) {
+      setLoading(false)
+    }
   }
 
   const handleCancel = () => {
@@ -215,14 +199,14 @@ export default function EquipmentLeasingDetail() {
       {!isorderForGoods ? (
         <Box>
           <div className="item">
-            <ImagePreview imgList={detail?.wareImgs!} />
+            <ImagePreview imgList={detail?.images!} />
             <div className="item-right">
-              <div className="title">{detail?.wareTitle}</div>
-              {detail?.tags?.length ? (
+              <div className="title">{detail?.goodsName}</div>
+              {detail?.otherService?.length ? (
                 <div className="function">
-                  {detail?.tags?.map((item) => (
-                    <div key={item} className="function-item">
-                      {item}
+                  {detail?.otherService?.map((item) => (
+                    <div key={item.id} className="function-item">
+                      {item.serviceName}
                     </div>
                   ))}
                 </div>
@@ -230,7 +214,7 @@ export default function EquipmentLeasingDetail() {
                 <div className="function not"></div>
               )}
               <div className="menoy">
-                <span className="menoy-left">{`¥${detail?.minRent}`}</span>
+                <span className="menoy-left">{`¥${detail?.price! | 0}`}</span>
                 <span className="menoy-right">/天起</span>
               </div>
               <div className="classification">
@@ -247,7 +231,7 @@ export default function EquipmentLeasingDetail() {
                       style={{ width: 120 }}
                       bordered={false}
                       options={wareSkuList}
-                      fieldNames={{ label: 'skuTitle', value: 'id' }}
+                      fieldNames={{ label: 'specName', value: 'id' }}
                       placeholder="选择商品"
                     />
                   </div>
@@ -275,10 +259,10 @@ export default function EquipmentLeasingDetail() {
           </div>
           <div className="prompt">更多租金规则请前往【云享飞】微信小程序查</div>
           <Divider className="divider">商品详情</Divider>
-          {detail?.wareDetailContent ? (
+          {detail?.goodsDetail.content ? (
             <div
               style={{ textAlign: 'center' }}
-              dangerouslySetInnerHTML={{ __html: detail?.wareDetailContent }}
+              dangerouslySetInnerHTML={{ __html: detail?.goodsDetail.content }}
             ></div>
           ) : (
             <div style={{ textAlign: 'center' }}></div>
@@ -307,7 +291,7 @@ export default function EquipmentLeasingDetail() {
               <div className="right">
                 <div className="top">
                   <span className="tag">¥</span>
-                  <span className="money">{detail?.minRent}</span>
+                  <span className="money">{detail?.price}</span>
                   <span className="unit">/天</span>
                 </div>
                 <div className="bottom">渠道免押金</div>
@@ -335,7 +319,7 @@ export default function EquipmentLeasingDetail() {
                       )}
                       onChange={(checked) => handleChange(tag.id, checked)}
                     >
-                      {tag.skuTitle}
+                      {tag.specName}
                     </CheckableTag>
                   ))}
                 </Space>
@@ -362,22 +346,22 @@ export default function EquipmentLeasingDetail() {
                   ))}
                 </Space>
               </Form.Item>
-              <Form.Item style={{ flex: 1, marginRight: 16 }} name="num">
-                <div className="num-box">
-                  <div className="num-left">
-                    <div className="label">租赁数量</div>
-                    <div className="inventory">库存9件</div>
-                  </div>
-                  <div className="num-right">
+              <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={3}
+                      defaultValue={1}
                       onChange={onChangeNum}
                     />
-                  </div>
+                  </Form.Item>
                 </div>
-              </Form.Item>
+              </div>
             </Form>
           </Modal>
 
@@ -413,7 +397,11 @@ export default function EquipmentLeasingDetail() {
               initialValues={{ modifier: 'public' }}
               className="form-data"
             >
-              <Form.Item style={{ flex: 1, marginRight: 16 }} name="dateDetail">
+              <Form.Item
+                style={{ flex: 1, marginRight: 16 }}
+                name="dateDetail"
+                rules={[{ required: true, message: '请选择日期' }]}
+              >
                 <RangePicker
                   style={{ width: 376, marginTop: 10 }}
                   disabledDate={disabledDate}
@@ -431,7 +419,12 @@ export default function EquipmentLeasingDetail() {
           </Modal>
         </Box>
       ) : (
-        <OrderForGoods setIsorderForGoods={setIsorderForGoods} />
+        <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, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { OrderForGoodsBox } from './styled'
-import type { RadioChangeEvent } from 'antd'
+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 } = props
+  const { setIsorderForGoods, shopDetail, days, detailData } = props
   const [value, setValue] = useState(1)
   const [areaValue, setAreaValue] = useState<string>()
-  const [list, setList] = useState([{}, {}, {}, {}])
+  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)
@@ -22,8 +30,76 @@ export default function OrderForGoods(props: PropsBox) {
   }
   const detailSumbit = () => {
     message.success('提交成功')
-    setIsorderForGoods(false)
+    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">
@@ -36,8 +112,9 @@ export default function OrderForGoods(props: PropsBox) {
           </div>
         </div>
         <div className="bottom">
-          {list.map((item, index) => (
+          {list?.map((item, index) => (
             <div
+              key={item.id}
               className={`item ${value === index ? 'active' : ''}`}
               onClick={() => onChangeValue(index)}
             >
@@ -48,9 +125,7 @@ export default function OrderForGoods(props: PropsBox) {
                 </div>
                 <Radio.Group onChange={onChange} value={value}>
                   <Space direction="vertical">
-                    <Radio value={index}>
-                      广东省深圳市南山区国际创谷6栋（黄晓敏收）
-                    </Radio>
+                    <Radio value={index}>{item.takeAddress}</Radio>
                   </Space>
                 </Radio.Group>
               </div>
@@ -104,7 +179,13 @@ export default function OrderForGoods(props: PropsBox) {
               1
             </div>
             <div className="body-item lease-term" style={{ width: 300 }}>
-              2023/05/10 <div className="num">4天</div> 2023/05/13
+              {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

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/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

@@ -5,11 +5,7 @@ import { Button, Tabs } from 'antd'
 import { useRouter } from 'next/router'
 import { ParsedUrlQuery } from 'querystring'
 import type { TabsProps } from 'antd'
-interface RouterDetail {
-  videoUrl: string | ''
-  curriculumName: string
-  curriculumDesc: string
-}
+import api, { ListPageFlyingInfoResp } from './api'
 
 const contentStyle: React.CSSProperties = {
   width: '100%',
@@ -17,10 +13,7 @@ const contentStyle: React.CSSProperties = {
 
 export default function FlyingDetail() {
   const router = useRouter()
-  const [detail, setDetail] = useState<ParsedUrlQuery | RouterDetail>()
-  useEffect(() => {
-    setDetail(router.query)
-  }, [router])
+  const [detail, setDetail] = useState<ListPageFlyingInfoResp | null>()
   const onChange = (key: string) => {
     console.log(key)
   }
@@ -40,6 +33,17 @@ export default function FlyingDetail() {
       ),
     },
   ]
+
+  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 contentStyle={contentStyle}>
       <Box>

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/index.page.tsx

@@ -56,11 +56,6 @@ export default function FlyingHandService() {
           userInfo
             ? router.push({
                 pathname: `/flyingHandService/detail/${item.id}`,
-                query: {
-                  videoUrl: item.videoUrl,
-                  curriculumName: item.curriculumName,
-                  curriculumDesc: item.curriculumDesc,
-                },
               })
             : setNeedLogin(true)
         }}