miniapp/src/pages/index/index.jsx

import { useState, useEffect, useCallback } from 'react'
import { useSelector } from 'react-redux'
import Taro from '@tarojs/taro'
import { ScrollView } from '@tarojs/components'
import withLayout from '@/layout'
import ProjectListItem from '@/components/ProjectListItem/index'
// import ShareToCircle from '@/components/ShareToCircle/index'
import FirstScreen from '@/components/FirstScreen'
import { fetch } from '@/utils/request'
import { API_BANNER_LIST, API_INDEX_PROJECTS } from '@/constants/api'
import useParams from '@/utils/hooks/useParams'
import useShare from '@/utils/hooks/useShare'
import useScreen from '@/utils/hooks/useScreen'
import nav2Target from '@/utils/nav2Target'
import ChatIcon from '@/components/ChatIcon/index'
import {  ROLE_CODE } from "@/constants/user";
import Location from './components/Location/index'
import Banner from './components/Banner/index'
import Menu from './components/Menu/index'
import HotRecommend from './components/HotRecommend/index'
import NewestNnews from './components/NewestNnews/index'
import LiveSale from './components/LiveSale/index'
import ColumnTitle from './components/ColumnTitle/index'
import useIndexShareContent from './useIndexShareContent'

import './index.scss'

export default withLayout((props) => {
  const { city, router, person, trackData, page, mode } = props
  const isSinglePage = mode === 'singlePage'
  
  // 本页面分享或者海报参数
  const paramsRef = useParams({person, from: `${page.type}_share`})
  const { miniApp } = useSelector(s => s.user.userInfo)
  const [BannerList, setBannerList] = useState([])
  const [ProjectList, setProjectList] = useState([])
  const [ShowHotRecommend, setShowHotRecommend] = useState(false)
  const [ShowNewestNnews, setShowNewestNnews] = useState(false)
  const [ShowLive, setShowLive] = useState(false)
  const shareContent = useIndexShareContent(miniApp, paramsRef, router)
  
  // 开屏广告
  const [screenInfo, screenVisible, toggleShowScreen] = useScreen(city.id, person)

  // 分享
  useShare(shareContent, trackData)

  const GetBanner = () => { // 获取banner
    fetch({ url: `${API_BANNER_LIST}/banner`, method: 'get', payload: { cityId: city.id, showPosition: 'index' } }).then((res) => {
      setBannerList(res || [])
    })
  }

  const GetProjectList = () => { // 获取项目列表
    fetch({ url: API_INDEX_PROJECTS, method: 'get', payload: { cityId: city.id, pageNum: 1, pageSize: 20 } }).then((res) => {
      setProjectList(res.records || [])
    })
  }

  const HotRecommendChange = (e) => {
    setShowHotRecommend(e)
  }
  
  const NewestNnewsChange = (e) => {
    setShowNewestNnews(e)
  }
  
  const LiveChange = (e) => {
    setShowLive(e)
  }
  
  const handleScreen = () => {
    toggleShowScreen()
    if(person.personType ===ROLE_CODE.BROKER){
      Taro.navigateTo({ url: screenInfo.linkPage })
    }else{
      nav2Target(screenInfo)
    }
    
  }


  useEffect(() => {
    if (city?.id) {
      GetBanner()
      GetProjectList()
    }
  }, [city?.id])

  const toBuilingList = useCallback(() => Taro.navigateTo({ url: `/pages/index/buildingList/index` }), [])

  return (
    <view className='Page Index'>
      <ChatIcon />
      
      {/* 开屏广告 */}
      <FirstScreen
        info={screenInfo}
        visible={screenVisible && !isSinglePage}
        onClick={handleScreen}
        onClose={toggleShowScreen}
      />

      <ScrollView scroll-y>
        <view className='PageContent'>

          {/* 定位 */}
          <view className='Location'>
            <Location></Location>
          </view>

          {/* banner */}
          <view className='Banner'>
            <view>
              <view>
                <Banner List={BannerList}></Banner>
              </view>
            </view>
          </view>

          {/* 菜单 */}
          <view className='Menu'>
            <Menu></Menu>
          </view>

           {/* 成交喜报 */}
           {person?.personType===ROLE_CODE.BROKER&&<view className='NewestNnews' style={{display: ShowNewestNnews ? 'block' : 'none'}}>
            {/* <ColumnTitle Name='热门推荐' Icon='icon-shoucang'></ColumnTitle> */}
            <NewestNnews change={NewestNnewsChange}></NewestNnews>
          </view>}
          
          {/* 热门推荐 */}
          <view className='HotRecommend' style={{display: ShowHotRecommend ? 'block' : 'none'}}>
            <ColumnTitle Name='热门推荐' Icon='icon-shoucang'></ColumnTitle>
            <HotRecommend change={HotRecommendChange}></HotRecommend>
          </view>

          {/* 直播购房 */}
          <view className='LiveSale' style={{display: ShowLive ? 'block' : 'none'}}>
            <ColumnTitle Name='直播购房' Icon='icon-yinpin' ShowMore ToMore={() => { Taro.switchTab({ url: `/pages/video/index` }) }}></ColumnTitle>
            <LiveSale change={LiveChange}></LiveSale>
          </view>

          {/* 全部项目 */}
          <view className='AllProject'>
            <ColumnTitle Name='推荐楼盘' Icon='icon-aixin' ShowMore ToMore={toBuilingList}></ColumnTitle>
            <view className='ProjectList'>
              {
                ProjectList.map((item, index) => (
                  <ProjectListItem Data={item} key={`ProjectListItem-${index}`}></ProjectListItem>
                ))
              }
            </view>
          </view>

          {/* bottom */}
          <view className='PageBottom' onClick={toBuilingList}>
            <text>点击查看更多</text>
          </view>

        </view>
      </ScrollView>

    </view>
  )
})