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