案例文章开发

pages/projectInfo/caseArticle/[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?.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 justify="space-between" align="middle">
+                        <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

+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

+@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/cases/index.tsx

 import { Button } from "antd";
+import { useRouter } from "next/router";
 import { useState, useEffect } from "react";
 import api, { Item } from "./api";
 import styles from "./index.module.scss";
@@ -20,6 +21,7 @@ export default function Cases() {
    });
    const [count, setCount] = useState(0);
    const [abort, setAbort] = useState<AbortController | null>(null);
+   const Router = useRouter();
 
    useEffect(() => {
      //中断前一次请求
@@ -51,7 +53,9 @@ export default function Cases() {
             <div className={styles.info}>
               <div className={styles.title}>{item.newsTitle}</div>
             </div>
-            <Button className={styles.btn}>查看案例</Button>
+            <Button className={styles.btn} onClick={() => Router.push('projectInfo/caseArticle/' + item.id)}>
+              查看案例
+            </Button>
           </div>
         );
       })}