Skip to content

W
web
提交 17a1dfdd 作者: 曹云
操作

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

添-设备租赁-列表-对接接口
添-设备租赁-详情-对接接口
添-设备租赁-立即租赁-下订单接口对接(未完成)
上级 4e343ba3
正在显示 包含 471 行增加 和 262 行删除
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')
}
},
}
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)
try {
const result = await Promise.all([
form.validateFields(),
formDate.validateFields(),
])
console.log(result)
if (result) {
}
form
.validateFields()
.then(async (values) => {
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()
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">
<Form.Item style={{ flex: 1, marginRight: 16 }} name="num">
<InputNumber
min={1}
max={10}
defaultValue={3}
defaultValue={1}
onChange={onChangeNum}
/>
</Form.Item>
</div>
</div>
</Form.Item>
</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)
}
},
}
pages/equipmentLeasing/detail/components/orderForGoods/api/index.tsx 0 → 100644
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);
export default function PicturePreview(props: ImagesType) {
const { imgList } = props
const mask =useRef<HTMLDivElement>(null!)
const moveBox =useRef<HTMLDivElement>(null!)
const big =useRef<HTMLImageElement>(null!)
const [moveLeft,setMoveLeft] = 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',
......@@ -24,84 +23,104 @@ export default function PicturePreview(props:ImagesType) {
// 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
// ]
const [activeImgIndex,setActiveImgIndex] = useState(0)
const [activeImgIndex, setActiveImgIndex] = useState(0)
// 改变预览图
const handleChangeImg = (index:number) => {
const handleChangeImg = (index: number) => {
if (index <= moveLeft + 3) setActiveImgIndex(index)
}
// 移动缩略图
const handleSlide = (direction:string) => {
const handleSlide = (direction: string) => {
//左侧按钮
if (direction == 'left') {
moveLeft == 0 ? setMoveLeft(0) : setMoveLeft((props)=>props - 1)
} else { // 右侧按钮
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)
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 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 <= 0) left = 0
if (left >= maxLeft) left = maxLeft
if (top <= 0) top = 0;
if (top <= 0) top = 0
if (top >= maxTop) top = maxTop
// 设置放大范围遮罩层位置
mask.current.style.left = left + "px";
mask.current.style.top = top + "px";
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";
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_content">
{/* <!-- 蒙层，绑定鼠标事件 --> */}
<div className="movebox"
onMouseMove={(e)=>handleMouseMove(e)}
ref={moveBox}>
</div>
<div
className="movebox"
onMouseMove={(e) => handleMouseMove(e)}
ref={moveBox}
></div>
{/* <!-- 主图 --> */}
<img src={imgList && imgList[activeImgIndex].imgUrl}
<img
src={imgList && imgList[activeImgIndex].imgUrl}
className="img_small"
alt=""/>
alt=""
/>
{/* <!-- 放大区域 --> */}
<div className="mask"
ref={mask}></div>
<div className="mask" ref={mask}></div>
{/* <!-- 大图预览图 --> */}
<div className="img_big">
<img src={imgList && imgList[activeImgIndex].imgUrl}
<img
src={imgList && imgList[activeImgIndex].imgUrl}
ref={big}
alt=""/>
alt=""
/>
</div>
</div>
{/* <!-- 缩略图列表 --> */}
<div className="img_list_wrapper">
{imgList?.length>4 && <LeftOutlined className="el-icon-arrow-left" onClick={()=>handleSlide('left')}/>}
{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)=>(
<div
className="img_list"
style={{ marginLeft: -moveLeft * 25 + '%' }}
>
{imgList?.map((item, index) => (
<img
onMouseOver={()=>handleChangeImg(index)}
onMouseOver={() => handleChangeImg(index)}
key={index}
className={`${activeImgIndex === index ? 'activeImg' : ''}`}
src={item.imgUrl}
alt="" />
))
}
alt=""
/>
))}
</div>
</div>
{ imgList?.length>4 && <RightOutlined className="el-icon-arrow-right" onClick={()=>handleSlide('right')}/>}
{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 0 → 100644
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)
}}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论