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

import {FC, useEffect, useState} from "react";
import {Image, Swiper, SwiperItem, Text, Video, View} from "@tarojs/components";
import {ArticleRecord, brandApi, BrandRecord} from "@/api";
import styles from './info.module.scss'
import Taro, {useRouter} from "@tarojs/taro";
import LineEllipsis from "@/components/textCollapse/collapse";
import Empty from "@/components/empty/empty";

type Params = {
  id: number
}
const BrandInfo: FC = () => {
  const {id} = useRouter().params as unknown as Params
  const [brandInfo, setBrandInfo] = useState<BrandRecord>()
  const [articleList, setArticleList] = useState<ArticleRecord[]>()
  const [curIndex,setCurIndex] = useState<number>(1)

  useEffect(() => {
    getData()
  }, [id])

  const getData = async () => {
    try {
      const data = await brandApi.info(id)
      Taro.setNavigationBarTitle({title: data.name})
      setBrandInfo(data)
      const data1 = await brandApi.articleList(id)
      setArticleList(data1.list)
    } catch (e) {
      // setBrandInfo({disabled: 0, graphic_introduction: "", id: 0, introductory_video: "", name: "", brand_album:['1','2','3']})
    }
  }

  function onChange(e){
    console.log(e)
    setCurIndex(+e.detail.current+1)
  }

  return (
    <View className='flex flex-column '>
        <Swiper
          className={styles['swiper']}
          indicatorColor='#999'
          indicatorActiveColor='#333'
          indicatorDots
          onChange={onChange}
        >
          { brandInfo?.introductory_video_resource?.url && <SwiperItem>
            <Video
              style={{width: '750rpx', height: '600rpx'}}
              playBtnPosition={"center"}
              id='video'
              src={brandInfo?.introductory_video_resource?.url}
              initialTime={0}
              controls={true}
              enableProgressGesture={false}
              showFullscreenBtn={false}
              autoplay={false}
              loop={false}
              muted={false}
            />
          </SwiperItem>}
          {brandInfo?.brand_album?.length
            && brandInfo?.brand_album?.split(',').map((d) =>
              <SwiperItem>
                <Image mode={'aspectFill'} style={{width:'750rpx',height:'600rpx'}} src={d}></Image>
              </SwiperItem>)
          }
        </Swiper>
        <View className={styles.curIndexBox}>
          <Text>{curIndex} / {brandInfo?.brand_album?.split(',').length + ((brandInfo && brandInfo.introductory_video_resource) ? 1:0)}</Text>
        </View>
      <View className={styles['body']}>
        <View className={styles['top']}>
          <Text className={styles['title']}>{brandInfo?.name}</Text>
          <LineEllipsis text={brandInfo?.graphic_introduction || ''}></LineEllipsis>
        </View>
        <View className={styles['bottom']}>
          {
            articleList?.length ?
              articleList.map((i: any) =>
                <View className={styles.box} onClick={() => {
                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
                }}>
                  <View className={styles.inner}>
                    <View className={styles.leftBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
                    </View>
                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
                  </View>
                </View>
              )
              : <Empty name='空空如也'/>
          }

          {
            articleList?.length ?
              articleList.map((i: any) =>
                <View className={styles.box} onClick={() => {
                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
                }}>
                  <View className={styles.inner}>
                    <View className={styles.leftBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
                    </View>
                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
                  </View>
                </View>
              )
              : <Empty name='空空如也'/>
          }
          {
            articleList?.length ?
              articleList.map((i: any) =>
                <View className={styles.box} onClick={() => {
                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
                }}>
                  <View className={styles.inner}>
                    <View className={styles.leftBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
                    </View>
                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
                  </View>
                </View>
              )
              : <Empty name='空空如也'/>
          }
          {
            articleList?.length ?
              articleList.map((i: any) =>
                <View className={styles.box} onClick={() => {
                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
                }}>
                  <View className={styles.inner}>
                    <View className={styles.leftBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
                    </View>
                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
                  </View>
                </View>
              )
              : <Empty name='空空如也'/>
          }
          {
            articleList?.length ?
              articleList.map((i: any) =>
                <View className={styles.box} onClick={() => {
                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
                }}>
                  <View className={styles.inner}>
                    <View className={styles.leftBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
                    </View>
                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
                  </View>
                </View>
              )
              : <Empty name='空空如也'/>
          }
          {
            articleList?.length ?
              articleList.map((i: any) =>
                <View className={styles.box} onClick={() => {
                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
                }}>
                  <View className={styles.inner}>
                    <View className={styles.leftBox}>
                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
                    </View>
                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
                  </View>
                </View>
              )
              : <Empty name='空空如也'/>
          }
        </View>
      </View>
    </View>
  );
}

export default BrandInfo