feat: 对接赛事列表相关接口文档 更新测试数据
This commit is contained in:
+1
-2
@@ -1,4 +1,3 @@
|
|||||||
# 开发环境
|
# 开发环境
|
||||||
VITE_PORT = 5173
|
VITE_PORT = 5173
|
||||||
VITE_API_BASE_URL = http://localhost:3000
|
VITE_API_BASE_URL = http://localhost:3000/admin
|
||||||
VITE_API_PREFIX = /api
|
|
||||||
|
|||||||
+1
-2
@@ -1,3 +1,2 @@
|
|||||||
# 生产环境
|
# 生产环境
|
||||||
VITE_API_BASE_URL = https://api.cpms.example.com
|
VITE_API_BASE_URL = https://api.cpms.example.com/admin
|
||||||
VITE_API_PREFIX = /api
|
|
||||||
|
|||||||
@@ -1,3 +1,2 @@
|
|||||||
# 测试环境
|
# 测试环境
|
||||||
VITE_API_BASE_URL = https://test-api.cpms.example.com
|
VITE_API_BASE_URL = https://test-api.cpms.example.com/admin
|
||||||
VITE_API_PREFIX = /api
|
|
||||||
|
|||||||
@@ -0,0 +1,100 @@
|
|||||||
|
/**
|
||||||
|
* 赛事管理 API
|
||||||
|
* 注意:/admin 前缀已通过 VITE_API_BASE_URL 统一注入(见 .env.*),此文件中只写业务路径。
|
||||||
|
*/
|
||||||
|
import { get, post } from '@/utils/request';
|
||||||
|
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
|
||||||
|
import { MOCK_EVENT_DETAIL } from '@/config/mock/eventDetail';
|
||||||
|
import { buildMockEventListPage } from '@/config/mock/eventList';
|
||||||
|
import { buildMockSignupListPage } from '@/config/mock/eventSignup';
|
||||||
|
import type {
|
||||||
|
EventListQueryParams,
|
||||||
|
SignupListQueryParams,
|
||||||
|
ToggleOnlineParams,
|
||||||
|
ApiResult,
|
||||||
|
PageData,
|
||||||
|
TournamentAdminVO,
|
||||||
|
TournamentAdminInfoVO,
|
||||||
|
TournamentAdminInfoSignupVO,
|
||||||
|
} from './types';
|
||||||
|
|
||||||
|
export type {
|
||||||
|
TournamentAdminVO,
|
||||||
|
TournamentAdminInfoVO,
|
||||||
|
TournamentAdminInfoSignupVO,
|
||||||
|
InnerCategoryVO,
|
||||||
|
EventListQueryParams,
|
||||||
|
SignupListQueryParams,
|
||||||
|
ToggleOnlineParams,
|
||||||
|
PageData,
|
||||||
|
ApiResult,
|
||||||
|
} from './types';
|
||||||
|
|
||||||
|
/** 模拟延时 */
|
||||||
|
const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 赛事列表 - 列表分页
|
||||||
|
* GET /admin/manager/tm/page → /manager/tm/page
|
||||||
|
*/
|
||||||
|
export async function getEventList(
|
||||||
|
params: EventListQueryParams,
|
||||||
|
): Promise<ApiResult<PageData<TournamentAdminVO>>> {
|
||||||
|
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: buildMockEventListPage(page, limit),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return get('/manager/tm/page', params as Record<string, any>);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 赛事列表 - 赛事详情
|
||||||
|
* GET /admin/manager/tm/info → /manager/tm/info
|
||||||
|
*/
|
||||||
|
export async function getEventDetail(id: string): Promise<ApiResult<TournamentAdminInfoVO>> {
|
||||||
|
if (USE_MOCK) {
|
||||||
|
await delay(MOCK_DELAY);
|
||||||
|
return {
|
||||||
|
code: 200,
|
||||||
|
msg: 'success',
|
||||||
|
data: { ...MOCK_EVENT_DETAIL },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return get('/manager/tm/info', { id });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 赛事列表 - 赛事详情 - 人员列表
|
||||||
|
* GET /admin/manager/tm/info/signupPage → /manager/tm/info/signupPage
|
||||||
|
*/
|
||||||
|
export async function getSignupList(
|
||||||
|
params: SignupListQueryParams,
|
||||||
|
): Promise<ApiResult<PageData<TournamentAdminInfoSignupVO>>> {
|
||||||
|
if (USE_MOCK) {
|
||||||
|
await delay(MOCK_DELAY);
|
||||||
|
return {
|
||||||
|
code: 200,
|
||||||
|
msg: 'success',
|
||||||
|
data: buildMockSignupListPage(params),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return get('/manager/tm/info/signupPage', params as Record<string, any>);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 赛事上架 / 下架
|
||||||
|
* POST /admin/manager/tm/online → /manager/tm/online
|
||||||
|
* @param params.id 赛事ID
|
||||||
|
* @param params.online 0=下架,1=上架
|
||||||
|
*/
|
||||||
|
export function toggleEventOnline(
|
||||||
|
params: ToggleOnlineParams,
|
||||||
|
): Promise<ApiResult<Record<string, never>>> {
|
||||||
|
return post('/manager/tm/online', params);
|
||||||
|
}
|
||||||
@@ -0,0 +1,199 @@
|
|||||||
|
/**
|
||||||
|
* 赛事管理 — 类型定义
|
||||||
|
* 对应 OpenAPI: /admin/manager/tm/page
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** 赛事列表项 */
|
||||||
|
export interface TournamentAdminVO {
|
||||||
|
/** 赛事ID */
|
||||||
|
id: string;
|
||||||
|
/** 赛事名称 */
|
||||||
|
name: string;
|
||||||
|
/** 赛事开始时间 */
|
||||||
|
startTimeBegin: string;
|
||||||
|
/** 赛事结束时间 */
|
||||||
|
startTimeEnd: string;
|
||||||
|
/** 赛事省市区,场地区划名称 */
|
||||||
|
venueArea: string;
|
||||||
|
/** 赛事地点名称 */
|
||||||
|
venue: string;
|
||||||
|
/** 是否公开;0=非公开,1=公开 */
|
||||||
|
isPublic: string;
|
||||||
|
/** 是否要求提供证件图片;0=无需,1=需要 */
|
||||||
|
isRequireIdCardImg: string;
|
||||||
|
/** 是否要求提供证件号码;0=无需,1=需要 */
|
||||||
|
isRequireIdCardNo: string;
|
||||||
|
/** 创建人昵称 */
|
||||||
|
createNickname: string;
|
||||||
|
/** 创建人手机号 */
|
||||||
|
createPhone: string;
|
||||||
|
/** 创建时间 */
|
||||||
|
createTime: string;
|
||||||
|
/**
|
||||||
|
* 状态
|
||||||
|
* 优先级:del_flag==1 → 3(已删除);online==0 → 4(已下架);否则取 status
|
||||||
|
* 0=报名中,1=进行中,2=已结束,3=已删除,4=已下架
|
||||||
|
*/
|
||||||
|
status: string;
|
||||||
|
/** 报名人数 */
|
||||||
|
signupCount: string;
|
||||||
|
/** 退赛人数 */
|
||||||
|
dropoutCount: string;
|
||||||
|
/** 赛事规程 */
|
||||||
|
rulesDescr: string;
|
||||||
|
/** 赛事规程图片 */
|
||||||
|
rulesDescrImg: string;
|
||||||
|
/** 赛事规程图片数组 */
|
||||||
|
rulesDescrImgList: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 赛事列表查询参数 */
|
||||||
|
export interface EventListQueryParams {
|
||||||
|
page?: string;
|
||||||
|
limit?: string;
|
||||||
|
/** 创建时间开始 yyyy-MM-dd */
|
||||||
|
createDate?: string;
|
||||||
|
/** 创建时间结束 yyyy-MM-dd */
|
||||||
|
createDateEnd?: string;
|
||||||
|
/** 赛事时间开始 yyyy-MM-dd */
|
||||||
|
startDate?: string;
|
||||||
|
/** 赛事时间结束 yyyy-MM-dd */
|
||||||
|
startDateEnd?: string;
|
||||||
|
/** 赛事名称 */
|
||||||
|
name?: string;
|
||||||
|
/** 创建人昵称或手机号 */
|
||||||
|
createName?: string;
|
||||||
|
/**
|
||||||
|
* 赛事状态
|
||||||
|
* 不传=全部、0=报名中,1=进行中,2=已结束,3=已删除,4=已下架
|
||||||
|
*/
|
||||||
|
status?: string;
|
||||||
|
/** 市级别城市名称 */
|
||||||
|
areaName?: string;
|
||||||
|
/** 是否公开;0=非公开,1=公开 */
|
||||||
|
isPublic?: string;
|
||||||
|
/** 是否要求提供证件图片;0=无需,1=需要 */
|
||||||
|
idCardImg?: string;
|
||||||
|
/** 是否要求提供证件号码;0=无需,1=需要 */
|
||||||
|
idCardNo?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 分页数据 */
|
||||||
|
export interface PageData<T> {
|
||||||
|
total: number;
|
||||||
|
list: T[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 统一响应包裹 */
|
||||||
|
export interface ApiResult<T> {
|
||||||
|
/** 编码:200表示成功,其他值表示失败 */
|
||||||
|
code: number;
|
||||||
|
/** 消息内容 */
|
||||||
|
msg: string;
|
||||||
|
/** 响应数据 */
|
||||||
|
data: T;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================
|
||||||
|
// 赛事详情(对应 /manager/tm/info)
|
||||||
|
// ============================================================
|
||||||
|
|
||||||
|
/** 组别信息 */
|
||||||
|
export interface InnerCategoryVO {
|
||||||
|
/** 组别ID */
|
||||||
|
id: string;
|
||||||
|
/** 组别名称 */
|
||||||
|
name: string;
|
||||||
|
/** 组别类型;1=单打,2=双打 */
|
||||||
|
type: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 赛事详情 */
|
||||||
|
export interface TournamentAdminInfoVO {
|
||||||
|
/** 赛事名称 */
|
||||||
|
name: string;
|
||||||
|
/** 赛事开始时间 */
|
||||||
|
startTimeBegin: string;
|
||||||
|
/** 赛事结束时间 */
|
||||||
|
startTimeEnd: string;
|
||||||
|
/** 赛事说明 */
|
||||||
|
descr: string;
|
||||||
|
/** 报名开始时间 */
|
||||||
|
signupTimeBegin: string;
|
||||||
|
/** 报名结束时间 */
|
||||||
|
signupTimeEnd: string;
|
||||||
|
/** 赛事省市区 */
|
||||||
|
venueArea: string;
|
||||||
|
/** 赛事地点名称 */
|
||||||
|
venue: string;
|
||||||
|
/** 场地号 */
|
||||||
|
venueNo: string;
|
||||||
|
/** 是否公开;0=非公开,1=公开 */
|
||||||
|
isPublic: string;
|
||||||
|
/** 是否要求提供证件图片;0=无需,1=需要 */
|
||||||
|
isRequireIdCardImg: string;
|
||||||
|
/** 是否要求提供证件号码;0=无需,1=需要 */
|
||||||
|
isRequireIdCardNo: string;
|
||||||
|
/** 创建时间 */
|
||||||
|
createTime: string;
|
||||||
|
/** 创建人昵称 */
|
||||||
|
createNickname: string;
|
||||||
|
/** 报名人数 */
|
||||||
|
signupCount: string;
|
||||||
|
/** 退赛人数 */
|
||||||
|
dropoutCount: string;
|
||||||
|
/** 允许报名最大人数 */
|
||||||
|
dtotalLimit: string;
|
||||||
|
/** 总对阵数 */
|
||||||
|
matchTotalCount: string;
|
||||||
|
/** 已完成对阵数 */
|
||||||
|
matchCount: string;
|
||||||
|
/** 赛事封面url */
|
||||||
|
img: string;
|
||||||
|
/** 活动公告 */
|
||||||
|
notice: string;
|
||||||
|
/** 组别列表,创建时间倒序 */
|
||||||
|
categoryList: InnerCategoryVO[];
|
||||||
|
/** 分组名称列表,格式 "小组名称(淘汰赛或循环赛)" */
|
||||||
|
groupInfoList: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================
|
||||||
|
// 人员列表(对应 /manager/tm/info/signupPage)
|
||||||
|
// ============================================================
|
||||||
|
|
||||||
|
/** 报名人员 */
|
||||||
|
export interface TournamentAdminInfoSignupVO {
|
||||||
|
/** 选手名称 */
|
||||||
|
realName: string;
|
||||||
|
/** 选手性别;1=男,2=女 */
|
||||||
|
gender: string;
|
||||||
|
/** 选手手机号 */
|
||||||
|
phone: string;
|
||||||
|
/** 选手身份证 */
|
||||||
|
idCard: string;
|
||||||
|
/** 选手身份证图片 */
|
||||||
|
idCardImg: string;
|
||||||
|
/** 选手身份证图片列表 */
|
||||||
|
idCardImgList: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 人员列表查询参数 */
|
||||||
|
export interface SignupListQueryParams {
|
||||||
|
page: string;
|
||||||
|
limit: string;
|
||||||
|
/** 组别ID(必填) */
|
||||||
|
categoryId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================
|
||||||
|
// 上下架(对应 /manager/tm/online)
|
||||||
|
// ============================================================
|
||||||
|
|
||||||
|
/** 上下架请求参数 */
|
||||||
|
export interface ToggleOnlineParams {
|
||||||
|
/** 赛事ID */
|
||||||
|
id: string;
|
||||||
|
/** 0=下架,1=上架 */
|
||||||
|
online: string;
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
/**
|
||||||
|
* 全局假数据开关
|
||||||
|
*
|
||||||
|
* true = 所有 API 使用假数据(模拟真实网络延时 2s 后返回假数据)
|
||||||
|
* false = 走真实后端接口
|
||||||
|
*
|
||||||
|
* 对接后端接口后将此值改为 false 即可切换。
|
||||||
|
*/
|
||||||
|
export const USE_MOCK = true;
|
||||||
|
|
||||||
|
/** 模拟网络延时(毫秒) */
|
||||||
|
export const MOCK_DELAY = 850;
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
/**
|
||||||
|
* 赛事详情弹窗假数据
|
||||||
|
*
|
||||||
|
* 使用页面:`src/pages/events/list/components/EventDetailModal.tsx`
|
||||||
|
* 对应接口:`GET /manager/tm/info`
|
||||||
|
* 类型:`TournamentAdminInfoVO`
|
||||||
|
*/
|
||||||
|
import type { TournamentAdminInfoVO } from '@/api/events';
|
||||||
|
|
||||||
|
export const MOCK_EVENT_DETAIL: TournamentAdminInfoVO = {
|
||||||
|
name: '第二届全国地学羽毛球邀请赛',
|
||||||
|
startTimeBegin: '2026-05-26 08:00',
|
||||||
|
startTimeEnd: '2026-05-31 22:00',
|
||||||
|
descr:
|
||||||
|
'赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。',
|
||||||
|
signupTimeBegin: '2026-05-24 08:00',
|
||||||
|
signupTimeEnd: '2026-05-26 22:00',
|
||||||
|
venueArea: '北京市 北京市 东城区',
|
||||||
|
venue: '李宁体育馆',
|
||||||
|
venueNo: '李宁体育馆',
|
||||||
|
isPublic: '1',
|
||||||
|
isRequireIdCardImg: '0',
|
||||||
|
isRequireIdCardNo: '0',
|
||||||
|
createTime: '2026-05-26 08:00',
|
||||||
|
createNickname: '张三',
|
||||||
|
signupCount: '100',
|
||||||
|
dropoutCount: '1',
|
||||||
|
dtotalLimit: '1000',
|
||||||
|
matchTotalCount: '50',
|
||||||
|
matchCount: '50',
|
||||||
|
img: 'https://picsum.photos/seed/eventcover/600/300',
|
||||||
|
notice:
|
||||||
|
'赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告。',
|
||||||
|
categoryList: [
|
||||||
|
{ id: '1', name: '男子单打', type: '1' },
|
||||||
|
{ id: '2', name: '女子双打', type: '2' },
|
||||||
|
],
|
||||||
|
groupInfoList: ['男子小组1(循环赛)', '女子小组1(淘汰赛)'],
|
||||||
|
};
|
||||||
@@ -0,0 +1,268 @@
|
|||||||
|
/**
|
||||||
|
* 赛事列表页假数据
|
||||||
|
*
|
||||||
|
* 使用页面:`src/pages/events/list/index.tsx`
|
||||||
|
* 对应接口:`GET /manager/tm/page`
|
||||||
|
* 类型:`TournamentAdminVO[]`
|
||||||
|
*/
|
||||||
|
import type { TournamentAdminVO, PageData } from '@/api/events';
|
||||||
|
|
||||||
|
export const MOCK_EVENT_LIST: TournamentAdminVO[] = [
|
||||||
|
{
|
||||||
|
id: 'EV202607010001',
|
||||||
|
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '1',
|
||||||
|
isRequireIdCardImg: '1',
|
||||||
|
isRequireIdCardNo: '1',
|
||||||
|
createNickname: '张运营',
|
||||||
|
createPhone: '13800138001',
|
||||||
|
createTime: '2026-07-10 08:11:07',
|
||||||
|
status: '0',
|
||||||
|
signupCount: '128',
|
||||||
|
dropoutCount: '5',
|
||||||
|
rulesDescr: '一、赛事目的:推动羽毛球运动发展。\n二、参赛资格:身体健康、年龄符合要求。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: [
|
||||||
|
'https://picsum.photos/seed/rule1/300/200',
|
||||||
|
'https://picsum.photos/seed/rule2/300/200',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010002',
|
||||||
|
name: '国际马拉松城市联赛',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '0',
|
||||||
|
isRequireIdCardImg: '0',
|
||||||
|
isRequireIdCardNo: '0',
|
||||||
|
createNickname: '李管理',
|
||||||
|
createPhone: '13900139002',
|
||||||
|
createTime: '2026-07-09 11:28:20',
|
||||||
|
status: '1',
|
||||||
|
signupCount: '256',
|
||||||
|
dropoutCount: '12',
|
||||||
|
rulesDescr: '一、赛事目的:推动马拉松运动发展。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: ['https://picsum.photos/seed/rule1/300/200'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010003',
|
||||||
|
name: '全民健身运动会',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '1',
|
||||||
|
isRequireIdCardImg: '1',
|
||||||
|
isRequireIdCardNo: '1',
|
||||||
|
createNickname: '王策划',
|
||||||
|
createPhone: '13700137003',
|
||||||
|
createTime: '2026-07-08 14:45:33',
|
||||||
|
status: '2',
|
||||||
|
signupCount: '512',
|
||||||
|
dropoutCount: '8',
|
||||||
|
rulesDescr: '一、赛事目的:促进全民健身。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: ['https://picsum.photos/seed/rule1/300/200'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010004',
|
||||||
|
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '0',
|
||||||
|
isRequireIdCardImg: '0',
|
||||||
|
isRequireIdCardNo: '0',
|
||||||
|
createNickname: '赵赛事',
|
||||||
|
createPhone: '13600136004',
|
||||||
|
createTime: '2026-07-07 18:02:46',
|
||||||
|
status: '3',
|
||||||
|
signupCount: '64',
|
||||||
|
dropoutCount: '3',
|
||||||
|
rulesDescr: '一、赛事目的:交流体育文化。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010005',
|
||||||
|
name: '国际马拉松城市联赛',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '1',
|
||||||
|
isRequireIdCardImg: '1',
|
||||||
|
isRequireIdCardNo: '1',
|
||||||
|
createNickname: '张运营',
|
||||||
|
createPhone: '13800138001',
|
||||||
|
createTime: '2026-07-06 21:19:59',
|
||||||
|
status: '4',
|
||||||
|
signupCount: '0',
|
||||||
|
dropoutCount: '0',
|
||||||
|
rulesDescr: '一、赛事目的:推动城市体育交流。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: ['https://picsum.photos/seed/rule1/300/200'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010006',
|
||||||
|
name: '全民健身运动会',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '0',
|
||||||
|
isRequireIdCardImg: '0',
|
||||||
|
isRequireIdCardNo: '0',
|
||||||
|
createNickname: '李管理',
|
||||||
|
createPhone: '13900139002',
|
||||||
|
createTime: '2026-07-05 00:36:12',
|
||||||
|
status: '0',
|
||||||
|
signupCount: '128',
|
||||||
|
dropoutCount: '5',
|
||||||
|
rulesDescr: '一、赛事目的:增强全民体质。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010007',
|
||||||
|
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '1',
|
||||||
|
isRequireIdCardImg: '1',
|
||||||
|
isRequireIdCardNo: '1',
|
||||||
|
createNickname: '王策划',
|
||||||
|
createPhone: '13700137003',
|
||||||
|
createTime: '2026-07-04 03:53:25',
|
||||||
|
status: '1',
|
||||||
|
signupCount: '256',
|
||||||
|
dropoutCount: '12',
|
||||||
|
rulesDescr: '一、赛事目的:选拔青少年人才。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: [
|
||||||
|
'https://picsum.photos/seed/rule1/300/200',
|
||||||
|
'https://picsum.photos/seed/rule2/300/200',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010008',
|
||||||
|
name: '国际马拉松城市联赛',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '0',
|
||||||
|
isRequireIdCardImg: '0',
|
||||||
|
isRequireIdCardNo: '0',
|
||||||
|
createNickname: '赵赛事',
|
||||||
|
createPhone: '13600136004',
|
||||||
|
createTime: '2026-07-03 07:10:38',
|
||||||
|
status: '2',
|
||||||
|
signupCount: '512',
|
||||||
|
dropoutCount: '8',
|
||||||
|
rulesDescr: '一、赛事目的:连接城市与运动。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010009',
|
||||||
|
name: '全民健身运动会',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '1',
|
||||||
|
isRequireIdCardImg: '1',
|
||||||
|
isRequireIdCardNo: '1',
|
||||||
|
createNickname: '张运营',
|
||||||
|
createPhone: '13800138001',
|
||||||
|
createTime: '2026-07-02 10:27:51',
|
||||||
|
status: '3',
|
||||||
|
signupCount: '64',
|
||||||
|
dropoutCount: '3',
|
||||||
|
rulesDescr: '一、赛事目的:全民参与、共享健康。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: ['https://picsum.photos/seed/rule1/300/200'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010010',
|
||||||
|
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '0',
|
||||||
|
isRequireIdCardImg: '0',
|
||||||
|
isRequireIdCardNo: '0',
|
||||||
|
createNickname: '李管理',
|
||||||
|
createPhone: '13900139002',
|
||||||
|
createTime: '2026-07-01 13:44:04',
|
||||||
|
status: '4',
|
||||||
|
signupCount: '0',
|
||||||
|
dropoutCount: '0',
|
||||||
|
rulesDescr: '一、赛事目的:培养后备力量。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010011',
|
||||||
|
name: '国际马拉松城市联赛',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '1',
|
||||||
|
isRequireIdCardImg: '1',
|
||||||
|
isRequireIdCardNo: '1',
|
||||||
|
createNickname: '王策划',
|
||||||
|
createPhone: '13700137003',
|
||||||
|
createTime: '2026-06-30 17:01:17',
|
||||||
|
status: '0',
|
||||||
|
signupCount: '128',
|
||||||
|
dropoutCount: '5',
|
||||||
|
rulesDescr: '一、赛事目的:推广城市品牌。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: [
|
||||||
|
'https://picsum.photos/seed/rule1/300/200',
|
||||||
|
'https://picsum.photos/seed/rule2/300/200',
|
||||||
|
'https://picsum.photos/seed/rule3/300/200',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'EV202607010012',
|
||||||
|
name: '全民健身运动会',
|
||||||
|
startTimeBegin: '2026-08-12 09:00',
|
||||||
|
startTimeEnd: '2026-08-15 18:00',
|
||||||
|
venueArea: '广东省 深圳市 南山区',
|
||||||
|
venue: '深圳湾体育中心',
|
||||||
|
isPublic: '0',
|
||||||
|
isRequireIdCardImg: '0',
|
||||||
|
isRequireIdCardNo: '0',
|
||||||
|
createNickname: '赵赛事',
|
||||||
|
createPhone: '13600136004',
|
||||||
|
createTime: '2026-06-29 20:18:30',
|
||||||
|
status: '1',
|
||||||
|
signupCount: '256',
|
||||||
|
dropoutCount: '12',
|
||||||
|
rulesDescr: '一、赛事目的:丰富群众体育生活。',
|
||||||
|
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
|
||||||
|
rulesDescrImgList: [],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/** 构建分页响应 */
|
||||||
|
export function buildMockEventListPage(page: number, limit: number): PageData<TournamentAdminVO> {
|
||||||
|
const start = (page - 1) * limit;
|
||||||
|
const list = MOCK_EVENT_LIST.slice(start, start + limit);
|
||||||
|
return { total: MOCK_EVENT_LIST.length, list };
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
/**
|
||||||
|
* 赛事详情 — 人员列表假数据
|
||||||
|
*
|
||||||
|
* 使用页面:`src/pages/events/list/components/EventDetailModal.tsx`
|
||||||
|
* 对应接口:`GET /manager/tm/info/signupPage`
|
||||||
|
* 类型:`TournamentAdminInfoSignupVO[]`
|
||||||
|
*/
|
||||||
|
import type { TournamentAdminInfoSignupVO, PageData, SignupListQueryParams } from '@/api/events';
|
||||||
|
|
||||||
|
export const MOCK_SIGNUP_LIST: TournamentAdminInfoSignupVO[] = [
|
||||||
|
{
|
||||||
|
realName: '张三',
|
||||||
|
gender: '1',
|
||||||
|
phone: '13800138001',
|
||||||
|
idCard: '110101199001011234',
|
||||||
|
idCardImg: 'https://picsum.photos/seed/idcard1/96/64',
|
||||||
|
idCardImgList: [
|
||||||
|
'https://picsum.photos/seed/idcard1a/96/64',
|
||||||
|
'https://picsum.photos/seed/idcard1b/96/64',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
realName: '李四',
|
||||||
|
gender: '1',
|
||||||
|
phone: '13900139002',
|
||||||
|
idCard: '110101199002022345',
|
||||||
|
idCardImg: 'https://picsum.photos/seed/idcard2/96/64',
|
||||||
|
idCardImgList: [
|
||||||
|
'https://picsum.photos/seed/idcard2a/96/64',
|
||||||
|
'https://picsum.photos/seed/idcard2b/96/64',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
realName: '王芳',
|
||||||
|
gender: '2',
|
||||||
|
phone: '13700137003',
|
||||||
|
idCard: '110101199103033456',
|
||||||
|
idCardImg: '',
|
||||||
|
idCardImgList: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
realName: '赵六',
|
||||||
|
gender: '1',
|
||||||
|
phone: '13600136004',
|
||||||
|
idCard: '110101199204044567',
|
||||||
|
idCardImg: 'https://picsum.photos/seed/idcard4/96/64',
|
||||||
|
idCardImgList: ['https://picsum.photos/seed/idcard4a/96/64'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
realName: '孙七',
|
||||||
|
gender: '2',
|
||||||
|
phone: '13500135005',
|
||||||
|
idCard: '110101199305055678',
|
||||||
|
idCardImg: '',
|
||||||
|
idCardImgList: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
realName: '周八',
|
||||||
|
gender: '1',
|
||||||
|
phone: '13400134006',
|
||||||
|
idCard: '110101199406066789',
|
||||||
|
idCardImg: 'https://picsum.photos/seed/idcard6/96/64',
|
||||||
|
idCardImgList: [
|
||||||
|
'https://picsum.photos/seed/idcard6a/96/64',
|
||||||
|
'https://picsum.photos/seed/idcard6b/96/64',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
realName: '吴九',
|
||||||
|
gender: '2',
|
||||||
|
phone: '13300133007',
|
||||||
|
idCard: '110101199507077890',
|
||||||
|
idCardImg: '',
|
||||||
|
idCardImgList: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
realName: '郑十',
|
||||||
|
gender: '1',
|
||||||
|
phone: '13200132008',
|
||||||
|
idCard: '110101199608088901',
|
||||||
|
idCardImg: 'https://picsum.photos/seed/idcard8/96/64',
|
||||||
|
idCardImgList: ['https://picsum.photos/seed/idcard8a/96/64'],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/** 构建分页响应 */
|
||||||
|
export function buildMockSignupListPage(
|
||||||
|
params: SignupListQueryParams,
|
||||||
|
): PageData<TournamentAdminInfoSignupVO> {
|
||||||
|
// mock 模式下忽略 categoryId 过滤,直接分页返回
|
||||||
|
const page = Number(params.page) || 1;
|
||||||
|
const limit = Number(params.limit) || 10;
|
||||||
|
const start = (page - 1) * limit;
|
||||||
|
const list = MOCK_SIGNUP_LIST.slice(start, start + limit);
|
||||||
|
return { total: MOCK_SIGNUP_LIST.length, list };
|
||||||
|
}
|
||||||
@@ -1,6 +1,15 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent, reactive, onMounted } from 'vue';
|
||||||
import { Modal, Descriptions, Image, Table, Pagination, Space } from 'ant-design-vue';
|
import { Modal, Descriptions, Image, Table, Pagination, Space, Spin } from 'ant-design-vue';
|
||||||
import { EyeOutlined } from '@ant-design/icons-vue';
|
import { EyeOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import {
|
||||||
|
getEventDetail,
|
||||||
|
getSignupList,
|
||||||
|
type TournamentAdminInfoVO,
|
||||||
|
type InnerCategoryVO,
|
||||||
|
type TournamentAdminInfoSignupVO,
|
||||||
|
} from '@/api/events';
|
||||||
|
import { useState } from '@/hooks';
|
||||||
import styles from './EventDetailModal.module.less';
|
import styles from './EventDetailModal.module.less';
|
||||||
|
|
||||||
interface EventDetailModalProps {
|
interface EventDetailModalProps {
|
||||||
@@ -9,97 +18,57 @@ interface EventDetailModalProps {
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ===== Mock 数据 =====
|
// ===== 0/1 显示映射 =====
|
||||||
const MOCK_DETAIL = {
|
const YES_NO_MAP: Record<string, string> = { '0': '否', '1': '是' };
|
||||||
name: '第二届全国地学羽毛球邀请赛',
|
const PUBLIC_MAP: Record<string, string> = { '0': '非公开', '1': '公开' };
|
||||||
eventTime: '2026.05.26 08:00 ~ 2026.05.31 22:00',
|
const GENDER_MAP: Record<string, string> = { '1': '男', '2': '女' };
|
||||||
descr:
|
const CATEGORY_TYPE_MAP: Record<string, string> = { '1': '单打', '2': '双打' };
|
||||||
'赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。',
|
|
||||||
registerTime: '2026.05.24 08:00 ~ 2026.05.26 22:00',
|
const formatYN = (v: string) => YES_NO_MAP[v] ?? v;
|
||||||
cancelDeadline: '2026.05.25 22:00',
|
const formatPublic = (v: string) => PUBLIC_MAP[v] ?? v;
|
||||||
region: '北京市 北京市 东城区',
|
const formatGender = (v: string) => GENDER_MAP[v] ?? v;
|
||||||
address: '李宁体育馆',
|
|
||||||
venueNo: '李宁体育馆',
|
const PAGE_SIZE = 10;
|
||||||
publicEvent: '在首页展示赛事',
|
|
||||||
needIdCard: '无需提供',
|
/** 渲染身份证图片 */
|
||||||
needIdCardImage: '无需提供',
|
const renderIdImages = (imgList: string[], singleImg: string) => {
|
||||||
createTime: '2026.05.26 08:00',
|
const urls = imgList.length > 0 ? imgList : singleImg ? [singleImg] : [];
|
||||||
creator: '张三',
|
if (urls.length === 0) return <span>-</span>;
|
||||||
status: '报名中',
|
return (
|
||||||
enrolledCount: 100,
|
<Image.PreviewGroup>
|
||||||
cancelledCount: 1,
|
<Space>
|
||||||
maxCount: 1000,
|
{urls.map((url) => (
|
||||||
crossedCount: 50,
|
<Image
|
||||||
completedCount: 50,
|
key={url}
|
||||||
cover: 'https://picsum.photos/seed/eventcover/600/300',
|
width={48}
|
||||||
announcement:
|
height={32}
|
||||||
'赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告。',
|
src={url}
|
||||||
|
v-slots={{ previewMask: () => <EyeOutlined /> }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Space>
|
||||||
|
</Image.PreviewGroup>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 假组别数据
|
/** 选手表格列 */
|
||||||
const MOCK_GROUPS = [
|
|
||||||
{
|
|
||||||
key: 'group1',
|
|
||||||
title: '组别1:男子单打(单打)',
|
|
||||||
players: [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
name: '张三',
|
|
||||||
gender: '男',
|
|
||||||
phone: '12345678995',
|
|
||||||
idNo: 'xxxxxxxxxxxxxxxx',
|
|
||||||
idImg: '',
|
|
||||||
},
|
|
||||||
{ key: '2', name: '李四', gender: '男', phone: '', idNo: '', idImg: '' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'group2',
|
|
||||||
title: '组别2:女子双打(双打)',
|
|
||||||
players: [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
name: '张三',
|
|
||||||
gender: '女',
|
|
||||||
phone: '12345678995',
|
|
||||||
idNo: 'xxxxxxxxxxxxxxxx',
|
|
||||||
idImg: '',
|
|
||||||
},
|
|
||||||
{ key: '2', name: '李四', gender: '女', phone: '', idNo: '', idImg: '' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 假分组数据
|
|
||||||
const MOCK_DIVISIONS = ['分组1:男子小组1(循环赛)', '分组2:女子小组1(淘汰赛)'];
|
|
||||||
|
|
||||||
const renderIdImage = (src: string) => (
|
|
||||||
<Image
|
|
||||||
width={48}
|
|
||||||
height={32}
|
|
||||||
src={src}
|
|
||||||
v-slots={{
|
|
||||||
previewMask: () => <EyeOutlined />,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const PLAYER_COLUMNS = [
|
const PLAYER_COLUMNS = [
|
||||||
{ title: '选手', dataIndex: 'name', key: 'name', width: 100 },
|
{ title: '选手', dataIndex: 'realName', key: 'realName', width: 100 },
|
||||||
{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
|
{
|
||||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
|
title: '性别',
|
||||||
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
|
dataIndex: 'gender',
|
||||||
|
key: 'gender',
|
||||||
|
width: 60,
|
||||||
|
customRender: ({ text }: { text: string }) => formatGender(text),
|
||||||
|
},
|
||||||
|
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
|
||||||
|
{ title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 },
|
||||||
{
|
{
|
||||||
title: '证件图片',
|
title: '证件图片',
|
||||||
dataIndex: 'idImg',
|
key: 'idCardImgs',
|
||||||
key: 'idImg',
|
|
||||||
width: 180,
|
width: 180,
|
||||||
customRender: () => (
|
customRender: ({ record }: { record: TournamentAdminInfoSignupVO }) =>
|
||||||
<Space>
|
renderIdImages(record.idCardImgList, record.idCardImg),
|
||||||
{renderIdImage('https://picsum.photos/seed/idimg1/96/64')}
|
|
||||||
{renderIdImage('https://picsum.photos/seed/idimg2/96/64')}
|
|
||||||
</Space>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -111,7 +80,71 @@ export default defineComponent({
|
|||||||
onClose: { type: Function, required: true },
|
onClose: { type: Function, required: true },
|
||||||
},
|
},
|
||||||
setup(props: EventDetailModalProps) {
|
setup(props: EventDetailModalProps) {
|
||||||
const detail = MOCK_DETAIL;
|
// ===== 详情数据 =====
|
||||||
|
const [detail, setDetail] = useState<TournamentAdminInfoVO | null>(null);
|
||||||
|
const [detailLoading, setDetailLoading] = useState(true);
|
||||||
|
|
||||||
|
// ===== 每个组别的选手数据(key = categoryId) =====
|
||||||
|
const categoryPlayers = reactive<Record<string, TournamentAdminInfoSignupVO[]>>({});
|
||||||
|
const categoryPlayerTotal = reactive<Record<string, number>>({});
|
||||||
|
const categoryPlayerLoading = reactive<Record<string, boolean>>({});
|
||||||
|
const categoryPlayerPage = reactive<Record<string, number>>({});
|
||||||
|
|
||||||
|
/** 获取某个组别的选手列表(分页) */
|
||||||
|
const fetchPlayers = async (categoryId: string, page: number) => {
|
||||||
|
categoryPlayerLoading[categoryId] = true;
|
||||||
|
try {
|
||||||
|
const res = await getSignupList({
|
||||||
|
categoryId,
|
||||||
|
page: String(page),
|
||||||
|
limit: String(PAGE_SIZE),
|
||||||
|
});
|
||||||
|
if (res.code === 200) {
|
||||||
|
categoryPlayers[categoryId] = res.data.list;
|
||||||
|
categoryPlayerTotal[categoryId] = res.data.total;
|
||||||
|
categoryPlayerPage[categoryId] = page;
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// mock 模式不会到这里,真实模式下由 API 层处理
|
||||||
|
} finally {
|
||||||
|
categoryPlayerLoading[categoryId] = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 选手分页变更 */
|
||||||
|
const handlePlayerPageChange = (categoryId: string, page: number) => {
|
||||||
|
fetchPlayers(categoryId, page);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== 初始化 =====
|
||||||
|
onMounted(async () => {
|
||||||
|
setDetailLoading(true);
|
||||||
|
try {
|
||||||
|
const id = props.record?.id;
|
||||||
|
if (!id) {
|
||||||
|
message.error('缺少赛事ID');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await getEventDetail(String(id));
|
||||||
|
if (res.code === 200) {
|
||||||
|
setDetail(res.data);
|
||||||
|
// 为每个组别加载第一页选手
|
||||||
|
for (const cat of res.data.categoryList) {
|
||||||
|
categoryPlayers[cat.id] = [];
|
||||||
|
categoryPlayerTotal[cat.id] = 0;
|
||||||
|
categoryPlayerPage[cat.id] = 1;
|
||||||
|
fetchPlayers(cat.id, 1);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
message.error(res.msg || '获取详情失败');
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
message.error(e.msg || '获取详情失败');
|
||||||
|
} finally {
|
||||||
|
setDetailLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<Modal
|
<Modal
|
||||||
@@ -124,97 +157,117 @@ export default defineComponent({
|
|||||||
destroyOnClose
|
destroyOnClose
|
||||||
wrapClassName={styles.eventDetailModalMain}
|
wrapClassName={styles.eventDetailModalMain}
|
||||||
>
|
>
|
||||||
{/* ===== 基础信息 ===== */}
|
{detailLoading.value ? (
|
||||||
<div class={styles.section}>
|
<div style={{ textAlign: 'center', padding: '80px 0' }}>
|
||||||
<div class={styles.sectionTitle}>基础信息</div>
|
<Spin size="large" />
|
||||||
<Descriptions size="small" bordered column={3} class={styles.desc}>
|
</div>
|
||||||
{/* 第一行:赛事名称(1 列) + 赛事时间(占 2 列) */}
|
) : detail.value ? (
|
||||||
<Descriptions.Item label="赛事名称">{detail.name}</Descriptions.Item>
|
<>
|
||||||
<Descriptions.Item label="赛事时间" span={2}>
|
{/* ===== 基础信息 ===== */}
|
||||||
{detail.eventTime}
|
<div class={styles.section}>
|
||||||
</Descriptions.Item>
|
<div class={styles.sectionTitle}>基础信息</div>
|
||||||
|
<Descriptions size="small" bordered column={3} class={styles.desc}>
|
||||||
|
<Descriptions.Item label="赛事名称">{detail.value.name}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="赛事时间" span={2}>
|
||||||
|
{detail.value.startTimeBegin} 至 {detail.value.startTimeEnd}
|
||||||
|
</Descriptions.Item>
|
||||||
|
|
||||||
{/* 第二行:赛事说明(占 3 列,独占整行) */}
|
<Descriptions.Item label="赛事说明" span={3}>
|
||||||
<Descriptions.Item label="赛事说明" span={3}>
|
{detail.value.descr}
|
||||||
{detail.descr}
|
</Descriptions.Item>
|
||||||
</Descriptions.Item>
|
|
||||||
|
|
||||||
<Descriptions.Item label="报名起止时间">{detail.registerTime}</Descriptions.Item>
|
<Descriptions.Item label="报名起止时间" span={3}>
|
||||||
<Descriptions.Item label="取消报名截止时间" span={2}>
|
{detail.value.signupTimeBegin} 至 {detail.value.signupTimeEnd}
|
||||||
{detail.cancelDeadline}
|
</Descriptions.Item>
|
||||||
</Descriptions.Item>
|
|
||||||
|
|
||||||
<Descriptions.Item label="省市区">{detail.region}</Descriptions.Item>
|
<Descriptions.Item label="省市区">{detail.value.venueArea}</Descriptions.Item>
|
||||||
<Descriptions.Item label="地点">{detail.address}</Descriptions.Item>
|
<Descriptions.Item label="地点">{detail.value.venue}</Descriptions.Item>
|
||||||
<Descriptions.Item label="场地编号">{detail.venueNo}</Descriptions.Item>
|
<Descriptions.Item label="场地编号">{detail.value.venueNo}</Descriptions.Item>
|
||||||
|
|
||||||
<Descriptions.Item label="公开活动">{detail.publicEvent}</Descriptions.Item>
|
<Descriptions.Item label="公开活动">
|
||||||
<Descriptions.Item label="证件号">{detail.needIdCard}</Descriptions.Item>
|
{formatPublic(detail.value.isPublic)}
|
||||||
<Descriptions.Item label="证件图片">{detail.needIdCardImage}</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="证件号">
|
||||||
|
{formatYN(detail.value.isRequireIdCardNo)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="证件图片">
|
||||||
|
{formatYN(detail.value.isRequireIdCardImg)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
|
||||||
<Descriptions.Item label="创建时间">{detail.createTime}</Descriptions.Item>
|
<Descriptions.Item label="创建时间">{detail.value.createTime}</Descriptions.Item>
|
||||||
<Descriptions.Item label="创建人">{detail.creator}</Descriptions.Item>
|
<Descriptions.Item label="创建人" span={2}>
|
||||||
<Descriptions.Item label="状态">{detail.status}</Descriptions.Item>
|
{detail.value.createNickname}
|
||||||
<Descriptions.Item label="报名人数">{detail.enrolledCount}</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="取消报名人数" span={1}>
|
|
||||||
{detail.cancelledCount}
|
|
||||||
</Descriptions.Item>
|
|
||||||
|
|
||||||
<Descriptions.Item label="最大人数">{detail.maxCount}</Descriptions.Item>
|
<Descriptions.Item label="报名人数">{detail.value.signupCount}</Descriptions.Item>
|
||||||
<Descriptions.Item label="对岸数量">{detail.crossedCount}</Descriptions.Item>
|
<Descriptions.Item label="退赛人数">{detail.value.dropoutCount}</Descriptions.Item>
|
||||||
<Descriptions.Item label="已完成对岸数量">{detail.completedCount}</Descriptions.Item>
|
<Descriptions.Item label="最大人数">{detail.value.dtotalLimit}</Descriptions.Item>
|
||||||
</Descriptions>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ===== 封面 ===== */}
|
<Descriptions.Item label="总对阵数">
|
||||||
<div class={styles.section}>
|
{detail.value.matchTotalCount}
|
||||||
<div class={styles.sectionTitle}>封面</div>
|
</Descriptions.Item>
|
||||||
<Image src={detail.cover} />
|
<Descriptions.Item label="已完成对阵数" span={2}>
|
||||||
</div>
|
{detail.value.matchCount}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* ===== 赛事公告 ===== */}
|
{/* ===== 封面 ===== */}
|
||||||
<div class={styles.section}>
|
<div class={styles.section}>
|
||||||
<div class={styles.sectionTitle}>赛事公告</div>
|
<div class={styles.sectionTitle}>封面</div>
|
||||||
<div class={styles.textBlock}>{detail.announcement}</div>
|
<Image src={detail.value.img} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ===== 组别信息 ===== */}
|
{/* ===== 赛事公告 ===== */}
|
||||||
<div class={styles.section}>
|
<div class={styles.section}>
|
||||||
<div class={styles.sectionTitle}>组别信息</div>
|
<div class={styles.sectionTitle}>赛事公告</div>
|
||||||
{MOCK_GROUPS.map((group) => (
|
<div class={styles.textBlock}>{detail.value.notice}</div>
|
||||||
<div key={group.key} class={styles.group}>
|
</div>
|
||||||
<div class={styles.groupTitle}>{group.title}</div>
|
|
||||||
<Table
|
{/* ===== 组别信息 ===== */}
|
||||||
columns={PLAYER_COLUMNS}
|
<div class={styles.section}>
|
||||||
dataSource={group.players}
|
<div class={styles.sectionTitle}>组别信息</div>
|
||||||
size="small"
|
{detail.value.categoryList.map((cat: InnerCategoryVO) => (
|
||||||
pagination={false}
|
<div key={cat.id} class={styles.group}>
|
||||||
bordered
|
<div class={styles.groupTitle}>
|
||||||
/>
|
{cat.name}({CATEGORY_TYPE_MAP[cat.type] ?? cat.type})
|
||||||
<div class={styles.paginationRow}>
|
</div>
|
||||||
<Pagination
|
<Table
|
||||||
current={1}
|
columns={PLAYER_COLUMNS}
|
||||||
pageSize={10}
|
dataSource={categoryPlayers[cat.id] || []}
|
||||||
total={5}
|
loading={categoryPlayerLoading[cat.id]}
|
||||||
showSizeChanger={false}
|
scroll={{ x: 'max-content', y: 200 }}
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
pagination={false}
|
||||||
|
bordered
|
||||||
|
/>
|
||||||
|
<div class={styles.paginationRow}>
|
||||||
|
<Pagination
|
||||||
|
current={categoryPlayerPage[cat.id] || 1}
|
||||||
|
pageSize={PAGE_SIZE}
|
||||||
|
total={categoryPlayerTotal[cat.id] || 0}
|
||||||
|
showSizeChanger={false}
|
||||||
|
size="small"
|
||||||
|
onChange={(page: number) => handlePlayerPageChange(cat.id, page)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ===== 分组信息 ===== */}
|
||||||
|
<div class={styles.section}>
|
||||||
|
<div class={styles.sectionTitle}>分组信息</div>
|
||||||
|
<div class={styles.divisionList}>
|
||||||
|
{detail.value.groupInfoList.map((d: string) => (
|
||||||
|
<div key={d} class={styles.divisionItem}>
|
||||||
|
{d}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
</>
|
||||||
</div>
|
) : null}
|
||||||
|
|
||||||
{/* ===== 分组信息 ===== */}
|
|
||||||
<div class={styles.section}>
|
|
||||||
<div class={styles.sectionTitle}>分组信息</div>
|
|
||||||
<div class={styles.divisionList}>
|
|
||||||
{MOCK_DIVISIONS.map((d) => (
|
|
||||||
<div key={d} class={styles.divisionItem}>
|
|
||||||
{d}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent, onMounted } from 'vue';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Input,
|
Input,
|
||||||
@@ -20,6 +20,7 @@ import {
|
|||||||
ID_CARD_OPTIONS,
|
ID_CARD_OPTIONS,
|
||||||
ID_CARD_IMAGE_OPTIONS,
|
ID_CARD_IMAGE_OPTIONS,
|
||||||
} from './model/useEventListModel';
|
} from './model/useEventListModel';
|
||||||
|
import { toggleEventOnline } from '@/api/events';
|
||||||
import { regionOptions } from '@/utils/areaData';
|
import { regionOptions } from '@/utils/areaData';
|
||||||
import { useContainerSize, useState } from '@/hooks';
|
import { useContainerSize, useState } from '@/hooks';
|
||||||
import EventRegulationModal from './components/EventRegulationModal';
|
import EventRegulationModal from './components/EventRegulationModal';
|
||||||
@@ -49,7 +50,7 @@ function renderBodyCell({
|
|||||||
onAudit: (record: any) => void;
|
onAudit: (record: any) => void;
|
||||||
onToggleShelf: (record: any) => void;
|
onToggleShelf: (record: any) => void;
|
||||||
}) {
|
}) {
|
||||||
if (column.dataIndex === 'eventName') {
|
if (column.dataIndex === 'name') {
|
||||||
const maxLen = 15;
|
const maxLen = 15;
|
||||||
const raw = text || '';
|
const raw = text || '';
|
||||||
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
|
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
|
||||||
@@ -74,19 +75,8 @@ function renderBodyCell({
|
|||||||
const status = record.status;
|
const status = record.status;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// 待审核:查看 + 审核
|
// 报名中(0) / 进行中(1):查看 + 下架
|
||||||
(status === 'pending' && (
|
((status === '0' || status === '1') && (
|
||||||
<Space>
|
|
||||||
<Button type="link" size="small" onClick={() => onView(record)}>
|
|
||||||
查看
|
|
||||||
</Button>
|
|
||||||
<Button type="link" size="small" onClick={() => onAudit(record)}>
|
|
||||||
审核
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
)) ||
|
|
||||||
// 报名中:查看 + 下架
|
|
||||||
(status === 'enrolling' && (
|
|
||||||
<Space>
|
<Space>
|
||||||
<Button type="link" size="small" onClick={() => onView(record)}>
|
<Button type="link" size="small" onClick={() => onView(record)}>
|
||||||
查看
|
查看
|
||||||
@@ -96,8 +86,8 @@ function renderBodyCell({
|
|||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
)) ||
|
)) ||
|
||||||
// 已下架:查看 + 上架
|
// 已下架(4):查看 + 上架
|
||||||
(status === 'removed' && (
|
(status === '4' && (
|
||||||
<Space>
|
<Space>
|
||||||
<Button type="link" size="small" onClick={() => onView(record)}>
|
<Button type="link" size="small" onClick={() => onView(record)}>
|
||||||
查看
|
查看
|
||||||
@@ -107,7 +97,7 @@ function renderBodyCell({
|
|||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
)) || (
|
)) || (
|
||||||
// 审核不通过 / 已删除:仅查看
|
// 已结束(2) / 已删除(3):仅查看
|
||||||
<Button type="link" size="small" onClick={() => onView(record)}>
|
<Button type="link" size="small" onClick={() => onView(record)}>
|
||||||
查看
|
查看
|
||||||
</Button>
|
</Button>
|
||||||
@@ -144,49 +134,62 @@ export default defineComponent({
|
|||||||
const [currentRecord, setCurrentRecord] = useState<any>({});
|
const [currentRecord, setCurrentRecord] = useState<any>({});
|
||||||
|
|
||||||
const handleView = (record: any) => {
|
const handleView = (record: any) => {
|
||||||
console.log('查看赛事:', record.eventId);
|
console.log('查看赛事:', record.id);
|
||||||
setCurrentRecord(record);
|
setCurrentRecord(record);
|
||||||
setDetailModalVisible(true);
|
setDetailModalVisible(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 上架 / 下架 通用 */
|
/** 上架 / 下架 通用 */
|
||||||
const handleToggleShelf = (record: any) => {
|
const handleToggleShelf = (record: any) => {
|
||||||
const isRemoved = record.status === 'removed';
|
const isRemoved = record.status === '4';
|
||||||
const actionText = isRemoved ? '上架' : '下架';
|
const actionText = isRemoved ? '上架' : '下架';
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: `${actionText}确认`,
|
title: `${actionText}确认`,
|
||||||
content: `确认${actionText}"${record.eventName}"该赛事吗,下架后用户将无法搜索和报名该赛事,已有报名和订单不受影响。`,
|
content: `确认${actionText}"${record.name}"该赛事吗,下架后用户将无法搜索和报名该赛事,已有报名和订单不受影响。`,
|
||||||
okText: '确认',
|
okText: '确认',
|
||||||
cancelText: '取消',
|
cancelText: '取消',
|
||||||
onOk: () => {
|
onOk: async () => {
|
||||||
console.log(`${actionText}赛事:`, record.eventId);
|
const online = isRemoved ? '1' : '0';
|
||||||
// TODO: 替换为真实 API 调用
|
try {
|
||||||
message.success(`${actionText}成功`);
|
const res = await toggleEventOnline({ id: record.id, online });
|
||||||
|
if (res.code === 200) {
|
||||||
|
message.success(`${actionText}成功`);
|
||||||
|
handleSearch();
|
||||||
|
} else {
|
||||||
|
message.error(res.msg || `${actionText}失败`);
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
message.error(e.msg || `${actionText}失败`);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 打开审核弹窗 */
|
/** 打开审核弹窗 */
|
||||||
const handleAudit = (record: any) => {
|
const handleAudit = (record: any) => {
|
||||||
console.log('审核赛事:', record.eventId);
|
console.log('审核赛事:', record.id);
|
||||||
setCurrentRecord(record);
|
setCurrentRecord(record);
|
||||||
setAuditModalVisible(true);
|
setAuditModalVisible(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 提交审核 */
|
/** 提交审核 */
|
||||||
const handleAuditSubmit = (payload: { approved: boolean; comment: string }) => {
|
const handleAuditSubmit = (payload: { approved: boolean; comment: string }) => {
|
||||||
console.log('提交审核:', currentRecord.value.eventId, payload);
|
console.log('提交审核:', currentRecord.value.id, payload);
|
||||||
// TODO: 替换为真实 API 调用
|
// TODO: 替换为真实 API 调用
|
||||||
message.success('审核提交成功');
|
message.success('审核提交成功');
|
||||||
setAuditModalVisible(false);
|
setAuditModalVisible(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleViewRegulation = (record: any) => {
|
const handleViewRegulation = (record: any) => {
|
||||||
console.log('查看规程:', record.eventId);
|
console.log('查看规程:', record.id);
|
||||||
setCurrentRecord(record);
|
setCurrentRecord(record);
|
||||||
setRegulationModalVisible(true);
|
setRegulationModalVisible(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
handleSearch();
|
||||||
|
});
|
||||||
|
|
||||||
/** 最终表格列:模型列 + 赛事规程 + 操作 */
|
/** 最终表格列:模型列 + 赛事规程 + 操作 */
|
||||||
const tableColumns = [
|
const tableColumns = [
|
||||||
...columns,
|
...columns,
|
||||||
@@ -205,23 +208,27 @@ export default defineComponent({
|
|||||||
{/* ===== 筛选区 ===== */}
|
{/* ===== 筛选区 ===== */}
|
||||||
<div class={pageStyles.filter}>
|
<div class={pageStyles.filter}>
|
||||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||||
<Form.Item label="创建时间" name="createTimeRange">
|
<Form.Item label="创建时间" name="createDateRange">
|
||||||
<RangePicker
|
<RangePicker
|
||||||
value={filterForm.createTimeRange as any}
|
value={filterForm.createDateRange as any}
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
valueFormat="YYYY-MM-DD"
|
||||||
style={{ width: '260px' }}
|
style={{ width: '260px' }}
|
||||||
allowClear
|
allowClear
|
||||||
onUpdate:value={(val: any) => (filterForm.createTimeRange = val)}
|
onUpdate:value={(val: any) => (filterForm.createDateRange = val)}
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="赛事时间" name="eventTimeRange">
|
<Form.Item label="赛事时间" name="startDateRange">
|
||||||
<RangePicker
|
<RangePicker
|
||||||
value={filterForm.eventTimeRange as any}
|
value={filterForm.startDateRange as any}
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
valueFormat="YYYY-MM-DD"
|
||||||
style={{ width: '260px' }}
|
style={{ width: '260px' }}
|
||||||
allowClear
|
allowClear
|
||||||
onUpdate:value={(val: any) => (filterForm.eventTimeRange = val)}
|
onUpdate:value={(val: any) => (filterForm.startDateRange = val)}
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="赛事名称" name="searchName">
|
<Form.Item label="赛事名称" name="name">
|
||||||
<Input
|
<Input
|
||||||
placeholder="请输入赛事名称"
|
placeholder="请输入赛事名称"
|
||||||
style={{ width: '180px' }}
|
style={{ width: '180px' }}
|
||||||
@@ -229,7 +236,7 @@ export default defineComponent({
|
|||||||
onPressEnter={handleSearch}
|
onPressEnter={handleSearch}
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="创建人" name="searchCreator">
|
<Form.Item label="创建人" name="createName">
|
||||||
<Input
|
<Input
|
||||||
placeholder="请输入创建人"
|
placeholder="请输入创建人"
|
||||||
style={{ width: '150px' }}
|
style={{ width: '150px' }}
|
||||||
@@ -246,31 +253,31 @@ export default defineComponent({
|
|||||||
onUpdate:value={(val: any) => (filterForm.status = val || '')}
|
onUpdate:value={(val: any) => (filterForm.status = val || '')}
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="公开活动" name="publicEvent">
|
<Form.Item label="公开活动" name="isPublic">
|
||||||
<Select
|
<Select
|
||||||
value={filterForm.publicEvent}
|
value={filterForm.isPublic}
|
||||||
options={PUBLIC_EVENT_OPTIONS as any}
|
options={PUBLIC_EVENT_OPTIONS as any}
|
||||||
style={{ width: '170px' }}
|
style={{ width: '170px' }}
|
||||||
allowClear
|
allowClear
|
||||||
onUpdate:value={(val: any) => (filterForm.publicEvent = val || '')}
|
onUpdate:value={(val: any) => (filterForm.isPublic = val || '')}
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="证件号" name="needIdCard">
|
<Form.Item label="证件号" name="idCardNo">
|
||||||
<Select
|
<Select
|
||||||
value={filterForm.needIdCard}
|
value={filterForm.idCardNo}
|
||||||
options={ID_CARD_OPTIONS as any}
|
options={ID_CARD_OPTIONS as any}
|
||||||
style={{ width: '120px' }}
|
style={{ width: '120px' }}
|
||||||
allowClear
|
allowClear
|
||||||
onUpdate:value={(val: any) => (filterForm.needIdCard = val || '')}
|
onUpdate:value={(val: any) => (filterForm.idCardNo = val || '')}
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="证件图片" name="needIdCardImage">
|
<Form.Item label="证件图片" name="idCardImg">
|
||||||
<Select
|
<Select
|
||||||
value={filterForm.needIdCardImage}
|
value={filterForm.idCardImg}
|
||||||
options={ID_CARD_IMAGE_OPTIONS as any}
|
options={ID_CARD_IMAGE_OPTIONS as any}
|
||||||
style={{ width: '120px' }}
|
style={{ width: '120px' }}
|
||||||
allowClear
|
allowClear
|
||||||
onUpdate:value={(val: any) => (filterForm.needIdCardImage = val || '')}
|
onUpdate:value={(val: any) => (filterForm.idCardImg = val || '')}
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="省市区" name="region">
|
<Form.Item label="省市区" name="region">
|
||||||
|
|||||||
@@ -1,180 +1,168 @@
|
|||||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import dayjs from 'dayjs';
|
|
||||||
import { StatusTag, type StatusTagTone } from '@/components';
|
import { StatusTag, type StatusTagTone } from '@/components';
|
||||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||||
|
import type { TournamentAdminVO, EventListQueryParams } from '@/api/events';
|
||||||
|
import { getEventList } from '@/api/events';
|
||||||
|
|
||||||
// ============================================================
|
// ============================================================
|
||||||
// 常量
|
// 常量
|
||||||
// ============================================================
|
// ============================================================
|
||||||
|
|
||||||
/** 赛事状态选项 */
|
/** 赛事状态选项(value 对应 API status: 不传=全部、0=报名中,1=进行中,2=已结束,3=已删除,4=已下架) */
|
||||||
export const EVENT_STATUS_OPTIONS = [
|
export const EVENT_STATUS_OPTIONS = [
|
||||||
{ value: '', label: '全部' },
|
{ value: '', label: '全部' },
|
||||||
{ value: 'pending', label: '待审核' },
|
{ value: '0', label: '报名中' },
|
||||||
{ value: 'enrolling', label: '报名中' },
|
{ value: '1', label: '进行中' },
|
||||||
{ value: 'deleted', label: '已删除' },
|
{ value: '2', label: '已结束' },
|
||||||
{ value: 'removed', label: '已下架' },
|
{ value: '3', label: '已删除' },
|
||||||
{ value: 'rejected', label: '审核不通过' },
|
{ value: '4', label: '已下架' },
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
/** 公开活动选项 */
|
/** 公开活动选项(value 对应 API isPublic: 0=非公开,1=公开) */
|
||||||
export const PUBLIC_EVENT_OPTIONS = [
|
export const PUBLIC_EVENT_OPTIONS = [
|
||||||
{ value: '', label: '全部' },
|
{ value: '', label: '全部' },
|
||||||
{ value: 'show', label: '在首页展示赛事' },
|
{ value: '1', label: '公开' },
|
||||||
{ value: 'hide', label: '不在首页展示赛事' },
|
{ value: '0', label: '非公开' },
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
/** 证件号选项 */
|
/** 证件号选项(value 对应 API idCardNo: 0=无需,1=需要) */
|
||||||
export const ID_CARD_OPTIONS = [
|
export const ID_CARD_OPTIONS = [
|
||||||
{ value: '', label: '全部' },
|
{ value: '', label: '全部' },
|
||||||
{ value: 'no', label: '无需提供' },
|
{ value: '0', label: '无需提供' },
|
||||||
{ value: 'yes', label: '需提供' },
|
{ value: '1', label: '需提供' },
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
/** 证件图片选项 */
|
/** 证件图片选项(value 对应 API idCardImg: 0=无需,1=需要) */
|
||||||
export const ID_CARD_IMAGE_OPTIONS = [
|
export const ID_CARD_IMAGE_OPTIONS = [
|
||||||
{ value: '', label: '全部' },
|
{ value: '', label: '全部' },
|
||||||
{ value: 'no', label: '无需提供' },
|
{ value: '0', label: '无需提供' },
|
||||||
{ value: 'yes', label: '需提供' },
|
{ value: '1', label: '需提供' },
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
// ============================================================
|
|
||||||
// 假数据
|
|
||||||
// ============================================================
|
|
||||||
|
|
||||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
|
|
||||||
key: `${i + 1}`,
|
|
||||||
eventId: `EV2026070100${String(i + 1).padStart(2, '0')}`,
|
|
||||||
eventName:
|
|
||||||
i % 3 === 0
|
|
||||||
? '2026全国青少年羽毛球锦标赛暨体育文化交流大会'
|
|
||||||
: i % 3 === 1
|
|
||||||
? '国际马拉松城市联赛'
|
|
||||||
: '全民健身运动会',
|
|
||||||
eventTimeStart: '2026-08-12 09:00',
|
|
||||||
eventTimeEnd: '2026-08-15 18:00',
|
|
||||||
province: '广东省',
|
|
||||||
city: '深圳市',
|
|
||||||
district: '南山区',
|
|
||||||
address: '深圳湾体育中心',
|
|
||||||
needIdCard: i % 2 === 0 ? '是' : '否',
|
|
||||||
needIdCardImage: i % 2 === 0 ? '是' : '否',
|
|
||||||
creatorNickname: ['张运营', '李管理', '王策划', '赵赛事'][i % 4],
|
|
||||||
creatorPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
|
|
||||||
createTime: `2026-07-${String((i % 10) + 1).padStart(2, '0')} ${String((i * 3 + 8) % 24).padStart(2, '0')}:${String((i * 17 + 11) % 60).padStart(2, '0')}:${String((i * 13 + 7) % 60).padStart(2, '0')}`,
|
|
||||||
status: (['pending', 'enrolling', 'deleted', 'removed', 'rejected'] as const)[i % 5],
|
|
||||||
enrolledCount: [128, 256, 512, 64, 0][i % 5],
|
|
||||||
cancelledCount: [5, 12, 8, 3, 0][i % 5],
|
|
||||||
}));
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 临时排序:对假数据按创建时间倒序排列。
|
|
||||||
* 【注意】实际项目中排序由后端接口负责,对接后端后请删除此函数及相关调用。
|
|
||||||
*/
|
|
||||||
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, 'createTime');
|
|
||||||
|
|
||||||
/** 状态标签映射 */
|
/** 状态标签映射 */
|
||||||
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||||
pending: { label: '待审核', tone: 'warning' },
|
'0': { label: '报名中', tone: 'primary' },
|
||||||
enrolling: { label: '报名中', tone: 'primary' },
|
'1': { label: '进行中', tone: 'cyan' },
|
||||||
deleted: { label: '已删除', tone: 'neutral' },
|
'2': { label: '已结束', tone: 'neutral' },
|
||||||
removed: { label: '已下架', tone: 'orange' },
|
'3': { label: '已删除', tone: 'neutral' },
|
||||||
rejected: { label: '审核不通过', tone: 'danger' },
|
'4': { label: '已下架', tone: 'orange' },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** 0/1 → 显示文字 */
|
||||||
|
const formatDisplayValue = (value: string, map: Record<string, string>) => map[value] ?? value;
|
||||||
|
|
||||||
|
const ID_CARD_DISPLAY_MAP: Record<string, string> = { '0': '否', '1': '是' };
|
||||||
|
const IS_PUBLIC_DISPLAY_MAP: Record<string, string> = { '0': '非公开', '1': '公开' };
|
||||||
|
|
||||||
// ============================================================
|
// ============================================================
|
||||||
// Model
|
// Model
|
||||||
// ============================================================
|
// ============================================================
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 赛事列表页数据模型
|
* 赛事列表页数据模型
|
||||||
|
* 筛选字段名与 API query 参数(EventListQueryParams)保持一致,
|
||||||
|
* 仅日期区间 RangePicker 拆分为 start/end 两个字段、省市区 Cascader 取末级为 areaName。
|
||||||
*/
|
*/
|
||||||
export function useEventListModel() {
|
export function useEventListModel() {
|
||||||
// ===== 筛选条件 =====
|
// ===== 筛选条件(key 名对齐 API 查询参数) =====
|
||||||
const filterForm = reactive({
|
const filterForm = reactive({
|
||||||
createTimeRange: null as [string, string] | null,
|
createDateRange: null as [string, string] | null,
|
||||||
eventTimeRange: null as [string, string] | null,
|
startDateRange: null as [string, string] | null,
|
||||||
searchName: '',
|
name: '',
|
||||||
searchCreator: '',
|
createName: '',
|
||||||
status: '',
|
status: '',
|
||||||
region: [] as string[],
|
region: [] as string[],
|
||||||
publicEvent: '',
|
isPublic: '',
|
||||||
needIdCard: '',
|
idCardNo: '',
|
||||||
needIdCardImage: '',
|
idCardImg: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 可搜索字段防抖
|
// 可搜索字段防抖
|
||||||
const { debouncedValue: debouncedName } = useDebounce(
|
const { debouncedValue: debouncedName } = useDebounce(toRef(filterForm, 'name') as Ref<string>, {
|
||||||
toRef(filterForm, 'searchName') as Ref<string>,
|
delay: 300,
|
||||||
{ delay: 300 },
|
});
|
||||||
);
|
|
||||||
const { debouncedValue: debouncedCreator } = useDebounce(
|
const { debouncedValue: debouncedCreator } = useDebounce(
|
||||||
toRef(filterForm, 'searchCreator') as Ref<string>,
|
toRef(filterForm, 'createName') as Ref<string>,
|
||||||
{ delay: 300 },
|
{ delay: 300 },
|
||||||
);
|
);
|
||||||
|
|
||||||
// ===== 表格状态 =====
|
// ===== 表格状态 =====
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
|
const [dataSource, setDataSource] = useState<TournamentAdminVO[]>([]);
|
||||||
const [pagination, setPagination] = useState({
|
const [pagination, setPagination] = useState({
|
||||||
current: 1,
|
current: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: SORTED_MOCK_DATA.length,
|
total: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
// ===== 表格列配置 =====
|
// ===== 表格列配置(dataIndex 对齐 TournamentAdminVO 字段) =====
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: '赛事ID', dataIndex: 'eventId', key: 'eventId', width: 180 },
|
{ title: '赛事ID', dataIndex: 'id', key: 'id', width: 180 },
|
||||||
{
|
{
|
||||||
title: '赛事名称',
|
title: '赛事名称',
|
||||||
dataIndex: 'eventName',
|
dataIndex: 'name',
|
||||||
key: 'eventName',
|
key: 'name',
|
||||||
width: 160,
|
width: 160,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '赛事时间',
|
title: '赛事时间',
|
||||||
key: 'eventTime',
|
key: 'eventTime',
|
||||||
width: 260,
|
width: 260,
|
||||||
customRender: ({ record }: { record: any }) =>
|
customRender: ({ record }: { record: TournamentAdminVO }) =>
|
||||||
`${record.eventTimeStart} 至 ${record.eventTimeEnd}`,
|
`${record.startTimeBegin} 至 ${record.startTimeEnd}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '省市区',
|
title: '省市区',
|
||||||
key: 'region',
|
dataIndex: 'venueArea',
|
||||||
|
key: 'venueArea',
|
||||||
width: 200,
|
width: 200,
|
||||||
customRender: ({ record }: { record: any }) =>
|
|
||||||
`${record.province} ${record.city} ${record.district}`,
|
|
||||||
},
|
},
|
||||||
{ title: '地点', dataIndex: 'address', key: 'address', width: 180 },
|
{
|
||||||
|
title: '地点',
|
||||||
|
dataIndex: 'venue',
|
||||||
|
key: 'venue',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否公开',
|
||||||
|
dataIndex: 'isPublic',
|
||||||
|
key: 'isPublic',
|
||||||
|
width: 100,
|
||||||
|
customRender: ({ text }: { text: string }) => formatDisplayValue(text, IS_PUBLIC_DISPLAY_MAP),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '是否提供证件号',
|
title: '是否提供证件号',
|
||||||
dataIndex: 'needIdCard',
|
dataIndex: 'isRequireIdCardNo',
|
||||||
key: 'needIdCard',
|
key: 'isRequireIdCardNo',
|
||||||
width: 160,
|
width: 160,
|
||||||
|
customRender: ({ text }: { text: string }) => formatDisplayValue(text, ID_CARD_DISPLAY_MAP),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '是否提供证件图片',
|
title: '是否提供证件图片',
|
||||||
dataIndex: 'needIdCardImage',
|
dataIndex: 'isRequireIdCardImg',
|
||||||
key: 'needIdCardImage',
|
key: 'isRequireIdCardImg',
|
||||||
width: 160,
|
width: 160,
|
||||||
|
customRender: ({ text }: { text: string }) => formatDisplayValue(text, ID_CARD_DISPLAY_MAP),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '创建人昵称',
|
title: '创建人昵称',
|
||||||
dataIndex: 'creatorNickname',
|
dataIndex: 'createNickname',
|
||||||
key: 'creatorNickname',
|
key: 'createNickname',
|
||||||
width: 110,
|
width: 110,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '创建人手机号',
|
title: '创建人手机号',
|
||||||
dataIndex: 'creatorPhone',
|
dataIndex: 'createPhone',
|
||||||
key: 'creatorPhone',
|
key: 'createPhone',
|
||||||
width: 130,
|
width: 130,
|
||||||
},
|
},
|
||||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
key: 'createTime',
|
||||||
|
width: 170,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '状态',
|
title: '状态',
|
||||||
dataIndex: 'status',
|
dataIndex: 'status',
|
||||||
@@ -185,22 +173,72 @@ export function useEventListModel() {
|
|||||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{ title: '报名人数', dataIndex: 'enrolledCount', key: 'enrolledCount', width: 90 },
|
{
|
||||||
{ title: '取消报名人数', dataIndex: 'cancelledCount', key: 'cancelledCount', width: 140 },
|
title: '报名人数',
|
||||||
|
dataIndex: 'signupCount',
|
||||||
|
key: 'signupCount',
|
||||||
|
width: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '取消报名人数',
|
||||||
|
dataIndex: 'dropoutCount',
|
||||||
|
key: 'dropoutCount',
|
||||||
|
width: 140,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// ===== 构建 API 查询参数 =====
|
||||||
|
const buildQueryParams = (): EventListQueryParams => {
|
||||||
|
const params: EventListQueryParams = {
|
||||||
|
page: String(pagination.value.current),
|
||||||
|
limit: String(pagination.value.pageSize),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (filterForm.createDateRange) {
|
||||||
|
params.createDate = filterForm.createDateRange[0];
|
||||||
|
params.createDateEnd = filterForm.createDateRange[1];
|
||||||
|
}
|
||||||
|
if (filterForm.startDateRange) {
|
||||||
|
params.startDate = filterForm.startDateRange[0];
|
||||||
|
params.startDateEnd = filterForm.startDateRange[1];
|
||||||
|
}
|
||||||
|
if (filterForm.region.length > 0) {
|
||||||
|
params.areaName = filterForm.region[filterForm.region.length - 1];
|
||||||
|
}
|
||||||
|
if (debouncedName.value.trim()) {
|
||||||
|
params.name = debouncedName.value.trim();
|
||||||
|
}
|
||||||
|
if (debouncedCreator.value.trim()) {
|
||||||
|
params.createName = debouncedCreator.value.trim();
|
||||||
|
}
|
||||||
|
if (filterForm.status) {
|
||||||
|
params.status = filterForm.status;
|
||||||
|
}
|
||||||
|
if (filterForm.isPublic) {
|
||||||
|
params.isPublic = filterForm.isPublic;
|
||||||
|
}
|
||||||
|
if (filterForm.idCardNo) {
|
||||||
|
params.idCardNo = filterForm.idCardNo;
|
||||||
|
}
|
||||||
|
if (filterForm.idCardImg) {
|
||||||
|
params.idCardImg = filterForm.idCardImg;
|
||||||
|
}
|
||||||
|
|
||||||
|
return params;
|
||||||
|
};
|
||||||
|
|
||||||
// ===== 计算属性 =====
|
// ===== 计算属性 =====
|
||||||
const hasFilter = computed(() => {
|
const hasFilter = computed(() => {
|
||||||
return (
|
return (
|
||||||
filterForm.createTimeRange !== null ||
|
filterForm.createDateRange !== null ||
|
||||||
filterForm.eventTimeRange !== null ||
|
filterForm.startDateRange !== null ||
|
||||||
debouncedName.value.trim() !== '' ||
|
debouncedName.value.trim() !== '' ||
|
||||||
debouncedCreator.value.trim() !== '' ||
|
debouncedCreator.value.trim() !== '' ||
|
||||||
filterForm.status !== '' ||
|
filterForm.status !== '' ||
|
||||||
filterForm.region.length > 0 ||
|
filterForm.region.length > 0 ||
|
||||||
filterForm.publicEvent !== '' ||
|
filterForm.isPublic !== '' ||
|
||||||
filterForm.needIdCard !== '' ||
|
filterForm.idCardNo !== '' ||
|
||||||
filterForm.needIdCardImage !== ''
|
filterForm.idCardImg !== ''
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -210,21 +248,15 @@ export function useEventListModel() {
|
|||||||
const handleSearch = useThrottleFn(async () => {
|
const handleSearch = useThrottleFn(async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
console.log('搜索条件:', {
|
const queryParams = buildQueryParams();
|
||||||
createTimeRange: filterForm.createTimeRange,
|
const res = await getEventList(queryParams);
|
||||||
eventTimeRange: filterForm.eventTimeRange,
|
|
||||||
name: debouncedName.value,
|
if (res.code === 200) {
|
||||||
creator: debouncedCreator.value,
|
setDataSource(res.data.list);
|
||||||
status: filterForm.status,
|
setPagination({ ...pagination.value, total: res.data.total });
|
||||||
region: filterForm.region,
|
} else {
|
||||||
publicEvent: filterForm.publicEvent,
|
message.error(res.msg || '查询失败');
|
||||||
needIdCard: filterForm.needIdCard,
|
}
|
||||||
needIdCardImage: filterForm.needIdCardImage,
|
|
||||||
});
|
|
||||||
// TODO: 替换为真实 API 调用
|
|
||||||
setDataSource(SORTED_MOCK_DATA);
|
|
||||||
setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
|
|
||||||
message.success('查询成功');
|
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
message.error(error.msg || '查询失败');
|
message.error(error.msg || '查询失败');
|
||||||
} finally {
|
} finally {
|
||||||
@@ -234,17 +266,17 @@ export function useEventListModel() {
|
|||||||
|
|
||||||
/** 重置 */
|
/** 重置 */
|
||||||
const handleReset = useThrottleFn(() => {
|
const handleReset = useThrottleFn(() => {
|
||||||
filterForm.createTimeRange = null;
|
filterForm.createDateRange = null;
|
||||||
filterForm.eventTimeRange = null;
|
filterForm.startDateRange = null;
|
||||||
filterForm.searchName = '';
|
filterForm.name = '';
|
||||||
filterForm.searchCreator = '';
|
filterForm.createName = '';
|
||||||
filterForm.status = '';
|
filterForm.status = '';
|
||||||
filterForm.region = [];
|
filterForm.region = [];
|
||||||
filterForm.publicEvent = '';
|
filterForm.isPublic = '';
|
||||||
filterForm.needIdCard = '';
|
filterForm.idCardNo = '';
|
||||||
filterForm.needIdCardImage = '';
|
filterForm.idCardImg = '';
|
||||||
setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
|
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||||
setDataSource(SORTED_MOCK_DATA);
|
setDataSource([]);
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
||||||
const handlePageChange = (page: number, pageSize: number) => {
|
const handlePageChange = (page: number, pageSize: number) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user