Skip to content

W
web
提交 350d1740 作者: 曹云
操作

添-作业服务-详情页面数据 

添-首页-模块跳转
上级 44017cef
正在显示 包含 999 行增加 和 151 行删除
api/config.ts
......@@ -3,7 +3,7 @@ const dev = {
}
const prod = {
baseUrl: 'https://iuav.mmcuav.cn'
baseUrl: 'http://192.168.9.61:10001/'
}
export default process.env.NODE_ENV === 'development' ? dev : prod;
\ No newline at end of file
components/filter/api/index.ts
......@@ -32,4 +32,16 @@ export default {
region: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/getSecondDistrictInfo');
},
industry: (): Promise<Response<Array<RegionResp>>> => {
return request('/release/work/listAllIndustry');
},
appType: (): Promise<Response<Array<RegionResp>>> => {
return request('/release/work/listAllAppType');
},
deviceBrand: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/deviceBrand');
},
deviceModel: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/deviceModel');
},
}
\ No newline at end of file
components/filter/compoents/appType/index.tsx 0 → 100644
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.appType().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "应用：" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>应用：</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
components/filter/compoents/deviceBrand/index.tsx 0 → 100644
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.deviceBrand().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "品牌：" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>品牌：</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
components/filter/compoents/deviceModel/index.tsx 0 → 100644
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.deviceModel().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "型号：" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>型号：</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
components/filter/compoents/industry/index.tsx 0 → 100644
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.industry().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "行业：" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>行业：</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
components/filter/index.tsx
......@@ -8,6 +8,11 @@ import BrandItem from "./compoents/brandItem";
import ModelItem from "./compoents/modelItem";
import PartItem from "./compoents/partItem";
import QualityItem from "./compoents/qualityItem";
import Industry from "./compoents/industry";
import AppType from "./compoents/appType";
import DeviceBrand from './compoents/deviceBrand';
import DeviceModel from './compoents/deviceModel';
export type AdapterResult = {
brandId?: number;
......@@ -27,7 +32,7 @@ export type FilterResult = {
quality?: FilterOptionResp;
};
type itemType = "类目" | "地域" | "品牌" | "部件" | "型号" | "成色";
type itemType = "类目" | "地域" | "品牌" | "部件" | "型号" | "成色" | "行业" | "应用" | "设备品牌" | "设备型号";
type Props = {
types: itemType[]; //需要包含的筛选条件项
......@@ -85,6 +90,11 @@ export default function Filter(props: Props) {
onChange={(item: FilterOptionResp) => onChange(item, "brand")}
></BrandItem>
)}
{props.types.includes("设备品牌") && (
<DeviceBrand
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></DeviceBrand>
)}
{props.types.includes("类目") && (
<CategoryItem
onChange={(item: FilterOptionResp) => onChange(item, "category")}
......@@ -100,11 +110,26 @@ export default function Filter(props: Props) {
onChange={(item: FilterOptionResp) => onChange(item, "model")}
></ModelItem>
)}
{props.types.includes("设备型号") && (
<DeviceModel
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></DeviceModel>
)}
{props.types.includes("成色") && (
<QualityItem
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></QualityItem>
)}
{props.types.includes("行业") && (
<Industry
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></Industry>
)}
{props.types.includes("应用") && (
<AppType
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
></AppType>
)}
{props.showResultItem && (
<ResultItem data={result} onDel={onDel}></ResultItem>
......
components/footer/index.tsx
......@@ -3,19 +3,20 @@ import Image from 'next/image';
const qrcodeList = [
{
img: '',
img: require("./assets/mmc.png"),
title: '科比特官网',
url:"http://www.mmcuav.cn/"
},
{
img: '',
img: require("./assets/fuwuhao.png"),
title: '云享飞服务号',
},
{
img: '',
img: require("./assets/xiaochengxu.png"),
title: '云享飞小程序',
},
{
img: '',
img: require("./assets/shequn.png"),
title: '官方社群',
},
];
......@@ -29,7 +30,7 @@ export default function Footer() {
qrcodeList.map((item, i) => {
return (
<div className={styles.qrcodeItem} key={i}>
<Image alt="" className={styles.qrcodeImg} src={item.img}></Image>
<Image style={{cursor:item.title === "科比特官网" ? "pointer" : ''}} onClick={()=>{if(item.title === "科比特官网") window.location.href = item.url!}} alt="" className={styles.qrcodeImg} src={item.img}></Image>
<div className={styles.qrcodeTitle}>{item.title}</div>
</div>
);
......
next.config.js
......@@ -23,7 +23,7 @@ const nextConfig = {
return [
{
source: "/local/:path*",
destination: "https://iuav.mmcuav.cn/:path*",
destination: "http://192.168.9.61:10001//:path*",
},
];
},
......
pages/equipmentLeasing/api/index.tsx
......@@ -50,8 +50,8 @@ export interface ListPageDeviceInfoResp {
export default {
//web-设备租赁-分页
listPageDeviceInfo: (params: ListPageDeviceInfoParams): Promise<Response<ListPageDeviceInfoResp>> => {
return request('/pms/webDevice/deviceList', 'post', params)
listPageDeviceInfo: (params: ListPageDeviceInfoParams,options = {}): Promise<Response<ListPageDeviceInfoResp>> => {
return request('/pms/webDevice/deviceList', 'post', params, options)
},
//web-设备租赁-广告
listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => {
......
pages/equipmentLeasing/detail/[pid].page.tsx → pages/equipmentLeasing/detail/[id].page.tsx
import React from 'react'
import React, { useEffect , useState } 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 } from 'antd';
import Image from 'next/image';
import errImg from "~/assets/errImg";
import api,{GetWebDeviceDetailResult} from './api';
export default function EquipmentLeasingDetail() {
const router = useRouter();
const [id, setId] = useState<number | null>(null);
const [detail,setDetail] = useState<GetWebDeviceDetailResult | null>()
useEffect(()=>{
setId(Number(router.query.id))
},[router])
useEffect(()=>{
if (id) {
api
.listDetailDeviceInfo({
id:id
})
.then((res) => {
setDetail(res.result || null);
});
}
},[id])
return (
<Layout>
<Box>
<div className='item'>
<ImagePreview />
<ImagePreview imgList={detail?.wareImgs!}/>
<div className='item-right'>
<div className='title'>入云龙1550</div>
<div className='function'>
<div className='function-item'>官方质检</div>
<div className='function-item'>1天起租</div>
<div className='function-item'>极速发货</div>
<div className='function-item'>渠道商免押</div>
</div>
<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'>¥200</span>
<span className='menoy-left'>¥{detail?.minRent}</span>
<span className='menoy-right'>/天起</span>
</div>
<div className='classification'></div>
......@@ -38,9 +62,10 @@ export default function EquipmentLeasingDetail() {
更多租金规则请前往【云享飞】微信小程序查
</div>
<Divider className='divider'>商品详情</Divider>
<div style={{ textAlign: "center" }}>
<AImage fallback={errImg} width={1080}></AImage>
</div>
{
detail?.wareDetailContent ? <div style={{ textAlign: "center" }} dangerouslySetInnerHTML={{ __html: detail?.wareDetailContent}}>
</div> : <div style={{ textAlign: "center" }} ></div>
}
</Box>
</Layout>
)
......
pages/equipmentLeasing/detail/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request';
export interface GetWebDeviceDetailParams {
id:number
}
export interface WareImgsType {
id: number,
wareInfoId: number | null,
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
}
export default {
//web-设备租赁-详情
listDetailDeviceInfo: (params: GetWebDeviceDetailParams): Promise<Response<GetWebDeviceDetailResult>> => {
return request('/pms/webDevice/detail', 'get', params)
}
}
\ No newline at end of file
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';
export default function PicturePreview() {
import {WareImgsType} from '../../api';
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'
]
// 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 [activeImgIndex,setActiveImgIndex] = useState(0)
......@@ -63,7 +70,7 @@ export default function PicturePreview() {
ref={moveBox}>
</div>
{/* <!-- 主图 --> */}
<img src={imgList[activeImgIndex]}
<img src={imgList && imgList[activeImgIndex].imgUrl}
className="img_small"
alt=""/>
{/* <!-- 放大区域 --> */}
......@@ -71,30 +78,30 @@ export default function PicturePreview() {
ref={mask}></div>
{/* <!-- 大图预览图 --> */}
<div className="img_big">
<img src={imgList[activeImgIndex]}
<img src={imgList && imgList[activeImgIndex].imgUrl}
ref={big}
alt=""/>
</div>
</div>
{/* <!-- 缩略图列表 --> */}
<div className="img_list_wrapper">
<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)=>(
imgList?.map((item,index)=>(
<img
onMouseOver={()=>handleChangeImg(index)}
key={index}
className={`${activeImgIndex === index ? 'activeImg' : ''}`}
src={item}
src={item.imgUrl}
alt="" />
))
}
</div>
</div>
<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/detail/styled.tsx
......@@ -11,7 +11,6 @@ export const Box = styled.div`
height: 300px;
margin-left: 30px;
.title{
width: 283px;
height: 26px;
font-size: 28px;
margin-top: 5px;
......@@ -28,6 +27,9 @@ export const Box = styled.div`
height: 45px;
margin-top: 17px;
background: linear-gradient(90deg, #D7F7F5 0%, #EEFDE9 100%);
&.not{
background: none;
}
&-item{
}
}
......
pages/equipmentLeasing/index.page.tsx
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { Button, Select, Space, Tag } from "antd";
import { Pagination } from "antd";
import {Box} from './styled';
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
import Filter, { FilterResult } from "~/components/filter";
import Filter, { FilterResult , AdapterResult} from "~/components/filter";
import Image from 'next/image';
import { FilterOptionResp } from "~/components/filter/api";
import api,{Device,Advertisement} from './api';
// 此函数在构建时被调用
export async function getStaticProps() {
......@@ -21,17 +20,17 @@ type Props = {
};
export default function EquipmentLeasing(props:Props) {
const router = useRouter();
const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const [rightProductList, setRightProductList] = useState(Array<{element:JSX.Element}>);
const router = useRouter();
const leftDom = (item:Device)=>{
return (<div key={item.id} className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}>
return (<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" width={116} height={116}/> </div>
</div>
<div className="item-bottom">
<div className="item-bottom-title">{item.wareTitle}</div>
<div className="item-bottom-title" title={item.wareTitle}>{item.wareTitle}</div>
<div className="item-bottom-price">
<span className="money">¥{item.minRent}</span>
<span className="unit">/天起</span>
......@@ -48,38 +47,90 @@ export default function EquipmentLeasing(props:Props) {
)
}
const onFilterChange = (filterResult: FilterResult) => {
console.log('filterResult', filterResult)
}
const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
const [count, setCount] = useState(0); //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 16,
}); //分页器对象
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
useEffect(() => {
//中断前一次列表请求
abort?.abort();
setAbort(new AbortController());
}, [filterResult, pageParams]);
//端口列表请求
useEffect(() => {
api
.listPageDeviceInfo({
pageNo: 1,
pageSize: 10,
})
.listPageDeviceInfo(
{
...filterResult,
...pageParams,
...router.query
},
{
signal: abort?.signal,
}
)
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || [])
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
setCount(res.result?.totalCount || 0);
});
}, [abort]);
const onFilterChange = (
filterResult: FilterResult,
adapterFilterResult: AdapterResult
) => {
console.log("filterResult", filterResult, adapterFilterResult);
setFilterResult(adapterFilterResult);
};
useEffect(() => {
api
.listAdvertisementInfo()
.then((res) => {
setRightProductList(res.result?.map(item=>{return { element:rightDom(item) }}) || [])
});
}, []);
useEffect(()=>{
if (router.query) {
setFilterResult({...router.query});
}
},[router])
return (
<Layout>
<Box>
<Filter
types={[ "地域", "类目", "品牌", "型号"]}
types={[ "地域", "类目", "设备品牌", "设备型号"]}
showResultItem
onChange={onFilterChange}
></Filter>
<div style={{paddingTop:13}}>
<ContentBox boxIndex={4} leftcontentstyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightProductList}}/>
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div>
</Box>
</Layout>
......
pages/equipmentLeasing/styled.tsx
......@@ -34,6 +34,9 @@ export const Box = styled.div`
font-weight: bold;
color: #333333;
line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-price{
.money{
......
pages/flyingHandService/api/index.tsx
......@@ -27,9 +27,29 @@ export interface ListPageFlyingInfoResp {
}
export interface SkillsType {
type: string;
id: 1,
skillsName: string
}
export interface RegionResp {
"childInfo": RegionResp[] | null,
"id": number,
"level": number,
"name": string,
"pid": number
}
export default {
//web-作业服务-分页
listPageJobServicesInfo: (params: ListPageFlyingInfoParams): Promise<Response<ListPageFlyingInfoResp>> => {
return request('/release/curriculum/queryCurriculumInfoList', 'post', params)
}
},
region: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/getSecondDistrictInfo');
},
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getIndustryFlightSkills');
},
}
\ No newline at end of file
pages/flyingHandService/index.page.tsx
import React , {useEffect,useState} from 'react';
import {Box} from './styled';
import Image from 'next/image';
import { Button, Select, Space } from "antd";
import { Button, Select, Space , Pagination , Cascader } from "antd";
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
import api , {Flying} from "./api";
import api , {Flying,SkillsType,RegionResp} from "./api";
import {useRouter} from 'next/router';
interface FilterInfoParams {
regionId?:number,
flightSkillsId?:number,
licenseId?:number
}
export default function FlyingHandService() {
const router = useRouter()
const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/12d624b0-1250-44a6-9a3f-9025725a2adc.jpg"])
const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/12d624b0-1250-44a6-9a3f-9025725a2adc.jpg"]
)
const [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp> )
const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType> )
const leftDom = (item:Flying)=>{
return (<div className='item' key={item.id}>
<div className='item-top'>
<Image src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt='#' width={220} height={160}/>
{/* <img src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt="" /> */}
</div>
<div className='item-bottom'>
<div className="bottom-title">{item.curriculumName}</div>
......@@ -41,55 +49,123 @@ export default function FlyingHandService() {
</div>)
}
const onProvinceChange = (value: string) => {
console.log("省", value);
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 12,
}); //分页器对象
const [filterParams,setFilterParams] = useState<FilterInfoParams>()
const [count, setCount] = useState(0); //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
useEffect(() => {
//中断前一次列表请求
abort?.abort();
setAbort(new AbortController());
}, [filterParams,pageParams]);
//端口列表请求
useEffect(() => {
api
.listPageJobServicesInfo({
pageNo: 1,
pageSize: 12,
})
.listPageJobServicesInfo(
{
...pageParams,
...filterParams,
...router.query
},
)
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || [])
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
setCount(res.result?.totalCount || 0);
});
}, [abort]);
const onProvinceChange = (value: string, type:string) => {
if (type === '考证') {
setFilterParams((props)=>{
return {
...props,
licenseId:Number(value)
}
})
}else{
setFilterParams((props)=>{
return {
...props,
flightSkillsId:Number(value)
}
})
}
};
const onChange = (value: any) => {
console.log(value);
};
useEffect(() => {
setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
api
.region()
.then((res) => {
setSecondDistrictInfo(res.result || [])
});
api
.IndustryFlightSkills()
.then((res) => {
setFlightSkillsList(res.result || [])
});
}, []);
useEffect(()=>{
if (Object.keys(router.query).length) {
setFilterParams((props)=>{
return {
...props,
...router.query
}
});
}
},[router])
return (
<Layout>
<Box>
<div className='flyingTop'>
<div className='flyingTop-left'>
<Space>
<Select
{/* <Select
className='selectItem'
bordered={false}
popupMatchSelectWidth={false}
placeholder="区域"
size="large"
onChange={onProvinceChange}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
options={secondDistrictInfo}
/> */}
<Cascader clearIcon placeholder="地域" bordered={false} className='selectItem' size="large" fieldNames={{ label: "name", value: "id", children: "childInfo" }} options={secondDistrictInfo} onChange={onChange} changeOnSelect />
<Select
className='selectItem'
bordered={false}
popupMatchSelectWidth={false}
placeholder="考证"
size="large"
onChange={onProvinceChange}
onChange={(value)=>onProvinceChange(value,"考证")}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
{ value: "1", label: "视距内驾驶员" },
{ value: "2", label: "视距外驾驶员" },
{ value: "3", label: "教员" },
]}
clearIcon
/>
<Select
className='selectItem'
......@@ -97,19 +173,26 @@ export default function FlyingHandService() {
popupMatchSelectWidth={false}
placeholder="技能"
size="large"
onChange={onProvinceChange}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
onChange={(value)=>onProvinceChange(value,"技能")}
options={flightSkillsList}
fieldNames={{value:"id",label:"skillsName"}}
clearIcon
/>
</Space>
</div>
<Button type="primary" className='btn'>报名学习课程</Button>
</div>
<ContentBox boxIndex={4} leftcontentstyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightDomList}}/>
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</Box>
</Layout>
);
......
pages/home/waterfallFlowBody/api/index.ts
import request, { Response } from '~/api/request';
export interface AllType {
type?: string;
id?: number,
name?: string,
appName?: string,
......@@ -27,6 +28,7 @@ export interface AllType {
}
export interface FilterOptionResp {
type: string;
id: number,
name: string
}
......@@ -54,7 +56,8 @@ export const equipmentLeasingApi = {
export interface AppType {
id: number,
appName: string,
createTime: string
createTime: string,
type:string
}
export interface IndustryType {
......@@ -66,7 +69,8 @@ export interface IndustryType {
propagate1: string,
propagate2: string,
image: string,
video: string
video: string,
type:string
}
export const jobServicesApi = {
......@@ -91,6 +95,7 @@ export const mallApi = {
}
export interface SkillsType {
type: string;
id: 1,
skillsName: string
}
......
pages/home/waterfallFlowBody/components/map/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request';
export interface PositioningInfoParams {
lat:number,
lon:number
}
export interface Entiy {
dizhi: string,
jd: number,
wd: number,
range: number
}
export interface ListPageJobInfoResp {
id: number,
adCode: string,
province: string,
locationList: Array<Entiy>
}
export default {
//web-作业服务-分页
listPositioningInfo: (params: PositioningInfoParams): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/website/getWebsiteList', 'get', params )
},
}
\ No newline at end of file
pages/home/waterfallFlowBody/components/map/index.tsx
import React, { Component, useEffect } from 'react';
import React, { Component, useEffect, useState } from 'react';
import {Box} from './styled';
import api from './api';
export default function MapComponent() {
let map
const init =async ()=>{
const [mapItem,setMapItem] = useState(0)
let map:any
const init = async ()=>{
try {
const AMapLoader = await import(/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader');
AMapLoader.load({
......@@ -17,6 +21,7 @@ export default function MapComponent() {
zoom: 11, // 初始化地图级别
center: [113.93029,22.53291], // 初始化地图中心点位置
});
mapEntiy(0,AMap)
})
.catch(e => {
console.log(e);
......@@ -26,16 +31,63 @@ export default function MapComponent() {
}
}
useEffect(()=>{
init()
(async()=>{
await init()
})()
},[])
const addEntiy = (AMap:any,lan:any,lon:any) => {
let lngLat = new AMap.LngLat(lan.trim(), lon.trim())
// 转高德坐标系
AMap.convertFrom(lngLat, 'gps', function (info, result) {
lngLat = result.locations[0]// 转换后的坐标位置
var marker = new AMap.Marker({
position: lngLat,
map
})
AMap.event.addListener(marker, 'click', (e) => {
map.AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {
var infoWindow = new SimpleInfoWindow({
infoTitle: '<strong>这是标题</strong>',
infoBody: '<p>这是信息</p>',
offset: new AMap.Pixel(0, -20),
autoMove: true
})
infoWindow.open(map, e.target.getPosition())
// 最坑的就是这一步了，他的infowindow没有点击事件，所以infoWindow.get$Container()会返回这个infowindow（jquery）对象
let infoEle = infoWindow.get$Container()
//给infowindow添加点击事件，并在回调函数中处理业务或者跳转等
infoEle.on('click', (e) => {
// router.push({name: 'proinfo', params: pro})
})
})
})
})
}
const mapEntiy = (index:number,AMap?:any) => {
api.listPositioningInfo({
lat:113.944825,
lon:22.573664
}).then(res=>{
const list = res.result?.map(item=>item.locationList).flat().filter((item:{dizhi:string})=>item.dizhi.includes("广东省"))
console.log("ajksbhdkjasgdbjahks",list);
list.map(item=>{
addEntiy(AMap,item.jd,item.wd)
})
setMapItem(index)
})
}
return (
<Box className='right-box-item'>
<div id="container" className="map" ></div>
<div className='map-dosome'>
<div>服务网点</div>
<div>租赁网点</div>
<div>培训网点</div>
<div>更多网点</div>
<div className={mapItem === 0 ? "active" : ''} onClick={()=>mapEntiy(0)}>服务网点</div>
<div className={mapItem === 1 ? "active" : ''} onClick={()=>mapEntiy(1)}>租赁网点</div>
<div className={mapItem === 2 ? "active" : ''} onClick={()=>mapEntiy(2)}>培训网点</div>
<div className={mapItem === 3 ? "active" : ''} onClick={()=>mapEntiy(3)}>更多网点</div>
</div>
</Box>
)
......
pages/home/waterfallFlowBody/components/map/styled.tsx
......@@ -35,5 +35,9 @@ export const Box = styled.div`
height: 52px;
background: #ffffff;
border-radius: 0px 0px 6px 6px;
cursor: pointer;
.active{
color:#FF552D;
}
}
`;
pages/home/waterfallFlowBody/index.tsx
import React, { useEffect, useState } from "react";
import { Space, Select, Button } from "antd";
import Image from "next/image";
import {useRouter} from 'next/router';
import { Box } from "./styled";
import ContentBox from "~/components/contentBox";
import RotationChart from "./components/rotationChart";
......@@ -20,8 +21,14 @@ import { FilterOptionResp,
flightSkillsApi ,
listNewsApi} from "./api";
import { BaseOptionType , DefaultOptionType } from "antd/es/select";
// const icon = "error";
interface ColumnsType {
title:string,
router:string
}
export default function WaterfallFlowBody() {
const router = useRouter()
const onMoreChange = (value: string) => {
console.log("更多", value);
};
......@@ -31,19 +38,48 @@ export default function WaterfallFlowBody() {
const [moreEqList,setMoreEqList] = useState<any>()
const columns = ["无人机出租","无人机服务","无人机销售","无人机保险","无人机培训","无人机工具软件"];
const columns = [
{
title:"无人机出租",
router:"/equipmentLeasing"
},
{
title:"无人机服务",
router:"/jobServices"
},
{
title:"无人机销售",
router:"/mall"
},
{
title:"无人机保险",
router:""
},
{
title:"无人机培训",
router:"flyingHandService"
},
{
title:"无人机工具软件",
router:""
}
];
const [leftDomList,setLeftDomList] = useState(Array<{element:JSX.Element}>)
const [rightTopDomList,setRightTopDomList] = useState<JSX.Element>()
const [rightBottomDomList,setRightBottomDomList] = useState<JSX.Element>()
const {deviceCategory,deviceBrand,deviceModel} = equipmentLeasingApi
const eqApiTypeList = ["categoryId","brandId","modelId"]
const {listAllAppType,listAllIndustry} = jobServicesApi
const jobApiTypeList = ["industryId","appTypeId"]
const {listAllCategory,listAllParts,listAllQuality} = mallApi
const mallApiTypeList = ["brandId","productCategoryId","partsId","modelId","qualityId"]
const {IndustryFlightSkills} = flightSkillsApi
const flightApiTypeList = ["licenseId","flightSkillsId"]
......@@ -56,10 +92,32 @@ const {IndustryFlightSkills} = flightSkillsApi
let res5 = await Promise.all([IndustryFlightSkills()])
// let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
const resValuelist1 = res1.map((item,index)=>{
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it})
}).flat()
const resValuelist2 = res2.map((item,index)=>{
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it})
}).flat()
const resValuelist3 = res3.map((item,index)=>{
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it})
}).flat()
const resValuelist5 = res5.map((item,index)=>{
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it})
}).flat()
// console.log("测试数据1");
// console.log("测试数据2",);
// console.log("测试数据3",res3.map((item,index)=>{
// return item.result?.map(it=>{it.type = mallApiTypeList[index];return it})
// }));
// console.log("测试数据5",res5.map((item,index)=>{
// return item.result?.map(it=>{it.type = flightApiTypeList[index];return it})
// }));
let res7 = await listNewsApi.listNewsPage({pageNo:1,pageSize:10})
let res8 = await listNewsApi.listNewTenderInfo({pageNo:1,pageSize:10})
const listValue:any = [res1.map(item=>item.result).flat(),res2.map(item=>item.result).flat(),res3.map(item=>item.result).flat(),[],res5.map(item=>item.result).flat(),[]]
console.log(res1.map(item=>item.result).flat());
const listValue:any = [resValuelist1,resValuelist2,resValuelist3,[],resValuelist5.flat(),[]]
setMoreEqList(res1.map(item=>item.result).flat())
setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,listValue)}}))
......@@ -79,16 +137,23 @@ const {IndustryFlightSkills} = flightSkillsApi
// })
},[])
const leftDom = (item:string,index:number,resultList:
const routerPath = (item:AllType,index:number) => {
router.push({
pathname: columns[index].router,
query: { [item?.type!]: item?.id! },
})
}
const leftDom = (item:ColumnsType,index:number,resultList:
Array<Array<AllType>>) => {
return (
<div key={item} className="item">
<div key={item.title} className="item">
<div className="item-title">
<div className="item-left">
<div className="item-left-icon">
<Image src={icon} alt="#" />
</div>
<div className="item-left-label">{item}</div>
<div className="item-left-label">{item.title}</div>
</div>
<div>
<Select
......@@ -105,8 +170,8 @@ const {IndustryFlightSkills} = flightSkillsApi
<Space size={[10, 8]} wrap>
{
index === 3 ? list.map(item=><div key={item} className="item-bubble">{item}</div>) : index === 5 ? list2.map(item=><div key={item} className="item-bubble">{item}</div>):
resultList[index].map((item,index)=>{
return <div className="item-bubble">{item.name || item.appName || item.skillsName}</div>
resultList[index].map((item)=>{
return <div key={item?.name || item?.appName || item?.skillsName} className="item-bubble" onClick={()=>routerPath(item,index)}>{item?.name || item?.appName || item?.skillsName}</div>
})
}
</Space>
......@@ -121,7 +186,7 @@ const {IndustryFlightSkills} = flightSkillsApi
<div className="title">行业新闻</div>
<div className="body">
{
list.map(item=>(<div key={item.id} className="body-item">
list?.map(item=>(<div key={item.id} className="body-item">
<div className="item-label">
{item.newsTitle}
</div>
......@@ -141,7 +206,7 @@ const {IndustryFlightSkills} = flightSkillsApi
<div className="title">招标快讯</div>
<div className="body">
{
list.map(item=>(<div className="body-item">
list?.map(item=>(<div key={item.id} className="body-item">
<div className="item-label">
<div className="label-top" title={item.tenderContent}>
{item.tenderContent}
......@@ -168,15 +233,15 @@ const {IndustryFlightSkills} = flightSkillsApi
boxIndex={2}
leftRenderDom={{
columns: [
{ noFor: true, element: <RotationChart /> },
...leftDomList
// { noFor: true, element: <RotationChart /> },
// ...leftDomList
],
}}
rightRenderDom={{
columns: [
{ element: <Map /> },
{ element: rightTopDomList as JSX.Element},
{ element: rightBottomDomList as JSX.Element},
// { element: rightTopDomList as JSX.Element},
// { element: rightBottomDomList as JSX.Element},
],
}}
/>
......
pages/home/waterfallFlowBody/styled.tsx
......@@ -12,7 +12,6 @@ export const Box = styled.div`
.item {
height: 343px;
transition: all 0.5s;
cursor: pointer;
&-title {
display: flex;
justify-content: space-between;
......
pages/jobServices/api/index.tsx
......@@ -28,7 +28,7 @@ export interface ListPageJobInfoResp {
export default {
//web-作业服务-分页
listPageJobServicesInfo: (params: ListPageJobInfoParams): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/work/queryTaskServiceList', 'post', params)
}
listPageJobServicesInfo: (params: ListPageJobInfoParams,option:{}): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/work/queryTaskServiceList', 'post', params,option)
},
}
\ No newline at end of file
pages/jobServices/detail/[pid].page.tsx → pages/jobServices/detail/[id].page.tsx
import React from 'react'
import React,{useEffect, useState} from 'react'
import Layout from "~/components/layout";
import {Box} from './styled';
import { Tabs , Button } from 'antd';
import type { TabsProps } from 'antd';
import Evaluate from './components/evaluate';
import { useRouter } from "next/router";
import api , {ListPageJobInfoResp} from './api';
import Image from 'next/image';
export default function JobServicesDetail() {
const router = useRouter();
const [id, setId] = useState<number | null>(null);
const [detail,setDetail] = useState<ListPageJobInfoResp | null>()
const onChange = (key: string) => {
console.log(key);
};
......@@ -14,24 +22,41 @@ export default function JobServicesDetail() {
{
key: '1',
label: `团队介绍`,
children: `详情`,
children: <Image width={1100} height={800} src={detail?.teamPoster ? detail?.teamPoster : ''} alt='error'/>,
},
{
key: '2',
label: `团队评价`,
children: <Evaluate />,
children: <Evaluate evaluateInfo={detail?.evaluateInfo!}/>,
},
];
useEffect(()=>{
setId(Number(router.query.id))
},[router])
useEffect(() => {
if (id) {
api
.listDetailJobServicesInfo({id})
.then((res) => {
setDetail(res.result || null);
});
}
console.log(id);
}, [id]);
return (
<Layout>
<Box>
<div className='top'>
<div className="top-image"></div>
<div className="top-image">
<Image width={300} height={300} src={detail?.pictureUrl ? detail?.pictureUrl : ''} alt='error'/>
</div>
<div className='top-right'>
<div className='right-top'>
<div className='title'>
农田测绘
{detail?.serviceName}
</div>
<div className='detail'>
<div className='tab'>专业飞手</div>
......
pages/jobServices/detail/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request';
export interface ListPageJobInfoParams {
pageNo:number,
pageSize:number,
appTypeId?:number,
industryId?:number,
inspectionName?:string,
string?:number,
regionId?:number,
}
export interface JobDetail {
id?: number,
content?: string,
contentImgs?: string[] | null,
contentVideo?: string | null,
star?: number,
img?: string | null,
type?: number
}
export interface ListPageJobInfoResp {
id: number,
serviceName: string,
pictureUrl: string,
videoUrl: string,
teamPoster:string,
evaluateInfo:Array<JobDetail>,
item:number
}
export interface GetJobServicesDetailParams {
id: number
}
export default {
//web-作业服务-详情
listDetailJobServicesInfo: (params:GetJobServicesDetailParams): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/work/selectInspection', 'get', params)
},
}
\ No newline at end of file
pages/jobServices/detail/components/evaluate/index.tsx
......@@ -2,33 +2,37 @@ import React from 'react'
import {Box} from './styled';
import { Rate } from 'antd';
import Image from 'next/image';
import {JobDetail} from '../../api';
export default function Evaluate() {
interface EvaluateType {
evaluateInfo: Array<JobDetail>
}
const list = [{},{},{},{}]
export default function Evaluate(props:EvaluateType) {
const list = [{},{},{},{}]
const { evaluateInfo } = props
console.log(evaluateInfo);
return (
<Box>
{
list.map((item, i)=>(
evaluateInfo?.map((item, i)=>(
<div className='item' key={i}>
<div className='item-user'>
<div className='item-user-image'>
<Image className='image' height={42} width={42} src="" alt='#'/>
<Image className='image' height={42} width={42} src={item.img ? item.img : ''} alt='#'/>
</div>
<div className='item-user-info'>
<div className="item-user-info-name">湖南139*****098</div>
<Rate style={{height:30}} disabled defaultValue={2} />
<div className="item-user-info-name">{item.star}</div>
<Rate style={{height:30}} disabled defaultValue={item.star} />
</div>
</div>
<div className="item-content">
<div className='item-content-label'>飞手很专业，不愧是经过专业培训的，及时高</div>
<div className='item-content-label'>{item.content}</div>
<div className='item-content-image'>
<div className='image-item'></div>
<div className='image-item'></div>
<div className='image-item'></div>
<div className='image-item'></div>
<div className='image-item'></div>
{
item.contentImgs?.map(item=><div className='image-item'><Image width={80} height={80} src={item} alt='error'/></div>)
}
</div>
<div className='item-content-time'>
3月4日
......
pages/jobServices/detail/components/evaluate/styled.tsx
......@@ -6,9 +6,10 @@ export default function Style() {
export const Box = styled.div`
box-sizing: border-box;
overflow-y: auto;
height: 900px;
.item{
height: 180px;
margin-bottom: 30px;
&-user{
display: flex;
align-items: center;
......
pages/jobServices/detail/styled.tsx
......@@ -28,7 +28,6 @@ export const Box = styled.div`
height: 300px;
.right-top{
.title{
width: 283px;
height: 26px;
font-size: 28px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
......
pages/jobServices/index.page.tsx
import React, { useEffect, useState } from "react";
import {Box} from './styled';
import { Button, Select, Space, Tag } from "antd";
import { Pagination } from "antd";
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
import { useRouter } from "next/router";
import Filter, { FilterResult } from "~/components/filter";
import Filter, { FilterResult , AdapterResult} from "~/components/filter";
import api , {Job} from "./api";
import Image from 'next/image';
// 此函数在构建时被调用
......@@ -19,12 +19,13 @@ interface ImageListType {
}
export default function JobServices() {
const router = useRouter();
const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg"])
const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
const leftDom = (item:Job) => {
return (<div key={item.id} className='item' onClick={() => router.push('/jobServices/detail/1')}>
return (<div key={item.id} className='item' onClick={() => router.push(`/jobServices/detail/${item.id}`)}>
<div className="item-top">
<div className="value">
<div className="value-left">
......@@ -47,30 +48,77 @@ export default function JobServices() {
</div>)
}
const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 16,
}); //分页器对象
const [count, setCount] = useState(0); //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
useEffect(() => {
//中断前一次列表请求
abort?.abort();
setAbort(new AbortController());
}, [filterResult, pageParams]);
//端口列表请求
useEffect(() => {
api
.listPageJobServicesInfo({
pageNo: 1,
pageSize: 10,
})
.listPageJobServicesInfo(
{
...filterResult,
...pageParams,
...router.query
},
{
signal: abort?.signal,
}
)
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element: leftDom(item) }}) || [])
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
setCount(res.result?.totalCount || 0);
});
}, [abort]);
const onFilterChange = (
filterResult: FilterResult,
adapterFilterResult: AdapterResult
) => {
console.log("filterResult", filterResult, adapterFilterResult);
setFilterResult(adapterFilterResult);
};
const [query, setQuery] = useState<string | string[]>();
useEffect(() => {
console.log(router.query);
// if(router.query) setQuery(router.query)
setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
}, []);
const onFilterChange = (filterResult: FilterResult) => {
console.log('filterResult', filterResult)
useEffect(()=>{
if (router.query) {
setFilterResult({...router.query});
}
},[router])
return (
<Layout>
<Box>
<Filter
types={[ "地域", "类目", "品牌"]}
types={[ "地域", "行业", "应用"]}
showResultItem
onChange={onFilterChange}
></Filter>
......@@ -80,6 +128,16 @@ export default function JobServices() {
rightRenderDom={{columns:rightDomList}}
leftcontentstyle={{width:"924px",margin:{top:0,right:"16px",bottom:"16px",left:0}}}
/>
<Pagination
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div>
</Box>
</Layout>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论