Files
glt-taro/src/bszx/item.tsx
2025-06-26 11:41:12 +08:00

68 lines
1.8 KiB
TypeScript

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