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

import {FC, useCallback, 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 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 = () => {
  const {token} = Profile.useContainer()
  const [enable, setEnable] = useState(true)
  const {id} = useRouter().params as unknown as { id: number }
  const [articleInfo, setArticleInfo] = useState<ArticleRecord>()
  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(() => {
      const query = Taro.createSelectorQuery()
      query.select('#childrenNode').boundingClientRect((res) => {
        if (!Array.isArray(res)) {
          console.log({childrenNode: res})
          setUltra(pageHeight * .45 <= res.height)
        }
      }).exec()
    }, 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()
  })

  const getData = useCallback(async () => {
    try {
      const data = await brandApi.articleInfo(id)
      Taro.setNavigationBarTitle({title: data.title})
      if (data.content.length < 200) {
        setUltra(false)
      }
      setArticleInfo(data)
    } catch (e) {
    }
    setEnable(false)
  }, [id])

  function helloWorld() {
    return (
      <>
        <View className={styles.botmBox}>
          <View>
            <Collect
              select={articleInfo?.collect}
              styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}}
              stylesImage={{margin: '0 0 8rpx 0'}}
              owner_id={Number(id)}
              owner_type={1}/>
          </View>
          {
            headings.length > 0 && <View onClick={() => setShow(true)}>
              <Image src={catalogue} mode='widthFix' style={{width: '40rpx', height: '40rpx'}}/>
              <View>目录</View>
            </View>
          }
        </View>

        <Spin overlay enable={enable}/>
        <View
          className={styles.articleBox}
          style={{
            height: !token ? Taro.getWindowInfo().windowHeight - 60 + 'px' : 'auto',
            overflow: !token ? 'hidden' : 'auto'
          }}>
          <View id="childrenNode">
            <View className={styles.articleTitle}>{articleInfo?.title}</View>
            {
              children.length > 0 ?
                <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>)
                  }
                  {children}
                </View>
                : <Empty name='暂无数据'/>
            }
          </View>
        </View>
        {
          !token && ultra && children.length > 0 &&
          <View className={styles.fixedBox}>
            <View className={styles['fixedBox-inner']}>
              <View className={styles['fixedBox-inner-icon']}>
                <Image src={down}/>
              </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