update

2023-11-06 17:27:50 +08:00
parent b6a722fa79
commit a8b1ad286d
123 changed files with 491 additions and 428 deletions
--- a/app/_components/BranchLifeSketch.tsx
+++ b/app/_components/BranchLifeSketch.tsx
@ -0,0 +1,115 @@
+"use client";
+import styles from "@/app/_assets/page.module.css";
+import Image from "next/image";
+import trumpetIcon from "@/app/_assets/trumpet-icon.png";
+import { articleDetail, listArticles } from "@/app/_services/articles";
+import { htmlToText } from "html-to-text";
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+import { Article, ArticleDetail } from "@/app/_types/article";
+import useSWR from "swr";
+import { axiosClientInstance } from "@/app/_lib/request";
+import { BaseResponse, PageData } from "@/app/_types/base";
+import Swiper from "swiper";
+import { Pagination, Autoplay } from "swiper/modules";
+
+// import Swiper and modules styles
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/autoplay";
+
+const BranchLifeSketch = () => {
+  const { data } = useSWR("/article/list?cid=13", (key: string) =>
+    axiosClientInstance.get<never, BaseResponse<PageData<Article>>>(key),
+  );
+  const swiperRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    let swiper: Swiper | null = null;
+    if (swiperRef.current && data) {
+      swiper = new Swiper(swiperRef.current, {
+        modules: [Pagination, Autoplay],
+        loop: true,
+        slidesPerView: 2,
+        direction: "vertical",
+        mousewheel: true,
+        autoplay: {
+          delay: 1500,
+          pauseOnMouseEnter: true,
+        },
+      });
+    }
+    return () => {
+      swiper?.destroy();
+      swiper = null;
+    };
+  }, [data]);
+  return (
+    <>
+      <div
+        className={`title-bar flex items-center px-2 font-bold text-white ${styles.articleBlockTitleBar} relative`}
+      >
+        <Image width={30} height={30} src={trumpetIcon} alt={"trumpet icon"} />
+        <span className={"ml-2 text-[14px]"}>分院生活剪影</span>
+      </div>
+      <div className={"h-[216px] bg-[#e1f1fd]"}>
+        <div ref={swiperRef} className={"swiper h-full"}>
+          <div className={"swiper-wrapper"}>
+            {data?.data.lists?.map((article) => {
+              return (
+                <div key={article.id} className={"swiper-slide"}>
+                  <ArticleItem article={article} />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const ArticleItem = ({ article }: { article: Article }) => {
+  const { data } = useSWR(`/pc/articleDetail?id=${article.id}`, (key) =>
+    axiosClientInstance.get<never, BaseResponse<ArticleDetail>>(key),
+  );
+
+  return (
+    <div className={"flex h-[108px] w-full px-2 py-4"}>
+      <Link
+        className={"aspect-square"}
+        href={`/branch-life-sketch/${article.id}`}
+      >
+        <img
+          alt={""}
+          className={"h-full w-full"}
+          src={article.image
+            .replace("http://101.34.131.16:8084/api/uploads/", "")
+            .replace("http://localhost:8084/api/uploads/", "")}
+        />
+      </Link>
+
+      <div className={"ml-1 w-0 flex-1"}>
+        <Link
+          href={`/branch-life-sketch/${article.id}`}
+          className={"truncate text-xs text-[#144673]"}
+        >
+          {article.title}
+        </Link>
+
+        <div className={"mt-3 line-clamp-4 text-xs text-[#797979]"}>
+          {data?.data.content &&
+            htmlToText(data.data.content, {
+              selectors: [
+                {
+                  selector: "img",
+                  format: "skip",
+                },
+              ],
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BranchLifeSketch;