文章修改目录显示

src/components/collect/collect.tsx

@@ -15,6 +15,7 @@ interface Props {
   owner_id: number
   owner_type: CreateOwnerType
   textHidden?: boolean
+  onUpdate?: (v: boolean) => void
 }
 
 /** 收藏 */
@@ -37,7 +38,9 @@ const Collect: FC<Props> = (props) => {
     console.log(select)
     setSelect(!select)
     setLoading(true)
+    // fixme: 动画逻辑不对，应该是先 loading, 然后只有操作成功之后才是 select 动画
     await userApi.create({owner_id: props.owner_id, owner_type: props.owner_type})
+    props.onUpdate?.(!select)
     setTimeout(() => {
       setLoading(false)
     }, 300)

src/components/icon/index.tsx

@@ -213,12 +213,17 @@ export interface IconProps {
   size?: string | number
   color?: string
   onClick?: (event: ITouchEvent) => void
+  bold?: boolean
 }
 
 const Icon: FC<IconProps> = (props) => {
   const size = typeof props.size === 'string' ? props.size : `${props.size ?? 16}px`
   const color = props.color ?? 'currentColor'
-  const fontStyle: CSSProperties = {fontSize: size, color}
+  const fontStyle: CSSProperties = {
+    fontSize: size,
+    color,
+    fontWeight: props.bold ? 'bold' : undefined,
+  }
 
   return (
     <Text className={`icon icon-${props.name}`} style={fontStyle} onClick={props.onClick} />

src/pages/home/components/curRecommended.tsx

@@ -24,7 +24,7 @@ const CurRecommended: FC = () => {
     const res = await HomeApi.course(page, 4)
     setArticles(res.articles)
     setTotal(res.course.total)
-    const newData = res.course.data.reduce((pre, cut) => {
+    const newData = res.course.data?.reduce((pre, cut) => {
       const index = pre.findIndex(d => d.id === cut.id)
       if (index === -1) {
         pre.push(cut)
@@ -33,7 +33,7 @@ const CurRecommended: FC = () => {
       }
       return pre
     }, JSON.parse(JSON.stringify(data)) as Curriculum[])
-    setData(newData)
+    setData(newData ?? [])
   }
 
   useEffect(() => {

src/pages/home/home.tsx

@@ -52,7 +52,7 @@ const Home: FC = () => {
         leftNode={
           <>
             <Image src={logo} style={{height: "110%"}} mode='heightFix'/>
-            <Text className='font-36 font-weight'>医学道</Text>
+            <Text className='font-36 font-weight'>信桂</Text>
           </>
         }
       >

src/pages/index/index.tsx

@@ -9,6 +9,7 @@ import Spin from "@/components/spinner";
 import Img from "@/components/image/image";
 import {beforeTime} from "@/utils/time";
 import {isBoolean} from "@tarojs/shared";
+import Taro from "@tarojs/taro";
 
 const category: TabList[] = [
   {title: "企选课程", value: 'is_required'},
@@ -57,7 +58,7 @@ const AuditMode: FC = () => {
             <NavigationBar text='文章列表' cancelBack/>
             <View className='bg-white rounded-20 clip'>
               {
-                articles.map((d, i) => <View className='p-3 relative'>
+                articles.map((d, i) => <View className='p-3 relative' onClick={() => Taro.navigateTo({url: "/pages/preview/brand/article/article?id=" + d.id})}>
                   {i > 0 && <View className='absolute top left right divided ml-3 mr-3'/>}
                   <View className="font-34 text-black">{d.title}</View>
                   {(d.intro || '').length > 40 && (<View className='flex mt-1'>

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

@@ -65,7 +65,7 @@ page{
 .article {
   font-size: 30rpx;
   display: flex;
-  margin-bottom: 40rpx;
+  //margin-bottom: 40rpx;
 }
 
 .articleImag {

src/pages/preview/brand/article/article.tsx

@@ -11,8 +11,8 @@ 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";
-
+import catalogue from "@/static/img/catalogue-inactive.png";
+import Icon from "@/components/icon";
 
 const article: FC = () => {
   const {token} = Profile.useContainer()
@@ -25,7 +25,7 @@ const article: FC = () => {
   const pageHeight = globalData.windowHeight - globalData.textBarHeight - globalData.statusBarHeight
   const {children, headings} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo])
   const query = Taro.createSelectorQuery()
-
+  const [maoId, setMaoId] = useState('')
 
   useEffect(() => {
     setTimeout(() => {
@@ -39,11 +39,19 @@ const article: FC = () => {
     }, 300)
   }, [children])
 
+  useEffect(() => {
+    if (!maoId && headings.length) {
+      setMaoId(headings[0].id)
+    }
+  }, [headings])
+
   function mao(id: string) {
+    setMaoId(id)
     setShow(false)
     Taro.nextTick(() => {
       query.select(`#${id}`).boundingClientRect()
       query.exec((res) => {
+        console.log({res})
         if (res.length) {
           Taro.pageScrollTo({
               scrollTop: res[res.length - 1].top,
@@ -55,6 +63,10 @@ const article: FC = () => {
     })
   }
 
+  const onCollect = (v: boolean | undefined) => {
+    setArticleInfo((s) => ({...s,  collect: v} as ArticleRecord))
+  }
+
   Taro.useReady(() => {
     getData().then()
   })
@@ -82,13 +94,17 @@ const article: FC = () => {
               styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}}
               stylesImage={{margin: '0 0 8rpx 0'}}
               owner_id={Number(id)}
-              owner_type={1}/>
+              owner_type={1}
+              onUpdate={onCollect}
+            />
           </View>
           {
-            headings.length > 0 && <View onClick={() => setShow(true)}>
+            headings.length > 0 && (
+              <View className='flex flex-column justify-center align-center' onClick={() => setShow(true)}>
                 <Image src={catalogue} mode='widthFix' style={{width: '40rpx', height: '40rpx'}}/>
                 <View>目录</View>
               </View>
+            )
           }
         </View>
 
@@ -102,22 +118,35 @@ const article: FC = () => {
           <View id="childrenNode">
             <View className={styles.articleTitle}>{articleInfo?.title}</View>
             {
-              children.length > 0 ?
-                <View>
-                  {
-                    articleInfo?.brands.map(d => <View className={styles.article}>
+              articleInfo?.brands.map(d => (
+                <View className='flex align-center mb-4'>
+                  <View className={`${styles.article} flex-1`}>
                     <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>阅读 {articleInfo.page_view || 0}</View>
                       </View>
                     </View>
-                    </View>)
-                  }
-                  {children}
                   </View>
+                  <View className='ml-2'>
+                    <Collect
+                      select={articleInfo?.collect}
+                      styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}}
+                      stylesImage={{margin: '0 0 8rpx 0'}}
+                      owner_id={Number(id)}
+                      owner_type={1}
+                      textHidden
+                      onUpdate={onCollect}
+                    />
+                  </View>
+                </View>
+              ))
+            }
+            {
+              children.length > 0
+                ? <View>{children}</View>
                 : <Empty name='暂无数据'/>
             }
           </View>
@@ -138,21 +167,37 @@ const article: FC = () => {
         }
         <PageContainer
           onClickOverlay={() => setShow(false)}
+          onAfterLeave={() => setShow(false)}
           show={show}
           round
           overlay
-          overlayStyle={'background:rgba(0,0,0,0.3)'}>
+          overlayStyle={'background:rgba(0,0,0,0.3)'}
+        >
+          <View>
+            <View className='text-center text-black relative clip'>
+              <View className='absolute left top bottom flex flex-column justify-center align-center' style={{width: '58px'}} onClick={() => setShow(false)}>
+                <Icon name='close' color="#000" bold />
+              </View>
+              <View className='py-3 bold'>目录</View>
+            </View>
+            <View className='hr-solid' />
             <View className="px-3 py-5">
               {
                 headings.length > 0 && headings.map((d) => <View
                     className="pb-3"
-                  style={{fontSize: '28rpx', fontWeight: '500', color: '#323635'}}
+                    style={{
+                      fontSize: '28rpx',
+                      fontWeight: '500',
+                      color: maoId === d.id ? '#45D4A8' : '#323635',
+                      marginLeft: 24*(d.level-1) + 'px',
+                    }}
                     onClick={() => mao(d.id)}>
                     {d.text}
                   </View>
                 )
               }
             </View>
+          </View>
         </PageContainer>
       </>
     )
@@ -160,4 +205,5 @@ const article: FC = () => {
 
   return helloWorld()
 }
+
 export default article

src/pages/preview/illness/list/list.tsx

@@ -1,10 +1,11 @@
 import {FC, useCallback, useEffect, useState} from "react";
 import {View} from "@tarojs/components";
-import styles from './list.module.scss'
 import Taro, {useReachBottom, useRouter} from "@tarojs/taro";
 import {illnessApi} from "@/api/illness";
 import Empty from "@/components/empty/empty";
 import Spin from "@/components/spinner";
+import Img from "@/components/image/image";
+import {beforeTime} from "@/utils/time";
 
 const BrandList: FC = () => {
   const params = useRouter().params as unknown as { id: number }
@@ -51,10 +52,19 @@ const BrandList: FC = () => {
       {
         articles.length > 0 ?
           <>
-            <View className='bg-white'>
+            <View className='bg-white rounded-20 clip'>
               {
-                articles.map((d, index) => <View key={d.id} className={styles.articles} onClick={() => jump(d.id)}>
-                  {index + 1} . {d.title}
+                articles.map((d, i) => <View className='p-3 relative' onClick={() => jump(d.id)}>
+                  {i > 0 && <View className='absolute top left right divided ml-3 mr-3'/>}
+                  <View className="font-34 text-black">{d.title}</View>
+                  {(d.intro || '').length > 40 && (<View className='flex mt-1'>
+                    <View className="flex-1 font-24 lh1_5">{d.intro}</View>
+                    {d.cover && <Img className='ml-l' width={140} height={100} src={d.cover} errorType="acquiesce"/>}
+                  </View>)}
+                  <View className="flex mt-3 justify-between font-24 text-muted">
+                    <View>{beforeTime(d.created_at)}</View>
+                    <View>阅读 {d.page_view || 0}</View>
+                  </View>
                 </View>)
               }
             </View>