基于Taro.js开发的H5应用

src/article/detail.tsx

@@ -0,0 +1,52 @@
+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={'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>
+    )
+}
+
+export default Detail