miniapp/src/components/WuYeFuWu/index.jsx

import React, { useState, useEffect } from 'react'
import { useModel } from '@/store'
import Taro from '@tarojs/taro'
import WuYeFuWuItem from '@/components/WuYeFuWuItem/index'
import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
import request, { apis } from '@/utils/request'
import nav2detail from '@/utils/nav2detail'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import IconBlock from './components/IconBlock'
import './index.less'

export default function WuYeFuWu () {

  const { user } = useModel('user')
  const [newsTypeId, setNewsTypeId] = useState()
  const [PageList, setPageList] = useState([])
  const [BannerList, setBannerList] = useState([])
  const [typeList, setTypeList] = useState([])
  const [IsEmpty, setIsEmpty] = useState(false)

  useEffect(() => {
    GetBanner()

    request({...apis.getTpNewsList, params: {pageSize: 999}}).then(res => setTypeList(res || []))
  }, [])

  const GetBanner = (done = () => { }) => { // 获取轮播图
    request({ ...apis.getBanner, params: { showPosition: `property`, showType: 'banner', pageNum: 1, pageSize: 1 } }).then((res) => {
      setBannerList([...(res || [])])
      done()
    }).catch(() => {
      done()
    })
  }

  const Refresh = (e) => { // 下拉刷新
    if (e.length > 0) {
      setIsEmpty(false)
      setPageList(e)
    } else {
      setIsEmpty(true)
    }
  }

  const Push = (e) => { // 上拉加载
    setPageList(PageList.concat(e))
  }

  const KeepChildren = () => {
    return (
      <view>
        {/* 大图 */}
        <view className='BigImg'>
          {
            BannerList.length > 0 &&
            <image mode='aspectFill' src={BannerList[0].image} className='centerLabel' onClick={() => nav2detail({ type: BannerList[0].contentType, id: BannerList[0].targetId })}></image>
          }
        </view>

        <view style={{display: 'flex', justifyContent: 'space-between'}}>
          <IconBlock title="办事指南" />
          <IconBlock title="政策法规" />
        </view>

        {/* 物业办事指南 */}
        {/* <view className='BanShiZhiNan'>
          <text>物业办事指南</text>
          <view className='flex-h'>
            <view className='Line'><view></view></view>
            <view className='flex-item'>
              <text>1、业主收楼手续办理</text>
              <text>2、物业转名手续办理</text>
              <text>3、业主卡、住户卡办理</text>
            </view>
          </view>
        </view> */}
      </view>
    )
  }

  return (
    <view className='WuYeFuWu'>
      <ScrollPageRefresh
        KeepChildren
        IsEmpty={IsEmpty}
        ApiName={`getWuYeFuWuList`}
        Refresh={Refresh}
        Push={Push}
        KeepChildren={
          <view>
            {/* 大图 */}
            <view className='BigImg'>
              {
                BannerList.length > 0 &&
                <image mode='aspectFill' src={BannerList[0].image} className='centerLabel' onClick={() => nav2detail({ type: BannerList[0].contentType, id: BannerList[0].targetId })}></image>
              }
            </view>

            {/* 物业办事指南 */}
            {/* <view className='BanShiZhiNan'>
              <text>物业办事指南</text>
              <view className='flex-h'>
                <view className='Line'><view></view></view>
                <view className='flex-item'>
                  <text>1、业主收楼手续办理</text>
                  <text>2、物业转名手续办理</text>
                  <text>3、业主卡、住户卡办理</text>
                </view>
              </view>
            </view> */}
            
            <view className="fw-icon-row">
              {
                typeList.map((it, ix) => (
                  <IconBlock
                    key={it.newsTypeId}
                    title={it.newsTypeName}
                    icon={it.newsTypeImg}
                    style={ix > 2 ? {marginTop: '20rpx'} : {}}
                    onClick={() => setNewsTypeId(it.newsTypeId)}
                  />
                ))
              }
            </view>
          </view>
        }
      >
        {/* 服务列表 */}
        <view className='List'>
          {
            PageList.map((item, index) => (
              <view key={`WuYeFuWuItem-${index}`}>
                <WuYeFuWuItem Data={item}></WuYeFuWuItem>
              </view>
            ))
          }
        </view>
      </ScrollPageRefresh>
    </view>
  )
}