Skip to content

W
web
提交 35ecb3b6 作者: 曹云
操作

添-作业服务，飞手培训-分页数据

上级 a955d0d5
正在显示 包含 210 行增加 和 189 行删除
components/contentBox/index.tsx
...@@ -7,7 +7,7 @@ export default function ContentBox(props:BoxProps) { ...@@ -7,7 +7,7 @@ export default function ContentBox(props:BoxProps) {
console.log(props); console.log(props);
return ( return (
<Box> <Box>
<Left boxIndex={props.boxIndex} leftRenderDom={props.leftRenderDom} leftContentStyle={props.leftContentStyle}/> <Left boxIndex={props.boxIndex} leftRenderDom={props.leftRenderDom} leftcontentstyle={props.leftcontentstyle}/>
<Right rightRenderDom={props.rightRenderDom}/> <Right rightRenderDom={props.rightRenderDom}/>
</Box> </Box>
) )
......
components/contentBox/interface.ts
...@@ -4,7 +4,7 @@ export interface DomType { ...@@ -4,7 +4,7 @@ export interface DomType {
export interface leftBoxProps { export interface leftBoxProps {
boxIndex: number, boxIndex: number,
leftRenderDom: DomType, leftRenderDom: DomType,
leftContentStyle?:{ leftcontentstyle?:{
width?:string, width?:string,
margin?:{ margin?:{
top:number | string, top:number | string,
...@@ -21,7 +21,7 @@ export interface rightBoxProps { ...@@ -21,7 +21,7 @@ export interface rightBoxProps {
export interface BoxProps { export interface BoxProps {
boxIndex: number, boxIndex: number,
leftRenderDom: DomType, leftRenderDom: DomType,
leftContentStyle?:{ leftcontentstyle?:{
width?:string, width?:string,
margin?:{ margin?:{
top:number | string, top:number | string,
......
components/contentBox/left/index.tsx
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import { Box } from './styled'; import { Box } from './styled';
import {leftBoxProps} from '../interface'; import {leftBoxProps} from '../interface';
export default function Left(props:leftBoxProps) { export default function Left(props:leftBoxProps) {
const { boxIndex , leftRenderDom , leftContentStyle} = props const { boxIndex , leftRenderDom , leftcontentstyle} = props
return ( return (
<div> <div>
...@@ -15,7 +15,7 @@ export default function Left(props:leftBoxProps) { ...@@ -15,7 +15,7 @@ export default function Left(props:leftBoxProps) {
}) })
} }
{ {
<Box index={boxIndex} leftContentStyle={leftContentStyle}> <Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
{ {
leftRenderDom.columns.map((item)=>{ leftRenderDom.columns.map((item)=>{
if (!item.noFor) { if (!item.noFor) {
......
components/contentBox/left/styled.tsx
import styled from "styled-components" import styled from "styled-components"
export interface BoxProps { export interface BoxProps {
index:number, index:number,
leftContentStyle?:{ leftcontentstyle?:{
width?:string, width?:string,
margin?:{ margin?:{
top:number | string, top:number | string,
...@@ -17,17 +17,17 @@ export const Box = styled.div<BoxProps>` ...@@ -17,17 +17,17 @@ export const Box = styled.div<BoxProps>`
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: ${props => props.leftContentStyle?.width ? props.leftContentStyle?.width : "790px"}; width: ${props => props.leftcontentstyle?.width ? props.leftcontentstyle?.width : "790px"};
.item{ .item{
// 每个元素都要设置右边距margin-right（每个元素的左右间隙） // 每个元素都要设置右边距margin-right（每个元素的左右间隙）
// 同时设置下边距margin-bottom（每个元素的上下间隙） // 同时设置下边距margin-bottom（每个元素的上下间隙）
/* margin: 0 24px 15px 0; */ /* margin: 0 24px 15px 0; */
margin: ${props => props.leftContentStyle?.margin ? (`${props.leftContentStyle?.margin.top} ${props.leftContentStyle?.margin.right} ${props.leftContentStyle?.margin.bottom} ${props.leftContentStyle?.margin.left}`) : "0 24px 15px 0"};; margin: ${props => props.leftcontentstyle?.margin ? (`${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`) : "0 24px 15px 0"};;
width: calc((100% - ${props => props.index - 1} * ${props => props.leftContentStyle?.margin ? props.leftContentStyle?.margin.right : "24px" }) / ${props => props.index}); width: calc((100% - ${props => props.index - 1} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
// 这里一行显示index个，所以是/index，一行显示几个就除以几 // 这里一行显示index个，所以是/index，一行显示几个就除以几
// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整 // 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
min-width: calc((100% - ${props => props.index - 1} * ${props => props.leftContentStyle?.margin ? props.leftContentStyle?.margin.right : "24px" }) / ${props => props.index}); min-width: calc((100% - ${props => props.index - 1} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
max-width: calc((100% - ${props => props.index - 1} * ${props => props.leftContentStyle?.margin ? props.leftContentStyle?.margin.right : "24px" }) / ${props => props.index}); max-width: calc((100% - ${props => props.index - 1} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
// 每行最右侧的那个不设置右外边距 // 每行最右侧的那个不设置右外边距
&:nth-child(${props => props.index}n + ${props => props.index}) { &:nth-child(${props => props.index}n + ${props => props.index}) {
margin-right: 0; margin-right: 0;
......
next.config.js
...@@ -14,8 +14,8 @@ const nextConfig = { ...@@ -14,8 +14,8 @@ const nextConfig = {
async rewrites() { async rewrites() {
return [ return [
{ {
source: "/pms/:path*", source: "/:path*",
destination: "http://120.77.247.178/pms/:path*", destination: "http://120.77.247.178/:path*",
}, },
]; ];
}, },
......
pages/equipmentLeasing/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request';
export interface ListPageGoodsInfoParams {
"brandId"?: number,
"districtId"?: number,
"modelId"?: number,
"pageNo": number,
"pageSize": number,
"partsId"?: number,
"productCategoryId"?: number,
"qualityId"?: number
}
export interface Goods {
"createTime": string,
"directoryId": number,
"directoryName": string,
"goodsName": string,
"goodsOneLevelTypeName": string,
"goodsTwoLevelTypeName": string,
"id": number,
"imgUrl": string,
"isCoupons": number,
"status": number
}
export interface ListPageGoodsInfoResp {
"pageNo": 1,
"pageSize": 10,
"list": Array<Goods>,
"totalCount": 0,
"totalPage": 0
}
export default {
//web-设备租赁-分页
listPageGoodsInfo: (params: ListPageGoodsInfoParams): Promise<Response<ListPageGoodsInfoResp>> => {
return request('/pms/webProductMall/listPageGoodsInfo', 'post', params)
}
}
\ No newline at end of file
pages/equipmentLeasing/index.page.tsx
...@@ -8,36 +8,13 @@ import Filter, { FilterResult } from "~/components/filter"; ...@@ -8,36 +8,13 @@ import Filter, { FilterResult } from "~/components/filter";
import { FilterOptionResp } from "~/components/filter/api"; import { FilterOptionResp } from "~/components/filter/api";
// 此函数在构建时被调用 // 此函数在构建时被调用
export async function getStaticProps() { export async function getServerSideProps() {
//获取筛选数据，进行静态渲染
const brand = Filter.mallApi.brand();
const category = Filter.mallApi.category();
const model = Filter.mallApi.model();
const part = Filter.mallApi.part();
const quality = Filter.mallApi.quality();
const res = await Promise.all([brand, category, part, model, quality]);
return { return {
props: { props: {},
brandData: res[0].result || [],
categoryData: res[1].result || [],
partData: res[2].result || [],
modelData: res[3].result || [],
qualityData: res[4].result || [],
},
}; };
} }
type Props = { export default function EquipmentLeasing() {
brandData: Array<FilterOptionResp>;
categoryData: Array<FilterOptionResp>;
partData: Array<FilterOptionResp>;
modelData: Array<FilterOptionResp>;
qualityData: Array<FilterOptionResp>;
};
export default function EquipmentLeasing(props:Props) {
const router = useRouter(); const router = useRouter();
const leftDom = <div className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}> const leftDom = <div className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}>
...@@ -65,17 +42,12 @@ export default function EquipmentLeasing(props:Props) { ...@@ -65,17 +42,12 @@ export default function EquipmentLeasing(props:Props) {
<Layout> <Layout>
<Box> <Box>
<Filter <Filter
types={["类目", "地域", "品牌", "部件", "型号", "成色"]} types={[ "地域", "类目", "品牌", "型号"]}
showResultItem showResultItem
brandData={props.brandData}
categoryData={props.categoryData}
partData={props.partData}
modelData={props.modelData}
qualityData={props.qualityData}
onChange={onFilterChange} onChange={onFilterChange}
></Filter> ></Filter>
<div style={{paddingTop:13}}> <div style={{paddingTop:13}}>
<ContentBox boxIndex={4} leftContentStyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:rightDom},{element:rightDom}]}}/> <ContentBox boxIndex={4} leftcontentstyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:rightDom},{element:rightDom}]}}/>
</div> </div>
</Box> </Box>
</Layout> </Layout>
......
pages/flyingHandService/api/index.tsx 0 → 100644
import request, { Response } from '~/api/request';
export interface ListPageFlyingInfoParams {
pageNo: number,
pageSize: number,
flightSkillsId?:number,
licenseId?:number,
regionId?:number
}
export interface Flying {
curriculumName:string,
curriculumDesc:string,
supplierName:string,
free: 0 | 1,
price:number,
id:number,
}
export interface ListPageFlyingInfoResp {
pageNo: 1,
pageSize: 10,
list: Array<Flying>,
totalCount: 0,
totalPage: 0
}
export default {
//web-作业服务-分页
listPageJobServicesInfo: (params: ListPageFlyingInfoParams): Promise<Response<ListPageFlyingInfoResp>> => {
return request('/release/curriculum/queryCurriculumInfoList', 'post', params)
}
}
\ No newline at end of file
pages/flyingHandService/index.page.tsx
import React from 'react'; import React , {useEffect,useState} from 'react';
import {Box} from './styled'; import {Box} from './styled';
// import Image from 'next/image'; // import Image from 'next/image';
import { Button, Select, Space } from "antd"; import { Button, Select, Space } from "antd";
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox'; import ContentBox from '~/components/contentBox';
import api , {Flying} from "./api";
export default function FlyingHandService() { export default function FlyingHandService() {
const leftDom = <div className='item'> const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
const leftDom = (item:Flying)=>{
return (<div className='item' key={item.id}>
<div className='item-top'> <div className='item-top'>
{/* <Image src={require("./assets/icon.png")} alt='#'/> */} {/* <Image src={require("./assets/icon.png")} alt='#'/> */}
</div> </div>
<div className='item-bottom'> <div className='item-bottom'>
<div className="bottom-title">asdasdas</div> <div className="bottom-title">{item.curriculumName}</div>
<div className="bottom-details">多旋翼无人机设计课程多旋翼无人机设计课程多旋翼无人机设计课程，资源</div> <div className="bottom-details">{item.curriculumDesc}</div>
<div className='bottom-price'> <div className='bottom-price'>
<div className='bottom-price-left'>供应商简称</div> <div className='bottom-price-left' title={item.supplierName}>{item.supplierName}</div>
<div className='bottom-price-right'> <div className='bottom-price-right'>
{
item.free ? <div className='price-right-label'>{item.price}</div> : <div>
<span className='price-right-label'>限免</span> <span className='price-right-label'>限免</span>
<span className='price-right-money'>¥2999</span> <span className='price-right-money'>{`¥${item.price}`}</span>
</div> </div>
}
</div> </div>
</div> </div>
</div> </div>
</div>)
}
const rightDom = <div className='right-item'> const rightDom = <div className='right-item' key={1}>
</div> </div>
const onProvinceChange = (value: string) => { const onProvinceChange = (value: string) => {
console.log("省", value); console.log("省", value);
}; };
useEffect(() => {
api
.listPageJobServicesInfo({
pageNo: 1,
pageSize: 10,
})
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}))
});
}, []);
return ( return (
<Layout> <Layout>
<Box> <Box>
...@@ -82,7 +103,7 @@ export default function FlyingHandService() { ...@@ -82,7 +103,7 @@ export default function FlyingHandService() {
</div> </div>
<Button type="primary" className='btn'>报名学习课程</Button> <Button type="primary" className='btn'>报名学习课程</Button>
</div> </div>
<ContentBox boxIndex={4} leftContentStyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:rightDom}]}}/> <ContentBox boxIndex={4} leftcontentstyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:[{element:rightDom}]}}/>
</Box> </Box>
</Layout> </Layout>
); );
......
pages/flyingHandService/styled.tsx
...@@ -85,6 +85,7 @@ export const Box = styled.div` ...@@ -85,6 +85,7 @@ export const Box = styled.div`
&-left { &-left {
width: 100px; width: 100px;
height: 26px; height: 26px;
padding: 0 10px;
line-height: 26px; line-height: 26px;
background: #e7eeff; background: #e7eeff;
border-radius: 12px; border-radius: 12px;
...@@ -92,6 +93,9 @@ export const Box = styled.div` ...@@ -92,6 +93,9 @@ export const Box = styled.div`
font-size: 14px; font-size: 14px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #4280f9; color: #4280f9;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
&-right { &-right {
.price-right-label { .price-right-label {
...@@ -112,6 +116,7 @@ export const Box = styled.div` ...@@ -112,6 +116,7 @@ export const Box = styled.div`
color: #8790a2; color: #8790a2;
line-height: 16px; line-height: 16px;
-webkit-background-clip: text; -webkit-background-clip: text;
text-decoration: line-through;
} }
} }
} }
......
pages/jobServices/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 Job {
id:number,
serviceName:string,
teamName:string,
price:number,
}
export interface ListPageJobInfoResp {
pageNo: 1,
pageSize: 10,
list: Array<Job>,
totalCount: 0,
totalPage: 0
}
export default {
//web-作业服务-分页
listPageJobServicesInfo: (params: ListPageJobInfoParams): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/work/queryTaskServiceList', 'post', params)
}
}
\ No newline at end of file
pages/jobServices/index.page.tsx
...@@ -4,6 +4,15 @@ import { Button, Select, Space, Tag } from "antd"; ...@@ -4,6 +4,15 @@ import { Button, Select, Space, Tag } from "antd";
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox'; import ContentBox from '~/components/contentBox';
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Filter, { FilterResult } from "~/components/filter";
import api from "./api";
import {DomType} from '~/components/contentBox/interface';
// 此函数在构建时被调用
export async function getServerSideProps() {
return {
props: {},
};
}
export default function JobServices() { export default function JobServices() {
const router = useRouter(); const router = useRouter();
...@@ -28,153 +37,55 @@ export default function JobServices() { ...@@ -28,153 +37,55 @@ export default function JobServices() {
112312312312 112312312312
</div> </div>
const [productList, setProductList] = useState(Array<{}>); const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
useEffect(() => { useEffect(() => {
setProductList([{}, {}, {}, {}, {}, {}]); api
}, []); .listPageJobServicesInfo({
pageNo: 1,
const onProvinceChange = (value: string) => { pageSize: 10,
console.log("省", value); })
}; .then((res) => {
// setProductList(res.result?.list || []);
const onCityChange = (value: string) => { setProductList(res.result?.list.map(item=>{return { element:<div key={item.id} className='item' onClick={() => router.push('/jobServices/detail/1')}>
console.log("市", value); <div className="item-top">
}; <div className="value">
<div className="value-left">
<div className="label">{item.serviceName}</div>
<div className="com">{item.teamName}</div>
</div>
<div className="value-right"><span className="money">{item.price}</span> <span className="unit">/平</span></div>
</div>
</div>
<div className="item-bottom">
<div className="bottom-left">{ Math.round( Math.random()*(150-100)+100) }条评价</div>
<div className="bottom-right">专业飞手团队，精通巡航业务</div>
</div>
</div> }}))
const onMoreChange = (value: string) => { });
console.log("更多", value); }, []);
};
const onCloseTag = (e: React.MouseEvent<HTMLElement, MouseEvent>) => { const onFilterChange = (filterResult: FilterResult) => {
console.log("删除", e); console.log('filterResult', filterResult)
}; }
return ( return (
<Layout> <Layout>
<Box> <Box>
<div className="filter-wrap" style={{ marginBottom: "11px" }}> <Filter
<div className="filter-item"> types={[ "地域", "类目", "品牌", "型号"]}
<div className="filter-item__title">地域：</div> showResultItem
<div className="filter-item-main"> onChange={onFilterChange}
<Space size={40}> ></Filter>
<Select <div style={{marginTop:18}}>
bordered={false}
popupMatchSelectWidth={false}
placeholder="选择省"
onChange={onProvinceChange}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
<Select
bordered={false}
popupMatchSelectWidth={false}
placeholder="选择市"
onChange={onCityChange}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</Space>
</div>
</div>
</div>
<div className="filter-wrap" style={{marginBottom:24}}>
<div className="filter-item">
<div className="filter-item__title">行业：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
popupMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">服务：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
popupMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">应用：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
popupMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">已选：</div>
<div className="filter-item-main">
<Space size={10}>
<Tag closable onClose={onCloseTag}>
无人机
</Tag>
<Tag closable onClose={onCloseTag}>
无人机
</Tag>
</Space>
</div>
</div>
</div>
<ContentBox boxIndex={2} <ContentBox boxIndex={2}
leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} leftRenderDom={{columns:productList}}
rightRenderDom={{columns:[{element:rightDom}]}} rightRenderDom={{columns:[{element:rightDom}]}}
leftContentStyle={{width:"924px",margin:{top:0,right:"16px",bottom:"16px",left:0}}} leftcontentstyle={{width:"924px",margin:{top:0,right:"16px",bottom:"16px",left:0}}}
/> />
</div>
</Box> </Box>
</Layout> </Layout>
) )
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论