Skip to content

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

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

上级 010275b6
正在显示 包含 183 行增加 和 152 行删除
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/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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论