Highways4Good/weapp/src/packages/patrolView/index.jsx

import React, { useState, useEffect } from 'react'
import Taro, { useDidShow, useRouter, useReachBottom } from '@tarojs/taro'
import { View, Picker, Input, Image } from '@tarojs/components'
import moment from 'moment'
import './index.scss'
import NoData from '@/components/no-data/noData'
import request from '@/services/request'
import { getReportList } from '@/services/api';
import chevronDown from '../../static/img/patrolView/chevron-down.png'
import searchIcon from '../../static/img/patrolView/search.png'
import cardImg from '../../static/img/patrolView/card-img.png'
import patrolIcon from '../../static/img/patrolView/patrol.svg'
import patrolActiveIcon from '../../static/img/patrolView/patrol-active.svg'
import conserveIcon from '../../static/img/patrolView/conserve.svg'
import conserveActiveIcon from '../../static/img/patrolView/conserve-active.svg'

function Index() {
  const userInfo = Taro.getStorageSync('userInfo') || {};
  const router = useRouter()
  const { params: { filter } } = router

  const [isPatrol, setIsPatrol] = useState(true)
  const [datePicker, setDatePicker] = useState(moment().format('YYYY-MM-DD'))
  const [listData, setListData] = useState([])
  const [filterText, setFilterText] = useState('')
  const [systemInfo, setSystemInfo] = useState('')
  const [page, setPage] = useState(0)
  const [num, setNum] = useState(Math.random())

  const limit = 10

  useEffect(() => {
    setPage(0)
    setNum(Math.random())
  }, [isPatrol, datePicker])

  useEffect(() => {
    getList(page == 0 ? true : false)
  }, [num])

  function dealError(error) {
    Taro.showToast({
      title: error,
      icon: 'none',
      duration: 1500
    });
    throw new Error(error);
  }
  const getList = (isInit) => {
    Taro.showLoading({ title: '加载中' })
    const data = {
      limit,
      page,
      startTime: datePicker + ' 00:00:00',
      endTime: datePicker + ' 23:59:59',
      keyword: filterText,
      reportType: isPatrol ? 'patrol' : 'conserve',
      userId: filter === 'my' ? userInfo.id : '',
    }
    request.get(getReportList(), data).then(res => {
      Taro.hideLoading()
      if (res.statusCode == 200) {
        if (res.data.length === 0) {
          Taro.showToast({
            title: '没有更多了',
            icon: 'none'
          })
        }
        const temp = isInit ? [] : listData
        const nextListData = temp.concat(res.data)
        setListData(nextListData)
      } else {
        dealError(res.data.message || '请求出错');
      }
    }, err => {
      dealError(err.message || '请求出错');
    });
  }

  // 监听上拉触底
  useReachBottom(() => {
    console.log('onReachBottom')
    setPage(page + 1)
    setNum(Math.random())
  })

  useDidShow(() => {
    let refresh = Taro.getStorageSync('refresh'); // 返回列表需要刷新
    if (refresh) {
      Taro.removeStorageSync('refresh'); // 返回列表需要刷新
    }
    Taro.getSystemInfo({
      success: (res) => {
        // windows | mac为pc端
        // android | ios为手机端
        setSystemInfo(res.platform);
      }
    });
  })

  const onTypeChange = bool => {
    setIsPatrol(bool)
  }

  const onDateChange = e => {
    setDatePicker(e.detail.value);
  }

  const handleConfirm = e => {
    setPage(0)
    setNum(Math.random())
  }

  const handleInput = e => {
    setFilterText(e.detail.value);
    if (!e.detail.value) {
      setPage(0)
      setNum(Math.random())
    }
  }

  const handleDetail = index => {
    Taro.navigateTo({ url: `/packages/patrol/index?type=view&id=${listData[index].id}` })
  }

  return (
    <View>
      <View className='type-box'>
        <View className='item' onClick={() => onTypeChange(true)}>
          <Image className='type-img' src={isPatrol ? patrolActiveIcon : patrolIcon} />
          <View style={{ color: isPatrol ? '#346FC2' : '#999999' }}>巡查</View>
        </View>
        <View className='line'></View>
        <View className='item' onClick={() => onTypeChange(false)}>
          <Image className='type-img' src={isPatrol ? conserveIcon : conserveActiveIcon} />
          <View style={{ color: isPatrol ? '#999999' : '#346FC2' }}>养护</View>
        </View>
      </View>
      <View className='filter-box'>
        <View className='filter-item'>
          <View style={{ float: 'left', marginLeft: '20rpx', color: '#333' }}>日期：</View>
          <Picker
            className='picker'
            style={{ overflow: 'hidden', float: 'left' }}
            mode='date'
            end={(systemInfo == 'windows' || systemInfo == 'mac')
              ? moment().add(1, 'd').format('YYYY-MM-DD')
              : moment().format('YYYY-MM-DD')} onChange={onDateChange}
          >
            <View className='filter-name'>{datePicker || '请选择'}</View>
            <Image className='filter-img' src={chevronDown} />
          </Picker>
        </View>
        <View class='head-search'>
          <Image className='search-img' src={searchIcon} />
          <Input class='heard-search-input' value={filterText} placeholder='请输入道路名称' onConfirm={handleConfirm} onInput={handleInput} />
        </View>
      </View>

      <View style={{ marginTop: '110px' }}>
        {
          listData && listData.length > 0 ? listData && listData.map((e, index) => {
            return (
              <View className='cardBox' key={index} onClick={() => handleDetail(index)}>
                <View className='card-item' >
                  <Image className='card-bg' src={cardImg} />
                  <View className='card-position'>
                    <View className='card-title'>{e.road}</View>
                    <View style={{ float: 'left', width: '100%', fontSize: '28rpx', marginTop: '16rpx' }}>
                      <View style={{ float: 'left' }}>填报人：</View>
                      <View style={{ float: 'left' }}>{e.user && e.user.name}</View>
                    </View>
                    <View className='card-date'>{moment(e.time).format('YYYY-MM-DD HH:mm:ss')}</View>
                  </View>
                </View>
              </View>
            )
          }) : <NoData top='400rpx'></NoData>
        }
      </View>
    </View>
  )
}
export default Index