machinery-miniapp-worker/src/pages/index/components/Job/index.jsx

import Taro from "@tarojs/taro";
import { useState, useEffect } from "react";
import { View, Input, Image, Text, ScrollView } from "@tarojs/components"
import CustomNav from "@/components/CustomNav";
import searchImg from '@/assets/comm/search.png'
import withLayout from '@/layouts'
import NullCard from "@/components/NullCard";
import MyCard from "@/components/MyCard";
import Footer from "@/components/Footer";
import { getOrderList } from "@/services/order";
import './style.less'

export default () => {
  const [imageShow, setImageShow] = useState(true)
  const [currentTab, setCurrentTab] = useState(0);
  const [orderList, setOrderList] = useState([])
  
  const [currentPage, setCurrentPage] = useState(1)
  const [isMore, setIsMore] = useState(false)
  const [q, setQ] = useState()

  const handleSearch = (e) => {
    if (e.detail.value) {
      console.log(e.detail.value)
      setImageShow(false)
    } else {
      setImageShow(true)
    }
    setIsMore(false)
    setCurrentPage(1)
    setQ(e.detail.value)
  }
  // 上拉加载
  const handleScrollToLower = () => {
    setCurrentPage(currentPage + 1)
  }

  const handleClick = () => {
    setImageShow(false)
  }
  const handleChange = (val) => {
    setCurrentPage(1)
    setCurrentTab(val)
  }
  const handleDetail = (val) => {
    Taro.navigateTo({ url: `/pages/orderDetail/index?id=${val}` });
  }

  useEffect(() => {
    getOrderList({workStatus:currentTab, pageNum: currentPage, q: q }).then(res => {
      const lst = currentPage === 1 ? res.records || [] : orderList.concat(res.records || [])
      //长列表加载当下一页没有数据时
      if (res.records.length == 0 && currentPage != 1) {
        setIsMore(true)
        return
      }
      setOrderList(lst)
    })
  }, [currentPage, q,currentTab])
  return (
    <>
      <View className='searchOrderClass'>
        <Input type='text' className='searchInput' onClick={handleClick} onBlur={handleSearch} placeholder='搜索关键字查询订单' />
        {
          imageShow && (
            <Image src={searchImg} className='searchImg' />
          )
        }
      </View>
      <View className='tabbar'>
        <View
          className={['tabberItem', currentTab === 0 ? "activeTabber" : '']}
          onClick={() => handleChange(0)}
        >
          <View>
            <Text className='text'>待作业</Text>
            {
              currentTab === 0 && <View className='line' />
            }
          </View>
        </View>
        <View
          className={['tabberItem', currentTab === 1 ? "activeTabber" : '']}
          onClick={() => handleChange(1)}
        >
          <View>
            <Text className='text'>进行中</Text>
            {
              currentTab === 1 && <View className='line' />
            }
          </View>
        </View>
        <View
          className={['tabberItem', currentTab === 3 ? "activeTabber" : '']}
          onClick={() => handleChange(3)}
        >
          <View>
            <Text className='text'>已完成</Text>
            {
              currentTab === 3 && <View className='line' />
            }
          </View>
        </View>
      </View>
      <ScrollView 
        scrollY 
        enhanced
        onScrollToLower={isMore ? '' : handleScrollToLower} 
        style={{ height: 'calc(100% - 108px)' }}
      >
          {
            orderList.length===0?<NullCard value='您还没有新的订单！' />:
            orderList.map((item)=>{
              return <MyCard order value={item} key={item.orderId} goDetail={()=>handleDetail(item.orderId)} />
            })
          }
          {
            isMore && <Footer />
          }
        </ScrollView>
  </>
  )
}