upp

src/pages/A1wxuser/A1add/A1aEdit.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback, useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, InputNumber, Modal } from "antd";
+import MyPopconfirm from "@/components/MyPopconfirm";
+import TextArea from "antd/es/input/TextArea";
+import { A1_APIsetNum } from "@/store/action/A1wxuser";
+import { MessageFu } from "@/utils/message";
+
+type Props = {
+  editInfo: { num: number; id: number };
+  closeFu: () => void;
+  upTableFu: (val: number) => void;
+};
+
+function A1aEdit({ editInfo, closeFu, upTableFu }: Props) {
+  const [inputNum, setInputNum] = useState<number | null>(null);
+  const [text, setText] = useState("");
+
+  // useEffect(() => {
+  //   console.log(inputNum);
+  // }, [inputNum]);
+
+  // 爱心币的值控制
+  const inputNumRes = useMemo(() => {
+    let flag = false;
+    if (!inputNum || (inputNum + "").includes(".")) flag = true;
+    else if (inputNum + editInfo.num > 99999 || editInfo.num + inputNum < 0)
+      flag = true;
+    return flag;
+  }, [inputNum, editInfo.num]);
+
+  // 点击确定
+  const btnOkFu = useCallback(async () => {
+    // console.log({ inputNum, text });
+
+    const obj = {
+      description: text,
+      score: inputNum,
+      type: "编辑",
+      userId: editInfo.id,
+    };
+
+    const res = await A1_APIsetNum(obj);
+
+    if (res.code === 0) {
+      MessageFu.warning("编辑成功!");
+      upTableFu(editInfo.num + inputNum!);
+      closeFu();
+    }
+  }, [closeFu, editInfo.id, editInfo.num, inputNum, text, upTableFu]);
+
+  return (
+    <Modal
+      wrapClassName={styles.A1aEdit}
+      open={true}
+      title={`修改爱心币 - 当前爱心币：${editInfo.num}`}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="A1aEmain">
+        <div className="A1aErow">
+          <div className="A1aErow1">
+            <span>* </span>爱心币变动：
+          </div>
+          <div className="A1aErow2">
+            <InputNumber
+              // min={-num}
+              // max={99999 - num}
+              value={inputNum}
+              onChange={(e) => setInputNum(e)}
+              placeholder={`请输入${-editInfo.num}至${
+                99999 - editInfo.num
+              }的整数；该数量为爱心币的变量而非总量`}
+            />
+          </div>
+        </div>
+
+        <div className="A1aErow">
+          <div className="A1aErow1">修改原因：</div>
+          <div className="A1aErow2">
+            <TextArea
+              value={text}
+              onChange={(e) => setText(e.target.value.replace(/\s+/g, ""))}
+              placeholder="请输入说明，不超过200字"
+              showCount
+              maxLength={200}
+            />
+          </div>
+        </div>
+
+        <div className="A1aEbtn">
+          <Button type="primary" onClick={btnOkFu} disabled={inputNumRes}>
+            提交
+          </Button>
+          &emsp;
+          <MyPopconfirm txtK="取消" onConfirm={closeFu} />
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoA1aEdit = React.memo(A1aEdit);
+
+export default MemoA1aEdit;

src/pages/A1wxuser/A1add/index.module.scss

@@ -0,0 +1,69 @@
+.A1add{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ecedf1;
+  border-radius: 10px;
+  :global{
+    .A1atop{
+      background-color: #fff;
+      border-radius: 10px;
+      padding: 0 24px;
+      height: 62px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 20px;
+      &>div{
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+
+// 爱心币变动
+.A1aEdit{
+  :global{
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-modal-body{
+      border-top: 1px solid #ccc;
+    }
+
+    .A1aEmain{
+      padding-top: 15px;
+
+      .A1aErow{
+        display: flex;
+        margin-bottom: 24px;
+        .A1aErow1{
+          position: relative;
+          top: 3px;
+          width: 110px;
+          text-align: right;
+          &>span{
+            color: #ff4d4f;
+          }
+        }
+        .A1aErow2{
+          width: calc(100% - 110px);
+          .ant-input-number{
+            width: 100%;
+          }
+        }
+      }
+
+      .A1aEbtn {
+        text-align: center;
+      }
+    }
+  }
+}

src/pages/A1wxuser/A1add/index.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { A1_APIgetInfo } from "@/store/action/A1wxuser";
+import { Button } from "antd";
+import MyTable from "@/components/MyTable";
+import { A1tableClook } from "@/utils/tableData";
+import A1aEdit from "./A1aEdit";
+
+type Props = {
+  info: { id: number; name: string; num: number };
+  closeFu: () => void;
+  upOneTableFu: (val: number) => void;
+};
+
+function A1add({ info, closeFu, upOneTableFu }: Props) {
+  const getInfoFu = useCallback(async () => {
+    const res = await A1_APIgetInfo(info.id);
+    if (res.code === 0)
+      setList(
+        res.data.map((v: any) => ({
+          ...v,
+          score: v.score && v.score >= 0 ? "+" + v.score : v.score,
+        }))
+      );
+  }, [info.id]);
+
+  useEffect(() => {
+    getInfoFu();
+  }, [getInfoFu]);
+
+  const [list, setList] = useState([]);
+
+  // 爱心币变动
+  const [editInfo, setEditInfo] = useState({ num: 0, id: 0 });
+
+  return (
+    <div className={styles.A1add}>
+      <div className="A1atop">
+        <div>
+          {info.name}&emsp;&emsp;当前爱心币：{info.num || 0}&emsp;
+          <Button
+            type="primary"
+            onClick={() => setEditInfo({ num: info.num || 0, id: info.id })}
+          >
+            修改
+          </Button>
+        </div>
+        <div>
+          <Button onClick={closeFu}>返回</Button>
+        </div>
+      </div>
+
+      <div className="A1tableBox">
+        <MyTable
+          yHeight={680}
+          list={list}
+          columnsTemp={A1tableClook}
+          pagingInfo={false}
+        />
+      </div>
+      {editInfo.id ? (
+        <A1aEdit
+          editInfo={editInfo}
+          closeFu={() => setEditInfo({ num: 0, id: 0 })}
+          upTableFu={(val) => {
+            getInfoFu();
+            upOneTableFu(val);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+const MemoA1add = React.memo(A1add);
+
+export default MemoA1add;

src/pages/A1wxuser/index.module.scss

@@ -1,5 +1,20 @@
 .A1wxuser{
+  position: relative;
   :global{
-    
+    .A1top {
+      padding: 15px 24px;
+      border-radius: 10px;
+      background-color: #fff;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .A1tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 77px);
+      background-color: #fff;
+    }
   }
 }

src/pages/A1wxuser/index.tsx

@@ -1,7 +1,19 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { A1_APIgetList } from "@/store/action/A1wxuser";
+import { RootState } from "@/store";
+import { Button, Input } from "antd";
+import MyTable from "@/components/MyTable";
+import { A1tableC } from "@/utils/tableData";
+import { A1tableType } from "@/types";
+import A1add from "./A1add";
 function A1wxuser() {
   const dispatch = useDispatch();
 
@@ -21,32 +33,110 @@ function A1wxuser() {
 
   const [inputKey, setInputKey] = useState(1);
 
+  // 标题的输入
+  const timeRef = useRef(-1);
+  const fromKeyChangeFu = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, key: "searchKey") => {
+      clearTimeout(timeRef.current);
+      timeRef.current = window.setTimeout(() => {
+        setFromData({ ...fromData, [key]: e.target.value, pageNum: 1 });
+      }, 500);
+    },
+    [fromData]
+  );
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setInputKey(Date.now());
+    setFromData({
+      pageNum: 1,
+      pageSize: 10,
+      searchKey: "",
+    });
+  }, []);
 
-    // 标题的输入
-    const timeRef = useRef(-1);
-    const fromKeyChangeFu = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>, key: "searchKey") => {
-        clearTimeout(timeRef.current);
-        timeRef.current = window.setTimeout(() => {
-          setFromData({ ...fromData, [key]: e.target.value, pageNum: 1 });
-        }, 500);
+  const tableInfo = useSelector((state: RootState) => state.A1wxuser.tableInfo);
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: "操作",
+        render: (item: A1tableType) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() =>
+                setLookInfo({
+                  id: item.id,
+                  name: item.userName,
+                  num: item.score,
+                })
+              }
+            >
+              积分管理
+            </Button>
+          </>
+        ),
       },
-      [fromData]
-    );
-  
-    // 点击重置
-    const resetSelectFu = useCallback(() => {
-      setInputKey(Date.now());
-      setFromData({
-        pageNum: 1,
-        pageSize: 10,
-        searchKey: "",
-      });
-    }, []);
+    ];
+  }, []);
+
+  // 点击积分管理出来的页面
+  const [lookInfo, setLookInfo] = useState({ id: 0, name: "", num: 0 });
 
   return (
     <div className={styles.A1wxuser}>
-      <div className="pageTitle">用户管理</div>
+      <div className="pageTitle">
+        用户管理{lookInfo.id ? " - 积分管理" : ""}
+      </div>
+
+      {/* 顶部筛选 */}
+      <div className="A1top">
+        <div>
+          <span>搜索项：</span>
+          <Input
+            key={inputKey}
+            maxLength={10}
+            showCount
+            style={{ width: 300 }}
+            placeholder="请输入名称"
+            allowClear
+            onChange={(e) => fromKeyChangeFu(e, "searchKey")}
+          />
+        </div>
+        <div>
+          <Button onClick={resetSelectFu}>重置</Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="A1tableBox">
+        <MyTable
+          yHeight={625}
+          list={tableInfo.list}
+          columnsTemp={A1tableC}
+          lastBtn={tableLastBtn}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) =>
+            setFromData({ ...fromData, pageNum, pageSize })
+          }
+        />
+      </div>
+
+      {/* 点击积分管理 */}
+      {lookInfo.id ? (
+        <A1add
+          info={lookInfo}
+          closeFu={() => setLookInfo({ id: 0, name: "", num: 0 })}
+          upOneTableFu={(val) => {
+            getListFu();
+            setLookInfo({ ...lookInfo, num: val });
+          }}
+        />
+      ) : null}
     </div>
   );
 }

src/pages/Z1user/index.module.scss

@@ -2,7 +2,7 @@
   :global {
     .selectBox {
       border-radius: 10px;
-      padding: 20px 15px;
+      padding: 15px 24px;
       background-color: #fff;
       display: flex;
       justify-content: space-between;
@@ -12,7 +12,7 @@
       border-radius: 10px;
       overflow: hidden;
       margin-top: 15px;
-      height: calc(100% - 80px);
+      height: calc(100% - 77px);
       background-color: #fff;
     }
   }

src/pages/Z1user/index.tsx

@@ -18,7 +18,7 @@ import { useDispatch, useSelector } from "react-redux";
 import styles from "./index.module.scss";
 import UserAdd from "./UserAdd";
 import MyTable from "@/components/MyTable";
-import { A7tableC } from "@/utils/tableData";
+import { Z1tableC } from "@/utils/tableData";
 import MyPopconfirm from "@/components/MyPopconfirm";
 
 function Z1user() {
@@ -171,7 +171,7 @@ function Z1user() {
         <MyTable
           yHeight={617}
           list={tableInfo.list}
-          columnsTemp={A7tableC}
+          columnsTemp={Z1tableC}
           lastBtn={tableLastBtn}
           pageNum={fromData.pageNum}
           pageSize={fromData.pageSize}

src/pages/Z2log/index.module.scss

@@ -18,7 +18,7 @@
     .tableMain {
       border-radius: 10px;
       margin-top: 15px;
-      height: calc(100% - 70px);
+      height: calc(100% - 77px);
       background-color: #fff;
     }
   }

src/pages/Z2log/index.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 import styles from "./index.module.scss";
 import MyTable from "@/components/MyTable";
-import { A8tableC } from "@/utils/tableData";
+import { Z2tableC } from "@/utils/tableData";
 
 const { RangePicker } = DatePicker;
 
@@ -82,7 +82,7 @@ function Z2log() {
         <MyTable
           yHeight={630}
           list={tableInfo.list}
-          columnsTemp={A8tableC}
+          columnsTemp={Z2tableC}
           pageNum={fromData.pageNum}
           pageSize={fromData.pageSize}
           total={tableInfo.total}

src/store/action/A1wxuser.ts

@@ -11,17 +11,21 @@ export const A1_APIgetList = (data: any) => {
         list: res.data.records,
         total: res.data.total,
       };
-
-      console.log(obj);
-
-      // dispatch({ type: "B1/getList", payload: obj });
+      dispatch({ type: "A1/getList", payload: obj });
     }
   };
 };
 
 /**
- * 删除用户
+ * 通过id获取积分详情
  */
-// export const userRemoveAPI = (id: number) => {
-//   return http.get(`sys/user/removes/${id}`);
-// };
+export const A1_APIgetInfo = (userId: number) => {
+  return http.get(`cms/user/point/getList/${userId}`);
+};
+
+/**
+ * 修改爱心币
+ */
+export const A1_APIsetNum = (data:any) => {
+  return http.post('cms/user/point/add',data);
+};

src/store/reducer/A1wxuser.ts

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

src/store/reducer/index.ts

@@ -3,12 +3,14 @@ import { combineReducers } from "redux";
 
 // 导入 登录 模块的 reducer
 import A0Layout from "./layout";
+import A1wxuser from "./A1wxuser";
 import Z1user from "./Z1user";
 import Z2log from "./Z2log";
 
 // 合并 reducer
 const rootReducer = combineReducers({
   A0Layout,
+  A1wxuser,
   Z1user,
   Z2log,
 });

src/types/api/A1wxuser.d.ts

@@ -0,0 +1,13 @@
+export type A1tableType = {
+  createTime: string;
+  creatorName: string;
+  id: number;
+  isEnabled: number;
+  openId: string;
+  phone: string;
+  realName: string;
+  score: number;
+  sex: string;
+  updateTime: string;
+  userName: string;
+};

src/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './api/layot'
+export * from './api/A1wxuser'
 export * from './api/Z1user'
 export * from './api/Z2log'

src/utils/tableData.ts

@@ -5,54 +5,62 @@
  * txtChange:判断显示不同字段
  * text:文字比较多的情况
  */
-export const A1tableCFu = (type: "video" | "poster") => {
-  return [
-    ["txt", "标题", "name"],
-    ["img", type === "video" ? "视频封面" : "海报", "thumb"],
-    ["txtChange", "自动播放", "display", { 0: "否", 1: "是" }],
-    ["txt", "创建日期", "createTime"],
-  ];
-};
+// export const A1tableCFu = (type: "video" | "poster") => {
+//   return [
+//     ["index", "序号"],
+//     ["txt", "标题", "name"],
+//     ["img", type === "video" ? "视频封面" : "海报", "thumb"],
+//     ["txtChange", "自动播放", "display", { 0: "否", 1: "是" }],
+//     ["txt", "创建日期", "createTime"],
+//   ];
+// };
 
-export const A4tableC = [
-  ["txt", "名称", "name"],
-  ["img", "封面", "thumb"],
-  ["text", "简介", "description", 50],
-  ["txt", "发布日期", "releaseDate"],
-  ["txt", "点赞数", "pcs"],
+export const A1tableC = [
+  ["txt", "ID", "id"],
+  ["txt", "手机号", "phone"],
+  ["txt", "昵称", "userName"],
+  ["txt", "注册日期", "createTime"],
+  ["txt", "爱心币", "score"],
 ];
 
-export const A5tableC = [
-  ["txt", "名称", "name"],
-  ["img", "封面", "thumb"],
-  ["txt", "分类", "dictType"],
-  ["txt", "时代", "dictAge"],
-  ["txt", "级别", "dictLevel"],
-  ["txt", "尺寸", "dictSize"],
-  ["txt", "点赞", "pcs"],
-  ["txt", "发布日期", "releaseDate"],
+export const A1tableClook = [
+  ["txt", "时间", "createTime"],
+  ["txt", "类型", "type"],
+  ["txt", "爱心币", "score"],
+  ["txt", "说明", "description"],
 ];
 
-export const A7tableC = [
+// export const A5tableC = [
+//   ["txt", "名称", "name"],
+//   ["img", "封面", "thumb"],
+//   ["txt", "分类", "dictType"],
+//   ["txt", "时代", "dictAge"],
+//   ["txt", "级别", "dictLevel"],
+//   ["txt", "尺寸", "dictSize"],
+//   ["txt", "点赞", "pcs"],
+//   ["txt", "发布日期", "releaseDate"],
+// ];
+
+export const Z1tableC = [
   ["txt", "用户名", "userName"],
   ["txtChange", "角色", "isAdmin", { 1: "管理员", 0: "普通成员" }],
   ["txt", "真实姓名", "realName"],
   ["txt", "创建日期", "createTime"],
 ];
 
-export const A8tableC = [
+export const Z2tableC = [
   ["index", "序号"],
-  ["txt", "账号",'userName'],
+  ["txt", "账号", "userName"],
   ["txt", "操作日期", "createTime"],
   ["txt", "IP记录", "ip"],
   ["txt", "操作模块", "type"],
   ["txt", "操作事件", "description"],
 ];
 
-export const A6QtableC = [
-  ["txt", "标题", "name"],
-  ["txt", "题目数量", "pcsQuestion"],
-  ["txt", "已收集份数", "pcsGather"],
-  ["txt", "发布日期", "publishDate"],
-  ["txtChange", "问卷状态", "display",{1:'开启',0:'关闭'}],
-];
+// export const A6QtableC = [
+//   ["txt", "标题", "name"],
+//   ["txt", "题目数量", "pcsQuestion"],
+//   ["txt", "已收集份数", "pcsGather"],
+//   ["txt", "发布日期", "publishDate"],
+//   ["txtChange", "问卷状态", "display",{1:'开启',0:'关闭'}],
+// ];