miniapp/src/pages/index/components/HotRecommend/index.jsx

import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import Taro from '@tarojs/taro'
import { queryActivityList } from '@/services/activity'
import '@/assets/css/iconfont.css'
import './index.scss'

export default function HotRecommend (props) {

  const { change = () => { } } = props
  const city = useSelector(state => state.city)
  const [MenuList] = useState([{ name: '热门活动', id: 'dymic' }, { name: '热门团房', id: 'house' }])
  const [CurrentId, setCurrentId] = useState('dymic')
  const [list, setList] = useState([])
  const [CurrentContentInfo, setCurrentContentInfo] = useState({})

  useEffect(() => {
    if (city.curCity.name) {
      GetRecommendActivity()
    }
  }, [city])

  const GetRecommendActivity = () => {

    queryActivityList({ home: 1, cityId: city.curCity.id }).then((res) => {
      const resArr = res.records || []
      setList(resArr)
      change(!!resArr.length)
    })
  }

  useEffect(() => {
    if (list.length > 0) {
      setCurrentContentInfo(CurrentId === 'dymic' ? list[0] : list[1])
    }
  }, [CurrentId, list])

  const CutMenu = (id) => {
    return () => {
      setCurrentId(id)
    }
  }
  const ToMore = () => {
    Taro.navigateTo({ url: `/pages/index/activityList/index?type=${CurrentId}` })
  }

  const toDetail = () => {
    if (CurrentContentInfo.dynamicId) {
      Taro.navigateTo({ url: `/pages/index/activityDetail/index?id=${CurrentContentInfo.dynamicId}` })
    }
  }

  return (
    <view className='components HotRecommend'>
      <view>
        <view className='Menu flex-h'>
          {
            MenuList.map((item, index) => (
              <view onClick={CutMenu(item.id)} className={CurrentId === item.id ? 'active flex-item' : 'flex-item'} key={`Menu-${index}`}>{item.name}</view>
            ))
          }
        </view>
        <view className='Content' onClick={toDetail}>
          <view className='flex-h'>
            <text className='flex-item'>{CurrentContentInfo.title || '暂无活动'}</text>
            <text onClick={ToMore}>{CurrentId === 'dymic' ? '更多活动' : '更多团房'}</text>
          </view>
          <text>{CurrentContentInfo.halfTitle}</text>
        </view>
      </view>
    </view>
  )
}