up-文物顶部筛选根据 二维 三维动态变化

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

@@ -7,7 +7,7 @@ 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 { A2_APIgetGoodsList, A2_APIgetTopClass } from "@/store/action/A2Main";
 import { RootState } from "@/store";
 import { envUrl } from "@/utils/env";
 import ImageLazy from "@/components/ImageLazy";
@@ -34,7 +34,7 @@ function Tab4() {
   // 发送请求参数
   const [getData, setGetData] = useState<A2getGoodsDataType>({
     dictAge: "",
-    dictTexture: "",
+    dictTexture: "全部",
     searchKey: "",
     pageNum: 1,
     pageSize: 10,
@@ -47,7 +47,13 @@ function Tab4() {
 
     let searchKey = "";
     if (inpValueRef.current) searchKey = inpValueRef.current.input.value;
-    dispatch(A2_APIgetGoodsList({ ...getData, searchKey }));
+    dispatch(
+      A2_APIgetGoodsList({
+        ...getData,
+        searchKey,
+        dictTexture: getData.dictTexture === "全部" ? "" : getData.dictTexture,
+      })
+    );
   }, [dispatch, getData]);
 
   useEffect(() => {
@@ -64,15 +70,12 @@ function Tab4() {
   }, [inpValue]);
 
   useEffect(() => {
-    // 发送请求拿到下拉框数据
-    // dispatch(A2_APIgetSelectData("age"));
-    dispatch(A2_APIgetSelectData("texture"));
-  }, [dispatch]);
+    // 发送请求拿到顶部筛选数据
+    dispatch(A2_APIgetTopClass(getData.type === "img" ? "2d" : "3d"));
+  }, [dispatch, getData.type]);
 
   // 获取下拉数据
-  const selectData = useSelector(
-    (state: RootState) => state.A2Main.selectData.texture
-  );
+  const selectData = useSelector((state: RootState) => state.A2Main.selectData);
 
   // 从仓库获取数据
   const goodsList = useSelector((state: RootState) => state.A2Main.goodsList);
@@ -94,7 +97,14 @@ function Tab4() {
               "tab4Top1",
               v.id === getData.type ? "tab4Top1Ac" : ""
             )}
-            onClick={() => setGetData({ ...getData, type: v.id, pageNum: 1 })}
+            onClick={() =>
+              setGetData({
+                ...getData,
+                type: v.id,
+                pageNum: 1,
+                dictTexture: "全部",
+              })
+            }
           >
             {v.name}
           </div>
@@ -137,21 +147,21 @@ function Tab4() {
           // onSwiper={(swiper) => (mySwiperRef.current = swiper)}
         >
           {selectData.map((v) => (
-            <SwiperSlide key={v.label}>
+            <SwiperSlide key={v}>
               <div
                 onClick={(e) =>
                   setGetData({
                     ...getData,
-                    dictTexture: v.value as string,
+                    dictTexture: v as string,
                     pageNum: 1,
                   })
                 }
                 className={classNames(
                   "row",
-                  getData.dictTexture === v.value ? "active" : ""
+                  getData.dictTexture === v ? "active" : ""
                 )}
               >
-                <span>{v.label}</span>
+                <span>{v}</span>
               </div>
             </SwiperSlide>
           ))}

pc/src/store/action/A2Main.ts

@@ -1,6 +1,6 @@
 import http from "@/utils/http";
-import store, { AppDispatch } from "..";
-import { A2R_fSaveType, A2SelectType, A2getGoodsDataType } from "@/types";
+import { AppDispatch } from "..";
+import { A2R_fSaveType, A2getGoodsDataType } from "@/types";
 
 /**
  * 获文物列表数据
@@ -26,33 +26,51 @@ export const A2_APIgetGoodsList = (data: A2getGoodsDataType) => {
 /**
  * 获取下拉框列表
  */
-export const A2_APIgetSelectData = (type: "age" | "texture") => {
+// export const A2_APIgetSelectData = (type: "age" | "texture") => {
+//   return async (dispatch: AppDispatch) => {
+//     const res = await http.get(`/show/dict/list?type=${type}`);
+//     if (res.code === 0) {
+//       const obj = store.getState().A2Main.selectData;
+//       let newObj = {} as A2SelectType;
+//       const data = res.data.map((v: any) => ({ value: v.name, label: v.name }));
+//       data.unshift({
+//         value: "",
+//         label: type === "age" ? "全部年代" : "全部",
+//       });
+
+//       if (type === "age") {
+//         newObj = {
+//           ...obj,
+//           age: data,
+//         };
+//       } else {
+//         newObj = {
+//           ...obj,
+//           texture: data,
+//         };
+//       }
+
+//       dispatch({
+//         type: "main/goodsSelect",
+//         payload: newObj,
+//       });
+//     }
+//   };
+// };
+
+/**
+ * 获取  文物 顶部 的 分类数据
+ */
+export const A2_APIgetTopClass = (type: "2d" | "3d") => {
   return async (dispatch: AppDispatch) => {
-    const res = await http.get(`/show/dict/list?type=${type}`);
-    if (res.code === 0) {
-      const obj = store.getState().A2Main.selectData;
-      let newObj = {} as A2SelectType;
-      const data = res.data.map((v: any) => ({ value: v.name, label: v.name }));
-      data.unshift({
-        value: "",
-        label: type === "age" ? "全部年代" : "全部",
-      });
+    const res = await http.get(`show/dict/texture/${type}`);
 
-      if (type === "age") {
-        newObj = {
-          ...obj,
-          age: data,
-        };
-      } else {
-        newObj = {
-          ...obj,
-          texture: data,
-        };
-      }
+    if (res.code === 0) {
+      const arr = ["全部", ...res.data];
 
       dispatch({
         type: "main/goodsSelect",
-        payload: newObj,
+        payload: arr,
       });
     }
   };

pc/src/store/reducer/A2Main.ts

@@ -1,4 +1,4 @@
-import { A2GoodsType, A2SelectType, Tab5ListType } from "@/types";
+import { A2GoodsType, Tab5ListType } from "@/types";
 
 // 初始化状态
 const initState = {
@@ -7,11 +7,8 @@ const initState = {
     list: [] as A2GoodsType[],
     total: 0,
   },
-  // 下拉框数据
-  selectData: {
-    texture: [],
-    age: [],
-  } as A2SelectType,
+  // 文物顶部筛选数据
+  selectData: [] as string[],
 
   // 知识的列表数据（带分页）
   tab5List: {
@@ -23,7 +20,7 @@ const initState = {
 // 定义 action 类型
 type Props =
   | { type: "main/goodsList"; payload: { list: A2GoodsType[]; total: number } }
-  | { type: "main/goodsSelect"; payload: A2SelectType }
+  | { type: "main/goodsSelect"; payload: string[] }
   | { type: "main/tab5List"; payload: { list: Tab5ListType[]; total: number } };
 // 频道 reducer
 export default function loginReducer(state = initState, action: Props) {
@@ -31,7 +28,7 @@ export default function loginReducer(state = initState, action: Props) {
     // 文物列表数据
     case "main/goodsList":
       return { ...state, goodsList: action.payload };
-    // 下拉框数据
+    // 文物顶部筛选数据
     case "main/goodsSelect":
       return { ...state, selectData: action.payload };
     // 知识列表数据

pc/src/types/store/A2Main.d.ts

@@ -38,15 +38,6 @@ export type A2getGoodsDataType = {
   type: string;
 };
 
-export type A2SelectItemType = {
-  value: number | "";
-  label: string;
-};
-
-export type A2SelectType = {
-  texture: A2SelectItemType[];
-  age: A2SelectItemType[];
-};
 
 export type A2FileType = {
   createTime: string;