Skip to content

W
web
提交 58b10ac3 作者: 18928357778
操作

改-解决页面因为未给图片默认值出现白屏的错误，给新闻添加图片默认值

上级 010275b6
正在显示 包含 377 行增加 和 294 行删除
components/contentBox/left/index.tsx
import React from 'react';
import {Empty} from 'antd';
import { Box } from './styled';
import {leftBoxProps} from '../interface';
import React from "react";
import { Empty } from "antd";
import { Box } from "./styled";
import { leftBoxProps } from "../interface";
export default function Left(props: leftBoxProps) {
const { boxIndex, leftRenderDom, leftcontentstyle } = props;
export default function Left(props:leftBoxProps) {
const { boxIndex , leftRenderDom , leftcontentstyle} = props
return (
<div>
{leftRenderDom.columns.map((item) => {
if (item.noFor) {
return item.element;
}
return null;
})}
{
leftRenderDom.columns.map((item)=>{
if (item.noFor) {
return item.element
}
return null
})
}
{
<Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
{
leftRenderDom.columns.map((item)=>{
<Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
{leftRenderDom.columns.map((item) => {
if (!item.noFor) {
return item.element
return item.element;
}
return null
})
}
</Box>
}
{
!leftRenderDom.columns.length ? <Empty description={"暂无数据"}/> : null
return null;
})}
</Box>
}
{!leftRenderDom.columns.length ? (
<Empty description={"暂无数据"} />
) : null}
</div>
)
);
}
components/filter/index.tsx
......@@ -10,9 +10,8 @@ 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';
import DeviceBrand from "./compoents/deviceBrand";
import DeviceModel from "./compoents/deviceModel";
export type AdapterResult = {
brandId?: number;
......@@ -21,6 +20,9 @@ export type AdapterResult = {
partsId?: number;
productCategoryId?: number;
qualityId?: number;
industryId?: number;
appTypeId?: number;
categoryId?: number;
};
export type FilterResult = {
......@@ -30,16 +32,30 @@ export type FilterResult = {
part?: FilterOptionResp;
model?: FilterOptionResp;
quality?: FilterOptionResp;
industryId?: FilterOptionResp;
appTypeId?: FilterOptionResp;
categoryId?: FilterOptionResp;
};
type itemType = "类目" | "地域" | "品牌" | "部件" | "型号" | "成色" | "行业" | "应用" | "设备品牌" | "设备型号";
type itemType =
| "类目"
| "地域"
| "品牌"
| "部件"
| "型号"
| "成色"
| "行业"
| "应用"
| "设备品牌"
| "设备型号"
| "设备类目";
type Props = {
types: itemType[]; //需要包含的筛选条件项
showResultItem: Boolean; //显示结果栏
onChange: (
filterResult: FilterResult,
adapterFilterResult: AdapterResult, //适配器,直接用于接口请求
adapterFilterResult: AdapterResult //适配器,直接用于接口请求
) => void; //筛选条件更改事件
};
export default function Filter(props: Props) {
......@@ -51,17 +67,17 @@ export default function Filter(props: Props) {
};
useEffect(() => {
props.onChange(
result,
{
brandId: result.brand?.id,
districtId: result.region?.id,
modelId: result.model?.id,
partsId: result.part?.id,
productCategoryId: result.category?.id,
qualityId: result.quality?.id,
}
);
props.onChange(result, {
brandId: result.brand?.id,
districtId: result.region?.id,
modelId: result.model?.id,
partsId: result.part?.id,
productCategoryId: result.category?.id,
qualityId: result.quality?.id,
industryId: result.industryId?.id,
appTypeId: result.appTypeId?.id,
categoryId: result.categoryId?.id,
});
}, [result]);
const onDel = (key: string) => {
//@ts-ignore
......@@ -92,7 +108,7 @@ export default function Filter(props: Props) {
)}
{props.types.includes("设备品牌") && (
<DeviceBrand
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
onChange={(item: FilterOptionResp) => onChange(item, "brand")}
></DeviceBrand>
)}
{props.types.includes("类目") && (
......@@ -100,6 +116,11 @@ export default function Filter(props: Props) {
onChange={(item: FilterOptionResp) => onChange(item, "category")}
></CategoryItem>
)}
{props.types.includes("设备类目") && (
<CategoryItem
onChange={(item: FilterOptionResp) => onChange(item, "categoryId")}
></CategoryItem>
)}
{props.types.includes("部件") && (
<PartItem
onChange={(item: FilterOptionResp) => onChange(item, "part")}
......@@ -112,7 +133,7 @@ export default function Filter(props: Props) {
)}
{props.types.includes("设备型号") && (
<DeviceModel
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
onChange={(item: FilterOptionResp) => onChange(item, "model")}
></DeviceModel>
)}
{props.types.includes("成色") && (
......@@ -122,15 +143,15 @@ export default function Filter(props: Props) {
)}
{props.types.includes("行业") && (
<Industry
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
onChange={(item: FilterOptionResp) => onChange(item, "industryId")}
></Industry>
)}
{props.types.includes("应用") && (
<AppType
onChange={(item: FilterOptionResp) => onChange(item, "quality")}
onChange={(item: FilterOptionResp) => onChange(item, "appTypeId")}
></AppType>
)}
{props.showResultItem && (
<ResultItem data={result} onDel={onDel}></ResultItem>
)}
......
pages/equipmentLeasing/index.page.tsx
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { Pagination } from "antd";
import {Box} from './styled';
import { Box } from "./styled";
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
import Filter, { FilterResult , AdapterResult} from "~/components/filter";
import Image from 'next/image';
import api,{Device,Advertisement} from './api';
import ContentBox from "~/components/contentBox";
import Filter, { FilterResult, AdapterResult } from "~/components/filter";
import Image from "next/image";
import api, { Device, Advertisement } from "./api";
// 此函数在构建时被调用
export async function getStaticProps() {
//获取筛选数据，进行静态渲染
return {
props: {
},
props: {},
};
}
type Props = {
};
type Props = {};
export default function EquipmentLeasing(props: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 [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 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" title={item.wareTitle}>{item.wareTitle}</div>
<div className="item-bottom-price">
<span className="money">¥{item.minRent}</span>
<span className="unit">/天起</span>
const leftDom = (item: Device) => {
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" title={item.wareTitle}>
{item.wareTitle}
</div>
<div className="item-bottom-price">
<span className="money">¥{item.minRent}</span>
<span className="unit">/天起</span>
</div>
</div>
</div>
</div>
</div>)
}
);
};
const rightDom = (item:Advertisement) => {
const rightDom = (item: Advertisement) => {
return (
<div key={item.id} className="right-box-item right-item">
<Image src={item.imageUrl} alt="error" width={270} height={422}/>
<Image src={item.imageUrl} alt="error" width={270} height={422} />
</div>
)
}
);
};
const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
const [count, setCount] = useState(0); //商品总数
......@@ -68,71 +86,82 @@ export default function EquipmentLeasing(props:Props) {
setAbort(new AbortController());
}, [filterResult, pageParams]);
//端口列表请求
useEffect(() => {
api
.listPageDeviceInfo(
{
...filterResult,
...pageParams,
...router.query
},
{
signal: abort?.signal,
}
)
.then((res) => {
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()
api
.listPageDeviceInfo(
{
...filterResult,
...pageParams,
...router.query,
},
{
signal: abort?.signal,
}
)
.then((res) => {
setRightProductList(res.result?.map(item=>{return { element:rightDom(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(()=>{
useEffect(() => {
api.listAdvertisementInfo().then((res) => {
setRightProductList(
res.result?.map((item) => {
return { element: rightDom(item) };
}) || []
);
});
}, []);
useEffect(() => {
if (router.query) {
setFilterResult({...router.query});
setFilterResult({ ...router.query });
}
},[router])
return (
}, [router]);
return (
<Layout>
<Box>
<Filter
types={[ "地域", "类目", "设备品牌", "设备型号"]}
<Filter
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>
<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/flyingHandService/index.page.tsx
import React , {useEffect,useState} from 'react';
import {Box} from './styled';
import Image from 'next/image';
import { Button, Select, Space , Pagination , Cascader } from "antd";
import React, { useEffect, useState } from "react";
import { Box } from "./styled";
import Image from "next/image";
import { Button, Select, Space, Pagination, Cascader } from "antd";
import Layout from "~/components/layout";
import ContentBox from '~/components/contentBox';
import api , {Flying,SkillsType,RegionResp} from "./api";
import {useRouter} from 'next/router';
import ContentBox from "~/components/contentBox";
import api, { Flying, SkillsType, RegionResp } from "./api";
import { useRouter } from "next/router";
interface FilterInfoParams {
regionId?:number,
flightSkillsId?:number,
licenseId?:number
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 [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp> )
const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType> )
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 [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}/>
</div>
<div className='item-bottom'>
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}
/>
</div>
<div className="item-bottom">
<div className="bottom-title">{item.curriculumName}</div>
<div className="bottom-details">{item.curriculumDesc}</div>
<div className='bottom-price'>
<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'>{`¥${item.price}`}</span> */}
<div className="bottom-price">
<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'>{`¥${item.price}`}</span> */}
</div>
}
)}
</div>
</div>
</div>
</div>)
}
</div>
</div>
);
};
const rightDom = (item:string) => {
return ( <div className='right-box-item right-item' key={item}>
<Image src={item} alt="error" width={260} height={420}/>
</div>)
}
const rightDom = (item: string) => {
return (
<div className="right-box-item right-item" key={item}>
<Image src={item} alt="error" width={260} height={420} />
</div>
);
};
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 12,
}); //分页器对象
const [filterParams, setFilterParams] = useState<FilterInfoParams>();
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 12,
}); //分页器对象
const [count, setCount] = useState(0); //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
const [filterParams,setFilterParams] = useState<FilterInfoParams>()
const [count, setCount] = useState(0); //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
useEffect(() => {
//中断前一次列表请求
abort?.abort();
setAbort(new AbortController());
}, [filterParams, pageParams]);
//端口列表请求
useEffect(() => {
api
.listPageJobServicesInfo({
...pageParams,
pageNo: page,
...filterParams,
...router.query,
})
.then((res) => {
setProductList(
res.result?.list?.map((item) => {
return { element: leftDom(item) };
}) || []
);
setCount(res.result?.totalCount || 0);
});
};
useEffect(() => {
//中断前一次列表请求
abort?.abort();
setAbort(new AbortController());
}, [filterParams,pageParams]);
//端口列表请求
useEffect(() => {
api
.listPageJobServicesInfo(
{
...pageParams,
...filterParams,
...router.query
},
)
.then((res) => {
setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
setCount(res.result?.totalCount || 0);
});
}, [abort]);
}, [abort]);
const onProvinceChange = (value: string, type:string) => {
if (type === '考证') {
setFilterParams((props)=>{
const onProvinceChange = (value: string, type: string) => {
if (type === "考证") {
setFilterParams((props) => {
return {
...props,
licenseId:Number(value)
}
})
}else{
setFilterParams((props)=>{
licenseId: Number(value),
};
});
} else {
setFilterParams((props) => {
return {
...props,
flightSkillsId:Number(value)
}
})
flightSkillsId: Number(value),
};
});
}
};
const onChange = (value: any) => {
console.log(value);
setFilterParams((props) => {
return {
...props,
flightSkillsId: (value && value[value.length - 1]) || undefined,
};
});
};
useEffect(() => {
setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
api
.region()
.then((res) => {
setSecondDistrictInfo(res.result || [])
});
api
.IndustryFlightSkills()
.then((res) => {
setFlightSkillsList(res.result || [])
});
setRightDomList(
list.map((item) => {
return { element: rightDom(item) };
})
);
api.region().then((res) => {
setSecondDistrictInfo(res.result || []);
});
api.IndustryFlightSkills().then((res) => {
setFlightSkillsList(res.result || []);
});
}, []);
useEffect(()=>{
useEffect(() => {
if (Object.keys(router.query).length) {
setFilterParams((props)=>{
setFilterParams((props) => {
return {
...props,
...router.query
}
...router.query,
};
});
}
},[router])
}, [router]);
return (
<Layout>
<Box>
<div className='flyingTop'>
<div className='flyingTop-left'>
<div className="flyingTop">
<div className="flyingTop-left">
<Space>
{/* <Select
className='selectItem'
......@@ -152,47 +180,71 @@ export default function FlyingHandService() {
onChange={onProvinceChange}
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={(value)=>onProvinceChange(value,"考证")}
options={[
{ value: "1", label: "视距内驾驶员" },
{ value: "2", label: "视距外驾驶员" },
{ value: "3", label: "教员" },
]}
clearIcon
/>
<Select
className='selectItem'
bordered={false}
popupMatchSelectWidth={false}
placeholder="技能"
size="large"
onChange={(value)=>onProvinceChange(value,"技能")}
options={flightSkillsList}
fieldNames={{value:"id",label:"skillsName"}}
clearIcon
/>
<Cascader
allowClear
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={(value) => onProvinceChange(value, "考证")}
options={[
{ value: "1", label: "视距内驾驶员" },
{ value: "2", label: "视距外驾驶员" },
{ value: "3", label: "教员" },
]}
allowClear
/>
<Select
className="selectItem"
bordered={false}
popupMatchSelectWidth={false}
placeholder="技能"
size="large"
onChange={(value) => onProvinceChange(value, "技能")}
options={flightSkillsList}
fieldNames={{ value: "id", label: "skillsName" }}
allowClear
/>
</Space>
</div>
<Button type="primary" className='btn'>报名学习课程</Button>
<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}}/>
<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 }}
/>
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</Box>
</Layout>
);
......
pages/home/waterfallFlowBody/index.tsx
......@@ -187,15 +187,6 @@ export default function WaterfallFlowBody() {
})
.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,
......@@ -220,16 +211,6 @@ export default function WaterfallFlowBody() {
setRightTopDomList(rightDom(res7.result?.list!));
setRightBottomDomList(rightDom2(res8.result?.list!));
})();
// Promise.all([category(),brand(),model(),part(),quality(),region()]).then((res)=>{
// console.log("resssss ",res);
// const resultList = res.map(item=>{ return {result:item.result}})
// console.log(resultList[0].result);
// console.log(Array(resultList[0].result)[0]!.map((item,index)=>{
// console.log(item,index);
// return item.name
// }));
// setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,resultList)}}))
// })
}, []);
const routerPath = (item: AllType, index: number) => {
......@@ -297,7 +278,7 @@ export default function WaterfallFlowBody() {
const rightDom = (list: Array<NewsPageType>) => {
return (
<div className="right-box-item right-item">
<div key={1} className="right-box-item right-item">
<div className="title">行业新闻</div>
<div className="body">
{list?.map((item) => (
......@@ -306,7 +287,11 @@ export default function WaterfallFlowBody() {
<div className="item-image">
<Image
className="item-image"
src={item.surfaceImg}
src={
item.surfaceImg
? item.surfaceImg
: require("./assets/xw.jpg")
}
alt="#"
width={40}
height={40}
......@@ -321,7 +306,7 @@ export default function WaterfallFlowBody() {
const rightDom2 = (list: Array<NewsTenderType>) => {
return (
<div className="right-box-item right-item-second">
<div key={2} className="right-box-item right-item-second">
<div className="title">招标快讯</div>
<div className="body">
{list?.map((item) => (
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论