|
|
@ -6,56 +6,64 @@ import styles from './article.module.scss' |
|
|
|
import down from '@/static/img/doubleDown.png' |
|
|
|
import down from '@/static/img/doubleDown.png' |
|
|
|
import {Profile} from "@/store"; |
|
|
|
import {Profile} from "@/store"; |
|
|
|
import {parse} from "@/utils/marked/marked"; |
|
|
|
import {parse} from "@/utils/marked/marked"; |
|
|
|
|
|
|
|
import {formatDate} from "@/utils/time"; |
|
|
|
|
|
|
|
|
|
|
|
const article:FC = () => { |
|
|
|
const article: FC = () => { |
|
|
|
const {token} = Profile.useContainer() |
|
|
|
const {token} = Profile.useContainer() |
|
|
|
const {id} = useRouter().params as unknown as { id: number} |
|
|
|
const {id} = useRouter().params as unknown as { id: number } |
|
|
|
const [show,setShow] = useState(false) |
|
|
|
const [show, setShow] = useState(false) |
|
|
|
const [articleInfo,setArticleInfo] = useState<ArticleRecord>() |
|
|
|
const [articleInfo, setArticleInfo] = useState<ArticleRecord>() |
|
|
|
const { children, headings } = useMemo(() => parse(articleInfo?.content || ''), [articleInfo]) |
|
|
|
const {children, headings} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo]) |
|
|
|
|
|
|
|
|
|
|
|
const query = Taro.createSelectorQuery() |
|
|
|
const query = Taro.createSelectorQuery() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
getData() |
|
|
|
getData() |
|
|
|
}, [id]) |
|
|
|
}, [id]) |
|
|
|
|
|
|
|
|
|
|
|
const getData = async () => { |
|
|
|
const getData = async () => { |
|
|
|
Taro.setNavigationBarTitle({title:'疾病文章详情'}) |
|
|
|
Taro.setNavigationBarTitle({title: '疾病文章详情'}) |
|
|
|
try { |
|
|
|
try { |
|
|
|
const data = await brandApi.articleInfo(id) |
|
|
|
const data = await brandApi.articleInfo(id) |
|
|
|
Taro.setNavigationBarTitle({title:data.title}) |
|
|
|
Taro.setNavigationBarTitle({title: data.title}) |
|
|
|
setArticleInfo(data) |
|
|
|
setArticleInfo(data) |
|
|
|
} catch (e) { |
|
|
|
} catch (e) { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
function mao(id: string){ |
|
|
|
|
|
|
|
|
|
|
|
function mao(id: string) { |
|
|
|
console.log(id) |
|
|
|
console.log(id) |
|
|
|
setShow(false) |
|
|
|
setShow(false) |
|
|
|
Taro.nextTick(() => { |
|
|
|
Taro.nextTick(() => { |
|
|
|
query.select(`#${id}`).boundingClientRect() |
|
|
|
query.select(`#${id}`).boundingClientRect() |
|
|
|
query.exec((res) => { |
|
|
|
query.exec((res) => { |
|
|
|
if(res.length){ |
|
|
|
if (res.length) { |
|
|
|
Taro.pageScrollTo({ |
|
|
|
Taro.pageScrollTo({ |
|
|
|
scrollTop: res[res.length-1].top, |
|
|
|
scrollTop: res[res.length - 1].top, |
|
|
|
duration: 300} |
|
|
|
duration: 300 |
|
|
|
|
|
|
|
} |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function helloWorld() { |
|
|
|
function helloWorld() { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
{/*<View style={{padding:'10px'}}>*/} |
|
|
|
<View className={styles.botmBox} style={{display: show ? 'none' : 'flex'}} onClick={() => setShow(true)}> |
|
|
|
{/* { children }*/} |
|
|
|
|
|
|
|
{/*</View>*/} |
|
|
|
|
|
|
|
<View className={styles.botmBox} style={{display:show?'none':'flex'}} onClick={()=>{setShow(true)}}> |
|
|
|
|
|
|
|
<View>文章导航</View> |
|
|
|
<View>文章导航</View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
<View style={{padding:'10px',height:!token ? Taro.getWindowInfo().windowHeight-60+'px' : 'auto',overflow:!token ? 'hidden':'auto'}}> |
|
|
|
<View style={{ |
|
|
|
{ children } |
|
|
|
padding: '10px', |
|
|
|
|
|
|
|
height: !token ? Taro.getWindowInfo().windowHeight - 60 + 'px' : 'auto', |
|
|
|
|
|
|
|
overflow: !token ? 'hidden' : 'auto' |
|
|
|
|
|
|
|
}}> |
|
|
|
|
|
|
|
<View className='text-center'> |
|
|
|
|
|
|
|
<View className='font-50 font-weight '>{articleInfo?.title}</View> |
|
|
|
|
|
|
|
<View className='mt-2'>{formatDate(new Date(articleInfo?.created_at || 0), "YY-mm-dd hh:mm:dd")}</View> |
|
|
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
<View></View> |
|
|
|
|
|
|
|
{children} |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
{ |
|
|
|
{ |
|
|
|
!token && |
|
|
|
!token && |
|
|
@ -64,18 +72,23 @@ const article:FC = () => { |
|
|
|
<View className={styles['fixedBox-inner-icon']}> |
|
|
|
<View className={styles['fixedBox-inner-icon']}> |
|
|
|
<Image src={down}></Image> |
|
|
|
<Image src={down}></Image> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
<View className={styles['fixedBox-inner-box']} onClick={ ()=> Taro.navigateTo({url: '/pages/login/login'})}> |
|
|
|
<View className={styles['fixedBox-inner-box']} |
|
|
|
|
|
|
|
onClick={() => Taro.navigateTo({url: '/pages/login/login'})}> |
|
|
|
<Text>登录查看更多内容</Text> |
|
|
|
<Text>登录查看更多内容</Text> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
<PageContainer onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0.3)'} > |
|
|
|
<PageContainer onClickOverlay={() => { |
|
|
|
|
|
|
|
setShow(false) |
|
|
|
|
|
|
|
}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0.3)'}> |
|
|
|
<View className="px-3 py-5"> |
|
|
|
<View className="px-3 py-5"> |
|
|
|
{headings.length > 0 && |
|
|
|
{headings.length > 0 && |
|
|
|
headings.map((d) => |
|
|
|
headings.map((d) => |
|
|
|
<View className="pb-3" style={{fontSize:'28rpx',fontWeight: '500',color: '#323635'}} onClick={()=>{mao(d.id)}}>{d.text}</View> |
|
|
|
<View className="pb-3" style={{fontSize: '28rpx', fontWeight: '500', color: '#323635'}} onClick={() => { |
|
|
|
|
|
|
|
mao(d.id) |
|
|
|
|
|
|
|
}}>{d.text}</View> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
</View> |
|
|
|
</View> |
|
|
@ -84,6 +97,7 @@ const article:FC = () => { |
|
|
|
</> |
|
|
|
</> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return helloWorld() |
|
|
|
return helloWorld() |
|
|
|
} |
|
|
|
} |
|
|
|
export default article |
|
|
|
export default article |
|
|
|