You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.6 KiB
107 lines
3.6 KiB
import {FC, useCallback, useEffect, useMemo, useState} from "react";
|
|
import {Image, Text, View} from "@tarojs/components";
|
|
import Taro, {useRouter} from "@tarojs/taro";
|
|
import {ArticleRecord, brandApi} from "@/api";
|
|
import styles from "./article.module.scss";
|
|
import down from "@/static/img/doubleDown.png";
|
|
import {Profile} from "@/store";
|
|
import {parse} from "@/utils/marked/marked";
|
|
import Empty from "@/components/empty/empty";
|
|
import Spin from "@/components/spinner";
|
|
import {beforeTime} from "@/utils/time";
|
|
import Img from "@/components/image/image";
|
|
|
|
|
|
const article: FC = () => {
|
|
const {token} = Profile.useContainer()
|
|
const [enable, setEnable] = useState(true)
|
|
const {id} = useRouter().params as unknown as { id: number }
|
|
const [articleInfo, setArticleInfo] = useState<ArticleRecord>()
|
|
const [ultra, setUltra] = useState(true)
|
|
const globalData = Taro.getApp().globalData
|
|
const pageHeight = globalData.windowHeight - globalData.textBarHeight - globalData.statusBarHeight
|
|
const {children} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo])
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
const query = Taro.createSelectorQuery()
|
|
query.select('#childrenNode').boundingClientRect((res) => {
|
|
if (!Array.isArray(res)) {
|
|
console.log({childrenNode: res})
|
|
setUltra(pageHeight * .45 <= res.height)
|
|
}
|
|
}).exec()
|
|
}, 300)
|
|
}, [children])
|
|
|
|
Taro.useReady(() => {
|
|
getData().then()
|
|
})
|
|
|
|
const getData = useCallback(async () => {
|
|
try {
|
|
const data = await brandApi.articleInfo(id)
|
|
Taro.setNavigationBarTitle({title: data.title})
|
|
if (data.content.length < 200) {
|
|
setUltra(false)
|
|
}
|
|
setArticleInfo(data)
|
|
} catch (e) {
|
|
}
|
|
setEnable(false)
|
|
}, [id])
|
|
|
|
function helloWorld() {
|
|
return (
|
|
<>
|
|
<Spin overlay enable={enable}/>
|
|
<View style={{
|
|
padding: '10px',
|
|
height: !token ? Taro.getWindowInfo().windowHeight - 60 + 'px' : 'auto',
|
|
overflow: !token ? 'hidden' : 'auto'
|
|
}}>
|
|
<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}/>
|
|
<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>
|
|
</View>
|
|
</View>)
|
|
}
|
|
{children}
|
|
</View>
|
|
: <Empty name='暂无数据'/>
|
|
}
|
|
</View>
|
|
</View>
|
|
{
|
|
!token && ultra && children.length > 0 &&
|
|
<View className={styles.fixedBox}>
|
|
<View className={styles['fixedBox-inner']}>
|
|
<View className={styles['fixedBox-inner-icon']}>
|
|
<Image src={down}/>
|
|
</View>
|
|
<View className={styles['fixedBox-inner-box']}
|
|
onClick={() => Taro.navigateTo({url: '/pages/login/login'})}>
|
|
<Text>登录查看更多内容</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
}
|
|
</>
|
|
)
|
|
|
|
}
|
|
|
|
return helloWorld()
|
|
}
|
|
export default article
|
|
|