疾病文章详情

src/app.config.ts

@@ -86,6 +86,7 @@ export default defineAppConfig({
         'profession/profession',
         'health/health',  // 健康
         'videoFull/videoFull',  // 资源id 视频全屏
+        'illness/article/article'
       ]
     },
   ],

src/pages/preview/illness/article/article.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '',
+  onReachBottomDistance: 30
+})

src/pages/preview/illness/article/article.module.scss

@@ -0,0 +1,34 @@
+.fixedBox{
+  position: absolute;
+  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;
+    }
+
+  }
+}

src/pages/preview/illness/article/article.tsx

@@ -0,0 +1,51 @@
+import {FC, useEffect, 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";
+
+
+const article:FC = () => {
+  const {token} = Profile.useContainer()
+  const {id} = useRouter().params as unknown as { id: number}
+  const [articleInfo,setArticleInfo] = useState<ArticleRecord>()
+  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 helloWorld() {
+    const html = articleInfo?.content;
+    return (
+      <>
+        <View dangerouslySetInnerHTML={{ __html: html! }}></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']}>
+                <Text>登录查看更多内容</Text>
+              </View>
+            </View>
+          </View>
+        }
+
+      </>
+    )
+  }
+  return helloWorld()
+}
+export default article