Skip to content

W
web
提交 452312a7 作者: 18928357778
操作

合并代码

上级 350d1740 fa5fb34c
正在显示 包含 627 行增加 和 120 行删除
components/NavHeader/index.module.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(232,232,232,0.5);
} }
.nav{ .nav{
......
pages/forum/index.page.tsx
...@@ -82,7 +82,7 @@ export default function Forum() { ...@@ -82,7 +82,7 @@ export default function Forum() {
}} }}
> >
<Space size={6} wrap> <Space size={6} wrap>
{item?.mediaVO?.picture.map((img) => { {item?.mediaVO?.picture?.map((img) => {
return ( return (
<Image <Image
key={img} key={img}
......
pages/home/waterfallFlowBody/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Space, Select, Button } from "antd"; import { Space, Select, Button } from "antd";
import Image from "next/image"; import Image from "next/image";
import {useRouter} from 'next/router'; import { useRouter } from "next/router";
import { Box } from "./styled"; import { Box } from "./styled";
import ContentBox from "~/components/contentBox"; import ContentBox from "~/components/contentBox";
import RotationChart from "./components/rotationChart"; import RotationChart from "./components/rotationChart";
import Map from "./components/map"; import Map from "./components/map";
import icon from "./assets/图标.png"; import icon from "./assets/图标.png";
import { FilterOptionResp, import {
RegionResp , FilterOptionResp,
RegionResp,
AllType, AllType,
AppType, AppType,
IndustryType, IndustryType,
SkillsType, SkillsType,
NewsPageType , NewsPageType,
NewsTenderType , NewsTenderType,
equipmentLeasingApi , equipmentLeasingApi,
jobServicesApi , jobServicesApi,
mallApi , mallApi,
flightSkillsApi , flightSkillsApi,
listNewsApi} from "./api"; listNewsApi,
import { BaseOptionType , DefaultOptionType } from "antd/es/select"; } from "./api";
import { BaseOptionType, DefaultOptionType } from "antd/es/select";
interface ColumnsType { interface ColumnsType {
title:string, title: string;
router:string router: string;
} }
export default function WaterfallFlowBody() { export default function WaterfallFlowBody() {
const router = useRouter() const router = useRouter();
const onMoreChange = (value: string) => { const onMoreChange = (value: string) => {
console.log("更多", value); console.log("更多", value);
}; };
const [list,setList] = useState(['中国人寿' ,'中国平安' ,'中国人保', '太平洋保险' ,'新华保险', '中国太平', '泰康保险', '华夏保险', '阳光保险', '友邦保险', '富德生命人寿' ,'中邮人寿', '前海人寿' ,'百年人寿', '国华人寿', '工银安盛人寿', '恒大人寿','君康人寿', '友邦保险', '建信人寿', '大家人寿', '农银人寿', '中信保城人寿', '合众人寿']) const [list, setList] = useState([
const [list2,setList2] = useState(['天目将PAAS平台' ,'天目将公安平台' ,'天目将应急平台' ,'天目将城管平台' ,'天目将电力平台' ,'天目将石油平台' ,'SESP-U1无人机仿真软件', '云享飞服务号', '无人机商城' ,'云飞手', '云仓', '云享飞' ,'科比特智教']) "中国人寿",
// const [brandData,setBrandData] = useState<FilterOptionResp[]>([]) "中国平安",
"中国人保",
"太平洋保险",
"新华保险",
"中国太平",
"泰康保险",
"华夏保险",
"阳光保险",
"友邦保险",
"富德生命人寿",
"中邮人寿",
"前海人寿",
"百年人寿",
"国华人寿",
"工银安盛人寿",
"恒大人寿",
"君康人寿",
"友邦保险",
"建信人寿",
"大家人寿",
"农银人寿",
"中信保城人寿",
"合众人寿",
]);
const [list2, setList2] = useState([
"天目将PAAS平台",
"天目将公安平台",
"天目将应急平台",
"天目将城管平台",
"天目将电力平台",
"天目将石油平台",
"SESP-U1无人机仿真软件",
"云享飞服务号",
"无人机商城",
"云飞手",
"云仓",
"云享飞",
"科比特智教",
]);
// const [brandData,setBrandData] = useState<FilterOptionResp[]>([])
const [moreEqList,setMoreEqList] = useState<any>() const [moreEqList, setMoreEqList] = useState<any>();
const columns = [ const columns = [
{ {
title:"无人机出租", title: "无人机出租",
router:"/equipmentLeasing" router: "/equipmentLeasing",
}, },
{ {
title:"无人机服务", title: "无人机服务",
router:"/jobServices" router: "/jobServices",
}, },
{ {
title:"无人机销售", title: "无人机销售",
router:"/mall" router: "/mall",
}, },
{ {
title:"无人机保险", title: "无人机保险",
router:"" router: "",
}, },
{ {
title:"无人机培训", title: "无人机培训",
router:"flyingHandService" router: "flyingHandService",
}, },
{ {
title:"无人机工具软件", title: "无人机工具软件",
router:"" 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 [leftDomList, setLeftDomList] = useState(
const eqApiTypeList = ["categoryId","brandId","modelId"] Array<{ element: JSX.Element }>
);
const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>();
const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>();
const {listAllAppType,listAllIndustry} = jobServicesApi const { deviceCategory, deviceBrand, deviceModel } = equipmentLeasingApi;
const jobApiTypeList = ["industryId","appTypeId"] const eqApiTypeList = ["categoryId", "brandId", "modelId"];
const {listAllCategory,listAllParts,listAllQuality} = mallApi const { listAllAppType, listAllIndustry } = jobServicesApi;
const mallApiTypeList = ["brandId","productCategoryId","partsId","modelId","qualityId"] const jobApiTypeList = ["industryId", "appTypeId"];
const {IndustryFlightSkills} = flightSkillsApi const { listAllCategory, listAllParts, listAllQuality } = mallApi;
const flightApiTypeList = ["licenseId","flightSkillsId"] const mallApiTypeList = [
"brandId",
"productCategoryId",
"partsId",
"modelId",
"qualityId",
];
const { IndustryFlightSkills } = flightSkillsApi;
const flightApiTypeList = ["licenseId", "flightSkillsId"];
useEffect(() => {
(async () => {
listNewsApi.listNewsPage({ pageNo: 1, pageSize: 10 }).then((res) => {
setRightTopDomList(rightDom(res.result?.list!));
});
listNewsApi.listNewTenderInfo({ pageNo: 1, pageSize: 10 }).then((res) => {
setRightBottomDomList(rightDom2(res.result?.list!));
});
useEffect(()=>{ let res1 = await Promise.all([
(async()=>{ deviceCategory(),
let res1 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()]) deviceBrand(),
let res2 = await Promise.all([listAllAppType(),listAllIndustry()]) deviceModel(),
let res3 = await Promise.all([listAllCategory(),listAllParts(),listAllQuality()]) ]);
let res2 = await Promise.all([listAllAppType(), listAllIndustry()]);
let res3 = await Promise.all([
listAllCategory(),
listAllParts(),
listAllQuality(),
]);
// let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()]) // let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
let res5 = await Promise.all([IndustryFlightSkills()]) let res5 = await Promise.all([IndustryFlightSkills()]);
// let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()]) // let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
const resValuelist1 = res1.map((item,index)=>{ const resValuelist1 = res1
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it}) .map((item, index) => {
}).flat() return item.result?.map((it) => {
const resValuelist2 = res2.map((item,index)=>{ it.type = jobApiTypeList[index];
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it}) return it;
}).flat() });
const resValuelist3 = res3.map((item,index)=>{ })
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it}) .flat();
}).flat() const resValuelist2 = res2
const resValuelist5 = res5.map((item,index)=>{ .map((item, index) => {
return item.result?.map(it=>{it.type = jobApiTypeList[index];return it}) return item.result?.map((it) => {
}).flat() 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("测试数据1");
// console.log("测试数据2",); // console.log("测试数据2",);
...@@ -115,16 +196,30 @@ const flightApiTypeList = ["licenseId","flightSkillsId"] ...@@ -115,16 +196,30 @@ const flightApiTypeList = ["licenseId","flightSkillsId"]
// return item.result?.map(it=>{it.type = flightApiTypeList[index];return it}) // return item.result?.map(it=>{it.type = flightApiTypeList[index];return it})
// })); // }));
let res7 = await listNewsApi.listNewsPage({pageNo:1,pageSize:10}) let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 10 });
let res8 = await listNewsApi.listNewTenderInfo({pageNo:1,pageSize:10}) let res8 = await listNewsApi.listNewTenderInfo({
const listValue:any = [resValuelist1,resValuelist2,resValuelist3,[],resValuelist5.flat(),[]] pageNo: 1,
pageSize: 10,
});
const listValue: any = [
resValuelist1,
resValuelist2,
resValuelist3,
[],
resValuelist5.flat(),
[],
];
setMoreEqList(res1.map(item=>item.result).flat()) setMoreEqList(res1.map((item) => item.result).flat());
setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,listValue)}})) setLeftDomList(
columns.map((item, index) => {
return { element: leftDom(item, index, listValue) };
})
);
setRightTopDomList(rightDom(res7.result?.list!)) setRightTopDomList(rightDom(res7.result?.list!));
setRightBottomDomList(rightDom2(res8.result?.list!)) setRightBottomDomList(rightDom2(res8.result?.list!));
})() })();
// Promise.all([category(),brand(),model(),part(),quality(),region()]).then((res)=>{ // Promise.all([category(),brand(),model(),part(),quality(),region()]).then((res)=>{
// console.log("resssss ",res); // console.log("resssss ",res);
// const resultList = res.map(item=>{ return {result:item.result}}) // const resultList = res.map(item=>{ return {result:item.result}})
...@@ -135,17 +230,39 @@ const flightApiTypeList = ["licenseId","flightSkillsId"] ...@@ -135,17 +230,39 @@ const flightApiTypeList = ["licenseId","flightSkillsId"]
// })); // }));
// setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,resultList)}})) // setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,resultList)}}))
// }) // })
},[]) }, []);
const routerPath = (item:AllType,index:number) => { const routerPath = (item: AllType, index: number) => {
router.push({ router.push({
pathname: columns[index].router, pathname: columns[index].router,
query: { [item?.type!]: item?.id! }, query: { [item?.type!]: item?.id! },
}) });
} };
const leftDom = (
item: ColumnsType,
index: number,
resultList: Array<Array<AllType>>
) => {
function onClick(item: string) {
switch (item) {
case "无人机出租":
router.push("/equipmentLeasing");
break;
const leftDom = (item:ColumnsType,index:number,resultList: case "无人机服务":
Array<Array<AllType>>) => { router.push("/jobServices");
break;
case "无人机销售":
router.push("/mall");
break;
case "无人机培训":
router.push("/flyingHandService");
break;
}
}
return ( return (
<div key={item.title} className="item"> <div key={item.title} className="item">
<div className="item-title"> <div className="item-title">
...@@ -162,51 +279,72 @@ const flightApiTypeList = ["licenseId","flightSkillsId"] ...@@ -162,51 +279,72 @@ const flightApiTypeList = ["licenseId","flightSkillsId"]
bordered={false} bordered={false}
dropdownMatchSelectWidth={false} dropdownMatchSelectWidth={false}
options={moreEqList} options={moreEqList}
fieldNames={{value:"id",label:"name"}} fieldNames={{ value: "id", label: "name" }}
/> />
</div> </div>
</div> </div>
<div className="item-body"> <div className="item-body">
<Space size={[10, 8]} wrap> <Space size={[10, 8]} wrap>
{ {index === 3
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>): ? list.map((item) => (
resultList[index].map((item)=>{ <div key={item} className="item-bubble">
return <div key={item?.name || item?.appName || item?.skillsName} className="item-bubble" onClick={()=>routerPath(item,index)}>{item?.name || item?.appName || item?.skillsName}</div> {item}
}) </div>
} ))
: index === 5
? list2.map((item) => (
<div key={item} className="item-bubble">
{item}
</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> </Space>
</div> </div>
</div> </div>
); );
} };
const rightDom = (list:Array<NewsPageType>)=>{ const rightDom = (list: Array<NewsPageType>) => {
return ( return (
<div className="right-box-item right-item"> <div className="right-box-item right-item">
<div className="title">行业新闻</div> <div className="title">行业新闻</div>
<div className="body"> <div className="body">
{ {list?.map((item) => (
list?.map(item=>(<div key={item.id} className="body-item"> <div key={item.id} className="body-item">
<div className="item-label"> <div className="item-label">{item.newsTitle}</div>
{item.newsTitle}
</div>
<div className="item-image"> <div className="item-image">
<Image className="item-image" src={item.surfaceImg} alt="#" width={40} height={40}/> <Image
className="item-image"
src={item.surfaceImg}
alt="#"
width={40}
height={40}
/>
</div> </div>
</div>))
}
</div> </div>
))}
</div> </div>
) </div>
} );
};
const rightDom2 = (list:Array<NewsTenderType>) => { const rightDom2 = (list: Array<NewsTenderType>) => {
return ( return (
<div className="right-box-item right-item-second"> <div className="right-box-item right-item-second">
<div className="title">招标快讯</div> <div className="title">招标快讯</div>
<div className="body"> <div className="body">
{ {list?.map((item) => (
list?.map(item=>(<div key={item.id} className="body-item"> <div key={item.id} className="body-item">
<div className="item-label"> <div className="item-label">
<div className="label-top" title={item.tenderContent}> <div className="label-top" title={item.tenderContent}>
{item.tenderContent} {item.tenderContent}
...@@ -218,14 +356,12 @@ const flightApiTypeList = ["licenseId","flightSkillsId"] ...@@ -218,14 +356,12 @@ const flightApiTypeList = ["licenseId","flightSkillsId"]
申请合作 申请合作
</Button> </Button>
</div> </div>
</div>))
}
</div> </div>
))}
</div> </div>
) </div>
} );
};
return ( return (
<Box> <Box>
......
pages/mall/detail/[id].page.tsx
...@@ -89,8 +89,8 @@ export default function MallDetail() { ...@@ -89,8 +89,8 @@ export default function MallDetail() {
<div className={`${styles.font1} ${styles.ellipsis}`}> <div className={`${styles.font1} ${styles.ellipsis}`}>
{detail?.goodsName} {detail?.goodsName}
</div> </div>
<div className={`${styles.font2} ${styles.ellipsis}`}> <div className={`${styles.font2} ${styles.ellipsis}`} style={{height: 22}}>
交通事故处理、违章取证、指挥调度、日常巡 {detail?.goodsDesc}
</div> </div>
<Space <Space
size={24} size={24}
......
pages/mall/detail/api/index.ts
...@@ -22,6 +22,7 @@ export interface GetAppGoodsInfoDetailResult { ...@@ -22,6 +22,7 @@ export interface GetAppGoodsInfoDetailResult {
shelfStatus?: number; shelfStatus?: number;
otherService?: OtherService[]; otherService?: OtherService[];
question?: Question[]; question?: Question[];
goodsDesc?: string
} }
export interface GoodsDetail { export interface GoodsDetail {
......
pages/mall/index.module.scss
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 12px;
height: 856px; height: auto;
.item { .item {
cursor: pointer; cursor: pointer;
......
pages/mall/index.page.tsx
...@@ -35,6 +35,9 @@ export default function Mall(props: Props) { ...@@ -35,6 +35,9 @@ export default function Mall(props: Props) {
//端口列表请求 //端口列表请求
useEffect(() => { useEffect(() => {
if (!abort) {
return;
}
api api
.listPageGoodsInfo( .listPageGoodsInfo(
{ {
......
pages/projectInfo/caseArticle/[id].page.tsx 0 → 100644
import { RightOutlined } from "@ant-design/icons";
import { Col, Row, Space, Image } from "antd";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import errImg from "~/assets/errImg";
import Layout from "~/components/layout";
import newsApi, { Item } from "../components/news/api";
import api, { DetailsResp } from "./api";
import styles from "./index.module.scss";
export default function CaseArticle() {
const router = useRouter();
const [data, setData] = useState<DetailsResp | null>(null);
const [newsList, setNewList] = useState<Item[]>([]);
//获取案例详情
useEffect(() => {
const id = Number(router.query.id);
if (id) {
api
.details({
id,
})
.then((res) => {
setData(res.result || null);
});
}
}, [router]);
//获取新闻列表
useEffect(() => {
newsApi
.listNewsPage({
pageNo: 1,
pageSize: 5,
})
.then((res) => {
setNewList(res.result?.list || []);
});
});
return (
<Layout layoutStyle={{ backgroundColor: "#fff" }}>
<div style={{ paddingTop: 29 }}>
<Row justify="space-between">
<Col flex="auto">
<div className={styles.font1}>{data?.caseTitle}</div>
<div
className={styles.font2}
style={{ marginTop: 18, marginBottom: 41 }}
>
{data?.createTime} · {data?.caseAuthor}
</div>
<div
dangerouslySetInnerHTML={{ __html: data?.caseContents || "" }}
></div>
</Col>
<Col>
<div className={styles.newsBox}>
<Row
className={styles.font4}
align="middle"
style={{ paddingTop: 24, paddingLeft: 24 }}
>
行业新闻
<RightOutlined style={{ fontSize: 16, marginLeft: 15 }} />
</Row>
<Row gutter={10} style={{ marginTop: 18 }}>
<Col span={24}>
{newsList.map((item) => {
return (
<Row
key={item.id}
justify="space-between"
align="middle"
style={{ cursor: "pointer" }}
onClick={() => {
router.push("/projectInfo/newsArticle/" + item.id);
}}
>
<Col
className={`${styles.font3} ${styles.ellipse2}`}
style={{ width: 217, padding: "13px 0 17px 20px" }}
>
{item.newsTitle}
</Col>
<Col style={{ paddingRight: 16 }}>
<Image
src={item.surfaceImg}
width={90}
height={60}
preview={false}
fallback={errImg}
style={{ borderRadius: 6 }}
></Image>
</Col>
</Row>
);
})}
</Col>
</Row>
</div>
</Col>
</Row>
</div>
</Layout>
);
}
pages/projectInfo/caseArticle/api/index.tsx 0 → 100644
import request, { Response } from "~/api/request";
export interface DetailsParams {
id: number;
}
export interface DetailsResp {
id: number;
caseTitle?: string;
caseAuthor?: string;
userAccountId?: number;
surfaceImg?: string;
caseContents?: string;
createTime?: string;
updateTime?: string;
}
export default {
//案例详情
details(params: DetailsParams): Promise<Response<DetailsResp>> {
return request("/release/industry-case/details", "get", params);
},
};
pages/projectInfo/caseArticle/index.module.scss 0 → 100644
@import "~/styles/mixins.scss";
.font1 {
font-size: 36px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 50px;
}
.font2 {
font-size: 12px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 16px;
}
.font3 {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #323232;
line-height: 21px;
}
.font4 {
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 25px;
}
.newsBox {
width: 384px;
height: 491px;
background-image: url("./assets/bk.png");
background-size: 100% 100%;
}
.ellipse2 {
@include ellipsis(2);
}
pages/projectInfo/components/bids/index.tsx
...@@ -19,6 +19,9 @@ export default function Bids() { ...@@ -19,6 +19,9 @@ export default function Bids() {
}, [pageParams]); }, [pageParams]);
useEffect(() => { useEffect(() => {
if (!abort) {
return;
}
api api
.listNewTenderInfo( .listNewTenderInfo(
{ {
......
pages/projectInfo/components/cases/api/index.ts
...@@ -19,14 +19,13 @@ export interface ListCasePageResp { ...@@ -19,14 +19,13 @@ export interface ListCasePageResp {
export interface Item { export interface Item {
id: number; id: number;
newsTitle: string; caseTitle: string;
newsAuthor: string; caseAuthor: string;
userAccountId: number; userAccountId: number;
surfaceImg: string; surfaceImg: string;
newsContents: string; caseContents: string;
createTime: string; createTime: string;
updateTime: string; updateTime: string;
isApply: 0 | 1
} }
export default { export default {
......
pages/projectInfo/components/cases/index.tsx
import { Button } from "antd"; import { Button } from "antd";
import { useRouter } from "next/router";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import api, { Item } from "./api"; import api, { Item } from "./api";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
...@@ -20,6 +21,7 @@ export default function Cases() { ...@@ -20,6 +21,7 @@ export default function Cases() {
}); });
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
const [abort, setAbort] = useState<AbortController | null>(null); const [abort, setAbort] = useState<AbortController | null>(null);
const Router = useRouter();
useEffect(() => { useEffect(() => {
//中断前一次请求 //中断前一次请求
...@@ -28,6 +30,9 @@ export default function Cases() { ...@@ -28,6 +30,9 @@ export default function Cases() {
}, [pageParams]); }, [pageParams]);
useEffect(() => { useEffect(() => {
if (!abort) {
return;
}
api api
.listCasePage( .listCasePage(
{ {
...@@ -49,9 +54,14 @@ export default function Cases() { ...@@ -49,9 +54,14 @@ export default function Cases() {
return ( return (
<div className={styles.item} key={item.id}> <div className={styles.item} key={item.id}>
<div className={styles.info}> <div className={styles.info}>
<div className={styles.title}>{item.newsTitle}</div> <div className={styles.title}>{item.caseTitle}</div>
</div> </div>
<Button className={styles.btn}>查看案例</Button> <Button
className={styles.btn}
onClick={() => Router.push("/projectInfo/caseArticle/" + item.id)}
>
查看案例
</Button>
</div> </div>
); );
})} })}
......
pages/projectInfo/components/news/index.tsx
...@@ -4,6 +4,7 @@ import styles from "./index.module.scss"; ...@@ -4,6 +4,7 @@ import styles from "./index.module.scss";
import Image from "next/image"; import Image from "next/image";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import api, { Item } from "./api"; import api, { Item } from "./api";
import { useRouter } from "next/router";
export default function News() { export default function News() {
const [list, setList] = useState<Array<Item>>([]); const [list, setList] = useState<Array<Item>>([]);
...@@ -13,6 +14,7 @@ export default function News() { ...@@ -13,6 +14,7 @@ export default function News() {
}); });
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
const [abort, setAbort] = useState<AbortController | null>(null); const [abort, setAbort] = useState<AbortController | null>(null);
const router = useRouter();
useEffect(() => { useEffect(() => {
//中断前一次请求 //中断前一次请求
...@@ -21,6 +23,9 @@ export default function News() { ...@@ -21,6 +23,9 @@ export default function News() {
}, [pageParams]); }, [pageParams]);
useEffect(() => { useEffect(() => {
if (!abort) {
return;
}
api api
.listNewsPage( .listNewsPage(
{ {
...@@ -41,7 +46,7 @@ export default function News() { ...@@ -41,7 +46,7 @@ export default function News() {
<Col className={styles.new}> <Col className={styles.new}>
{list.map((item) => { {list.map((item) => {
return ( return (
<div className={styles.item} key={item.id}> <div className={styles.item} key={item.id} onClick={() => router.push('/projectInfo/newsArticle/' + item.id)}>
<Image <Image
className={styles.logo} className={styles.logo}
src={item.surfaceImg} src={item.surfaceImg}
......
pages/projectInfo/components/requirements/index.tsx
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import api, { Item } from "./api"; import api, { Item } from "./api";
import styles from './index.module.scss'; import styles from "./index.module.scss";
export default function Requirements(){ export default function Requirements() {
const [list, setList] = useState<Array<Item>>([]); const [list, setList] = useState<Array<Item>>([]);
const [pageParams, setPageParams] = useState({ const [pageParams, setPageParams] = useState({
pageNo: 1, pageNo: 1,
...@@ -18,6 +18,9 @@ export default function Requirements(){ ...@@ -18,6 +18,9 @@ export default function Requirements(){
}, [pageParams]); }, [pageParams]);
useEffect(() => { useEffect(() => {
if (!abort) {
return;
}
api api
.listPublishPage( .listPublishPage(
{ {
...@@ -35,7 +38,7 @@ export default function Requirements(){ ...@@ -35,7 +38,7 @@ export default function Requirements(){
return ( return (
<div className={styles.requirements}> <div className={styles.requirements}>
{list.map(item => { {list.map((item) => {
return ( return (
<div <div
className={`${styles.item} ${!item.solved && styles.noResolve}`} className={`${styles.item} ${!item.solved && styles.noResolve}`}
......
pages/projectInfo/newsArticle/[id].page.tsx 0 → 100644
import { RightOutlined } from "@ant-design/icons";
import { Col, Row, Space, Image } from "antd";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import errImg from "~/assets/errImg";
import Layout from "~/components/layout";
import newsApi, { Item } from "../components/news/api";
import api, { DetailsResp } from "./api";
import styles from "./index.module.scss";
export default function CaseArticle() {
const router = useRouter();
const [data, setData] = useState<DetailsResp | null>(null);
const [newsList, setNewList] = useState<Item[]>([]);
//获取案例详情
useEffect(() => {
const id = Number(router.query.id);
if (id) {
api
.details({
id,
})
.then((res) => {
setData(res.result || null);
});
}
}, [router]);
//获取新闻列表
useEffect(() => {
newsApi
.listNewsPage({
pageNo: 1,
pageSize: 5,
})
.then((res) => {
setNewList(res.result?.list || []);
});
});
return (
<Layout layoutStyle={{ backgroundColor: "#fff" }}>
<div style={{ paddingTop: 29 }}>
<Row justify="space-between">
<Col flex="auto">
<div className={styles.font1}>{data?.newsTitle}</div>
<div
className={styles.font2}
style={{ marginTop: 18, marginBottom: 41 }}
>
{data?.createTime} · {data?.newsAuthor}
</div>
<div
dangerouslySetInnerHTML={{ __html: data?.newsContents || "" }}
></div>
</Col>
<Col>
<div className={styles.newsBox}>
<Row
className={styles.font4}
align="middle"
style={{ paddingTop: 24, paddingLeft: 24 }}
>
行业新闻
<RightOutlined style={{ fontSize: 16, marginLeft: 15 }} />
</Row>
<Row gutter={10} style={{ marginTop: 18 }}>
<Col span={24}>
{newsList.map((item) => {
return (
<Row
key={item.id}
justify="space-between"
align="middle"
style={{ cursor: "pointer" }}
onClick={() => {
router.push("/projectInfo/newsArticle/" + item.id);
}}
>
<Col
className={`${styles.font3} ${styles.ellipse2}`}
style={{ width: 217, padding: "13px 0 17px 20px" }}
>
{item.newsTitle}
</Col>
<Col style={{ paddingRight: 16 }}>
<Image
src={item.surfaceImg}
width={90}
height={60}
preview={false}
fallback={errImg}
style={{ borderRadius: 6 }}
></Image>
</Col>
</Row>
);
})}
</Col>
</Row>
</div>
</Col>
</Row>
</div>
</Layout>
);
}
pages/projectInfo/newsArticle/api/index.tsx 0 → 100644
import request, { Response } from "~/api/request";
export interface DetailsParams {
id: number;
}
export interface DetailsResp {
id: number;
newsTitle?: string;
newsAuthor?: string;
userAccountId?: number;
surfaceImg?: string;
newsContents?: string;
createTime?: string;
updateTime?: string;
}
export default {
//案例详情
details(params: DetailsParams): Promise<Response<DetailsResp>> {
return request("/release/industry-news/details", "get", params);
},
};
pages/projectInfo/newsArticle/index.module.scss 0 → 100644
@import "~/styles/mixins.scss";
.font1 {
font-size: 36px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 50px;
}
.font2 {
font-size: 12px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 16px;
}
.font3 {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #323232;
line-height: 21px;
}
.font4 {
font-size: 20px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 25px;
}
.newsBox {
width: 384px;
height: 491px;
background-image: url("./assets/bk.png");
background-size: 100% 100%;
}
.ellipse2 {
@include ellipsis(2);
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论