feat: 对接用户列表字段数据

2026-07-30 11:16:40 +08:00
parent fee0af174e
commit 14f6af35d8
5 changed files with 399 additions and 85 deletions
@@ -0,0 +1,53 @@
+/**
+ * 用户管理 API
+ */
+import { get, post } from '@/utils/request';
+import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
+import { buildMockUserListPage } from '@/config/mock/userList';
+import type {
+  UserListQueryParams,
+  UserActiveParams,
+  TournamentAdminUserPageVO,
+  PageData,
+  ApiResult,
+} from './types';
+
+export type {
+  TournamentAdminUserPageVO,
+  UserListQueryParams,
+  UserActiveParams,
+  PageData,
+  ApiResult,
+} from './types';
+
+const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+/**
+ * 用户管理 - 用户分页
+ * GET /admin/manager/user/page → /manager/user/page
+ */
+export async function getUserList(
+  params: UserListQueryParams,
+): Promise<ApiResult<PageData<TournamentAdminUserPageVO>>> {
+  if (USE_MOCK) {
+    await delay(MOCK_DELAY);
+    const page = Number(params.page) || 1;
+    const limit = Number(params.limit) || 10;
+    return {
+      code: 200,
+      msg: 'success',
+      data: buildMockUserListPage(page, limit),
+    };
+  }
+  return get('/manager/user/page', params as Record<string, any>);
+}
+
+/**
+ * 用户管理 - 启用/禁用
+ * POST /admin/manager/user/active → /manager/user/active
+ */
+export function toggleUserActive(
+  params: UserActiveParams,
+): Promise<ApiResult<Record<string, never>>> {
+  return post('/manager/user/active', params);
+}
@@ -0,0 +1,59 @@
+/**
+ * 用户管理 — 类型定义
+ * 对应 OpenAPI: /admin/manager/user/page
+ */
+
+/** 用户列表项 */
+export interface TournamentAdminUserPageVO {
+  /** 用户ID（接口实际返回 string） */
+  id: string;
+  /** 昵称 */
+  nickname: string;
+  /** 手机号 */
+  phone: string;
+  /** 真实姓名 */
+  realName: string;
+  /** 证件号 */
+  idCard: string;
+  /** 证件号图片 */
+  idCardImg: string;
+  /** 证件号图片列表 */
+  idCardImgList: string[];
+  /** 状态；0=禁用、1=正常（接口实际返回 string） */
+  status: string;
+  /** 创建时间 */
+  createTime: string;
+}
+
+/** 用户列表查询参数 */
+export interface UserListQueryParams {
+  page?: string;
+  limit?: string;
+  /** 用户昵称 */
+  nickname?: string;
+  /** 用户手机号 */
+  phone?: string;
+  /** 状态；不传=全部、0=禁用、1=正常 */
+  status?: string;
+}
+
+/** 启用/禁用请求参数 */
+export interface UserActiveParams {
+  /** 用户ID */
+  userId: string;
+  /** 0=禁用、1=正常 */
+  status: string;
+}
+
+/** 分页数据 */
+export interface PageData<T> {
+  total: number;
+  list: T[];
+}
+
+/** 统一响应包裹 */
+export interface ApiResult<T> {
+  code: number;
+  msg: string;
+  data: T;
+}
@@ -0,0 +1,177 @@
+/**
+ * 用户列表页假数据
+ *
+ * 使用页面：`src/pages/events/users/index.tsx`
+ * 对应接口：`GET /manager/user/page`
+ * 类型：`TournamentAdminUserPageVO[]`
+ *
+ * 注意：为避免循环引用（api/users/index.ts → 此文件 → api/users/types），
+ *       此文件不 import 任何 api 层类型，接口定义内联。
+ */
+
+interface MockUserVO {
+  id: string;
+  nickname: string;
+  phone: string;
+  realName: string;
+  idCard: string;
+  idCardImg: string;
+  idCardImgList: string[];
+  status: string;
+  createTime: string;
+}
+
+interface MockPageData<T> {
+  total: number;
+  list: T[];
+}
+
+export const MOCK_USER_LIST: MockUserVO[] = [
+  {
+    id: '1',
+    nickname: '羽毛球小将',
+    phone: '13800138001',
+    realName: '张三',
+    idCard: '320101199001011234',
+    idCardImg: '',
+    idCardImgList: [
+      'https://picsum.photos/seed/uid1a/96/64',
+      'https://picsum.photos/seed/uid1b/96/64',
+    ],
+    status: '1',
+    createTime: '2026-07-20 08:11:07',
+  },
+  {
+    id: '2',
+    nickname: '马拉松达人',
+    phone: '13900139002',
+    realName: '李四',
+    idCard: '320101199002022345',
+    idCardImg: 'https://picsum.photos/seed/uid2/96/64',
+    idCardImgList: [],
+    status: '1',
+    createTime: '2026-07-19 11:28:20',
+  },
+  {
+    id: '3',
+    nickname: '健身爱好者',
+    phone: '13700137003',
+    realName: '王五',
+    idCard: '320101199103033456',
+    idCardImg: '',
+    idCardImgList: ['https://picsum.photos/seed/uid3a/96/64'],
+    status: '1',
+    createTime: '2026-07-18 14:45:33',
+  },
+  {
+    id: '4',
+    nickname: '游泳健将',
+    phone: '13600136004',
+    realName: '赵六',
+    idCard: '320101199204044567',
+    idCardImg: 'https://picsum.photos/seed/uid4/96/64',
+    idCardImgList: [],
+    status: '0',
+    createTime: '2026-07-17 18:02:46',
+  },
+  {
+    id: '5',
+    nickname: '羽毛球小将',
+    phone: '13800138005',
+    realName: '孙七',
+    idCard: '320101199305055678',
+    idCardImg: '',
+    idCardImgList: [
+      'https://picsum.photos/seed/uid5a/96/64',
+      'https://picsum.photos/seed/uid5b/96/64',
+    ],
+    status: '1',
+    createTime: '2026-07-16 21:19:59',
+  },
+  {
+    id: '6',
+    nickname: '马拉松达人',
+    phone: '13900139006',
+    realName: '周八',
+    idCard: '320101199406066789',
+    idCardImg: 'https://picsum.photos/seed/uid6/96/64',
+    idCardImgList: [],
+    status: '1',
+    createTime: '2026-07-15 00:36:12',
+  },
+  {
+    id: '7',
+    nickname: '健身爱好者',
+    phone: '13700137007',
+    realName: '吴九',
+    idCard: '320101199507077890',
+    idCardImg: '',
+    idCardImgList: [],
+    status: '1',
+    createTime: '2026-07-14 03:53:25',
+  },
+  {
+    id: '8',
+    nickname: '游泳健将',
+    phone: '13600136008',
+    realName: '郑十',
+    idCard: '320101199608088901',
+    idCardImg: 'https://picsum.photos/seed/uid8/96/64',
+    idCardImgList: ['https://picsum.photos/seed/uid8a/96/64'],
+    status: '1',
+    createTime: '2026-07-13 07:10:38',
+  },
+  {
+    id: '9',
+    nickname: '羽毛球小将',
+    phone: '13800138009',
+    realName: '陈一',
+    idCard: '320101199709099012',
+    idCardImg: '',
+    idCardImgList: [],
+    status: '1',
+    createTime: '2026-07-12 10:27:51',
+  },
+  {
+    id: '10',
+    nickname: '马拉松达人',
+    phone: '13900139010',
+    realName: '刘二',
+    idCard: '320101199810100123',
+    idCardImg: 'https://picsum.photos/seed/uid10/96/64',
+    idCardImgList: ['https://picsum.photos/seed/uid10a/96/64'],
+    status: '0',
+    createTime: '2026-07-11 13:44:04',
+  },
+  {
+    id: '11',
+    nickname: '健身爱好者',
+    phone: '13700137011',
+    realName: '黄三',
+    idCard: '320101199911111234',
+    idCardImg: '',
+    idCardImgList: [],
+    status: '1',
+    createTime: '2026-07-10 17:01:17',
+  },
+  {
+    id: '12',
+    nickname: '游泳健将',
+    phone: '13600136012',
+    realName: '林四',
+    idCard: '320101200012122345',
+    idCardImg: '',
+    idCardImgList: [
+      'https://picsum.photos/seed/uid12a/96/64',
+      'https://picsum.photos/seed/uid12b/96/64',
+    ],
+    status: '1',
+    createTime: '2026-07-09 20:18:30',
+  },
+];
+
+export function buildMockUserListPage(page: number, limit: number): MockPageData<MockUserVO> {
+  const start = (page - 1) * limit;
+  const list = MOCK_USER_LIST.slice(start, start + limit);
+  return { total: MOCK_USER_LIST.length, list };
+}
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted } from 'vue';
 import {
  Button,
  Input,
@@ -9,8 +9,11 @@ import {
  Image,
  Pagination,
  Modal,
+  message,
 } from 'ant-design-vue';
+import { EyeOutlined } from '@ant-design/icons-vue';
 import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
+import { toggleUserActive } from '@/api/users';
 import { useContainerSize } from '@/hooks';
 import pageStyles from '@/assets/styles/pageLayout.module.less';

@@ -28,23 +31,31 @@ function renderBodyCell({
  record: any;
  onToggleStatus: (record: any) => void;
 }) {
-  // 证件图片：有则显示，无则不显示
-  if (column.dataIndex === 'idImg') {
-    const images = record.idImg || [];
-    if (images.length === 0) {
-      return '-';
-    }
+  // 证件图片：优先 idCardImgList，回退 idCardImg
+  if (column.dataIndex === 'idCardImg') {
+    const urls = record.idCardImgList?.length
+      ? record.idCardImgList
+      : record.idCardImg
+        ? [record.idCardImg]
+        : [];
+    if (urls.length === 0) return <span>-</span>;
    return (
      <Space>
-        {images.map((src: string) => (
-          <Image key={src} width={48} height={32} src={src} />
+        {urls.map((src: string) => (
+          <Image
+            key={src}
+            width={48}
+            height={32}
+            src={src}
+            v-slots={{ previewMask: () => <EyeOutlined /> }}
+          />
        ))}
      </Space>
    );
  }

  if (column.key === 'action') {
-    const isActive = record.status === 'active';
+    const isActive = record.status === '1';
    return (
      <Button type="link" size="small" onClick={() => onToggleStatus(record)}>
        {isActive ? '禁用' : '启用'}
@@ -75,16 +86,29 @@ export default defineComponent({
    const { containerRef, height } = useContainerSize();

    const handleToggleStatus = (record: any) => {
-      const isActive = record.status === 'active';
+      const isActive = record.status === '1';
      const actionText = isActive ? '禁用' : '启用';
+      const targetStatus = isActive ? '0' : '1';
      Modal.confirm({
        title: `${actionText}确认`,
-        content: `确认${actionText}用户"${record.nickName}"吗？`,
+        content: `确认${actionText}用户"${record.nickname}"吗？`,
        okText: '确认',
        cancelText: '取消',
-        onOk: () => {
-          console.log(`${actionText}用户:`, record.userId);
-          // TODO: 替换为真实 API 调用
+        onOk: async () => {
+          try {
+            const res = await toggleUserActive({
+              userId: record.id,
+              status: targetStatus,
+            });
+            if (res.code === 200) {
+              message.success(`${actionText}成功`);
+              handleSearch();
+            } else {
+              message.error(res.msg || '操作失败');
+            }
+          } catch (e: any) {
+            console.error(`用户${actionText}失败:`, e);
+          }
        },
      });
    };
@@ -101,24 +125,34 @@ export default defineComponent({
      },
    ];

+    onMounted(() => {
+      handleSearch();
+    });
+
    return () => (
      <div class={pageStyles.containerMain}>
        {/* ===== 筛选区 ===== */}
        <div class={pageStyles.filter}>
          <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
-            <Form.Item label="用户昵称" name="searchUserName">
+            <Form.Item label="用户昵称" name="nickname">
              <Input
+                value={filterForm.nickname}
                placeholder="请输入用户昵称"
                style={{ width: '200px' }}
                allowClear
+                onUpdate:value={(val: any) =>
+                  (filterForm.nickname = val.target?.value ?? val ?? '')
+                }
                onPressEnter={handleSearch}
              />
            </Form.Item>
-            <Form.Item label="手机号" name="searchPhone">
+            <Form.Item label="手机号" name="phone">
              <Input
+                value={filterForm.phone}
                placeholder="请输入手机号"
                style={{ width: '200px' }}
                allowClear
+                onUpdate:value={(val: any) => (filterForm.phone = val.target?.value ?? val ?? '')}
                onPressEnter={handleSearch}
              />
            </Form.Item>
@@ -1,56 +1,26 @@
 import { computed, reactive, toRef, Ref, h } from 'vue';
 import { message } from 'ant-design-vue';
-import dayjs from 'dayjs';
 import { StatusTag, type StatusTagTone } from '@/components';
 import { useState, useDebounce, useThrottleFn } from '@/hooks';
+import { getUserList, type TournamentAdminUserPageVO, type UserListQueryParams } from '@/api/users';

 // ============================================================
 // 常量
 // ============================================================

-/** 用户状态选项 */
+/** 用户状态选项（value 对应 API status: 不传=全部、0=禁用、1=正常） */
 export const USER_STATUS_OPTIONS = [
  { value: '', label: '全部' },
-  { value: 'active', label: '正常' },
-  { value: 'disabled', label: '禁用' },
+  { value: '1', label: '正常' },
+  { value: '0', label: '禁用' },
 ] as const;

 /** 用户状态 StatusTag 映射 */
 const USER_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
-  active: { label: '正常', tone: 'success' },
-  disabled: { label: '禁用', tone: 'danger' },
+  '1': { label: '正常', tone: 'success' },
+  '0': { label: '禁用', tone: 'danger' },
 };

-// ============================================================
-// 假数据
-// ============================================================
-
-const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
-  key: `${i + 1}`,
-  userId: `U202607${String(i + 1).padStart(5, '0')}`,
-  nickName: ['羽毛球小将', '马拉松达人', '健身爱好者', '游泳健将'][i % 4],
-  phone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
-  realName: ['张三', '李四', '王五', '赵六'][i % 4],
-  gender: i % 2 === 0 ? '男' : '女',
-  idNo: '320101199001011234',
-  // 证图片来源：奇数索引有，偶数无
-  idImg:
-    i % 2 === 1
-      ? ['https://picsum.photos/seed/idcard-a/120/80', 'https://picsum.photos/seed/idcard-b/120/80']
-      : [],
-  status: (i % 4 === 3 ? 'disabled' : 'active') as string,
-  loginTime: `2026-07-${String((i % 20) + 1).padStart(2, '0')} ${String((i * 3 + 6) % 24).padStart(2, '0')}:${String((i * 17 + 11) % 60).padStart(2, '0')}:${String((i * 13 + 7) % 60).padStart(2, '0')}`,
-}));
-
-/**
- * 临时排序：对假数据按登录时间倒序排列。
- * 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
- */
-const sortByTimeDesc = (list: any[], field: string) =>
-  [...list].sort((a, b) => dayjs(b[field]).valueOf() - dayjs(a[field]).valueOf());
-
-const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'loginTime');
-
 // ============================================================
 // Model
 // ============================================================
@@ -59,43 +29,42 @@ const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'loginTime');
 * 用户列表页数据模型
 */
 export function useUserModel() {
-  // ===== 筛选条件 =====
+  // ===== 筛选条件（key 名对齐 API 查询参数） =====
  const filterForm = reactive({
-    searchUserName: '',
-    searchPhone: '',
+    nickname: '',
+    phone: '',
    status: '',
  });

-  // 各字段防抖 300ms
-  const { debouncedValue: debouncedUserName } = useDebounce(
-    toRef(filterForm, 'searchUserName') as Ref<string>,
+  // 可搜索字段防抖
+  const { debouncedValue: debouncedNickname } = useDebounce(
+    toRef(filterForm, 'nickname') as Ref<string>,
    { delay: 300 },
  );
  const { debouncedValue: debouncedPhone } = useDebounce(
-    toRef(filterForm, 'searchPhone') as Ref<string>,
+    toRef(filterForm, 'phone') as Ref<string>,
    { delay: 300 },
  );

  // ===== 表格状态 =====
  const [loading, setLoading] = useState<boolean>(false);
-  const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
+  const [dataSource, setDataSource] = useState<TournamentAdminUserPageVO[]>([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
-    total: SORTED_MOCK_DATA.length,
+    total: 0,
  });

-  // ===== 表格列配置 =====
+  // ===== 表格列配置（dataIndex 对齐 TournamentAdminUserPageVO） =====
  const columns = [
-    { title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
+    { title: '昵称', dataIndex: 'nickname', key: 'nickname', width: 120 },
    { title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
    { title: '真实姓名', dataIndex: 'realName', key: 'realName', width: 100 },
-    { title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
-    { title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
+    { title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 },
    {
      title: '证件图片',
-      dataIndex: 'idImg',
-      key: 'idImg',
+      dataIndex: 'idCardImg',
+      key: 'idCardImg',
      width: 140,
    },
    {
@@ -109,13 +78,33 @@ export function useUserModel() {
        return h(StatusTag, { label: info.label, tone: info.tone });
      },
    },
-    { title: '登录时间', dataIndex: 'loginTime', key: 'loginTime', width: 170 },
+    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
  ];

+  // ===== 构建 API 查询参数 =====
+  const buildQueryParams = (): UserListQueryParams => {
+    const params: UserListQueryParams = {
+      page: String(pagination.value.current),
+      limit: String(pagination.value.pageSize),
+    };
+
+    if (filterForm.nickname.trim()) {
+      params.nickname = filterForm.nickname.trim();
+    }
+    if (filterForm.phone.trim()) {
+      params.phone = filterForm.phone.trim();
+    }
+    if (filterForm.status) {
+      params.status = filterForm.status;
+    }
+
+    return params;
+  };
+
  // ===== 计算属性 =====
  const hasFilter = computed(() => {
    return (
-      debouncedUserName.value.trim() !== '' ||
+      debouncedNickname.value.trim() !== '' ||
      debouncedPhone.value.trim() !== '' ||
      filterForm.status !== ''
    );
@@ -123,19 +112,20 @@ export function useUserModel() {

  // ===== 方法 =====

-  /** 查询（节流 500ms） */
+  /** 查询 */
  const handleSearch = useThrottleFn(async () => {
    setLoading(true);
    try {
-      console.log('搜索条件:', {
-        userName: debouncedUserName.value,
-        phone: debouncedPhone.value,
-        status: filterForm.status,
-      });
-      // TODO: 替换为真实 API 调用
-      setDataSource(SORTED_MOCK_DATA);
-      setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
-      message.success('查询成功');
+      const queryParams = buildQueryParams();
+      console.log('用户列表查询参数:', queryParams);
+      const res = await getUserList(queryParams);
+
+      if (res.code === 200) {
+        setDataSource(res.data.list);
+        setPagination({ ...pagination.value, total: res.data.total });
+      } else {
+        message.error(res.msg || '查询失败');
+      }
    } catch (error: any) {
      console.error('用户列表查询失败:', error);
    } finally {
@@ -143,13 +133,14 @@ export function useUserModel() {
    }
  }, 500);

-  /** 重置（节流 500ms） */
+  /** 重置 */
  const handleReset = useThrottleFn(() => {
-    filterForm.searchUserName = '';
-    filterForm.searchPhone = '';
+    filterForm.nickname = '';
+    filterForm.phone = '';
    filterForm.status = '';
-    setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
-    setDataSource(SORTED_MOCK_DATA);
+    setPagination({ current: 1, pageSize: 10, total: 0 });
+    setDataSource([]);
+    setTimeout(() => handleSearch(), 350);
  }, 500);

  const handlePageChange = (page: number, pageSize: number) => {