发布页开发
This commit is contained in:
筱野
@@ -1,173 +0,0 @@
|
||||
// 表单字段类型定义
|
||||
export type FieldType =
|
||||
| 'image-upload'
|
||||
| 'text-input'
|
||||
| 'number-input'
|
||||
| 'time-display'
|
||||
| 'multi-select'
|
||||
| 'counter'
|
||||
| 'slider'
|
||||
| 'radio-group'
|
||||
| 'checkbox'
|
||||
| 'venue-input'
|
||||
|
||||
// 表单字段配置接口
|
||||
export interface FormFieldConfig {
|
||||
key: string // 字段名
|
||||
type: FieldType // 字段类型
|
||||
title: string // 显示标题
|
||||
required?: boolean // 是否必填
|
||||
placeholder?: string // 占位符
|
||||
hint?: string // 提示文字
|
||||
defaultValue?: any // 默认值
|
||||
validation?: { // 验证规则
|
||||
min?: number
|
||||
max?: number
|
||||
pattern?: string
|
||||
message?: string
|
||||
}
|
||||
options?: Array<{ // 选项（用于选择类型）
|
||||
label: string
|
||||
value: any
|
||||
}>
|
||||
config?: { // 特殊配置
|
||||
maxImages?: number // 图片上传最大数量
|
||||
minValue?: number // 计数器最小值
|
||||
maxValue?: number // 计数器最大值
|
||||
range?: [number, number] // 滑动条范围
|
||||
unit?: string // 单位
|
||||
showArrow?: boolean // 是否显示箭头
|
||||
}
|
||||
}
|
||||
|
||||
// 完整的表单配置
|
||||
export interface FormConfig {
|
||||
title: string // 表单标题
|
||||
reminder?: string // 提醒文本
|
||||
fields: FormFieldConfig[] // 字段列表
|
||||
actions?: { // 底部操作
|
||||
addText?: string
|
||||
submitText?: string
|
||||
disclaimer?: string
|
||||
}
|
||||
}
|
||||
|
||||
// 发布球的表单配置
|
||||
export const publishBallFormConfig: FormConfig = {
|
||||
title: '发布个人约球',
|
||||
reminder: '提醒: 活动开始前x小时未达到最低招募人数，活动自动取消；活动结束2天后，报名费自动转入[钱包—余额]，可提现到微信。',
|
||||
fields: [
|
||||
{
|
||||
key: 'cover',
|
||||
type: 'image-upload',
|
||||
title: '活动封面',
|
||||
required: false,
|
||||
defaultValue: [],
|
||||
config: {
|
||||
maxImages: 9
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'theme',
|
||||
type: 'text-input',
|
||||
title: '活动主题 (选填)',
|
||||
required: false,
|
||||
placeholder: '好的主题更吸引人哦',
|
||||
defaultValue: ''
|
||||
},
|
||||
{
|
||||
key: 'time',
|
||||
type: 'time-display',
|
||||
title: '活动时间',
|
||||
required: true,
|
||||
defaultValue: {
|
||||
startTime: '2025-11-23 08:00',
|
||||
endTime: '2025-11-23 10:00'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'venue',
|
||||
type: 'venue-input',
|
||||
title: '活动场地',
|
||||
required: true,
|
||||
placeholder: '选择活动地点',
|
||||
defaultValue: '',
|
||||
config: {
|
||||
showArrow: true
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'price',
|
||||
type: 'number-input',
|
||||
title: '人均价格/元',
|
||||
required: true,
|
||||
placeholder: '请填写每个人多少钱',
|
||||
defaultValue: '',
|
||||
validation: {
|
||||
min: 0,
|
||||
message: '价格不能为负数'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'playStyle',
|
||||
type: 'multi-select',
|
||||
title: '活动玩法',
|
||||
required: true,
|
||||
defaultValue: [],
|
||||
options: [
|
||||
{ label: '单打', value: '单打' },
|
||||
{ label: '双打', value: '双打' },
|
||||
{ label: '娱乐拉球', value: '娱乐拉球' },
|
||||
{ label: '到了再说', value: '到了再说' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'playerCount',
|
||||
type: 'counter',
|
||||
title: '招募人数',
|
||||
required: true,
|
||||
defaultValue: { min: 1, max: 4 },
|
||||
config: {
|
||||
minValue: 1,
|
||||
maxValue: 50
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'ntrpRange',
|
||||
type: 'slider',
|
||||
title: 'NTRP水平区间',
|
||||
required: true,
|
||||
defaultValue: [2.0, 4.0],
|
||||
config: {
|
||||
range: [1.0, 7.0],
|
||||
unit: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'genderPreference',
|
||||
type: 'radio-group',
|
||||
title: '补充要求 (选填)',
|
||||
hint: '补充性别偏好、特殊要求和注意事项等信息',
|
||||
required: false,
|
||||
defaultValue: 'unlimited',
|
||||
options: [
|
||||
{ label: '选择填入', value: 'select' },
|
||||
{ label: '仅限男生', value: 'male' },
|
||||
{ label: '仅限女生', value: 'female' },
|
||||
{ label: '性别不限', value: 'unlimited' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'autoStandby',
|
||||
type: 'checkbox',
|
||||
title: '开启自动候补逻辑',
|
||||
required: false,
|
||||
defaultValue: true
|
||||
}
|
||||
],
|
||||
actions: {
|
||||
addText: '再添加一场',
|
||||
submitText: '完成',
|
||||
disclaimer: '点击确定发布按钮，即表示已阅读并同意《约球规则》'
|
||||
}
|
||||
}
|
||||
177
src/config/formSchema/publishBallFormSchema.ts
Normal file
177
src/config/formSchema/publishBallFormSchema.ts
Normal file
@@ -0,0 +1,177 @@
|
||||
// 表单字段类型枚举
|
||||
export enum FieldType {
|
||||
TEXT = 'text',
|
||||
TEXTAREA = 'textarea',
|
||||
SELECT = 'select',
|
||||
DATE = 'date',
|
||||
TIME = 'time',
|
||||
NUMBER = 'number',
|
||||
SWITCH = 'switch',
|
||||
RADIO = 'radio',
|
||||
CHECKBOX = 'checkbox',
|
||||
LOCATION = 'location',
|
||||
UPLOADIMAGE = 'uploadimage',
|
||||
TIMEINTERVAL = 'timeinterval',
|
||||
NUMBERINTERVAL = 'numberinterval',
|
||||
RANGE = 'range',
|
||||
TEXTAREATAG = 'textareaTag',
|
||||
ACTIVITYINFO = 'activityInfo'
|
||||
}
|
||||
|
||||
// 表单字段配置接口
|
||||
export interface FormFieldConfig {
|
||||
key: string
|
||||
label: string
|
||||
type: FieldType
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
defaultValue?: any
|
||||
options?: Array<{ label: string; value: any }>
|
||||
rules?: Array<{
|
||||
required?: boolean
|
||||
min?: number
|
||||
max?: number
|
||||
pattern?: RegExp
|
||||
message: string
|
||||
}>
|
||||
props?: Record<string, any>
|
||||
description?: string
|
||||
children?: FormFieldConfig[]
|
||||
iconType?: string
|
||||
}
|
||||
|
||||
// 发布球局表单配置
|
||||
export const publishBallFormSchema: FormFieldConfig[] = [
|
||||
{
|
||||
key: 'coverImages',
|
||||
label: '活动封页',
|
||||
type: FieldType.UPLOADIMAGE,
|
||||
placeholder: '请选择活动类型',
|
||||
required: true,
|
||||
props: {
|
||||
maxCount: 9
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'title',
|
||||
label: '',
|
||||
type: FieldType.TEXT,
|
||||
placeholder: '好的标题更吸引人哦',
|
||||
required: true,
|
||||
props: {
|
||||
maxLength: 20
|
||||
},
|
||||
rules: [
|
||||
{ required: true, message: '请输入活动标题' },
|
||||
{ max: 20, message: '标题不能超过20个字符' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'date',
|
||||
label: '',
|
||||
type: FieldType.TIMEINTERVAL,
|
||||
placeholder: '请选择活动日期',
|
||||
required: true,
|
||||
rules: [
|
||||
{ required: true, message: '请选择活动日期' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'timeRange',
|
||||
label: '活动信息',
|
||||
type: FieldType.ACTIVITYINFO,
|
||||
placeholder: '请选择活动时间',
|
||||
required: true,
|
||||
rules: [
|
||||
{ required: true, message: '请选择活动时间' }
|
||||
],
|
||||
children: [
|
||||
{
|
||||
key: 'fee',
|
||||
label: '费用',
|
||||
iconType: 'ICON_COST',
|
||||
type: FieldType.NUMBER,
|
||||
placeholder: '请输入活动费用（元）',
|
||||
defaultValue: 0,
|
||||
rules: [
|
||||
{ min: 0, message: '费用不能为负数' },
|
||||
{ max: 1000, message: '费用不能超过1000元' }
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'location',
|
||||
label: '地点',
|
||||
iconType: 'ICON_LOCATION',
|
||||
type: FieldType.LOCATION,
|
||||
placeholder: '请选择活动地点',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
key: 'sport',
|
||||
label: '玩法',
|
||||
iconType: 'ICON_GAMEPLAY',
|
||||
type: FieldType.SELECT,
|
||||
placeholder: '请选择玩法',
|
||||
required: true,
|
||||
options: [
|
||||
{ label: '篮球', value: 'basketball' },
|
||||
{ label: '足球', value: 'football' },
|
||||
{ label: '羽毛球', value: 'badminton' },
|
||||
{ label: '网球', value: 'tennis' },
|
||||
{ label: '乒乓球', value: 'pingpong' },
|
||||
{ label: '排球', value: 'volleyball' }
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'minParticipants',
|
||||
label: '人数要求',
|
||||
type: FieldType.NUMBERINTERVAL,
|
||||
placeholder: '请输入最少参与人数',
|
||||
defaultValue: 1,
|
||||
rules: [
|
||||
{ min: 1, message: '最少参与人数不能为0' },
|
||||
{ max: 4, message: '最少参与人数不能超过100人' }
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
key: 'ntpLevel',
|
||||
label: 'NTRP 水平要求',
|
||||
type: FieldType.RANGE,
|
||||
placeholder: '请选择开始时间',
|
||||
required: true,
|
||||
props: {
|
||||
min: 2.0,
|
||||
max: 4.0,
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'additionalRequirements',
|
||||
label: '补充要求（选填）',
|
||||
type: FieldType.TEXTAREATAG,
|
||||
placeholder: '补充性别偏好、特殊要求和注意事项等信息',
|
||||
required: true,
|
||||
options:[
|
||||
{ label: '新手', value: 'beginner' },
|
||||
{ label: '进阶', value: 'intermediate' },
|
||||
{ label: '高手', value: 'advanced' },
|
||||
{ label: '不限', value: 'any' }
|
||||
],
|
||||
rules: [
|
||||
{ max: 100, message: '补充要求不能超过100个字符' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'autoDegrade',
|
||||
label: '开启自动候补逻辑',
|
||||
type: FieldType.CHECKBOX,
|
||||
placeholder: '开启自动候补逻辑',
|
||||
required: true,
|
||||
description: '开启后，当活动人数不足时，系统会自动将活动状态改为“候补”，并通知用户。',
|
||||
rules: [
|
||||
{ required: true, message: '请选择开启自动候补逻辑' }
|
||||
]
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user