fix: 处理赛事订单管理详情弹窗样式问题

2026-08-06 17:05:13 +08:00
parent 98b073e8f5
commit a7e31613c5
5 changed files with 72 additions and 86 deletions
@@ -140,9 +140,9 @@ export interface TournamentAdminOrderInfoVO {
 /** 订单详情查询参数 */
 export interface OrderDetailQueryParams {
  /** 订单编号 */
-  orderNo: string;
+  orderNo?: string;
  /** 选手ID */
-  uniqueId: string;
+  uniqueId?: string;
 }

 // ============================================================
@@ -178,9 +178,9 @@ export interface TournamentAdminOrderInfoPageVO {
 /** 选手列表查询参数 */
 export interface OrderPlayerListQueryParams {
  /** 订单编号 */
-  orderNo: string;
+  orderNo?: string;
  /** 选手ID */
-  uniqueId: string;
+  uniqueId?: string;
  page: string;
  limit: string;
 }
@@ -59,11 +59,6 @@
    font-weight: 500;
  }

-  .tableWrap {
-    max-height: 200px;
-    overflow-y: auto;
-  }
-
  .paginationRow {
    display: flex;
    justify-content: flex-end;
@@ -80,30 +75,4 @@
    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,5 +1,5 @@
-import { defineComponent, reactive, ref } from 'vue';
-import { Modal, Descriptions, Image, Table, Pagination, Spin } from 'ant-design-vue';
+import { defineComponent, computed, reactive, ref } from 'vue';
+import { Modal, Descriptions, Image, Table, Pagination, Spin, Space } from 'ant-design-vue';
 import { message } from 'ant-design-vue';
 import {
  getEventDetail,
@@ -9,6 +9,7 @@ import {
  type TournamentAdminInfoSignupVO,
 } from '../model/services';
 import { useState, useEffect } from '@/hooks';
+import defaultCover from '@/assets/img/default.png';
 import styles from './EventDetailModal.module.less';

 interface EventDetailModalProps {
@@ -27,27 +28,29 @@ const formatYN = (v: string) => YES_NO_MAP[v] ?? v;
 const formatPublic = (v: string) => PUBLIC_MAP[v] ?? v;
 const formatGender = (v: string) => GENDER_MAP[v] ?? v;

-const PAGE_SIZE = 10;
+const PAGE_SIZE = 5;

-/** 渲染身份证图片（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>
-      <div class={styles.idImageGrid}>
-        {urls.map((url) => (
-          <div class={styles.idImageCell}>
-            <Image src={url} />
-          </div>
-        ))}
-      </div>
-    </Image.PreviewGroup>
+    <Space size={4}>
+      {urls.map((url) => (
+        <Image
+          key={url}
+          src={url}
+          width={40}
+          height={40}
+          style={{ objectFit: 'cover', borderRadius: '4px', cursor: 'pointer' }}
+        />
+      ))}
+    </Space>
  );
 };

-/** 选手表格列 */
-const PLAYER_COLUMNS = [
+/** 选手表格基础列（不含证件号/证件图片，由 setup 内 computed 按需拼接） */
+const BASE_PLAYER_COLUMNS: any[] = [
  { title: '选手', dataIndex: 'realName', key: 'realName', width: 100 },
  {
    title: '性别',
@@ -57,23 +60,25 @@ const PLAYER_COLUMNS = [
    customRender: ({ text }: { text: string }) => formatGender(text),
  },
  { title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
-  {
-    title: '证件号',
-    dataIndex: 'idCard',
-    key: 'idCard',
-    width: 180,
-    customRender: ({ record }: { record?: TournamentAdminInfoSignupVO }) =>
-      record?.idCard ? record.idCard : <span>--</span>,
-  },
-  {
-    title: '证件图片',
-    key: 'idCardImgs',
-    width: 280,
-    customRender: ({ record }: { record?: TournamentAdminInfoSignupVO }) =>
-      record ? renderIdImages(record.idCardImgList || [], record.idCardImg || '') : <span>--</span>,
-  },
 ];

+const ID_CARD_COLUMN: any = {
+  title: '证件号',
+  dataIndex: 'idCard',
+  key: 'idCard',
+  width: 180,
+  customRender: ({ record }: { record?: TournamentAdminInfoSignupVO }) =>
+    record?.idCard ? record.idCard : <span>--</span>,
+};
+
+const ID_CARD_IMG_COLUMN: any = {
+  title: '证件图片',
+  key: 'idCardImgs',
+  width: 120,
+  customRender: ({ record }: { record?: TournamentAdminInfoSignupVO }) =>
+    record ? renderIdImages(record.idCardImgList || [], record.idCardImg || '') : <span>--</span>,
+};
+
 export default defineComponent({
  name: 'EventDetailModal',
  props: {
@@ -86,6 +91,14 @@ export default defineComponent({
    const [detail, setDetail] = useState<TournamentAdminInfoVO | null>(null);
    const [detailLoading, setDetailLoading] = useState(false);

+    /** 动态列：根据赛事是否要求证件号/证件图片决定显示 */
+    const playerColumns = computed(() => {
+      const cols = [...BASE_PLAYER_COLUMNS];
+      if (detail.value?.isRequireIdCardNo === '1') cols.push(ID_CARD_COLUMN);
+      if (detail.value?.isRequireIdCardImg === '1') cols.push(ID_CARD_IMG_COLUMN);
+      return cols;
+    });
+
    // ===== 每个组别的选手数据（key = categoryId） =====
    const categoryPlayers = ref<Record<string, TournamentAdminInfoSignupVO[]>>({});
    const categoryPlayerTotal = ref<Record<string, number>>({});
@@ -230,12 +243,14 @@ export default defineComponent({
            </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>
+              <Image
+                style={{ maxHeight: '380px' }}
+                src={detail.value.img || defaultCover}
+                fallback={defaultCover}
+              />
+            </div>

            {/* ===== 赛事公告 ===== */}
            {detail.value.notice && (
@@ -249,21 +264,20 @@ export default defineComponent({
            {detail.value.categoryList && detail.value.categoryList.length > 0 && (
              <div class={styles.section}>
                <div class={styles.sectionTitle}>组别信息</div>
-                {detail.value.categoryList.map((cat: InnerCategoryVO) => (
+                {detail.value.categoryList.map((cat: InnerCategoryVO, idx: number) => (
                  <div key={cat.id} class={styles.group}>
                    <div class={styles.groupTitle}>
-                      {cat.name}（{CATEGORY_TYPE_MAP[cat.type] ?? cat.type}）
-                    </div>
-                    <div class={styles.tableWrap}>
-                      <Table
-                        columns={PLAYER_COLUMNS}
-                        dataSource={categoryPlayers.value[cat.id] || []}
-                        loading={categoryPlayerLoading.value[cat.id]}
-                        size="small"
-                        pagination={false}
-                        bordered
-                      />
+                      组别{idx + 1}：{cat.name}（{CATEGORY_TYPE_MAP[cat.type] ?? cat.type}）
                    </div>
+                    <Table
+                      columns={playerColumns.value}
+                      dataSource={categoryPlayers.value[cat.id] || []}
+                      loading={categoryPlayerLoading.value[cat.id]}
+                      size="small"
+                      pagination={false}
+                      bordered
+                      scroll={{ x: 'max-content', y: 200 }}
+                    />
                    {categoryPlayerTotal.value[cat.id] > 0 && (
                      <div class={styles.paginationRow}>
                        <Pagination
@@ -8,6 +8,7 @@ import {
  type TournamentAdminOrderInfoVO,
  type InnerRefundInfo,
  type TournamentAdminOrderInfoPageVO,
+  OrderDetailQueryParams,
 } from '../model/services';
 import styles from './OrderDetailModal.module.less';

@@ -143,8 +144,7 @@ export default defineComponent({
      setPlayersLoading(true);
      try {
        const res = await getOrderPlayerList({
-          orderNo: props.orderNo,
-          uniqueId: props.uniqueId,
+          ...(props.orderNo ? { orderNo: props.orderNo } : { uniqueId: props.uniqueId }),
          page: String(page),
          limit: String(playerPageSize),
        });
@@ -179,7 +179,10 @@ export default defineComponent({
    const refundSuccessCount = computed(() => refundSuccessList.value.length);

    const fetchData = async () => {
-      const params = { orderNo: props.orderNo, uniqueId: props.uniqueId };
+      const params: OrderDetailQueryParams = {};
+      if (props.orderNo) params['orderNo'] = props.orderNo;
+      else params['uniqueId'] = props.uniqueId;
+
      const [detailRes] = await Promise.all([getOrderDetail(params), fetchPlayers(1)]);
      if (detailRes.code == 200) {
        setDetail(detailRes.data);