|
|
|
|
@ -11,8 +11,8 @@ import Spin from "@/components/spinner"; |
|
|
|
|
import {beforeTime} from "@/utils/time"; |
|
|
|
|
import Img from "@/components/image/image"; |
|
|
|
|
import Collect from "@/components/collect/collect"; |
|
|
|
|
import catalogue from "@/static/img/catalogue.png"; |
|
|
|
|
|
|
|
|
|
import catalogue from "@/static/img/catalogue-inactive.png"; |
|
|
|
|
import Icon from "@/components/icon"; |
|
|
|
|
|
|
|
|
|
const article: FC = () => { |
|
|
|
|
const {token} = Profile.useContainer() |
|
|
|
|
@ -25,7 +25,7 @@ const article: FC = () => { |
|
|
|
|
const pageHeight = globalData.windowHeight - globalData.textBarHeight - globalData.statusBarHeight |
|
|
|
|
const {children, headings} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo]) |
|
|
|
|
const query = Taro.createSelectorQuery() |
|
|
|
|
|
|
|
|
|
const [maoId, setMaoId] = useState('') |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
@ -39,11 +39,19 @@ const article: FC = () => { |
|
|
|
|
}, 300) |
|
|
|
|
}, [children]) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (!maoId && headings.length) { |
|
|
|
|
setMaoId(headings[0].id) |
|
|
|
|
} |
|
|
|
|
}, [headings]) |
|
|
|
|
|
|
|
|
|
function mao(id: string) { |
|
|
|
|
setMaoId(id) |
|
|
|
|
setShow(false) |
|
|
|
|
Taro.nextTick(() => { |
|
|
|
|
query.select(`#${id}`).boundingClientRect() |
|
|
|
|
query.exec((res) => { |
|
|
|
|
console.log({res}) |
|
|
|
|
if (res.length) { |
|
|
|
|
Taro.pageScrollTo({ |
|
|
|
|
scrollTop: res[res.length - 1].top, |
|
|
|
|
@ -55,6 +63,10 @@ const article: FC = () => { |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onCollect = (v: boolean | undefined) => { |
|
|
|
|
setArticleInfo((s) => ({...s, collect: v} as ArticleRecord)) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
Taro.useReady(() => { |
|
|
|
|
getData().then() |
|
|
|
|
}) |
|
|
|
|
@ -82,13 +94,17 @@ const article: FC = () => { |
|
|
|
|
styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}} |
|
|
|
|
stylesImage={{margin: '0 0 8rpx 0'}} |
|
|
|
|
owner_id={Number(id)} |
|
|
|
|
owner_type={1}/> |
|
|
|
|
owner_type={1} |
|
|
|
|
onUpdate={onCollect} |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
{ |
|
|
|
|
headings.length > 0 && <View onClick={() => setShow(true)}> |
|
|
|
|
<Image src={catalogue} mode='widthFix' style={{width: '40rpx', height: '40rpx'}}/> |
|
|
|
|
<View>目录</View> |
|
|
|
|
</View> |
|
|
|
|
headings.length > 0 && ( |
|
|
|
|
<View className='flex flex-column justify-center align-center' onClick={() => setShow(true)}> |
|
|
|
|
<Image src={catalogue} mode='widthFix' style={{width: '40rpx', height: '40rpx'}}/> |
|
|
|
|
<View>目录</View> |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
@ -102,22 +118,35 @@ const article: FC = () => { |
|
|
|
|
<View id="childrenNode"> |
|
|
|
|
<View className={styles.articleTitle}>{articleInfo?.title}</View> |
|
|
|
|
{ |
|
|
|
|
children.length > 0 ? |
|
|
|
|
<View> |
|
|
|
|
{ |
|
|
|
|
articleInfo?.brands.map(d => <View className={styles.article}> |
|
|
|
|
<Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/> |
|
|
|
|
<View className='ml-2'> |
|
|
|
|
<View>{d?.name}</View> |
|
|
|
|
<View className='flex mt-1 text-muted font-24'> |
|
|
|
|
<View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View> |
|
|
|
|
<View>阅读 {articleInfo.page_view || 1}</View> |
|
|
|
|
</View> |
|
|
|
|
articleInfo?.brands.map(d => ( |
|
|
|
|
<View className='flex align-center mb-4'> |
|
|
|
|
<View className={`${styles.article} flex-1`}> |
|
|
|
|
<Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/> |
|
|
|
|
<View className='ml-2'> |
|
|
|
|
<View>{d?.name}</View> |
|
|
|
|
<View className='flex mt-1 text-muted font-24'> |
|
|
|
|
<View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View> |
|
|
|
|
<View>阅读 {articleInfo.page_view || 0}</View> |
|
|
|
|
</View> |
|
|
|
|
</View>) |
|
|
|
|
} |
|
|
|
|
{children} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
<View className='ml-2'> |
|
|
|
|
<Collect |
|
|
|
|
select={articleInfo?.collect} |
|
|
|
|
styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}} |
|
|
|
|
stylesImage={{margin: '0 0 8rpx 0'}} |
|
|
|
|
owner_id={Number(id)} |
|
|
|
|
owner_type={1} |
|
|
|
|
textHidden |
|
|
|
|
onUpdate={onCollect} |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
)) |
|
|
|
|
} |
|
|
|
|
{ |
|
|
|
|
children.length > 0 |
|
|
|
|
? <View>{children}</View> |
|
|
|
|
: <Empty name='暂无数据'/> |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
@ -138,20 +167,36 @@ const article: FC = () => { |
|
|
|
|
} |
|
|
|
|
<PageContainer |
|
|
|
|
onClickOverlay={() => setShow(false)} |
|
|
|
|
onAfterLeave={() => setShow(false)} |
|
|
|
|
show={show} |
|
|
|
|
round |
|
|
|
|
overlay |
|
|
|
|
overlayStyle={'background:rgba(0,0,0,0.3)'}> |
|
|
|
|
<View className="px-3 py-5"> |
|
|
|
|
{ |
|
|
|
|
headings.length > 0 && headings.map((d) => <View |
|
|
|
|
className="pb-3" |
|
|
|
|
style={{fontSize: '28rpx', fontWeight: '500', color: '#323635'}} |
|
|
|
|
onClick={() => mao(d.id)}> |
|
|
|
|
{d.text} |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
overlayStyle={'background:rgba(0,0,0,0.3)'} |
|
|
|
|
> |
|
|
|
|
<View> |
|
|
|
|
<View className='text-center text-black relative clip'> |
|
|
|
|
<View className='absolute left top bottom flex flex-column justify-center align-center' style={{width: '58px'}} onClick={() => setShow(false)}> |
|
|
|
|
<Icon name='close' color="#000" bold /> |
|
|
|
|
</View> |
|
|
|
|
<View className='py-3 bold'>目录</View> |
|
|
|
|
</View> |
|
|
|
|
<View className='hr-solid' /> |
|
|
|
|
<View className="px-3 py-5"> |
|
|
|
|
{ |
|
|
|
|
headings.length > 0 && headings.map((d) => <View |
|
|
|
|
className="pb-3" |
|
|
|
|
style={{ |
|
|
|
|
fontSize: '28rpx', |
|
|
|
|
fontWeight: '500', |
|
|
|
|
color: maoId === d.id ? '#45D4A8' : '#323635', |
|
|
|
|
marginLeft: 24*(d.level-1) + 'px', |
|
|
|
|
}} |
|
|
|
|
onClick={() => mao(d.id)}> |
|
|
|
|
{d.text} |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
</PageContainer> |
|
|
|
|
</> |
|
|
|
|
@ -160,4 +205,5 @@ const article: FC = () => { |
|
|
|
|
|
|
|
|
|
return helloWorld() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default article |
|
|
|
|
|
king
