提交代码

src/bszx/item.tsx

@@ -0,0 +1,67 @@
+import {useEffect, useState} from 'react'
+import {Tag} from '@nutui/nutui-react-taro'
+import {useRouter, useShareAppMessage, useShareTimeline} from '@tarojs/taro'
+import {CmsArticle} from "@/api/cms/cmsArticle/model"
+import {Eye} from '@nutui/icons-react-taro'
+// 显示html富文本
+import {View, RichText} from '@tarojs/components'
+import './item.scss'
+import {wxParse} from "@/utils/common";
+import {getCmsArticle} from "@/api/cms/cmsArticle";
+
+function Item() {
+  const {params} = useRouter();
+  // 文章详情
+  const [item, setItem] = useState<CmsArticle>()
+  // 浏览量
+  const [views, setViews] = useState<number>()
+
+  const reload = () => {
+    getCmsArticle(Number(params.id)).then(data => {
+      if(data){
+        data.content = wxParse(data.content)
+        setItem(data)
+        setViews(data.actualViews)
+      }
+    })
+  }
+
+  useShareTimeline(() => {
+    return {
+      title: item?.title,
+      path: `/bszx/item?id=${item?.articleId}`
+    };
+  });
+
+  useShareAppMessage(() => {
+    return {
+      title: item?.title,
+      path: `/bszx/item?id=${item?.articleId}`,
+      success: function (res) {
+        console.log('分享成功', res);
+      },
+      fail: function (res) {
+        console.log('分享失败', res);
+      }
+    };
+  });
+
+  useEffect(() => {
+    reload();
+  }, []);
+
+  return (
+    <div className={'bg-white nr-bg'}>
+      <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>
+      <View className={'content text-gray-700 text-sm'}>
+        <RichText nodes={item?.content}/>
+      </View>
+    </div>
+  )
+}
+
+export default Item