案列文章与新闻文章开发

pages/projectInfo/caseArticle/[id].page.tsx

@@ -67,7 +67,14 @@ export default function CaseArticle() {
                 <Col span={24}>
                   {newsList.map(item => {
                     return (
-                      <Row justify="space-between" align="middle">
+                      <Row
+                        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" }}

pages/projectInfo/components/bids/index.tsx

@@ -19,6 +19,9 @@ export default function Bids() {
   }, [pageParams]);
 
   useEffect(() => {
+    if (!abort) {
+      return;
+    }
     api
       .listNewTenderInfo(
         {

pages/projectInfo/components/cases/index.tsx

@@ -14,46 +14,52 @@ const list = [
 ];
 
 export default function Cases() {
-   const [list, setList] = useState<Array<Item>>([]);
-   const [pageParams, setPageParams] = useState({
-     pageNo: 1,
-     pageSize: 5,
-   });
-   const [count, setCount] = useState(0);
-   const [abort, setAbort] = useState<AbortController | null>(null);
-   const Router = useRouter();
+  const [list, setList] = useState<Array<Item>>([]);
+  const [pageParams, setPageParams] = useState({
+    pageNo: 1,
+    pageSize: 5,
+  });
+  const [count, setCount] = useState(0);
+  const [abort, setAbort] = useState<AbortController | null>(null);
+  const Router = useRouter();
 
-   useEffect(() => {
-     //中断前一次请求
-     abort?.abort();
-     setAbort(new AbortController());
-   }, [pageParams]);
+  useEffect(() => {
+    //中断前一次请求
+    abort?.abort();
+    setAbort(new AbortController());
+  }, [pageParams]);
+
+  useEffect(() => {
+    if (!abort) {
+      return;
+    }
+    api
+      .listCasePage(
+        {
+          ...pageParams,
+        },
+        {
+          signal: abort?.signal,
+        }
+      )
+      .then((res) => {
+        setList(res.result?.list || []);
+        setCount(res.result?.totalCount || 0);
+      });
+  }, [abort]);
 
-   useEffect(() => {
-     api
-       .listCasePage(
-         {
-           ...pageParams,
-         },
-         {
-           signal: abort?.signal,
-         }
-       )
-       .then((res) => {
-         setList(res.result?.list || []);
-         setCount(res.result?.totalCount || 0);
-       });
-   }, [abort]);
-   
   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.newsTitle}</div>
+              <div className={styles.title}>{item.caseTitle}</div>
             </div>
-            <Button className={styles.btn} onClick={() => Router.push('projectInfo/caseArticle/' + item.id)}>
+            <Button
+              className={styles.btn}
+              onClick={() => Router.push("/projectInfo/caseArticle/" + item.id)}
+            >
               查看案例
             </Button>
           </div>

pages/projectInfo/components/news/index.tsx

@@ -4,6 +4,7 @@ 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";
 
 export default function News() {
   const [list, setList] = useState<Array<Item>>([]);
@@ -13,6 +14,7 @@ export default function News() {
   });
   const [count, setCount] = useState(0);
   const [abort, setAbort] = useState<AbortController | null>(null);
+  const router = useRouter();
 
   useEffect(() => {
     //中断前一次请求
@@ -21,6 +23,9 @@ export default function News() {
   }, [pageParams]);
 
   useEffect(() => {
+    if (!abort) {
+      return;
+    }
     api
       .listNewsPage(
         {
@@ -41,7 +46,7 @@ export default function News() {
       <Col className={styles.new}>
         {list.map((item) => {
           return (
-            <div className={styles.item} key={item.id}>
+            <div className={styles.item} key={item.id} onClick={() => router.push('/projectInfo/newsArticle/' + item.id)}>
               <Image
                 className={styles.logo}
                 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 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 [pageParams, setPageParams] = useState({
     pageNo: 1,
@@ -18,6 +18,9 @@ export default function Requirements(){
   }, [pageParams]);
 
   useEffect(() => {
+    if (!abort) {
+      return;
+    }
     api
       .listPublishPage(
         {
@@ -35,7 +38,7 @@ export default function Requirements(){
 
   return (
     <div className={styles.requirements}>
-      {list.map(item => {
+      {list.map((item) => {
         return (
           <div
             className={`${styles.item} ${!item.solved && styles.noResolve}`}
@@ -53,4 +56,4 @@ export default function Requirements(){
       })}
     </div>
   );
-}
+}
\ No newline at end of file

pages/projectInfo/newsArticle/[id].page.tsx

+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
+                        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

+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

+@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);
+}