king
1 year ago
parent
ae52d73588
commit
86bc1a4cc0
@ -1,4 +0,0 @@ |
|||||||
export default definePageConfig({ |
|
||||||
navigationBarTitleText: '', |
|
||||||
onReachBottomDistance: 50 |
|
||||||
}) |
|
||||||
@ -1,80 +0,0 @@ |
|||||||
.botmBox { |
|
||||||
z-index: 99; |
|
||||||
position: fixed; |
|
||||||
bottom: 0; |
|
||||||
width: 750rpx; |
|
||||||
box-sizing: border-box; |
|
||||||
height: 150rpx; |
|
||||||
padding-bottom: env(safe-area-inset-bottom); |
|
||||||
display: flex; |
|
||||||
justify-content: flex-end; |
|
||||||
align-items: center; |
|
||||||
background: #F5F8F7; |
|
||||||
color: #909795; |
|
||||||
font-size: 26rpx; |
|
||||||
|
|
||||||
View { |
|
||||||
padding: 0 10px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.articleBox { |
|
||||||
padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 150rpx) 30rpx; |
|
||||||
} |
|
||||||
|
|
||||||
.fixedBox { |
|
||||||
position: fixed; |
|
||||||
z-index: 100; |
|
||||||
top: 0; |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)); |
|
||||||
|
|
||||||
&-inner { |
|
||||||
position: absolute; |
|
||||||
width: 100vw; |
|
||||||
top: 45vh; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
&-icon { |
|
||||||
image { |
|
||||||
width: 32rpx; |
|
||||||
height: 32rpx; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&-box { |
|
||||||
margin-top: 24rpx; |
|
||||||
width: 680rpx; |
|
||||||
left: 35rpx; |
|
||||||
height: 76rpx; |
|
||||||
background-color: #45D4A8; |
|
||||||
color: #fff; |
|
||||||
line-height: 76rpx; |
|
||||||
text-align: center; |
|
||||||
font-size: 32rpx; |
|
||||||
font-weight: 500; |
|
||||||
border-radius: 8rpx 8rpx 8rpx 8rpx; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.article { |
|
||||||
font-size: 30rpx; |
|
||||||
display: flex; |
|
||||||
margin-bottom: 40rpx; |
|
||||||
} |
|
||||||
|
|
||||||
.articleImag { |
|
||||||
border-radius: 100rpx; |
|
||||||
} |
|
||||||
|
|
||||||
.articleTitle { |
|
||||||
font-size: 40rpx; |
|
||||||
margin-bottom: 50rpx; |
|
||||||
} |
|
||||||
@ -1,128 +0,0 @@ |
|||||||
import {FC, useEffect, useMemo, useState} from "react"; |
|
||||||
import {Image, PageContainer, 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 {beforeTime} from "@/utils/time"; |
|
||||||
import Img from "@/components/image/image"; |
|
||||||
import catalogue from '@/static/img/catalogue.png' |
|
||||||
import Collect from "@/components/collect/collect"; |
|
||||||
|
|
||||||
const article: FC = () => { |
|
||||||
const {token} = Profile.useContainer() |
|
||||||
const {id} = useRouter().params as unknown as { id: number } |
|
||||||
const [show, setShow] = useState(false) |
|
||||||
const [articleInfo, setArticleInfo] = useState<ArticleRecord>() |
|
||||||
const {children, headings} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo]) |
|
||||||
const query = Taro.createSelectorQuery() |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
getData() |
|
||||||
}, [id]) |
|
||||||
|
|
||||||
const getData = async () => { |
|
||||||
Taro.setNavigationBarTitle({title: '疾病文章详情'}) |
|
||||||
try { |
|
||||||
const data = await brandApi.articleInfo(id) |
|
||||||
Taro.setNavigationBarTitle({title: data.title}) |
|
||||||
setArticleInfo(data) |
|
||||||
} catch (e) { |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function mao(id: string) { |
|
||||||
setShow(false) |
|
||||||
Taro.nextTick(() => { |
|
||||||
query.select(`#${id}`).boundingClientRect() |
|
||||||
query.exec((res) => { |
|
||||||
if (res.length) { |
|
||||||
Taro.pageScrollTo({ |
|
||||||
scrollTop: res[res.length - 1].top, |
|
||||||
duration: 300 |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function helloWorld() { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<View className={styles.botmBox} style={{display: show ? 'none' : 'flex'}} onClick={() => setShow(true)}> |
|
||||||
<View> |
|
||||||
<Collect |
|
||||||
styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}} |
|
||||||
stylesImage={{margin: '0 0 8rpx 0'}} |
|
||||||
owner_id={id} |
|
||||||
owner_type={1}/> |
|
||||||
</View> |
|
||||||
<View> |
|
||||||
<Image src={catalogue} mode='widthFix' style={{width: '40rpx', height: '40rpx'}}/> |
|
||||||
<View>目录</View> |
|
||||||
</View> |
|
||||||
</View> |
|
||||||
<View |
|
||||||
className={styles.articleBox} |
|
||||||
style={{ |
|
||||||
height: !token ? Taro.getWindowInfo().windowHeight - 60 + 'px' : 'auto', |
|
||||||
overflow: !token ? 'hidden' : 'auto' |
|
||||||
}}> |
|
||||||
<View> |
|
||||||
<View className={styles.articleTitle}>{articleInfo?.title}</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> |
|
||||||
</View> |
|
||||||
</View>) |
|
||||||
} |
|
||||||
</View> |
|
||||||
{children} |
|
||||||
</View> |
|
||||||
{ |
|
||||||
!token && |
|
||||||
<View className={styles.fixedBox}> |
|
||||||
<View className={styles['fixedBox-inner']}> |
|
||||||
<View className={styles['fixedBox-inner-icon']}> |
|
||||||
<Image src={down}></Image> |
|
||||||
</View> |
|
||||||
<View className={styles['fixedBox-inner-box']} |
|
||||||
onClick={() => Taro.navigateTo({url: '/pages/login/login'})}> |
|
||||||
<Text>登录查看更多内容</Text> |
|
||||||
</View> |
|
||||||
</View> |
|
||||||
</View> |
|
||||||
} |
|
||||||
|
|
||||||
<PageContainer |
|
||||||
onClickOverlay={() => 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> |
|
||||||
)} |
|
||||||
</View> |
|
||||||
</PageContainer> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return helloWorld() |
|
||||||
} |
|
||||||
export default article |
|
||||||
Loading…
Reference in new issue