Skip to content

W
web
提交 675c0a83 作者: 翁进城
操作

Merge remote-tracking branch 'origin/caoyun'

上级 4f544209 c2801cef
正在显示 包含 205 行增加 和 156 行删除
components/contentBox/index.tsx
......@@ -7,7 +7,7 @@ export default function ContentBox(props:BoxProps) {
console.log(props);
return (
<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}/>
</Box>
)
......
components/contentBox/interface.ts
......@@ -4,7 +4,7 @@ export interface DomType {
export interface leftBoxProps {
boxIndex: number,
leftRenderDom: DomType,
leftContentStyle?:{
leftcontentstyle?:{
width?:string,
margin?:{
top:number | string,
......@@ -21,7 +21,7 @@ export interface rightBoxProps {
export interface BoxProps {
boxIndex: number,
leftRenderDom: DomType,
leftContentStyle?:{
leftcontentstyle?:{
width?:string,
margin?:{
top:number | string,
......
components/contentBox/left/index.tsx
......@@ -2,7 +2,7 @@ import React from 'react';
import { Box } from './styled';
import {leftBoxProps} from '../interface';
export default function Left(props:leftBoxProps) {
const { boxIndex , leftRenderDom , leftContentStyle} = props
const { boxIndex , leftRenderDom , leftcontentstyle} = props
return (
<div>
......@@ -15,7 +15,7 @@ export default function Left(props:leftBoxProps) {
})
}
{
<Box index={boxIndex} leftContentStyle={leftContentStyle}>
<Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
{
leftRenderDom.columns.map((item)=>{
if (!item.noFor) {
......
components/contentBox/left/styled.tsx
import styled from "styled-components"
export interface BoxProps {
index:number,
leftContentStyle?:{
leftcontentstyle?:{
width?:string,
margin?:{
top:number | string,
......@@ -17,17 +17,17 @@ export const Box = styled.div<BoxProps>`
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
width: ${props => props.leftContentStyle?.width ? props.leftContentStyle?.width : "790px"};
width: ${props => props.leftcontentstyle?.width ? props.leftcontentstyle?.width : "790px"};
.item{
// 每个元素都要设置右边距margin-right（每个元素的左右间隙）
// 同时设置下边距margin-bottom（每个元素的上下间隙）
/* 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"};;
width: calc((100% - ${props => props.index - 1} * ${props => props.leftContentStyle?.margin ? props.leftContentStyle?.margin.right : "24px" }) / ${props => props.index});
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});
// 这里一行显示index个，所以是/index，一行显示几个就除以几
// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
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});
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});
// 每行最右侧的那个不设置右外边距
&:nth-child(${props => props.index}n + ${props => props.index}) {
margin-right: 0;
......
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
......@@ -47,12 +47,12 @@ export default function EquipmentLeasing(props:Props) {
<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:[{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>
</Box>
</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 Image from 'next/image';
import { Button, Select, Space } from "antd";
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
import api , {Flying} from "./api";
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'>
{/* <Image src={require("./assets/icon.png")} alt='#'/> */}
</div>
<div className='item-bottom'>
<div className="bottom-title">asdasdas</div>
<div className="bottom-details">多旋翼无人机设计课程多旋翼无人机设计课程多旋翼无人机设计课程，资源</div>
<div className="bottom-title">{item.curriculumName}</div>
<div className="bottom-details">{item.curriculumDesc}</div>
<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'>
{
item.free ? <div className='price-right-label'>{item.price}</div> : <div>
<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>)
}
const rightDom = <div className='right-item'>
const rightDom = <div className='right-item' key={1}>
</div>
const onProvinceChange = (value: string) => {
console.log("省", value);
};
useEffect(() => {
api
.listPageJobServicesInfo({
pageNo: 1,
pageSize: 10,
})
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}))
});
}, []);
return (
<Layout>
<Box>
......@@ -82,7 +103,7 @@ export default function FlyingHandService() {
</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:[{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>
</Layout>
);
......
pages/flyingHandService/styled.tsx
......@@ -85,6 +85,7 @@ export const Box = styled.div`
&-left {
width: 100px;
height: 26px;
padding: 0 10px;
line-height: 26px;
background: #e7eeff;
border-radius: 12px;
......@@ -92,6 +93,9 @@ export const Box = styled.div`
font-size: 14px;
font-family: MicrosoftYaHei;
color: #4280f9;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-right {
.price-right-label {
......@@ -112,6 +116,7 @@ export const Box = styled.div`
color: #8790a2;
line-height: 16px;
-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";
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
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() {
const router = useRouter();
......@@ -28,153 +37,55 @@ export default function JobServices() {
112312312312
</div>
const [productList, setProductList] = useState(Array<{}>);
const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
useEffect(() => {
setProductList([{}, {}, {}, {}, {}, {}]);
}, []);
const onProvinceChange = (value: string) => {
console.log("省", value);
};
api
.listPageJobServicesInfo({
pageNo: 1,
pageSize: 10,
})
.then((res) => {
// setProductList(res.result?.list || []);
const onCityChange = (value: string) => {
console.log("市", value);
};
setProductList(res.result?.list.map(item=>{return { element:<div key={item.id} className='item' onClick={() => router.push('/jobServices/detail/1')}>
<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>) => {
console.log("删除", e);
};
const onFilterChange = (filterResult: FilterResult) => {
console.log('filterResult', filterResult)
}
return (
<Layout>
<Box>
<div className="filter-wrap" style={{ marginBottom: "11px" }}>
<div className="filter-item">
<div className="filter-item__title">地域：</div>
<div className="filter-item-main">
<Space size={40}>
<Select
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>
<Filter
types={[ "地域", "类目", "品牌", "型号"]}
showResultItem
onChange={onFilterChange}
></Filter>
<div style={{marginTop:18}}>
<ContentBox boxIndex={2}
leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}}
leftRenderDom={{columns:productList}}
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>
</Layout>
)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论