miniapp/src/pages/video/index.jsx

import { useState, useEffect } from 'react'
import { ScrollView, Input } from '@tarojs/components'
import withLayout from '@/layout'
import { fetch } from '@/utils/request'
import '@/assets/css/iconfont.css'
import { API_LIVE_LIST, API_VIDEO_LIST } from '@/constants/api'
import './index.scss'
import VideoListItem from './components/VideoListItem/index'

export default withLayout((props) => {
  const { city } = props

  const [CurrnetMenuId, setCurrnetMenuId] = useState('all')
  const [MenuList] = useState([
    { name: '全部', id: 'all' },
    { name: '预告', id: 'notice' },
    { name: '直播中', id: 'live' },
    { name: '新房推荐', id: 'new' },
    { name: '视频', id: 'video' }
  ])
  const [PageList, setPageList] = useState([])
  // 全部或者新房的列表
  const [activityList, setActivityList] = useState([])
  // 预告与直播的列表
  const [liveList, setLiveList] = useState([])
  // 视频的列表
  const [videoList, setVideoList] = useState([])

  useEffect(() => {
    if (city?.id) {
      GetLiveList()
    }
  }, [city?.id, CurrnetMenuId])


  const GetLiveList = (params) => {
    if (['all'].indexOf(CurrnetMenuId) > -1) {
      // 全部
      fetch({ url: API_LIVE_LIST, payload: { ...params, cityId: city.id }, spin: true }).then((res) => {
        setPageList(res.records || [])
      })
    } else if (['new'].indexOf(CurrnetMenuId) > -1) {
      // 新房
      fetch({ url: API_LIVE_LIST, payload: { ...params, cityId: city.id, newHouse: true }, spin: true }).then((res) => {
        setPageList(res.records || [])
      })
    } else if (['notice', 'live'].indexOf(CurrnetMenuId) > -1) {
      // 预告与直播是虽然是同一个接口, 但是返回值字段不一样
      const process = 'notice' === CurrnetMenuId ? 1 : 2;
      fetch({ url: API_LIVE_LIST, payload: { ...params, cityId: city.id, process }, spin: true}).then((res) => {
        setPageList(res.records || [])
      })
    } else {
      // 视频另外一个接口
      fetch({ url: API_VIDEO_LIST, payload: { ...params, cityId: city.id }, spin: true }).then((res) => {
        setPageList(res.records || [])
      })
    }
  }

  const CutMenu = (id) => {
    return () => {
      if (id !== CurrnetMenuId) {
        setCurrnetMenuId(id)
      }
    }
  }

  return (
    <view className='Page Video flex-v'>

      <view className='Search'>
        <view>
          <text className='iconfont icon-sousuo'></text>
          <Input placeholder='请输入直播标题'></Input>
        </view>
      </view>

      <view className='Menu'>
        <view className='flex-h'>
          {
            MenuList.map((item, index) => (
              <view key={`MenuItem-${index}`} className={CurrnetMenuId === item.id ? 'active' : ''}>
                <text onClick={CutMenu(item.id)}>{item.name}</text>
              </view>
            ))
          }
        </view>
      </view>

      <view className='flex-item'>
        <view>
          <ScrollView scroll-y>
            <view className='PageContent'>
              {
                PageList.map((item, index) => (
                  <view className='ListItem' key={`List-${index}`}>
                    <view>
                      <view>
                        <VideoListItem Data={item}></VideoListItem>
                      </view>
                    </view>
                  </view>
                ))
              }

              {/* bottom */}
              <view className='PageBottom'>
                <text>已经到底了~</text>
              </view>
            </view>
          </ScrollView>
        </view>
      </view>

    </view>
  )
})