预约记录up

src/pages/B1orderz/B1look.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Modal } from "antd";
+import { B1_APIgetInfo } from "@/store/action/B1orderz";
+import { B1tableType } from "@/types";
+
+type Props = {
+  lookInfo: B1tableType;
+  closeFu: () => void;
+};
+
+type ListType = {
+  name: string;
+  num: number;
+  phone: number;
+  type: "身份证" | "社保卡";
+}[];
+
+function B1look({ lookInfo, closeFu }: Props) {
+  const [list, setList] = useState<ListType>([]);
+
+  const getInfoFu = useCallback(async () => {
+    const res = await B1_APIgetInfo(lookInfo.id);
+    if (res.code === 0) {
+      const resList = JSON.parse(res.data.rtf || "[]");
+      // console.log(123, resList);
+
+      setList(resList);
+    }
+  }, [lookInfo.id]);
+
+  useEffect(() => {
+    getInfoFu();
+  }, [getInfoFu]);
+
+  return (
+    <Modal
+      wrapClassName={styles.B1look}
+      open={true}
+      title="预约详情"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="B1lRow B1lRow1">
+        <div className="B1lRowll">申请时间：</div>
+        <div className="B1lRowrr">{lookInfo.createTime}</div>
+      </div>
+      <div className="B1lRow">
+        <div className="B1lRowll">验证状态：</div>
+        <div className="B1lRowrr">{lookInfo.status ? "已验证" : "未验证"}</div>
+      </div>
+      <div className="B1lRow">
+        <div className="B1lRowll">预约日期：</div>
+        <div className="B1lRowrr">{lookInfo.bookDate}</div>
+      </div>
+      <div className="B1lRow">
+        <div className="B1lRowll">预约时段：</div>
+        <div className="B1lRowrr">{lookInfo.time}</div>
+      </div>
+      <div className="B1lRow B1lRowLast">
+        <div className="B1lRowll">预约人数：</div>
+        <div className="B1lRowrr">{lookInfo.pcs}</div>
+      </div>
+
+      {list.map((v, i) => (
+        <div key={i}>
+          <div className="B1lRow B1lRow1">
+            <div className="B1lRowll">参观人姓名：</div>
+            <div className="B1lRowrr">{v.name}</div>
+          </div>
+          <div className="B1lRow">
+            <div className="B1lRowll">参观人电话：</div>
+            <div className="B1lRowrr">{v.phone}</div>
+          </div>
+          <div className="B1lRow B1lRowLast">
+            <div className="B1lRowll">{v.type}号：</div>
+            <div className="B1lRowrr">{v.num}</div>
+          </div>
+        </div>
+      ))}
+
+      <div className="B1lBtn">
+        <Button onClick={closeFu}>关闭</Button>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoB1look = React.memo(B1look);
+
+export default MemoB1look;

src/pages/B1orderz/index.module.scss

@@ -1,5 +1,54 @@
-.B1orderz{
-  :global{
-    
+.B1orderz {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  // :global{
+
+  // }
+}
+
+.B1look {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+
+    .B1lRow1 {
+      margin-top: 10px;
+    }
+
+    .B1lRow {
+      font-size: 16px;
+      display: flex;
+
+      .B1lRowll {
+        width: 100px;
+        // text-align: right;
+        font-weight: 700;
+      }
+
+      .B1lRowrr {
+        width: calc(100% - 100px);
+      }
+    }
+
+    .B1lRowLast {
+      padding-bottom: 15px;
+      border-bottom: 1px solid #ccc;
+    }
+
+    .B1lBtn {
+      margin-top: 24px;
+      text-align: center;
+    }
   }
 }

src/pages/B1orderz/index.tsx

@@ -1,9 +1,86 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
+import MyTable from "@/components/MyTable";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { B1_APIdel, B1_APIgetList } from "@/store/action/B1orderz";
+import { B1tableType } from "@/types";
+import { Button } from "antd";
+import MyPopconfirm from "@/components/MyPopconfirm";
+import { MessageFu } from "@/utils/message";
+import { B1tableC } from "@/utils/tableData";
+import B1look from "./B1look";
 function B1orderz() {
+  const dispatch = useDispatch();
+
+  const [fromData, setFromData] = useState({
+    pageNum: 1,
+    pageSize: 10,
+  });
+
+  const getListFu = useCallback(() => {
+    dispatch(B1_APIgetList(fromData));
+  }, [dispatch, fromData]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await B1_APIdel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        getListFu();
+      }
+    },
+    [getListFu]
+  );
+
+  const tableInfo = useSelector((state: RootState) => state.B1orderz.tableInfo);
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: "操作",
+        render: (item: B1tableType) => (
+          <>
+            <Button size="small" type="text" onClick={() => setLookInfo(item)}>
+              查看
+            </Button>
+            <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
+          </>
+        ),
+      },
+    ];
+  }, [delTableFu]);
+
+  // 点击查看
+  const [lookInfo, setLookInfo] = useState({} as B1tableType);
+
   return (
     <div className={styles.B1orderz}>
       <div className="pageTitle">展馆预约</div>
+      <MyTable
+        yHeight={702}
+        list={tableInfo.list}
+        columnsTemp={B1tableC}
+        lastBtn={tableLastBtn}
+        pageNum={fromData.pageNum}
+        pageSize={fromData.pageSize}
+        total={tableInfo.total}
+        onChange={(pageNum, pageSize) =>
+          setFromData({ ...fromData, pageNum, pageSize })
+        }
+      />
+
+      {lookInfo.id ? (
+        <B1look
+          lookInfo={lookInfo}
+          closeFu={() => setLookInfo({} as B1tableType)}
+        />
+      ) : null}
     </div>
   );
 }

src/pages/B2orderh/B2orB3Com/index.module.scss

@@ -0,0 +1,6 @@
+.B2orB3Com {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+}

src/pages/B2orderh/B2orB3Com/index.tsx

@@ -0,0 +1,111 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  B2_APIdel,
+  B2_APIgetList,
+  B2_APIsetStatus,
+} from "@/store/action/B2orderh";
+import { MessageFu } from "@/utils/message";
+import { RootState } from "@/store";
+import { B2tableType } from "@/types";
+import MyPopconfirm from "@/components/MyPopconfirm";
+import MyTable from "@/components/MyTable";
+import { B2tableC, B3tableC } from "@/utils/tableData";
+import { Switch } from "antd";
+
+type Props = {
+  type: "activity" | "volunteer";
+};
+
+function B2orB3Com({ type }: Props) {
+  const dispatch = useDispatch();
+
+  const [fromData, setFromData] = useState({
+    pageNum: 1,
+    pageSize: 10,
+  });
+
+  const getListFu = useCallback(() => {
+    dispatch(B2_APIgetList(fromData, type));
+  }, [dispatch, fromData, type]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await B2_APIdel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        getListFu();
+      }
+    },
+    [getListFu]
+  );
+
+  const { tableInfo1, tableInfo2 } = useSelector(
+    (state: RootState) => state.B2orderh
+  );
+
+  const tableRes = useMemo(() => {
+    return type === "activity" ? tableInfo1 : tableInfo2;
+  }, [tableInfo1, tableInfo2, type]);
+
+  // 处理状态
+  const switchChangeFu = useCallback(
+    async (val: boolean, id: number) => {
+      const res = await B2_APIsetStatus(id, val ? 1 : 0);
+      if (res.code === 0) getListFu();
+    },
+    [getListFu]
+  );
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: "处理状态",
+        render: (item: B2tableType) => (
+          <Switch
+            checkedChildren="已处理"
+            unCheckedChildren="未处理"
+            checked={item.status === 1}
+            onChange={(e) => switchChangeFu(e, item.id)}
+          />
+        ),
+      },
+      {
+        title: "操作",
+        render: (item: B2tableType) => (
+          <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
+        ),
+      },
+    ];
+  }, [delTableFu, switchChangeFu]);
+
+  return (
+    <div className={styles.B2orB3Com}>
+      <div className="pageTitle">
+        {type === "activity" ? "活动预约" : "志愿者预约"}
+      </div>
+      <MyTable
+        yHeight={702}
+        list={tableRes.list}
+        columnsTemp={type === "activity" ? B2tableC : B3tableC}
+        lastBtn={tableLastBtn}
+        pageNum={fromData.pageNum}
+        pageSize={fromData.pageSize}
+        total={tableRes.total}
+        onChange={(pageNum, pageSize) =>
+          setFromData({ ...fromData, pageNum, pageSize })
+        }
+      />
+    </div>
+  );
+}
+
+const MemoB2orB3Com = React.memo(B2orB3Com);
+
+export default MemoB2orB3Com;

src/pages/B2orderh/index.module.scss

@@ -1,5 +0,0 @@
-.B2orderh{
-  :global{
-    
-  }
-}

src/pages/B2orderh/index.tsx

@@ -1,11 +1,7 @@
 import React from "react";
-import styles from "./index.module.scss";
+import B2orB3Com from "./B2orB3Com";
 function B2orderh() {
-  return (
-    <div className={styles.B2orderh}>
-      <div className="pageTitle">活动预约</div>
-    </div>
-  );
+  return <B2orB3Com type="activity" />;
 }
 
 const MemoB2orderh = React.memo(B2orderh);

src/pages/B3ordery/index.module.scss

@@ -1,5 +0,0 @@
-.B3ordery{
-  :global{
-    
-  }
-}

src/pages/B3ordery/index.tsx

@@ -1,11 +1,7 @@
 import React from "react";
-import styles from "./index.module.scss";
+import B2orB3Com from "../B2orderh/B2orB3Com";
 function B3ordery() {
-  return (
-    <div className={styles.B3ordery}>
-      <div className="pageTitle">志愿者预约</div>
-    </div>
-  );
+  return <B2orB3Com type="volunteer" />;
 }
 
 const MemoB3ordery = React.memo(B3ordery);

src/store/action/B1orderz.ts

@@ -0,0 +1,34 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ *展馆预约-列表
+ */
+
+export const B1_APIgetList = (data: any): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/rule/pageList", data);
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records,
+        total: res.data.total,
+      };
+
+      dispatch({ type: "B1/getList", payload: obj });
+    }
+  };
+};
+
+/**
+ * 展馆预约-详情
+ */
+export const B1_APIgetInfo = (id: number) => {
+  return http.get(`cms/rule/detail/${id}`);
+};
+
+/**
+ * 展馆预约-删除
+ */
+export const B1_APIdel = (id: number) => {
+  return http.get(`cms/rule/removes/${id}`);
+};

src/store/action/B2orderh.ts

@@ -0,0 +1,41 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ *活动-志愿者-列表
+ */
+
+export const B2_APIgetList = (
+  data: any,
+  type: "activity" | "volunteer"
+): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/bookInfo/pageList", { ...data, type });
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records,
+        total: res.data.total,
+      };
+
+      dispatch({
+        type: type === "activity" ? "B2/getList1" : "B2/getList2",
+        payload: obj,
+      });
+    }
+  };
+};
+
+/**
+ * 活动-志愿者-删除
+ */
+export const B2_APIdel = (id: number) => {
+  return http.get(`cms/bookInfo/removes/${id}`);
+};
+
+/**
+ * 活动-志愿者-处理状态
+ */
+
+export const B2_APIsetStatus = (id: number, status: 0 | 1) => {
+  return http.get(`cms/bookInfo/update/${id}/${status}`);
+};

src/store/reducer/B1orderz.ts

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

src/store/reducer/B2orderh.ts

@@ -0,0 +1,39 @@
+import { B2tableType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  tableInfo1: {
+    list: [] as B2tableType[],
+    total: 0,
+  },
+  tableInfo2: {
+    list: [] as B2tableType[],
+    total: 0,
+  },
+};
+
+// 定义 action 类型
+type Props =
+  | {
+      type: "B2/getList1";
+      payload: { list: B2tableType[]; total: number };
+    }
+  | {
+      type: "B2/getList2";
+      payload: { list: B2tableType[]; total: number };
+    };
+
+// reducer
+export default function Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "B2/getList1":
+      return { ...state, tableInfo1: action.payload };
+    case "B2/getList2":
+      return { ...state, tableInfo2: action.payload };
+
+    default:
+      return state;
+  }
+}

src/store/reducer/index.ts

@@ -9,6 +9,8 @@ import A4goods from "./A4goods";
 import A5show from "./A5show";
 import A6activity from "./A6activity";
 import A7volunteer from "./A7volunteer";
+import B1orderz from "./B1orderz";
+import B2orderh from "./B2orderh";
 import Z0column from "./Z0column";
 import Z1user from "./Z1user";
 import Z2log from "./Z2log";
@@ -22,6 +24,8 @@ const rootReducer = combineReducers({
   A5show,
   A6activity,
   A7volunteer,
+  B1orderz,
+  B2orderh,
   Z0column,
   Z1user,
   Z2log,

src/types/api/B1orderz.d.ts

@@ -0,0 +1,14 @@
+export type B1tableType ={
+	bookDate: string;
+	bookId: string;
+	createTime: string;
+	creatorName: string;
+	id: number;
+	name: string;
+	pcs: number;
+	phone: string;
+	rtf: string;
+	status: number;
+	time: string;
+	updateTime: string;
+}

src/types/api/B2orderh.ts

@@ -0,0 +1,14 @@
+export type B2tableType ={
+	bookDate: string;
+	bookId: string;
+	createTime: string;
+	creatorName: string;
+	id: number;
+	name: string;
+	pcs: number;
+	phone: string;
+	rtf: string;
+	status: number;
+	time: string;
+	updateTime: string;
+}

src/types/index.d.ts

@@ -6,5 +6,7 @@ export * from './api/A4goods'
 export * from './api/A5show'
 export * from './api/A6activity'
 export * from './api/A7volunteer'
+export * from './api/B1orderz'
+export * from './api/B2orderh'
 export * from './api/Z1user'
 export * from './api/Z2log'

src/utils/tableData.ts

@@ -62,6 +62,33 @@ export const A7tableC = [
   ["txt", "发布日期", "publishDate"],
 ];
 
+export const B1tableC = [
+  ["txt", "申请时间", "createTime"],
+  ["txtChange", "验证状态", "status", { 0: "未验证", 1: "已验证" }],
+  ["txt", "姓名", "name"],
+  ["txt", "联系电话", "phone"],
+  ["txt", "人数", "pcs"],
+  ["txt", "预约日期", "bookDate"],
+  ["txt", "预约时段", "time"],
+];
+
+export const B2tableC = [
+  ["txt", "申请时间", "createTime"],
+  ["txt", "姓名", "name"],
+  ["txt", "活动名称", "title"],
+  ["txt", "联系电话", "phone"],
+  ["txt", "身份证", "identity"],
+  ["text", "预约说明", "description", 50],
+];
+
+export const B3tableC = [
+  ["txt", "申请时间", "createTime"],
+  ["txt", "姓名", "name"],
+  ["txt", "联系电话", "phone"],
+  ["txt", "身份证", "identity"],
+  ["text", "预约说明", "description", 50],
+];
+
 export const Z0tableC = [
   ["txt", "栏目名称", "name"],
   ["text", "说明", "rtf", 50],