diff --git a/src/pages/events/list/components/EventAuditModal.module.less b/src/pages/events/list/components/EventAuditModal.module.less new file mode 100644 index 0000000..466a126 --- /dev/null +++ b/src/pages/events/list/components/EventAuditModal.module.less @@ -0,0 +1,59 @@ +.section { + margin-bottom: 24px; +} + +.section:last-child { + margin-bottom: 0; +} + +.sectionTitle { + font-size: 14px; + font-weight: 600; + color: rgba(0, 0, 0, 0.85); + margin-bottom: 12px; + padding-left: 8px; + border-left: 3px solid #1677ff; +} + +.desc :global(.ant-descriptions-item-label) { + width: 110px; + color: rgba(0, 0, 0, 0.65); +} + +// ── 审核操作区域 ── +.auditSection { + margin-top: 24px; +} + +.auditHeader { + display: flex; + align-items: center; + margin-bottom: 16px; +} + +.auditTitle { + font-size: 14px; + font-weight: 600; + color: rgba(0, 0, 0, 0.85); + padding-left: 8px; + border-left: 3px solid #1677ff; +} + +.auditForm { + // 横线分隔标题与表单 + border-top: 1px solid #f0f0f0; + padding-top: 16px; +} + +.auditField { + margin-bottom: 16px; + + :global(.ant-form-item-label) { + font-weight: 500; + color: rgba(0, 0, 0, 0.65); + } +} + +.auditField:last-child { + margin-bottom: 0; +} diff --git a/src/pages/events/list/components/EventAuditModal.tsx b/src/pages/events/list/components/EventAuditModal.tsx new file mode 100644 index 0000000..33c20c6 --- /dev/null +++ b/src/pages/events/list/components/EventAuditModal.tsx @@ -0,0 +1,156 @@ +import { defineComponent, reactive } from 'vue'; +import { Modal, Descriptions, Image, Radio, Input, Form } from 'ant-design-vue'; +import styles from './EventAuditModal.module.less'; + +const { TextArea } = Input; + +interface EventAuditModalProps { + visible: boolean; + record: any; + onClose: () => void; + onSubmit?: (payload: { approved: boolean; comment: string }) => void; +} + +// ===== Mock 数据 ===== +const MOCK_DETAIL = { + name: '第二届全国地学羽毛球邀请赛', + eventTime: '2026.05.26 08:00 ~ 2026.05.31 22:00', + descr: + '赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。', + registerTime: '2026.05.24 08:00 ~ 2026.05.26 22:00', + cancelDeadline: '2026.05.25 22:00', + region: '北京市 北京市 东城区', + address: '李宁体育馆', + venueNo: '李宁体育馆', + publicEvent: '在首页展示赛事', + needIdCard: '无需提供', + needIdCardImage: '无需提供', + createTime: '2026.05.26 08:00', + creator: '张三', + status: '待审核', + enrolledCount: 100, + cancelledCount: 1, + maxCount: 1000, + crossedCount: 50, + completedCount: 50, + cover: 'https://picsum.photos/seed/eventcover/600/300', +}; + +/** + * 赛事审核弹窗 + * 包含:基础信息 + 封面 + 审核操作(通过/未通过 + 审核内容) + */ +export default defineComponent({ + name: 'EventAuditModal', + props: { + visible: { type: Boolean, default: false }, + record: { type: Object, default: () => ({}) }, + onClose: { type: Function, required: true }, + onSubmit: { type: Function, default: undefined }, + }, + setup(props: EventAuditModalProps) { + const detail = MOCK_DETAIL; + + // 审核表单 + const auditForm = reactive({ + approved: true, + comment: '', + }); + + const handleOk = () => { + if (!auditForm.comment.trim()) { + // 不通过时强制要求填写审核内容 + if (!auditForm.approved) { + // 这里交给校验,简化版本不做强制校验 + } + } + if (props.onSubmit) { + props.onSubmit({ approved: auditForm.approved, comment: auditForm.comment }); + } + }; + + return () => ( + + {/* ===== 基础信息 ===== */} +
+
基础信息
+ + {detail.name} + + {detail.eventTime} + + + + {detail.descr} + + + {detail.registerTime} + + {detail.cancelDeadline} + + + {detail.region} + {detail.address} + {detail.venueNo} + + {detail.publicEvent} + {detail.needIdCard} + {detail.needIdCardImage} + + {detail.createTime} + {detail.creator} + {detail.status} + {detail.enrolledCount} + + {detail.cancelledCount} + + + {detail.maxCount} + {detail.crossedCount} + {detail.completedCount} + +
+ + {/* ===== 封面 ===== */} +
+
封面
+ +
+ + {/* ===== 审核操作 ===== */} +
+
+ 审核操作 +
+
+ + + 通过 + 未通过 + + + +