fix: 对接赛事列表

This commit is contained in:
ZhuRui
2026-08-04 11:21:30 +08:00
parent 0b06cdca69
commit 3f621a75ad
5 changed files with 105 additions and 65 deletions
@@ -65,4 +65,30 @@
font-size: 13px; font-size: 13px;
color: rgba(0, 0, 0, 0.65); 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;
}
}
}
} }
@@ -1,6 +1,5 @@
import { defineComponent, reactive, ref } from 'vue'; import { defineComponent, reactive, ref } from 'vue';
import { Modal, Descriptions, Image, Table, Pagination, Space, Spin } from 'ant-design-vue'; import { Modal, Descriptions, Image, Table, Pagination, Spin } from 'ant-design-vue';
import { EyeOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { import {
getEventDetail, getEventDetail,
@@ -30,23 +29,19 @@ const formatGender = (v: string) => GENDER_MAP[v] ?? v;
const PAGE_SIZE = 10; const PAGE_SIZE = 10;
/** 渲染身份证图片 */ /** 渲染身份证图片(cover 填充,与封面显示方式一致) */
const renderIdImages = (imgList: string[], singleImg: string) => { const renderIdImages = (imgList: string[], singleImg: string) => {
const urls = imgList.length > 0 ? imgList : singleImg ? [singleImg] : []; const urls = imgList.length > 0 ? imgList : singleImg ? [singleImg] : [];
if (urls.length === 0) return <span>-</span>; if (urls.length === 0) return <span>-</span>;
return ( return (
<Image.PreviewGroup> <Image.PreviewGroup>
<Space> <div class={styles.idImageGrid}>
{urls.map((url) => ( {urls.map((url) => (
<Image <div class={styles.idImageCell}>
key={url} <Image src={url} />
width={48} </div>
height={32}
src={url}
v-slots={{ previewMask: () => <EyeOutlined /> }}
/>
))} ))}
</Space> </div>
</Image.PreviewGroup> </Image.PreviewGroup>
); );
}; };
@@ -62,11 +57,18 @@ const PLAYER_COLUMNS = [
customRender: ({ text }: { text: string }) => formatGender(text), customRender: ({ text }: { text: string }) => formatGender(text),
}, },
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 }, { 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 : <span>-</span>,
},
{ {
title: '证件图片', title: '证件图片',
key: 'idCardImgs', key: 'idCardImgs',
width: 180, width: 280,
customRender: ({ record }: { record?: TournamentAdminInfoSignupVO }) => customRender: ({ record }: { record?: TournamentAdminInfoSignupVO }) =>
record ? renderIdImages(record.idCardImgList || [], record.idCardImg || '') : <span>-</span>, record ? renderIdImages(record.idCardImgList || [], record.idCardImg || '') : <span>-</span>,
}, },
@@ -221,59 +223,69 @@ export default defineComponent({
</div> </div>
{/* ===== 封面 ===== */} {/* ===== 封面 ===== */}
<div class={styles.section}> {detail.value.img && (
<div class={styles.sectionTitle}></div> <div class={styles.section}>
<Image src={detail.value.img} /> <div class={styles.sectionTitle}></div>
</div> <Image style={{ maxHeight: '380px' }} src={detail.value.img} />
</div>
)}
{/* ===== 赛事公告 ===== */} {/* ===== 赛事公告 ===== */}
<div class={styles.section}> {detail.value.notice && (
<div class={styles.sectionTitle}></div> <div class={styles.section}>
<div class={styles.textBlock}>{detail.value.notice}</div> <div class={styles.sectionTitle}></div>
</div> <div class={styles.textBlock}>{detail.value.notice}</div>
</div>
)}
{/* ===== 组别信息 ===== */} {/* ===== 组别信息 ===== */}
<div class={styles.section}> {detail.value.categoryList && detail.value.categoryList.length > 0 && (
<div class={styles.sectionTitle}></div> <div class={styles.section}>
{detail.value.categoryList.map((cat: InnerCategoryVO) => ( <div class={styles.sectionTitle}></div>
<div key={cat.id} class={styles.group}> {detail.value.categoryList.map((cat: InnerCategoryVO) => (
<div class={styles.groupTitle}> <div key={cat.id} class={styles.group}>
{cat.name}{CATEGORY_TYPE_MAP[cat.type] ?? cat.type} <div class={styles.groupTitle}>
</div> {cat.name}{CATEGORY_TYPE_MAP[cat.type] ?? cat.type}
<Table </div>
columns={PLAYER_COLUMNS} <Table
dataSource={categoryPlayers.value[cat.id] || []} columns={PLAYER_COLUMNS}
loading={categoryPlayerLoading.value[cat.id]} dataSource={categoryPlayers.value[cat.id] || []}
scroll={{ x: 'max-content', y: 200 }} loading={categoryPlayerLoading.value[cat.id]}
size="small" scroll={{ x: 'max-content', y: 200 }}
pagination={false}
bordered
/>
<div class={styles.paginationRow}>
<Pagination
current={categoryPlayerPage.value[cat.id] || 1}
pageSize={PAGE_SIZE}
total={categoryPlayerTotal.value[cat.id] || 0}
showSizeChanger={false}
size="small" size="small"
onChange={(page: number) => handlePlayerPageChange(cat.id, page)} pagination={false}
bordered
/> />
</div> {categoryPlayerTotal.value[cat.id] > 0 && (
</div> <div class={styles.paginationRow}>
))} <Pagination
</div> current={categoryPlayerPage.value[cat.id] || 1}
pageSize={PAGE_SIZE}
{/* ===== 分组信息 ===== */} total={categoryPlayerTotal.value[cat.id] || 0}
<div class={styles.section}> showSizeChanger={false}
<div class={styles.sectionTitle}></div> size="small"
<div class={styles.divisionList}> onChange={(page: number) => handlePlayerPageChange(cat.id, page)}
{detail.value.groupInfoList.map((d: string) => ( />
<div key={d} class={styles.divisionItem}> </div>
{d} )}
</div> </div>
))} ))}
</div> </div>
</div> )}
{/* ===== 分组信息 ===== */}
{detail.value.groupInfoList && detail.value.groupInfoList.length > 0 && (
<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>
)}
</> </>
) : null} ) : null}
</Modal> </Modal>
@@ -60,7 +60,7 @@ export default defineComponent({
destroyOnClose destroyOnClose
wrapClassName={styles.eventRegulationModalMain} wrapClassName={styles.eventRegulationModalMain}
> >
<Spin spinning={loading.value}> <Spin spinning={loading.value} size="large">
<div style={{ minHeight: loading.value ? '200px' : undefined }}> <div style={{ minHeight: loading.value ? '200px' : undefined }}>
{ruleData.value ? ( {ruleData.value ? (
<> <>
+7 -5
View File
@@ -19,7 +19,7 @@ import {
ID_CARD_IMAGE_OPTIONS, ID_CARD_IMAGE_OPTIONS,
} from './model/useEventListModel'; } from './model/useEventListModel';
import { useEventListColumns } from './model/useEventListColumns'; import { useEventListColumns } from './model/useEventListColumns';
import { regionOptions } from '@/utils/areaData'; import { getProvinceCityCascaderOptions } from '@/utils/areaData';
import { useContainerSize } from '@/hooks'; import { useContainerSize } from '@/hooks';
import EventRegulationModal from './components/EventRegulationModal'; import EventRegulationModal from './components/EventRegulationModal';
import EventDetailModal from './components/EventDetailModal'; import EventDetailModal from './components/EventDetailModal';
@@ -64,6 +64,9 @@ export default defineComponent({
const { columns } = useEventListColumns(); const { columns } = useEventListColumns();
const { containerRef, height } = useContainerSize(); const { containerRef, height } = useContainerSize();
/** 省市两级 Cascader 数据(无区) */
const provinceCityOptions = getProvinceCityCascaderOptions();
/** 渲染赛事名称(超长省略 + Tooltip) */ /** 渲染赛事名称(超长省略 + Tooltip) */
const renderName = (text: string) => { const renderName = (text: string) => {
const maxLen = 15; const maxLen = 15;
@@ -239,14 +242,13 @@ export default defineComponent({
onUpdate:value={(val: any) => (filterForm.idCardImg = val || '')} onUpdate:value={(val: any) => (filterForm.idCardImg = val || '')}
/> />
</Form.Item> </Form.Item>
<Form.Item label="省市区" name="region"> <Form.Item label="省市区" name="region">
<Cascader <Cascader
value={filterForm.region as any} value={filterForm.region as any}
options={regionOptions} options={provinceCityOptions}
style={{ width: '220px' }} style={{ width: '220px' }}
placeholder="请选择省市区" placeholder="请选择城市"
allowClear allowClear
changeOnSelect
onUpdate:value={(val: any) => (filterForm.region = val || [])} onUpdate:value={(val: any) => (filterForm.region = val || [])}
/> />
</Form.Item> </Form.Item>
@@ -38,7 +38,7 @@ export function useEventListColumns() {
`${record.startTimeBegin}${record.startTimeEnd}`, `${record.startTimeBegin}${record.startTimeEnd}`,
}, },
{ {
title: '省市区', title: '省市区',
dataIndex: 'venueArea', dataIndex: 'venueArea',
key: 'venueArea', key: 'venueArea',
width: 200, width: 200,