diff --git a/src/pages/events/list/components/EventDetailModal.module.less b/src/pages/events/list/components/EventDetailModal.module.less index 7d4652f..c27b15f 100644 --- a/src/pages/events/list/components/EventDetailModal.module.less +++ b/src/pages/events/list/components/EventDetailModal.module.less @@ -65,4 +65,30 @@ font-size: 13px; color: rgba(0, 0, 0, 0.65); } + + .idImageGrid { + display: flex; + gap: 8px; + flex-wrap: wrap; + } + + .idImageCell { + width: 128px; + height: 82px; + border-radius: 4px; + overflow: hidden; + border: 1px solid #f0f0f0; + flex-shrink: 0; + + :global(.ant-image) { + width: 100%; + height: 100%; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + } } diff --git a/src/pages/events/list/components/EventDetailModal.tsx b/src/pages/events/list/components/EventDetailModal.tsx index 12c4f43..224f9cb 100644 --- a/src/pages/events/list/components/EventDetailModal.tsx +++ b/src/pages/events/list/components/EventDetailModal.tsx @@ -1,6 +1,5 @@ import { defineComponent, reactive, ref } from 'vue'; -import { Modal, Descriptions, Image, Table, Pagination, Space, Spin } from 'ant-design-vue'; -import { EyeOutlined } from '@ant-design/icons-vue'; +import { Modal, Descriptions, Image, Table, Pagination, Spin } from 'ant-design-vue'; import { message } from 'ant-design-vue'; import { getEventDetail, @@ -30,23 +29,19 @@ const formatGender = (v: string) => GENDER_MAP[v] ?? v; const PAGE_SIZE = 10; -/** 渲染身份证图片 */ +/** 渲染身份证图片(cover 填充,与封面显示方式一致) */ const renderIdImages = (imgList: string[], singleImg: string) => { const urls = imgList.length > 0 ? imgList : singleImg ? [singleImg] : []; if (urls.length === 0) return -; return ( - +
{urls.map((url) => ( - }} - /> +
+ +
))} - +
); }; @@ -62,11 +57,18 @@ const PLAYER_COLUMNS = [ customRender: ({ text }: { text: string }) => formatGender(text), }, { title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 }, - { title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 }, + { + title: '证件号', + dataIndex: 'idCard', + key: 'idCard', + width: 180, + customRender: ({ record }: { record?: TournamentAdminInfoSignupVO }) => + record?.idCard ? record.idCard : -, + }, { title: '证件图片', key: 'idCardImgs', - width: 180, + width: 280, customRender: ({ record }: { record?: TournamentAdminInfoSignupVO }) => record ? renderIdImages(record.idCardImgList || [], record.idCardImg || '') : -, }, @@ -221,59 +223,69 @@ export default defineComponent({ {/* ===== 封面 ===== */} -
-
封面
- -
+ {detail.value.img && ( +
+
封面
+ +
+ )} {/* ===== 赛事公告 ===== */} -
-
赛事公告
-
{detail.value.notice}
-
+ {detail.value.notice && ( +
+
赛事公告
+
{detail.value.notice}
+
+ )} {/* ===== 组别信息 ===== */} -
-
组别信息
- {detail.value.categoryList.map((cat: InnerCategoryVO) => ( -
-
- {cat.name}({CATEGORY_TYPE_MAP[cat.type] ?? cat.type}) -
- -
- 0 && ( +
+
组别信息
+ {detail.value.categoryList.map((cat: InnerCategoryVO) => ( +
+
+ {cat.name}({CATEGORY_TYPE_MAP[cat.type] ?? cat.type}) +
+
handlePlayerPageChange(cat.id, page)} + pagination={false} + bordered /> - - - ))} - - - {/* ===== 分组信息 ===== */} -
-
分组信息
-
- {detail.value.groupInfoList.map((d: string) => ( -
- {d} + {categoryPlayerTotal.value[cat.id] > 0 && ( +
+ handlePlayerPageChange(cat.id, page)} + /> +
+ )}
))}
-
+ )} + + {/* ===== 分组信息 ===== */} + {detail.value.groupInfoList && detail.value.groupInfoList.length > 0 && ( +
+
分组信息
+
+ {detail.value.groupInfoList.map((d: string) => ( +
+ {d} +
+ ))} +
+
+ )} ) : null} diff --git a/src/pages/events/list/components/EventRegulationModal.tsx b/src/pages/events/list/components/EventRegulationModal.tsx index 6ff5289..ff09772 100644 --- a/src/pages/events/list/components/EventRegulationModal.tsx +++ b/src/pages/events/list/components/EventRegulationModal.tsx @@ -60,7 +60,7 @@ export default defineComponent({ destroyOnClose wrapClassName={styles.eventRegulationModalMain} > - +
{ruleData.value ? ( <> diff --git a/src/pages/events/list/index.tsx b/src/pages/events/list/index.tsx index 22d49b0..f0967c8 100644 --- a/src/pages/events/list/index.tsx +++ b/src/pages/events/list/index.tsx @@ -19,7 +19,7 @@ import { ID_CARD_IMAGE_OPTIONS, } from './model/useEventListModel'; import { useEventListColumns } from './model/useEventListColumns'; -import { regionOptions } from '@/utils/areaData'; +import { getProvinceCityCascaderOptions } from '@/utils/areaData'; import { useContainerSize } from '@/hooks'; import EventRegulationModal from './components/EventRegulationModal'; import EventDetailModal from './components/EventDetailModal'; @@ -64,6 +64,9 @@ export default defineComponent({ const { columns } = useEventListColumns(); const { containerRef, height } = useContainerSize(); + /** 省市两级 Cascader 数据(无区) */ + const provinceCityOptions = getProvinceCityCascaderOptions(); + /** 渲染赛事名称(超长省略 + Tooltip) */ const renderName = (text: string) => { const maxLen = 15; @@ -239,14 +242,13 @@ export default defineComponent({ onUpdate:value={(val: any) => (filterForm.idCardImg = val || '')} /> - + (filterForm.region = val || [])} /> diff --git a/src/pages/events/list/model/useEventListColumns.ts b/src/pages/events/list/model/useEventListColumns.ts index 4c9e6fe..e0e2276 100644 --- a/src/pages/events/list/model/useEventListColumns.ts +++ b/src/pages/events/list/model/useEventListColumns.ts @@ -38,7 +38,7 @@ export function useEventListColumns() { `${record.startTimeBegin} 至 ${record.startTimeEnd}`, }, { - title: '省市区', + title: '省市区域', dataIndex: 'venueArea', key: 'venueArea', width: 200,