后台-场景管理完善

houtai/src/pages/B1Scene/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import styles from "./index.module.scss";
 import demoImg from "@/assets/img/demo.jpg";
 import { Button } from "antd";
@@ -8,9 +8,10 @@ import { MessageFu } from "@/utils/message";
 import { removeTokenInfo } from "@/utils/storage";
 import history from "@/utils/history";
 import { baseURL } from "@/utils/http";
+import { useDispatch, useSelector } from "react-redux";
+import { B1_APIgetList } from "@/store/action/B1Scene";
+import { RootState } from "@/store";
 
-
-// 待完善
 const isTokenFlagFu = (val: boolean, url: string) => {
   if (val) {
     // token 有效
@@ -24,23 +25,13 @@ const isTokenFlagFu = (val: boolean, url: string) => {
 };
 
 function Scene() {
-  const list1 = useMemo(() => {
-    return [
-      { id: 1, sceneCode: "1194", name: "鸦片战争博物馆", img: demoImg },
-      { id: 2, sceneCode: "1194", name: "海战博物馆A厅", img: demoImg },
-      { id: 3, sceneCode: "1194", name: "海战博物馆B厅", img: demoImg },
-      {
-        id: 4,
-        sceneCode: "1194",
-        name: "海战博物馆C厅海战博物馆C厅海战博物馆C厅",
-        img: demoImg,
-      },
-      { id: 5, sceneCode: "1194", name: "海战博物馆D厅", img: demoImg },
-      { id: 6, sceneCode: "1194", name: "虎门故事展厅", img: demoImg },
-      { id: 7, sceneCode: "1194", name: "虎门故事展厅777", img: demoImg },
-    ];
-  }, []);
+  const list = useSelector((state: RootState) => state.B1Scene.list);
+
+  const dispatch = useDispatch();
 
+  useEffect(() => {
+    dispatch(B1_APIgetList());
+  }, [dispatch]);
 
   const lookFu = useCallback(async (code: string) => {
     const res = await isTokenFlagAPI();
@@ -62,9 +53,14 @@ function Scene() {
       {/* 场景编辑器 */}
       <div className="box1">
         <div className="box1RowBox">
-          {list1.map((v) => (
+          {list.map((v) => (
             <div className="box1Row" key={v.id}>
-              <ImageLazy src={v.img} width="100%" height={180} offline={true} />
+              <ImageLazy
+                src={`${baseURL}/backstage/sceneCover/${v.sceneCode}.jpg`}
+                width="100%"
+                height={180}
+                offline={true}
+              />
               <div className="txt">{v.name}</div>
               <div className="button">
                 <Button type="primary" onClick={() => lookFu(v.sceneCode)}>

houtai/src/store/action/B1Scene.ts

@@ -0,0 +1,20 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 获取列表数据
+ */
+export const B1_APIgetList = () => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/scene/list", {
+      pageNum: 1,
+      pageSize: 9999,
+    });
+    if (res.code === 0) {
+      dispatch({
+        type: "B1/getList",
+        payload: res.data.records,
+      });
+    }
+  };
+};

houtai/src/store/reducer/B1Scene.ts

@@ -0,0 +1,21 @@
+import { B2TableList } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  list: [] as B2TableList[],
+};
+
+// 定义 action 类型
+type Props = { type: "B1/getList"; payload: B2TableList[] };
+
+// 频道 reducer
+export default function Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "B1/getList":
+      return { ...state, list: action.payload };
+    default:
+      return state;
+  }
+}

houtai/src/store/reducer/index.ts

@@ -1,6 +1,7 @@
 // 导入合并reducer的依赖
 import { combineReducers } from "redux";
 import goodsReducer from "./B2Goods";
+import B1Scene from "./B1Scene";
 import wallReducer from "./B3Wall";
 import barrageReducer from "./B4Barrage";
 import topicReducer from "./B5Topic";
@@ -18,6 +19,7 @@ const rootReducer = combineReducers({
   loginStore: loginReducer,
   logReducer: logReducer,
   goodsReducer: goodsReducer,
+  B1Scene,
   wallReducer: wallReducer,
   barrageReducer: barrageReducer,
   smartReducer: smartReducer,

houtai/src/types/api/B1Scene.d.ts

@@ -0,0 +1,12 @@
+export type B2TableList= {
+	createTime: string;
+	creatorName: string;
+	display: number;
+	id: number;
+	name: string;
+	path: string;
+	sceneCode: string;
+	star: number;
+	updateTime: string;
+	visit: number;
+}

houtai/src/types/index.d.ts

@@ -1,5 +1,6 @@
 export * from './api/log'
 export * from './api/login'
+export * from './api/B1Scene'
 export * from './api/wall'
 export * from './api/hot'
 export * from './api/goods'