基于Taro.js开发的H5应用

src/pages/article/article.tsx

@@ -1,50 +0,0 @@
-import {useEffect, useState} from "react";
-import {ArrowRight} from '@nutui/icons-react-taro'
-import {pageCmsArticle} from "@/api/cms/cmsArticle";
-import {CmsArticle} from "@/api/cms/cmsArticle/model";
-import Taro from '@tarojs/taro'
-
-/**
- * 文章终极列表
- * @constructor
- */
-const Article = () => {
-  // const {params} = useRouter();
-  // const [categoryId, setCategoryId] = useState<number>(3494)
-  const [list, setList] = useState<CmsArticle[]>([])
-
-  const reload = () => {
-    // if (params.id) {
-    //   setCategoryId(Number(params.id))
-    // }
-    pageCmsArticle({}).then(res => {
-      if (res?.list) {
-        setList(res?.list)
-      }
-    })
-  }
-
-  useEffect(() => {
-    reload()
-  }, [])
-
-  return (
-    <div className={'px-3 mt-4 mb-10'}>
-      <div className={'flex flex-col justify-between items-center bg-white rounded-lg p-4'}>
-        <div className={'bg-white w-full'}>
-          {
-            list.map((item, index) => {
-              return (
-                <div key={index} className={'flex justify-between items-center py-2'} onClick={() => Taro.navigateTo({url: `/cms/help?id=${item.articleId}`}) }>
-                  <div className={'text-sm'}>{item.title}</div>
-                  <ArrowRight color={'#cccccc'} size={18} />
-                </div>
-              )
-            })
-          }
-        </div>
-      </div>
-    </div>
-  )
-}
-export default Article

src/pages/article/detail.tsx

@@ -0,0 +1,54 @@
+import {useEffect, useState} from 'react'
+import {Tag} from '@nutui/nutui-react-taro'
+import {useRouter} from '@tarojs/taro'
+import {Divider} from '@nutui/nutui-react-taro'
+import {CmsArticle} from "@/api/cms/cmsArticle/model"
+import {Eye} from '@nutui/icons-react-taro'
+// 显示html富文本
+import {View, RichText} from '@tarojs/components'
+import './detail.scss'
+import Line from "@/components/Gap";
+import {getCmsArticle} from "@/api/cms/cmsArticle";
+
+function Detail() {
+    const {params} = useRouter();
+    // 文章详情
+    const [item, setItem] = useState<CmsArticle>()
+    // 浏览量
+    const [views, setViews] = useState<number>()
+
+    const reload = () => {
+        getCmsArticle(Number(params.id)).then(data => {
+            if (data) {
+                setItem(data)
+                setViews(data.actualViews)
+            }
+        })
+    }
+
+    useEffect(() => {
+        reload();
+    }, []);
+
+    return (
+        <div className="mobile-container">
+            <div className={'bg-white'}>
+                <div className={'p-3 font-bold text-lg'}>{item?.title}</div>
+                <div className={'flex justify-between px-3'}>
+                    <Tag type={'success'}>{item?.categoryName}</Tag>
+                    <div className={'flex items-center gap-2 text-sm text-gray-400'}><Eye size={14}/>{views}</div>
+                </div>
+                <Divider/>
+                <View className={'content text-gray-700 text-sm'}>
+                    <RichText
+                        nodes={item?.content || '暂无内容'}
+                        space="nbsp"
+                    />
+                </View>
+                <Line height={44}/>
+            </div>
+        </div>
+    )
+}
+
+export default Detail