diff --git a/src/api/brand.ts b/src/api/brand.ts index 5c767ff..2ee9b29 100644 --- a/src/api/brand.ts +++ b/src/api/brand.ts @@ -20,6 +20,7 @@ export type ArticleRecord = { created_at: string content: string brands: BrandRecord[] + collect:boolean } export const brandApi = { diff --git a/src/app.config.ts b/src/app.config.ts index a71824d..cb521c0 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -91,7 +91,6 @@ export default defineAppConfig({ 'videoFull/videoFull', // 资源id 视频全屏 'illness/sort/sort', 'illness/list/list', - 'illness/article/article', 'webView/webView', 'search/search/index', ] diff --git a/src/pages/home/components/curRecommended.tsx b/src/pages/home/components/curRecommended.tsx index d80a496..700786d 100644 --- a/src/pages/home/components/curRecommended.tsx +++ b/src/pages/home/components/curRecommended.tsx @@ -9,19 +9,9 @@ import Img from "@/components/image/image"; import {beforeTime} from "@/utils/time"; const toArticlePage = (d: any) => { - console.log({d}) - switch (d.owner_type) { - case 1: - Taro.navigateTo({ - url: `/pages/preview/brand/article/article?id=${d.id}` - }) - return - case 2: - Taro.navigateTo({ - url: `/pages/preview/illness/article/article?id=${d.id}` - }) - return - } + Taro.navigateTo({ + url: `/pages/preview/brand/article/article?id=${d.id}` + }) } const CurRecommended: FC = () => { diff --git a/src/pages/preview/brand/article/article.module.scss b/src/pages/preview/brand/article/article.module.scss index c6d9d5f..f88807c 100644 --- a/src/pages/preview/brand/article/article.module.scss +++ b/src/pages/preview/brand/article/article.module.scss @@ -38,6 +38,26 @@ } } +.botmBox { + z-index: 99; + position: fixed; + bottom: 0; + width: 690rpx; + height: 100rpx; + padding: 0 30rpx env(safe-area-inset-bottom); + display: flex; + justify-content: flex-end; + align-items: center; + background: #F5F8F7; + color: #909795; + + View { + font-size: 26rpx; + padding: 0 10px; + text-align: center; + } +} + .article { font-size: 30rpx; display: flex; @@ -52,3 +72,10 @@ font-size: 40rpx; margin-bottom: 50rpx; } + +.articleBox { + background: #fff; + min-height: calc(100vh - env(safe-area-inset-bottom) + 180rpx); + box-sizing: border-box; + padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 150rpx) 30rpx; +} diff --git a/src/pages/preview/brand/article/article.tsx b/src/pages/preview/brand/article/article.tsx index bc7f5c5..9b41257 100644 --- a/src/pages/preview/brand/article/article.tsx +++ b/src/pages/preview/brand/article/article.tsx @@ -1,5 +1,5 @@ import {FC, useCallback, useEffect, useMemo, useState} from "react"; -import {Image, Text, View} from "@tarojs/components"; +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"; @@ -10,6 +10,8 @@ import Empty from "@/components/empty/empty"; 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"; const article: FC = () => { @@ -18,9 +20,12 @@ const article: FC = () => { const {id} = useRouter().params as unknown as { id: number } const [articleInfo, setArticleInfo] = useState() const [ultra, setUltra] = useState(true) + const [show, setShow] = useState(false) const globalData = Taro.getApp().globalData const pageHeight = globalData.windowHeight - globalData.textBarHeight - globalData.statusBarHeight const {children, headings} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo]) + const query = Taro.createSelectorQuery() + useEffect(() => { setTimeout(() => { @@ -34,6 +39,22 @@ const article: FC = () => { }, 300) }, [children]) + 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 + } + ) + } + }) + }) + } + Taro.useReady(() => { getData().then() }) @@ -54,12 +75,30 @@ const article: FC = () => { function helloWorld() { return ( <> + + + + + { + headings.length > 0 && setShow(true)}> + + 目录 + + } + + - + {articleInfo?.title} { @@ -67,7 +106,7 @@ const article: FC = () => { { articleInfo?.brands.map(d => - + {d?.name} @@ -97,9 +136,26 @@ const article: FC = () => { } + setShow(false)} + show={show} + round + overlay + overlayStyle={'background:rgba(0,0,0,0.3)'}> + + { + headings.length > 0 && headings.map((d) => mao(d.id)}> + {d.text} + + ) + } + + ) - } return helloWorld() diff --git a/src/pages/preview/brand/list/list.tsx b/src/pages/preview/brand/list/list.tsx index ab1e9ba..dc43706 100644 --- a/src/pages/preview/brand/list/list.tsx +++ b/src/pages/preview/brand/list/list.tsx @@ -60,7 +60,6 @@ const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onCl {data.article_count || 0} - {JSON.stringify(data.collect)} diff --git a/src/pages/preview/illness/article/article.config.ts b/src/pages/preview/illness/article/article.config.ts deleted file mode 100644 index 6901b40..0000000 --- a/src/pages/preview/illness/article/article.config.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default definePageConfig({ - navigationBarTitleText: '', - onReachBottomDistance: 50 -}) diff --git a/src/pages/preview/illness/article/article.module.scss b/src/pages/preview/illness/article/article.module.scss deleted file mode 100644 index 0c16607..0000000 --- a/src/pages/preview/illness/article/article.module.scss +++ /dev/null @@ -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; -} diff --git a/src/pages/preview/illness/article/article.tsx b/src/pages/preview/illness/article/article.tsx deleted file mode 100644 index ce221d6..0000000 --- a/src/pages/preview/illness/article/article.tsx +++ /dev/null @@ -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() - 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 ( - <> - setShow(true)}> - - - - - - 目录 - - - - - {articleInfo?.title} - { - articleInfo?.brands.map(d => - - - {d?.name} - - {beforeTime(articleInfo?.created_at)} . - 阅读 {articleInfo.page_view || 1} - - - ) - } - - {children} - - { - !token && - - - - - - Taro.navigateTo({url: '/pages/login/login'})}> - 登录查看更多内容 - - - - } - - setShow(false)} - show={show} - round - overlay - overlayStyle={'background:rgba(0,0,0,0.3)'}> - - {headings.length > 0 && headings.map((d) => mao(d.id)}> - {d.text} - - )} - - - - ) - } - - return helloWorld() -} -export default article diff --git a/src/pages/preview/illness/list/list.tsx b/src/pages/preview/illness/list/list.tsx index 877995b..7089638 100644 --- a/src/pages/preview/illness/list/list.tsx +++ b/src/pages/preview/illness/list/list.tsx @@ -34,7 +34,7 @@ const BrandList: FC = () => { }, [page]) function jump(id: number) { - Taro.navigateTo({url: '/pages/preview/illness/article/article?id=' + id}) + Taro.navigateTo({url: '/pages/preview/brand/article/article?id=' + id}) } diff --git a/src/pages/preview/search/search/components/list.tsx b/src/pages/preview/search/search/components/list.tsx index b2be759..791ba0b 100644 --- a/src/pages/preview/search/search/components/list.tsx +++ b/src/pages/preview/search/search/components/list.tsx @@ -71,7 +71,7 @@ const SearchList: FC = ({name, clear}) => { url = '/pages/preview/illness/list/list'; break; case 'article': - url = '/pages/preview/illness/article/article' + url = '/pages/preview/brand/article/article' break case 'video_records': return Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`})