Feature/0723/zr #8
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 <span>-</span>;
|
||||
return (
|
||||
<Image.PreviewGroup>
|
||||
<Space>
|
||||
<div class={styles.idImageGrid}>
|
||||
{urls.map((url) => (
|
||||
<Image
|
||||
key={url}
|
||||
width={48}
|
||||
height={32}
|
||||
src={url}
|
||||
v-slots={{ previewMask: () => <EyeOutlined /> }}
|
||||
/>
|
||||
<div class={styles.idImageCell}>
|
||||
<Image src={url} />
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
</div>
|
||||
</Image.PreviewGroup>
|
||||
);
|
||||
};
|
||||
@@ -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 : <span>-</span>,
|
||||
|
|
||||
},
|
||||
{
|
||||
title: '证件图片',
|
||||
key: 'idCardImgs',
|
||||
width: 180,
|
||||
width: 280,
|
||||
customRender: ({ record }: { record?: TournamentAdminInfoSignupVO }) =>
|
||||
record ? renderIdImages(record.idCardImgList || [], record.idCardImg || '') : <span>-</span>,
|
||||
},
|
||||
@@ -221,59 +223,69 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
{/* ===== 封面 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>封面</div>
|
||||
<Image src={detail.value.img} />
|
||||
</div>
|
||||
{detail.value.img && (
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>封面</div>
|
||||
<Image style={{ maxHeight: '380px' }} src={detail.value.img} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ===== 赛事公告 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>赛事公告</div>
|
||||
<div class={styles.textBlock}>{detail.value.notice}</div>
|
||||
</div>
|
||||
{detail.value.notice && (
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>赛事公告</div>
|
||||
<div class={styles.textBlock}>{detail.value.notice}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ===== 组别信息 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>组别信息</div>
|
||||
{detail.value.categoryList.map((cat: InnerCategoryVO) => (
|
||||
<div key={cat.id} class={styles.group}>
|
||||
<div class={styles.groupTitle}>
|
||||
{cat.name}（{CATEGORY_TYPE_MAP[cat.type] ?? cat.type}）
|
||||
</div>
|
||||
<Table
|
||||
columns={PLAYER_COLUMNS}
|
||||
dataSource={categoryPlayers.value[cat.id] || []}
|
||||
loading={categoryPlayerLoading.value[cat.id]}
|
||||
scroll={{ x: 'max-content', y: 200 }}
|
||||
size="small"
|
||||
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}
|
||||
{detail.value.categoryList && detail.value.categoryList.length > 0 && (
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>组别信息</div>
|
||||
{detail.value.categoryList.map((cat: InnerCategoryVO) => (
|
||||
<div key={cat.id} class={styles.group}>
|
||||
<div class={styles.groupTitle}>
|
||||
{cat.name}（{CATEGORY_TYPE_MAP[cat.type] ?? cat.type}）
|
||||
</div>
|
||||
<Table
|
||||
columns={PLAYER_COLUMNS}
|
||||
dataSource={categoryPlayers.value[cat.id] || []}
|
||||
loading={categoryPlayerLoading.value[cat.id]}
|
||||
scroll={{ x: 'max-content', y: 200 }}
|
||||
size="small"
|
||||
onChange={(page: number) => handlePlayerPageChange(cat.id, page)}
|
||||
pagination={false}
|
||||
bordered
|
||||
/>
|
||||
</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}
|
||||
{categoryPlayerTotal.value[cat.id] > 0 && (
|
||||
<div class={styles.paginationRow}>
|
||||
<Pagination
|
||||
current={categoryPlayerPage.value[cat.id] || 1}
|
||||
pageSize={PAGE_SIZE}
|
||||
total={categoryPlayerTotal.value[cat.id] || 0}
|
||||
showSizeChanger={false}
|
||||
size="small"
|
||||
onChange={(page: number) => handlePlayerPageChange(cat.id, page)}
|
||||
/>
|
||||
</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}
|
||||
</Modal>
|
||||
|
||||
@@ -60,7 +60,7 @@ export default defineComponent({
|
||||
destroyOnClose
|
||||
wrapClassName={styles.eventRegulationModalMain}
|
||||
>
|
||||
<Spin spinning={loading.value}>
|
||||
<Spin spinning={loading.value} size="large">
|
||||
<div style={{ minHeight: loading.value ? '200px' : undefined }}>
|
||||
{ruleData.value ? (
|
||||
<>
|
||||
|
||||
@@ -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 || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="省市区" name="region">
|
||||
<Form.Item label="省市区域" name="region">
|
||||
<Cascader
|
||||
value={filterForm.region as any}
|
||||
options={regionOptions}
|
||||
options={provinceCityOptions}
|
||||
style={{ width: '220px' }}
|
||||
placeholder="请选择省市区"
|
||||
placeholder="请选择城市"
|
||||
allowClear
|
||||
changeOnSelect
|
||||
onUpdate:value={(val: any) => (filterForm.region = val || [])}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -38,7 +38,7 @@ export function useEventListColumns() {
|
||||
`${record.startTimeBegin} 至 ${record.startTimeEnd}`,
|
||||
},
|
||||
{
|
||||
title: '省市区',
|
||||
title: '省市区域',
|
||||
dataIndex: 'venueArea',
|
||||
key: 'venueArea',
|
||||
width: 200,
|
||||
|
||||
Reference in New Issue
Block a user
--