YPZZBWG/pc/src/pages/A2Main/Tab4/index.tsx

import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import classNames from "classnames";

import { A2getGoodsDataType } from "@/types";
import { Input, Pagination } from "antd";

import { SearchOutlined } from "@ant-design/icons";
import { useDispatch, useSelector } from "react-redux";
import { A2_APIgetGoodsList, A2_APIgetSelectData } from "@/store/action/A2Main";
import { RootState } from "@/store";
import { envUrl } from "@/utils/env";
import ImageLazy from "@/components/ImageLazy";

// 轮播图
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode } from "swiper";
// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import Tab4Info from "../Tab4Info";

const typeArr = [
  { id: "img", name: "二维文物" },
  { id: "model", name: "三维文物" },
];

function Tab4() {
  const dispatch = useDispatch();

  // 看看是不是还没有发送请求
  const [isDataFlag, setIsDataFlag] = useState(false);

  // 发送请求参数
  const [getData, setGetData] = useState<A2getGoodsDataType>({
    dictAge: "",
    dictTexture: "",
    searchKey: "",
    pageNum: 1,
    pageSize: 8,
    type: "img",
  });

  // 发送请求函数
  const getList = useCallback(() => {
    setIsDataFlag(true);

    let searchKey = "";
    if (inpValueRef.current) searchKey = inpValueRef.current.input.value;
    dispatch(A2_APIgetGoodsList({ ...getData, searchKey }));
  }, [dispatch, getData]);

  useEffect(() => {
    getList();
  }, [getList]);

  // 输入框
  const [inpValue, setInpValue] = useState("");

  const inpValueRef = useRef<any>(null);

  useEffect(() => {
    inpValueRef.current = inpValue;
  }, [inpValue]);

  useEffect(() => {
    // 发送请求拿到下拉框数据
    // dispatch(A2_APIgetSelectData("age"));
    dispatch(A2_APIgetSelectData("texture"));
  }, [dispatch]);

  // 获取下拉数据
  const selectData = useSelector(
    (state: RootState) => state.A2Main.selectData.texture
  );

  // 从仓库获取数据
  const goodsList = useSelector((state: RootState) => state.A2Main.goodsList);

  // 详情页 id
  const [infoId, setInfoId] = useState(0);

  return (
    <div
      className={styles.Tab4}
      style={{ backgroundImage: `url(${envUrl}/goods/bac.jpg)` }}
    >
      <div className="tab4Top">
        {/* 二维 三维的筛选 */}
        {typeArr.map((v) => (
          <div
            key={v.id}
            className={classNames(
              "tab4Top1",
              v.id === getData.type ? "tab4Top1Ac" : ""
            )}
            onClick={() => setGetData({ ...getData, type: v.id, pageNum: 1 })}
          >
            {v.name}
          </div>
        ))}

        {/* 输入框 */}
        <div className="tab4Top2">
          <div className="tab4Top2_1">
            <SearchOutlined />
          </div>
          <Input
            placeholder="请输入关键词"
            maxLength={30}
            value={inpValue}
            onChange={(e) => setInpValue(e.target.value.trim())}
            ref={inpValueRef}
          />
          <div
            className="tab4Top2_2"
            onClick={() => {
              if (getData.pageNum === 1) getList();
              else setGetData({ ...getData, pageNum: 1 });
            }}
          >
            搜索
          </div>
        </div>
      </div>

      {/* 类型的筛选 */}
      <div className="tab4Top2">
        <Swiper
          modules={[FreeMode]}
          className="appSw"
          spaceBetween={0}
          slidesPerView="auto"
          freeMode={true}
          mousewheel={true}
          // onSlideChange={(e) => console.log("slide change", e)}
          // onSwiper={(swiper) => (mySwiperRef.current = swiper)}
        >
          {selectData.map((v) => (
            <SwiperSlide key={v.label}>
              <div
                onClick={(e) =>
                  setGetData({
                    ...getData,
                    dictTexture: v.value as string,
                    pageNum: 1,
                  })
                }
                className={classNames(
                  "row",
                  getData.dictTexture === v.value ? "active" : ""
                )}
              >
                <span>{v.label}</span>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>

      {/* 主要内容 */}
      {goodsList.list.length <= 0 && isDataFlag ? (
        <div className="tav4MainNone">暂无数据</div>
      ) : (
        <div className="tab4Main">
          {goodsList.list.map((v) => (
            <div
              className="tab4Mrow"
              key={v.id}
              title={v.name}
              onClick={() => setInfoId(v.id)}
            >
              <div className="tab4MrowImg">
                <ImageLazy src={v.thumb} noLook width="100%" height="100%" />
              </div>
              <p>{v.name}</p>
            </div>
          ))}
        </div>
      )}

      {/* 分页器 */}
      <div className="tab4Page">
        <Pagination
          showQuickJumper
          current={getData.pageNum}
          total={goodsList.total}
          pageSize={15}
          hideOnSinglePage={true}
          onChange={(page) => setGetData({ ...getData, pageNum: page })}
          showSizeChanger={false}
        />
      </div>

      {/* 点击文物进入详情页 */}
      {infoId ? (
        <Tab4Info id={infoId} closePage={() => setInfoId(0)} isOpen={false} />
      ) : null}
    </div>
  );
}

const MemoTab4 = React.memo(Tab4);

export default MemoTab4;