Skip to content

W
web
提交 ba071b4b 作者: 翁进城
操作

项目资讯开发

上级 21bd8130
正在显示 包含 299 行增加 和 141 行删除
package.json
......@@ -35,6 +35,7 @@
"@types/styled-components": "^5.1.26",
"babel-plugin-styled-components": "^2.1.1",
"cookie": "^0.5.0",
"moment": "^2.29.4",
"next-connect": "^1.0.0",
"passport": "^0.6.0",
"passport-local": "^1.0.0",
......
pages/projectInfo/caseArticle/[id].page.tsx
......@@ -7,6 +7,7 @@ import Layout from "~/components/layout";
import newsApi, { Item } from "../components/news/api";
import api, { DetailsResp } from "./api";
import styles from "./index.module.scss";
import Moment from 'moment';
export default function CaseArticle() {
const router = useRouter();
......@@ -32,13 +33,36 @@ export default function CaseArticle() {
newsApi
.listNewsPage({
pageNo: 1,
pageSize: 5,
pageSize: 10,
})
.then((res) => {
setNewList(res.result?.list || []);
});
}, []);
const fontColor = (i: number) => {
switch (i) {
case 0:
return {
color: "#ff2c46",
};
case 1:
return {
color: "#FF6602",
};
case 2:
return {
color: "#FAA910",
};
default:
return {
color: "#9295A3",
};
}
};
return (
<Layout layoutStyle={{ backgroundColor: "#fff" }}>
<div style={{ paddingTop: 29 }}>
......@@ -49,7 +73,7 @@ export default function CaseArticle() {
className={styles.font2}
style={{ marginTop: 18, marginBottom: 41 }}
>
{data?.createTime} · {data?.caseAuthor}
{data?.createTime && Moment(data?.createTime).format('YYYY-MM-DD')} · {data?.caseAuthor}
</div>
<div
style={{ lineHeight: 1.5 }}
......@@ -61,14 +85,14 @@ export default function CaseArticle() {
<Row
className={styles.font4}
align="middle"
style={{ paddingTop: 24, paddingLeft: 24 }}
style={{ paddingTop: 16, paddingLeft: 20 }}
>
行业新闻
<RightOutlined style={{ fontSize: 16, marginLeft: 15 }} />
<RightOutlined style={{ fontSize: 16, marginLeft: 9 }} />
</Row>
<Row gutter={10} style={{ marginTop: 18 }}>
<Row gutter={10} style={{ marginTop: 8 }}>
<Col span={24}>
{newsList.map((item) => {
{newsList.map((item, i) => {
return (
<Row
key={item.id}
......@@ -80,20 +104,20 @@ export default function CaseArticle() {
}}
>
<Col
className={`${styles.font3} ${styles.ellipse2}`}
style={{ width: 217, padding: "13px 0 17px 20px" }}
className={`${styles.font3}`}
style={{ margin: "6px 23px 6px 19px", width: "100%" }}
>
{item.newsTitle}
</Col>
<Col style={{ paddingRight: 16 }}>
<Image
src={item.surfaceImg}
width={90}
height={60}
preview={false}
fallback={errImg}
style={{ borderRadius: 6 }}
></Image>
<Row wrap={false}>
<Col
span={2}
style={{ textAlign: "center", ...fontColor(i) }}
>
{i + 1}
</Col>
<Col span={22} className={styles.ellipse1}>
{item.newsTitle}
</Col>
</Row>
</Col>
</Row>
);
......
pages/projectInfo/caseArticle/index.module.scss
......@@ -16,27 +16,24 @@
}
.font3 {
font-size: 16px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #323232;
line-height: 21px;
line-height: 19px;
}
.font4 {
font-size: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 25px;
line-height: 20px;
}
.newsBox {
width: 384px;
height: 491px;
background-image: url("./assets/bk.png");
background-size: 100% 100%;
}
.ellipse2 {
@include ellipsis(2);
.ellipse1 {
@include ellipsis(1);
}
pages/projectInfo/components/bids/index.tsx
import { Button } from "antd";
import { Button, Empty, Pagination, Spin } from "antd";
import { useState, useEffect } from "react";
import api, { Item } from "./api";
import styles from "./index.module.scss";
......@@ -16,10 +16,11 @@ export default function Bids(props: Props) {
const [list, setList] = useState<Array<Item>>([]);
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 5,
pageSize: 10,
});
const [count, setCount] = useState(0);
const [abort, setAbort] = useState<AbortController | null>(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
//中断前一次请求
......@@ -31,6 +32,7 @@ export default function Bids(props: Props) {
if (!abort) {
return;
}
setLoading(true);
api
.listNewTenderInfo(
{
......@@ -44,35 +46,58 @@ export default function Bids(props: Props) {
.then((res) => {
setList(res.result?.list || []);
setCount(res.result?.totalCount || 0);
setLoading(false);
});
}, [abort]);
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
return (
<div className={styles.bids}>
{list.map((item) => {
return (
<div className={styles.item} key={item.id}>
<div className={styles.info}>
<div className={styles.title}>项目需求：{item.tenderContent}</div>
<Spin spinning={loading} delay={500}>
<div className={styles.bids} style={{ height: 610 }}>
{list.map((item) => {
return (
<div className={styles.item} key={item.id}>
<div className={styles.info}>
<div className={styles.title}>
项目需求：{item.tenderContent}
</div>
</div>
{item.apply ? (
<Button
type="primary"
disabled
className={`${styles.btn} ${styles.disabled}`}
>
<div className={styles.text1}>{item.tenderPrice}元</div>
<div className={styles.text2}>已申请</div>
</Button>
) : (
<Button type="primary" className={styles.btn}>
<div className={styles.text1}>{item.tenderPrice}元</div>
<div className={styles.text2}>申请合作</div>
</Button>
)}
</div>
{item.apply ? (
<Button
type="primary"
disabled
className={`${styles.btn} ${styles.disabled}`}
>
<div className={styles.text1}>{item.tenderPrice}元</div>
<div className={styles.text2}>已申请</div>
</Button>
) : (
<Button type="primary" className={styles.btn}>
<div className={styles.text1}>{item.tenderPrice}元</div>
<div className={styles.text2}>申请合作</div>
</Button>
)}
</div>
);
})}
</div>
);
})}
{list.length === 0 && <Empty></Empty>}
</div>
<Pagination
current={pageParams.pageNo}
defaultPageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</Spin>
);
}
pages/projectInfo/components/cases/index.module.scss
......@@ -2,14 +2,13 @@
//项目需求
.casas {
padding-top: 20px;
.item {
padding: 39px 14px 39px 16px;
padding: 7px 14px 9px 16px;
display: flex;
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
justify-content: space-between;
align-items: center;
.info {
.title {
......@@ -30,12 +29,10 @@
.btn {
width: 120px;
height: 40px;
height: 34px;
border-radius: 6px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ff552d;
border: 1px solid #ff552d;
}
.btnDisabled {
......
pages/projectInfo/components/cases/index.tsx
import { Button } from "antd";
import { Button, Empty, Pagination, Spin } from "antd";
import { useRouter } from "next/router";
import { useState, useEffect } from "react";
import api, { Item } from "./api";
......@@ -17,10 +17,12 @@ export default function Cases(props: Props) {
const [list, setList] = useState<Array<Item>>([]);
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 5,
pageSize: 12,
});
const [count, setCount] = useState(0);
const [abort, setAbort] = useState<AbortController | null>(null);
const [loading, setLoading] = useState(false);
const Router = useRouter();
useEffect(() => {
......@@ -33,6 +35,7 @@ export default function Cases(props: Props) {
if (!abort) {
return;
}
setLoading(true);
api
.listCasePage(
{
......@@ -46,26 +49,50 @@ export default function Cases(props: Props) {
.then((res) => {
setList(res.result?.list || []);
setCount(res.result?.totalCount || 0);
setLoading(false);
});
}, [abort]);
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
return (
<div className={styles.casas}>
{list.map((item) => {
return (
<div className={styles.item} key={item.id}>
<div className={styles.info}>
<div className={styles.title}>{item.caseTitle}</div>
<Spin spinning={loading} delay={500}>
<div className={styles.casas} style={{ height: 612 }}>
{list.map((item) => {
return (
<div className={styles.item} key={item.id}>
<div className={styles.info}>
<div className={styles.title}>{item.caseTitle}</div>
</div>
<Button
type="primary"
className={styles.btn}
onClick={() =>
Router.push("/projectInfo/caseArticle/" + item.id)
}
>
申请合作
</Button>
</div>
<Button
className={styles.btn}
onClick={() => Router.push("/projectInfo/caseArticle/" + item.id)}
>
查看案例
</Button>
</div>
);
})}
</div>
);
})}
{list.length === 0 && <Empty></Empty>}
</div>
<Pagination
current={pageParams.pageNo}
defaultPageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</Spin>
);
}
pages/projectInfo/components/news/index.module.scss
......@@ -5,11 +5,8 @@
}
.new {
padding-top: 20px;
width: 750px;
.item {
cursor: pointer;
padding: 10px 12px;
display: flex;
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
......@@ -20,19 +17,39 @@
height: 80px;
background: #d8d8d8;
border-radius: 6px;
margin-right: 22px;
margin-right: 17px;
@include ellipsis(1);
flex-shrink: 0;
}
.info {
padding: 3px 0 2px;
padding-left: 3px;
padding-right: 83px;
.title {
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 22px;
@include ellipsis(1);
}
.desc {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #878787;
line-height: 22px;
margin-top: 6px;
@include ellipsis(1);
}
.date {
font-size: 12px;
font-family: MicrosoftYaHei;
color: #adadad;
line-height: 16px;
margin-top: 5px;
}
}
}
......
pages/projectInfo/components/news/index.tsx
import { RightOutlined } from "@ant-design/icons";
import { Col, Row } from "antd";
import { Button, Col, Empty, Pagination, Row, Spin } from "antd";
import styles from "./index.module.scss";
import Image from "next/image";
import { useState, useEffect } from "react";
import api, { Item } from "./api";
import { useRouter } from "next/router";
import Moment from "moment";
type Props = {
params?: {
......@@ -16,10 +17,11 @@ type Props = {
};
export default function News(props: Props) {
const [loading, setLoading] = useState(false);
const [list, setList] = useState<Array<Item>>([]);
const [pageParams, setPageParams] = useState({
pageNo: 1,
pageSize: 5,
pageSize: 6,
});
const [count, setCount] = useState(0);
const [abort, setAbort] = useState<AbortController | null>(null);
......@@ -35,6 +37,7 @@ export default function News(props: Props) {
if (!abort) {
return;
}
setLoading(true);
api
.listNewsPage(
{
......@@ -48,33 +51,63 @@ export default function News(props: Props) {
.then((res) => {
setList(res.result?.list || []);
setCount(res.result?.totalCount || 0);
setLoading(false);
});
}, [abort]);
const onPageChange = (page: number, pageSize: number) => {
setPageParams({
...pageParams,
pageNo: page,
});
};
return (
<Row justify="space-between">
<Col className={styles.new}>
{list.map((item) => {
return (
<div
className={styles.item}
key={item.id}
onClick={() => router.push("/projectInfo/newsArticle/" + item.id)}
>
<Image
className={styles.logo}
src={item.surfaceImg}
alt=""
width={120}
height={80}
></Image>
<div className={styles.info}>
<div className={styles.title}>{item.newsTitle}</div>
<Spin spinning={loading} delay={500}>
<Row justify="space-between" style={{ height: 606 }}>
<Col className={styles.new}>
{list.map((item) => {
return (
<div className={styles.item} key={item.id}>
<Image
className={styles.logo}
src={item.surfaceImg}
alt=""
width={120}
height={80}
></Image>
<div className={styles.info}>
<div className={styles.title}>{item.newsTitle}</div>
<div className={styles.desc}>{item.newsContents}</div>
<div className={styles.date}>
{Moment().format("yyyy-MM-DD")} · {item.newsAuthor}
</div>
</div>
<Button
type="primary"
style={{ width: 120, height: 40, flexShrink: 0 }}
onClick={() =>
router.push("/projectInfo/newsArticle/" + item.id)
}
>
申请合作
</Button>
</div>
</div>
);
})}
</Col>
</Row>
);
})}
</Col>
</Row>
{list.length === 0 && <Empty></Empty>}
<Pagination
current={pageParams.pageNo}
defaultPageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</Spin>
);
}
pages/projectInfo/components/requirements/index.module.scss
@import "~/styles/mixins.scss";
//项目需求
.requirements {
.item {
cursor: pointer;
padding: 15px 15px;
display: flex;
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
align-items: center;
.logo {
width: 50px;
......@@ -13,10 +15,12 @@
margin-right: 24px;
background: url('./assets/resolved.png') no-repeat;
background-size: 100% 100%;
flex-shrink: 0;
}
.info {
padding: 3px 0 2px;
flex: auto;
.title {
white-space: nowrap; /* 防止换行 */
......@@ -27,6 +31,7 @@
font-weight: bold;
margin-bottom: 6px;
color: RGBA(0, 0, 0, 0.4);
@include ellipsis(1);
}
.desc {
......@@ -37,6 +42,7 @@
font-family: MicrosoftYaHei;
color: RGBA(135, 135, 135, 0.4);
line-height: 1;
@include ellipsis(1);
}
}
......
pages/projectInfo/components/requirements/index.tsx
import { Empty, Pagination, Spin } from "antd";
import { Button, Empty, Pagination, Spin } from "antd";
import router from "next/router";
import React, { useState, useEffect } from "react";
import api, { Item } from "./api";
import styles from "./index.module.scss";
......@@ -75,6 +76,12 @@ export default function Requirements(props: Props) {
具体需求：{item.requireDescription}
</div>
</div>
<Button
type="primary"
style={{ width: 120, height: 40, flexShrink: 0 }}
>
申请合作
</Button>
</div>
);
})}
......
pages/projectInfo/newsArticle/[id].page.tsx
......@@ -7,6 +7,7 @@ import Layout from "~/components/layout";
import newsApi, { Item } from "../components/news/api";
import api, { DetailsResp } from "./api";
import styles from "./index.module.scss";
import Moment from "moment";
export default function CaseArticle() {
const router = useRouter();
......@@ -32,13 +33,36 @@ export default function CaseArticle() {
newsApi
.listNewsPage({
pageNo: 1,
pageSize: 5,
pageSize: 10,
})
.then((res) => {
setNewList(res.result?.list || []);
});
}, []);
const fontColor = (i: number) => {
switch (i) {
case 0:
return {
color: "#ff2c46",
};
case 1:
return {
color: "#FF6602",
};
case 2:
return {
color: "#FAA910",
};
default:
return {
color: "#9295A3",
};
}
};
return (
<Layout layoutStyle={{ backgroundColor: "#fff" }}>
<div style={{ paddingTop: 29 }}>
......@@ -49,10 +73,12 @@ export default function CaseArticle() {
className={styles.font2}
style={{ marginTop: 18, marginBottom: 41 }}
>
{data?.createTime} · {data?.newsAuthor}
{data?.createTime &&
Moment(data?.createTime).format("YYYY-MM-DD")}{" "}
· {data?.newsAuthor}
</div>
<div
style={{lineHeight: 1.5}}
style={{ lineHeight: 1.5 }}
dangerouslySetInnerHTML={{ __html: data?.newsContents || "" }}
></div>
</Col>
......@@ -61,14 +87,14 @@ export default function CaseArticle() {
<Row
className={styles.font4}
align="middle"
style={{ paddingTop: 24, paddingLeft: 24 }}
style={{ paddingTop: 16, paddingLeft: 20 }}
>
行业新闻
<RightOutlined style={{ fontSize: 16, marginLeft: 15 }} />
<RightOutlined style={{ fontSize: 16, marginLeft: 9 }} />
</Row>
<Row gutter={10} style={{ marginTop: 18 }}>
<Row gutter={10} style={{ marginTop: 8 }}>
<Col span={24}>
{newsList.map((item) => {
{newsList.map((item, i) => {
return (
<Row
key={item.id}
......@@ -80,20 +106,20 @@ export default function CaseArticle() {
}}
>
<Col
className={`${styles.font3} ${styles.ellipse2}`}
style={{ width: 217, padding: "13px 0 17px 20px" }}
className={`${styles.font3}`}
style={{ margin: "6px 23px 6px 19px", width: "100%" }}
>
{item.newsTitle}
</Col>
<Col style={{ paddingRight: 16 }}>
<Image
src={item.surfaceImg}
width={90}
height={60}
preview={false}
fallback={errImg}
style={{ borderRadius: 6 }}
></Image>
<Row wrap={false}>
<Col
span={2}
style={{ textAlign: "center", ...fontColor(i) }}
>
{i + 1}
</Col>
<Col span={22} className={styles.ellipse1}>
{item.newsTitle}
</Col>
</Row>
</Col>
</Row>
);
......
pages/projectInfo/newsArticle/index.module.scss
......@@ -16,27 +16,24 @@
}
.font3 {
font-size: 16px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #323232;
line-height: 21px;
line-height: 19px;
}
.font4 {
font-size: 20px;
font-size: 16px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #000000;
line-height: 25px;
line-height: 20px;
}
.newsBox {
width: 384px;
height: 491px;
background-image: url("./assets/bk.png");
background-size: 100% 100%;
}
.ellipse2 {
@include ellipsis(2);
}
.ellipse1 {
@include ellipsis(1);
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论