基于Taro.js开发的H5应用

2025-07-07 13:24:48 +08:00
parent 3db95dbe9b
commit 59f771d542
26 changed files with 919 additions and 193 deletions
--- a/src/article/index.tsx
+++ b/src/article/index.tsx
@@ -0,0 +1,109 @@
+import {useEffect, useState} from "react";
+import {pageCmsArticle} from "@/api/cms/cmsArticle";
+import {CmsArticle} from "@/api/cms/cmsArticle/model";
+import Taro from '@tarojs/taro'
+import {useRouter} from '@tarojs/taro'
+import {Image} from '@nutui/nutui-react-taro'
+import {getCmsNavigation, pageCmsNavigation} from "@/api/cms/cmsNavigation";
+import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
+
+/**
+ * 文章终极列表
+ * @constructor
+ */
+const Index = () => {
+    const {params} = useRouter();
+    const [navigation, setNavigation] = useState<CmsNavigation>()
+    const [childCategory, setChildCategory] = useState<CmsNavigation[]>([])
+    const [list, setList] = useState<CmsArticle[]>([])
+
+    const reload = async () => {
+        // 获取栏目ID
+        const categoryId = Number(params.id);
+        // 当前栏目信息
+        const navs = await getCmsNavigation(categoryId);
+        // 二级栏目
+        const childCateogry = await pageCmsNavigation({parentId: categoryId});
+        // 终极新闻列表
+        const articles = await pageCmsArticle({categoryId});
+
+        // 当前栏目信息
+        if (navs) {
+            setNavigation(navs);
+        }
+        // 获取子级栏目
+        if (childCateogry) {
+            setChildCategory(childCateogry.list)
+        }
+        // 新闻列表
+        if (articles) {
+            setList(articles?.list || [])
+        }
+    }
+
+    useEffect(() => {
+        reload()
+    }, [])
+
+    return (
+        <>
+            <div style={{padding: navigation?.span + 'px'}}>
+                <Image src={navigation?.style} width={'100%'}
+                       height={'auto'}/>
+            </div>
+            <div className={'bg-white rounded-lg py-3 px-3'}>
+                <div className={'grid grid-cols-2 gap-3'}>
+                    {
+                        // 子级栏目
+                        childCategory.map((item, index) => {
+                            return (
+                                <div
+                                    key={index}
+                                    className={'flex flex-col justify-center items-center cursor-pointer'}
+                                    onClick={() => Taro.navigateTo({url: `./index?id=${item.navigationId}`})}
+                                >
+                                    {/* 图片容器 */}
+                                    <div className={'w-full mb-2 flex justify-center'}>
+                                        <img
+                                            className={'object-cover rounded-lg'}
+                                            src={item.icon}
+                                            alt={item.title || ''}
+                                        />
+                                    </div>
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+                <div className={'grid grid-cols-3'}>
+                    {
+                        // 终极文章列表
+                        list.map((item, index) => {
+                            return (
+                                <div
+                                    key={index}
+                                    className={'flex flex-col items-center cursor-pointer my-1'}
+                                    onClick={() => Taro.navigateTo({url: `./detail?id=${item.articleId}`})}
+                                >
+                                    {/* 图片容器 */}
+                                    <div className={'w-full mb-2 flex justify-center'}>
+                                        <img
+                                            className={'object-cover rounded-lg'}
+                                            src={item.image}
+                                            alt={item.title || ''}
+                                        />
+                                    </div>
+                                    {/* 标题 */}
+                                    <div className={'text-xs text-center text-gray-800 leading-tight px-1'}>
+                                        {item.title}
+                                    </div>
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+            </div>
+        </>
+    )
+}
+export default Index