fix: 对接赛事列表
This commit is contained in:
@@ -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,18 +223,23 @@ export default defineComponent({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ===== 封面 ===== */}
|
{/* ===== 封面 ===== */}
|
||||||
|
{detail.value.img && (
|
||||||
<div class={styles.section}>
|
<div class={styles.section}>
|
||||||
<div class={styles.sectionTitle}>封面</div>
|
<div class={styles.sectionTitle}>封面</div>
|
||||||
<Image src={detail.value.img} />
|
<Image style={{ maxHeight: '380px' }} src={detail.value.img} />
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* ===== 赛事公告 ===== */}
|
{/* ===== 赛事公告 ===== */}
|
||||||
|
{detail.value.notice && (
|
||||||
<div class={styles.section}>
|
<div class={styles.section}>
|
||||||
<div class={styles.sectionTitle}>赛事公告</div>
|
<div class={styles.sectionTitle}>赛事公告</div>
|
||||||
<div class={styles.textBlock}>{detail.value.notice}</div>
|
<div class={styles.textBlock}>{detail.value.notice}</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* ===== 组别信息 ===== */}
|
{/* ===== 组别信息 ===== */}
|
||||||
|
{detail.value.categoryList && detail.value.categoryList.length > 0 && (
|
||||||
<div class={styles.section}>
|
<div class={styles.section}>
|
||||||
<div class={styles.sectionTitle}>组别信息</div>
|
<div class={styles.sectionTitle}>组别信息</div>
|
||||||
{detail.value.categoryList.map((cat: InnerCategoryVO) => (
|
{detail.value.categoryList.map((cat: InnerCategoryVO) => (
|
||||||
@@ -249,6 +256,7 @@ export default defineComponent({
|
|||||||
pagination={false}
|
pagination={false}
|
||||||
bordered
|
bordered
|
||||||
/>
|
/>
|
||||||
|
{categoryPlayerTotal.value[cat.id] > 0 && (
|
||||||
<div class={styles.paginationRow}>
|
<div class={styles.paginationRow}>
|
||||||
<Pagination
|
<Pagination
|
||||||
current={categoryPlayerPage.value[cat.id] || 1}
|
current={categoryPlayerPage.value[cat.id] || 1}
|
||||||
@@ -259,11 +267,14 @@ export default defineComponent({
|
|||||||
onChange={(page: number) => handlePlayerPageChange(cat.id, page)}
|
onChange={(page: number) => handlePlayerPageChange(cat.id, page)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* ===== 分组信息 ===== */}
|
{/* ===== 分组信息 ===== */}
|
||||||
|
{detail.value.groupInfoList && detail.value.groupInfoList.length > 0 && (
|
||||||
<div class={styles.section}>
|
<div class={styles.section}>
|
||||||
<div class={styles.sectionTitle}>分组信息</div>
|
<div class={styles.sectionTitle}>分组信息</div>
|
||||||
<div class={styles.divisionList}>
|
<div class={styles.divisionList}>
|
||||||
@@ -274,6 +285,7 @@ export default defineComponent({
|
|||||||
))}
|
))}
|
||||||
</div>
|
</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 ? (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user