HNBWY_Model/webNew/src/pages/Home/index.tsx

import { baseURL } from '@/utils/http'
import classNames from 'classnames'
import styles from './index.module.scss'
import logoImg from '@/assets/img/logo.png'
import { Input, Pagination, Select } from 'antd'
import { SearchOutlined, ExclamationOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { useEffect, useRef, useState } from 'react'
import { LazyLoadImage } from "react-lazy-load-image-component";
import { useDispatch, useSelector } from 'react-redux';
import { getListAction, getSortAction, getAgeAction } from '@/store/action/home';
import { RootState } from '@/store';
import Model from '@/components/Model'
export default function Home() {

  const dispatch = useDispatch()
  // 进页面获取后端文物数据
  useEffect(() => {
    dispatch(getSortAction())
    dispatch(getAgeAction())
  }, [dispatch])

  // 滚动盒子ref
  const modelBoxRef = useRef<HTMLDivElement>(null)

  // 输入框变量
  const [value, setValue] = useState('')

  // 清空输入框
  const clearValueFu = () => {
    setValue('')
    setPageNum(1)
    const sroolDom = modelBoxRef.current
    sroolDom!.scrollTop = 0
    dispatch(getListAction({
      ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId,
      searchKey: '', pageNum: 1,
      dictAgeId: fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
    }))

  }

  const searchKeyUpFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') searchBtnFu()
  }
  const searchBtnFu = () => {
    getModelList()
  }



  // 分类的数据和高亮
  const { sortList, modelInfo, ageList } = useSelector((state: RootState) => state.homeStore)
  const { list, total } = modelInfo

  // 分类
  const [sort, setSort] = useState(-1)
  // 分类下拉框改变
  const sortChangeFu = (value: number) => {
    setSort(value)
  }
  // 年代
  const [ageSerach, setAgeSerach] = useState(-1)
  // 年代下拉框改变
  const ageChangeFu = (value: number) => {
    setAgeSerach(value)
    fromData.current.dictAgeId = value
    fromData.current.pageNum = 1
    setPageNum(1)
    getModelList()
  }

  const [pageNum, setPageNum] = useState(1)


  const fromData = useRef({
    pageNum: 1,
    pageSize: 12,
    searchKey: '',
    dictTextureId: -1,
    dictAgeId: -1
  })
  const pageChangeFu = (page: number) => {
    fromData.current.pageNum = page
    setPageNum(page)
    getModelList()
  }
  // 封装一个发送请求获取列表的函数
  const getModelList = () => {
    const sroolDom = modelBoxRef.current
    sroolDom!.scrollTop = 0
    dispatch(getListAction({
      ...fromData.current, dictTextureId: fromData.current.dictTextureId === -1 ? null : fromData.current.dictTextureId, searchKey: value,
      dictAgeId: fromData.current.dictAgeId === -1 ? null : fromData.current.dictAgeId,
    }))
  }
  useEffect(() => {
    fromData.current.dictTextureId = sort
    fromData.current.pageNum = 1
    setPageNum(1)
    getModelList()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sort])


  // 点击每个模型出来的页面
  const [modelId, setModelId] = useState(0)

  return (
    <div className={styles.Home}>

      {/* 点击单个模型出来的详情页面 */}
      <div className={classNames('modelTxtBox', modelId ? 'activeTxtBox' : '')}>
        <Model modelId={modelId} closeModel={() => setModelId(0)} />
      </div>

      <div className='title'>
        <div className='logo'>
          <img src={logoImg} alt="" />
        </div>

      </div>
      <div className='mainBox'>

        {/* 筛选的盒子 */}
        <div className='screenBox'>

          {/* 输入框 */}
          <div className='search'>
            <div className='searchBtn' onClick={searchBtnFu}></div>
            {value.length > 0 ? (<div className='searchClear' onClick={clearValueFu}>
              <CloseCircleOutlined />
            </div>) : null}

            <Input maxLength={10} placeholder='请输入文物名称' value={value} onChange={(e) => setValue(e.target.value)} onKeyUp={(e) => searchKeyUpFu(e)} prefix={<SearchOutlined />} />
          </div>

          {/* 分类下拉框 */}
          <div className='sortBox'>
            <Select style={{ width: '100%' }} value={sort} onChange={sortChangeFu} options={sortList} />
          </div>

          {/* 年代筛选下拉框 */}
          <div className='ageSeachBox'>
            <Select style={{ width: '100%' }} value={ageSerach} onChange={ageChangeFu} options={ageList} />
          </div>

        </div>

        {/* 页面渲染主体 */}
        <div className='modelBox' ref={modelBoxRef}>
          {
            list && list.length > 0 ?
              list.map(item => (
                <div className='modelBox_row' key={item.id} onClick={() => setModelId(item.id)}>
                  {/* 鼠标悬浮出来的盒子 */}
                  <div className='modelBox_row_hover'>{item.name}</div>
                  <LazyLoadImage src={baseURL + item.thumb}
                    width={300} height={260}
                    alt=""
                  />
                  <p>
                    {item.dictTextureName ? <span className='row_txt1'>{item.dictTextureName}</span> : null}
                    <span className='row_txt2'>{item.name}</span>
                  </p>
                </div>
              ))
              :
              <div className='noneList'>
                <div className='incoBox'>
                  <ExclamationOutlined />
                </div>
                <p>暂无内容</p>
              </div>
          }
        </div>

        {/* 分页器 */}
        <div className='page'>
          <Pagination size="small" current={pageNum} total={total} pageSize={12} hideOnSinglePage={true} onChange={pageChangeFu} />

        </div>

      </div>
    </div>
  )
}