CategoryItems组件改成动态版从后端读取参数
This commit is contained in:
parent
1f1e5c5218
commit
5f2217b193
11
app/page.jsx
11
app/page.jsx
@ -4,6 +4,7 @@ import Features from "@/components/homes/home-15/Features";
|
||||
import Hero from "@/components/homes/home-15/Hero";
|
||||
import PageItems from "@/components/homes/home-15/PageItems";
|
||||
import CategoryItems from "@/components/homes/home-15/CategoryItems";
|
||||
import SwiperItems from "@/components/homes/home-15/SwiperItems";
|
||||
import React from "react";
|
||||
import { getSiteSettings } from "@/utlis/siteSettings";
|
||||
|
||||
@ -41,15 +42,7 @@ export default function Page() {
|
||||
</section>
|
||||
<section className="wrapper !bg-[#ffffff] ">
|
||||
<div className="w-full">
|
||||
<CategoryItems
|
||||
pagetype="Jsite Project"
|
||||
category="案例"
|
||||
category_slug="case"
|
||||
count={8}
|
||||
columns={4}
|
||||
title="应用场景"
|
||||
subtitle="Jingrow 系统行业应用场景及案例"
|
||||
/>
|
||||
<SwiperItems />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
||||
@ -14,7 +14,7 @@ export default function Footer15() {
|
||||
|
||||
return (
|
||||
<footer className="bg-[#fefefe] !text-[#333333]">
|
||||
<div className="container pt-20 pb-7">
|
||||
<div className="container pt-50 pb-7">
|
||||
<div className="w-full flex flex-col md:flex-row justify-center items-stretch gap-8 md:gap-10 xl:gap-16">
|
||||
{/* 产品中心 */}
|
||||
<div className="flex-1 min-w-[220px] max-w-xs flex flex-col">
|
||||
|
||||
@ -4,17 +4,48 @@ import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation, Pagination } from "swiper/modules";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import PropTypes from "prop-types";
|
||||
import axios from "axios";
|
||||
|
||||
export default function CategoryItems({ pagetype = "", category = "", category_slug = "" , count = 8, columns = 4, title = "", subtitle = "" }) {
|
||||
export default function CategoryItems() {
|
||||
const [data, setData] = useState(null);
|
||||
const [posts, setPosts] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
// 统一字段映射，便于团队查阅和维护
|
||||
const title = data?.title;
|
||||
const subtitle = data?.subtitle;
|
||||
const pagetype = data?.t1;
|
||||
const category = data?.t2;
|
||||
const category_slug = data?.t3;
|
||||
const count = data?.t4;
|
||||
const columns = data?.t5;
|
||||
const button_text = data?.button_text;
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
async function fetchComponentData() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await axios.get("/api/get-component-data", {
|
||||
params: { component_name: "CategoryItems" },
|
||||
});
|
||||
setData(res.data.data);
|
||||
} catch (err) {
|
||||
setError("获取CategoryItems数据失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchComponentData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchPosts() {
|
||||
if (!data) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams({ pagetype });
|
||||
// 使用统一映射变量
|
||||
const params = new URLSearchParams({ pagetype: pagetype || "" });
|
||||
if (category) params.append("category", category);
|
||||
if (count !== undefined && count !== null) params.append("count", count);
|
||||
const res = await fetch(`/api/get-listview-data?${params.toString()}`);
|
||||
@ -29,9 +60,10 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
fetchData();
|
||||
}, [pagetype, category, count]);
|
||||
fetchPosts();
|
||||
}, [data, pagetype, category, count]);
|
||||
|
||||
if (!data) return null;
|
||||
// 渲染卡片内容
|
||||
function renderCardImage(post, idx) {
|
||||
// 多图轮播
|
||||
@ -133,7 +165,7 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto my-[300px]">
|
||||
<div className="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
{/* 新增模块标题和副标题显示 */}
|
||||
{(title || subtitle) && (
|
||||
<div className="relative z-20 text-center mb-10 select-text">
|
||||
@ -141,11 +173,11 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
|
||||
{subtitle && <p className="text-lg text-gray-500">{subtitle}</p>}
|
||||
</div>
|
||||
)}
|
||||
<div className={`blog classic-view grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns} gap-6`}>
|
||||
<div className={`blog classic-view grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns || 4} gap-6`}>
|
||||
{loading ? (
|
||||
<div className={`col-span-${columns} text-center py-12 text-gray-400`}>加载中...</div>
|
||||
<div className={`col-span-${columns || 4} text-center py-12 text-gray-400`}>加载中...</div>
|
||||
) : posts.length === 0 ? (
|
||||
<div className={`col-span-${columns} text-center py-12 text-gray-400`}>暂无数据</div>
|
||||
<div className={`col-span-${columns || 4} text-center py-12 text-gray-400`}>暂无数据</div>
|
||||
) : (
|
||||
posts.map((post, idx) => (
|
||||
<article key={post.slug || post.id || idx} className="post !mb-8">
|
||||
@ -193,23 +225,10 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
|
||||
href={`/${category_slug}`}
|
||||
className="btn btn-lg btn-fuchsia !text-white !bg-[#1A1A1A] hover:text-white hover:bg-[#1A1A1A] hover:!border-[#1A1A1A] active:text-white active:bg-[#1A1A1A] active:border-[#1A1A1A] disabled:text-white disabled:bg-[#1A1A1A] disabled:border-[#1A1A1A] !rounded-[0.8rem] mx-1"
|
||||
>
|
||||
更多
|
||||
{button_text || "更多"}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
CategoryItems.propTypes = {
|
||||
pagetype: PropTypes.string,
|
||||
category: PropTypes.string,
|
||||
count: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number
|
||||
]),
|
||||
columns: PropTypes.number,
|
||||
category_slug: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
subtitle: PropTypes.string,
|
||||
};
|
||||
|
||||
@ -41,7 +41,7 @@ export default function Hero() {
|
||||
|
||||
|
||||
return (
|
||||
<div className="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] !text-center !relative">
|
||||
<div className="container pt-36 xl:py-[12.5rem] lg:py-[12.5rem] md:py-[12.5rem] !text-center !relative">
|
||||
<div
|
||||
className="absolute"
|
||||
style={{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user