增加发布
This commit is contained in:
筱野
@@ -1,5 +1,6 @@
|
||||
export default defineAppConfig({
|
||||
pages: [
|
||||
'pages/publishBall/index',
|
||||
'pages/index/index'
|
||||
],
|
||||
window: {
|
||||
|
||||
102
src/components/DynamicForm/DynamicForm.scss
Normal file
102
src/components/DynamicForm/DynamicForm.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
.dynamic-form {
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.form-reminder {
|
||||
background: #fff8dc;
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: #fff;
|
||||
margin: 16px;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.delete-form-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #ff4757;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 20px 16px 30px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
|
||||
.add-form-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 44px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.plus-icon {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.submitting {
|
||||
background: #999;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #ccc;
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
326
src/components/DynamicForm/DynamicForm.tsx
Normal file
326
src/components/DynamicForm/DynamicForm.tsx
Normal file
@@ -0,0 +1,326 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, Button } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { Dialog } from '@nutui/nutui-react-taro'
|
||||
import { FormConfig, FormFieldConfig } from '../../config/formConfig'
|
||||
import FieldRenderer from './FieldRenderer'
|
||||
import commonApi from '../../services/commonApi'
|
||||
import './DynamicForm.scss'
|
||||
|
||||
interface DynamicFormProps {
|
||||
config: FormConfig
|
||||
formType?: string // 表单类型，用于API提交
|
||||
onSubmit?: (formData: any[]) => void | Promise<void>
|
||||
onSubmitSuccess?: (response: any) => void
|
||||
onSubmitError?: (error: any) => void
|
||||
onAddForm?: () => void
|
||||
onDeleteForm?: (index: number) => void
|
||||
enableApiSubmit?: boolean // 是否启用API提交
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
id: string
|
||||
data: Record<string, any>
|
||||
}
|
||||
|
||||
const DynamicForm: React.FC<DynamicFormProps> = ({
|
||||
config,
|
||||
formType = 'default',
|
||||
onSubmit,
|
||||
onSubmitSuccess,
|
||||
onSubmitError,
|
||||
onAddForm,
|
||||
onDeleteForm,
|
||||
enableApiSubmit = true
|
||||
}) => {
|
||||
const [forms, setForms] = useState<FormData[]>([])
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
|
||||
const [deleteIndex, setDeleteIndex] = useState<number>(-1)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
// 初始化表单数据
|
||||
useEffect(() => {
|
||||
const initialData = createInitialFormData()
|
||||
setForms([{
|
||||
id: Date.now().toString(),
|
||||
data: initialData
|
||||
}])
|
||||
}, [config])
|
||||
|
||||
// 根据配置创建初始数据
|
||||
const createInitialFormData = () => {
|
||||
const data: Record<string, any> = {}
|
||||
config.fields.forEach(field => {
|
||||
data[field.key] = field.defaultValue
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
// 添加新表单
|
||||
const handleAddForm = () => {
|
||||
const newForm: FormData = {
|
||||
id: Date.now().toString(),
|
||||
data: createInitialFormData()
|
||||
}
|
||||
setForms([...forms, newForm])
|
||||
onAddForm?.()
|
||||
}
|
||||
|
||||
// 删除表单
|
||||
const handleDeleteForm = (index: number) => {
|
||||
if (forms.length <= 1) return
|
||||
|
||||
setDeleteIndex(index)
|
||||
setShowDeleteDialog(true)
|
||||
}
|
||||
|
||||
const confirmDelete = () => {
|
||||
if (deleteIndex >= 0 && forms.length > 1) {
|
||||
const newForms = forms.filter((_, i) => i !== deleteIndex)
|
||||
setForms(newForms)
|
||||
onDeleteForm?.(deleteIndex)
|
||||
}
|
||||
setShowDeleteDialog(false)
|
||||
setDeleteIndex(-1)
|
||||
}
|
||||
|
||||
// 更新字段值
|
||||
const updateFieldValue = (formIndex: number, fieldKey: string, value: any) => {
|
||||
const newForms = [...forms]
|
||||
newForms[formIndex].data[fieldKey] = value
|
||||
setForms(newForms)
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
const validateForm = (formData: Record<string, any>) => {
|
||||
const errors: string[] = []
|
||||
|
||||
config.fields.forEach(field => {
|
||||
if (field.required) {
|
||||
const value = formData[field.key]
|
||||
if (value === undefined || value === null || value === '' ||
|
||||
(Array.isArray(value) && value.length === 0)) {
|
||||
errors.push(`${field.title}为必填项`)
|
||||
}
|
||||
}
|
||||
|
||||
// 数字验证
|
||||
if (field.validation && formData[field.key] !== '') {
|
||||
const value = Number(formData[field.key])
|
||||
if (field.validation.min !== undefined && value < field.validation.min) {
|
||||
errors.push(field.validation.message || `${field.title}不能小于${field.validation.min}`)
|
||||
}
|
||||
if (field.validation.max !== undefined && value > field.validation.max) {
|
||||
errors.push(field.validation.message || `${field.title}不能大于${field.validation.max}`)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return errors
|
||||
}
|
||||
|
||||
// 处理图片上传
|
||||
const handleImageUpload = async (formData: Record<string, any>): Promise<Record<string, any>> => {
|
||||
const processedData = { ...formData }
|
||||
|
||||
for (const [key, value] of Object.entries(formData)) {
|
||||
// 检查是否为图片字段
|
||||
const fieldConfig = config.fields.find(field => field.key === key)
|
||||
if (fieldConfig?.type === 'image-upload' && Array.isArray(value) && value.length > 0) {
|
||||
try {
|
||||
// 过滤出本地图片路径（临时文件）
|
||||
const localImages = value.filter(url => url.startsWith('wxfile://') || url.startsWith('http://tmp/'))
|
||||
const remoteImages = value.filter(url => !url.startsWith('wxfile://') && !url.startsWith('http://tmp/'))
|
||||
|
||||
if (localImages.length > 0) {
|
||||
// 上传本地图片
|
||||
const uploadResult = await commonApi.uploadImages(localImages)
|
||||
const uploadedUrls = uploadResult.data.map(item => item.url)
|
||||
|
||||
// 合并远程图片和新上传的图片
|
||||
processedData[key] = [...remoteImages, ...uploadedUrls]
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('图片上传失败:', error)
|
||||
throw new Error(`${fieldConfig.title}上传失败`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return processedData
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
if (isSubmitting) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
// 表单验证
|
||||
const allErrors: string[] = []
|
||||
const formDataList = forms.map((form, index) => {
|
||||
const errors = validateForm(form.data)
|
||||
if (errors.length > 0) {
|
||||
allErrors.push(`第${index + 1}${config.title || '表单'}: ${errors.join(', ')}`)
|
||||
}
|
||||
return form.data
|
||||
})
|
||||
|
||||
if (allErrors.length > 0) {
|
||||
Taro.showModal({
|
||||
title: '表单验证失败',
|
||||
content: allErrors.join('\n'),
|
||||
showCancel: false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 处理图片上传
|
||||
const processedFormDataList = await Promise.all(
|
||||
formDataList.map(formData => handleImageUpload(formData))
|
||||
)
|
||||
|
||||
// 执行自定义提交逻辑
|
||||
if (onSubmit) {
|
||||
await onSubmit(processedFormDataList)
|
||||
}
|
||||
|
||||
// API提交
|
||||
if (enableApiSubmit) {
|
||||
try {
|
||||
let response
|
||||
|
||||
// 根据表单类型选择不同的API
|
||||
switch (formType) {
|
||||
case 'publishBall':
|
||||
if (processedFormDataList.length === 1) {
|
||||
response = await commonApi.publishMatch(processedFormDataList[0] as any)
|
||||
} else {
|
||||
response = await commonApi.publishMultipleMatches(processedFormDataList as any)
|
||||
}
|
||||
break
|
||||
case 'userProfile':
|
||||
response = await commonApi.updateUserProfile(processedFormDataList[0] as any)
|
||||
break
|
||||
case 'feedback':
|
||||
response = await commonApi.submitFeedback(processedFormDataList[0] as any)
|
||||
break
|
||||
default:
|
||||
response = await commonApi.submitForm(formType, processedFormDataList)
|
||||
}
|
||||
|
||||
// 提交成功回调
|
||||
onSubmitSuccess?.(response)
|
||||
|
||||
Taro.showToast({
|
||||
title: '提交成功！',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (apiError) {
|
||||
console.error('API提交失败:', apiError)
|
||||
onSubmitError?.(apiError)
|
||||
throw apiError
|
||||
}
|
||||
} else {
|
||||
// 不使用API提交时，显示成功提示
|
||||
Taro.showToast({
|
||||
title: '提交成功！',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('表单提交失败:', error)
|
||||
|
||||
// 错误回调
|
||||
onSubmitError?.(error)
|
||||
|
||||
const errorMessage = error instanceof Error ? error.message : '提交失败，请重试'
|
||||
Taro.showToast({
|
||||
title: errorMessage,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='dynamic-form'>
|
||||
{/* 提醒文本 */}
|
||||
{config.reminder && (
|
||||
<View className='form-reminder'>
|
||||
<Text>{config.reminder}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 表单列表 */}
|
||||
{forms.map((form, formIndex) => (
|
||||
<View key={form.id} className='form-container'>
|
||||
{/* 删除按钮 */}
|
||||
{forms.length > 1 && (
|
||||
<View
|
||||
className='delete-form-btn'
|
||||
onClick={() => handleDeleteForm(formIndex)}
|
||||
>
|
||||
<Text>×</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 渲染所有字段 */}
|
||||
{config.fields.map((fieldConfig: FormFieldConfig) => (
|
||||
<FieldRenderer
|
||||
key={fieldConfig.key}
|
||||
config={fieldConfig}
|
||||
value={form.data[fieldConfig.key]}
|
||||
onChange={(value) => updateFieldValue(formIndex, fieldConfig.key, value)}
|
||||
matchId={form.id}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
))}
|
||||
|
||||
{/* 底部操作区 */}
|
||||
<View className='form-actions'>
|
||||
{config.actions?.addText && (
|
||||
<View className='add-form-btn' onClick={handleAddForm}>
|
||||
<Text className='plus-icon'>+</Text>
|
||||
<Text>{config.actions.addText}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{config.actions?.submitText && (
|
||||
<Button
|
||||
className={`submit-btn ${isSubmitting ? 'submitting' : ''}`}
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? '提交中...' : config.actions.submitText}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{config.actions?.disclaimer && (
|
||||
<Text className='disclaimer'>
|
||||
{config.actions.disclaimer}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 删除确认弹窗 */}
|
||||
<Dialog
|
||||
visible={showDeleteDialog}
|
||||
title='确认删除'
|
||||
onConfirm={confirmDelete}
|
||||
onCancel={() => {
|
||||
setShowDeleteDialog(false)
|
||||
setDeleteIndex(-1)
|
||||
}}
|
||||
>
|
||||
确定要删除这场约球吗？
|
||||
</Dialog>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DynamicForm
|
||||
304
src/components/DynamicForm/FieldRenderer.scss
Normal file
304
src/components/DynamicForm/FieldRenderer.scss
Normal file
@@ -0,0 +1,304 @@
|
||||
.field-renderer {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.field-header {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.field-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.field-content {
|
||||
// 图片上传
|
||||
.upload-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.upload-btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fafafa;
|
||||
|
||||
.plus-icon {
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.image-item {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #ff4757;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 文本输入
|
||||
.text-input, .number-input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// 时间显示
|
||||
.time-display {
|
||||
background: #f8f8f8;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
|
||||
.time-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.time-label {
|
||||
width: 40px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-left: 16px;
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 场地输入
|
||||
.venue-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding-right: 16px;
|
||||
|
||||
.venue-input {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// 多选按钮
|
||||
.multi-select-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
.select-btn {
|
||||
padding: 8px 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
&.selected {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 计数器
|
||||
.counter-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.count-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.count-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.count-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.count-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.count-number {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
// 滑动条
|
||||
.slider-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.slider-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.slider-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.slider-track {
|
||||
height: 4px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
|
||||
.slider-fill {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #333;
|
||||
border-radius: 2px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.slider-thumb {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #333;
|
||||
border-radius: 50%;
|
||||
top: -8px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 单选按钮组
|
||||
.radio-group-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.radio-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
&.selected {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 复选框
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
|
||||
&.checked {
|
||||
background: #000;
|
||||
border-color: #000;
|
||||
|
||||
.checkmark {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
279
src/components/DynamicForm/FieldRenderer.tsx
Normal file
279
src/components/DynamicForm/FieldRenderer.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
import React from 'react'
|
||||
import { View, Text, Input, Image, Button } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { FormFieldConfig } from '../../config/formConfig'
|
||||
import './FieldRenderer.scss'
|
||||
|
||||
interface FieldRendererProps {
|
||||
config: FormFieldConfig
|
||||
value: any
|
||||
onChange: (value: any) => void
|
||||
matchId: string
|
||||
}
|
||||
|
||||
const FieldRenderer: React.FC<FieldRendererProps> = ({ config, value, onChange, matchId }) => {
|
||||
const { key, type, title, placeholder, hint, options, config: fieldConfig } = config
|
||||
|
||||
// 图片上传组件
|
||||
const renderImageUpload = () => {
|
||||
const handleImageUpload = () => {
|
||||
Taro.chooseImage({
|
||||
count: (fieldConfig?.maxImages || 9) - (value?.length || 0),
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const newImages = [...(value || []), ...res.tempFilePaths].slice(0, fieldConfig?.maxImages || 9)
|
||||
onChange(newImages)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const removeImage = (index: number) => {
|
||||
const newImages = (value || []).filter((_: any, i: number) => i !== index)
|
||||
onChange(newImages)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='upload-container'>
|
||||
<View className='upload-btn' onClick={handleImageUpload}>
|
||||
<Text className='plus-icon'>+</Text>
|
||||
</View>
|
||||
{(value || []).map((url: string, i: number) => (
|
||||
<View key={i} className='image-item'>
|
||||
<Image src={url} className='cover-image' mode='aspectFill' />
|
||||
<View className='remove-btn' onClick={() => removeImage(i)}>
|
||||
<Text>×</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// 文本输入组件
|
||||
const renderTextInput = () => (
|
||||
<Input
|
||||
className='text-input'
|
||||
placeholder={placeholder}
|
||||
value={value || ''}
|
||||
onInput={(e) => onChange(e.detail.value)}
|
||||
/>
|
||||
)
|
||||
|
||||
// 数字输入组件
|
||||
const renderNumberInput = () => (
|
||||
<Input
|
||||
className='number-input'
|
||||
placeholder={placeholder}
|
||||
type='number'
|
||||
value={value || ''}
|
||||
onInput={(e) => onChange(e.detail.value)}
|
||||
/>
|
||||
)
|
||||
|
||||
// 时间显示组件
|
||||
const renderTimeDisplay = () => (
|
||||
<View className='time-display'>
|
||||
<View className='time-row'>
|
||||
<Text className='time-label'>开始</Text>
|
||||
<Text className='time-value'>11/23/2025</Text>
|
||||
<Text className='time-value'>8:00 AM</Text>
|
||||
</View>
|
||||
<View className='time-row'>
|
||||
<Text className='time-label'>结束</Text>
|
||||
<Text className='time-value'>11/23/2025</Text>
|
||||
<Text className='time-value'>10:00 AM</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
// 场地输入组件
|
||||
const renderVenueInput = () => (
|
||||
<View className='venue-input-container'>
|
||||
<Input
|
||||
className='venue-input'
|
||||
placeholder={placeholder}
|
||||
value={value || ''}
|
||||
onInput={(e) => onChange(e.detail.value)}
|
||||
/>
|
||||
{fieldConfig?.showArrow && <Text className='arrow'>›</Text>}
|
||||
</View>
|
||||
)
|
||||
|
||||
// 多选按钮组件
|
||||
const renderMultiSelect = () => (
|
||||
<View className='multi-select-container'>
|
||||
{options?.map((option) => (
|
||||
<View
|
||||
key={option.value}
|
||||
className={`select-btn ${(value || []).includes(option.value) ? 'selected' : ''}`}
|
||||
onClick={() => {
|
||||
const currentValues = value || []
|
||||
const newValues = currentValues.includes(option.value)
|
||||
? currentValues.filter((v: any) => v !== option.value)
|
||||
: [...currentValues, option.value]
|
||||
onChange(newValues)
|
||||
}}
|
||||
>
|
||||
<Text>{option.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
|
||||
// 计数器组件
|
||||
const renderCounter = () => {
|
||||
const minValue = fieldConfig?.minValue || 1
|
||||
const maxValue = fieldConfig?.maxValue || 50
|
||||
const currentValue = value || { min: 1, max: 4 }
|
||||
|
||||
return (
|
||||
<View className='counter-container'>
|
||||
<View className='count-group'>
|
||||
<Text className='count-label'>最少</Text>
|
||||
<View className='count-controls'>
|
||||
<View
|
||||
className='count-btn'
|
||||
onClick={() => onChange({
|
||||
...currentValue,
|
||||
min: Math.max(minValue, currentValue.min - 1)
|
||||
})}
|
||||
>
|
||||
<Text>-</Text>
|
||||
</View>
|
||||
<Text className='count-number'>{currentValue.min}</Text>
|
||||
<View
|
||||
className='count-btn'
|
||||
onClick={() => onChange({
|
||||
...currentValue,
|
||||
min: Math.min(maxValue, currentValue.min + 1)
|
||||
})}
|
||||
>
|
||||
<Text>+</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Text className='separator'>至</Text>
|
||||
<View className='count-group'>
|
||||
<View className='count-controls'>
|
||||
<View
|
||||
className='count-btn'
|
||||
onClick={() => onChange({
|
||||
...currentValue,
|
||||
max: Math.max(currentValue.min, currentValue.max - 1)
|
||||
})}
|
||||
>
|
||||
<Text>-</Text>
|
||||
</View>
|
||||
<Text className='count-number'>{currentValue.max}</Text>
|
||||
<View
|
||||
className='count-btn'
|
||||
onClick={() => onChange({
|
||||
...currentValue,
|
||||
max: Math.min(maxValue, currentValue.max + 1)
|
||||
})}
|
||||
>
|
||||
<Text>+</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className='count-label'>最多</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// 滑动条组件
|
||||
const renderSlider = () => {
|
||||
const range = fieldConfig?.range || [1, 7]
|
||||
const currentValue = value || [2.0, 4.0]
|
||||
|
||||
return (
|
||||
<View className='slider-container'>
|
||||
<Text className='slider-label'>2.0及以下</Text>
|
||||
<View className='slider-wrapper'>
|
||||
<View className='slider-track'>
|
||||
<View className='slider-fill' />
|
||||
<View
|
||||
className='slider-thumb left'
|
||||
style={{ left: `${((currentValue[0] - range[0]) / (range[1] - range[0])) * 100}%` }}
|
||||
/>
|
||||
<View
|
||||
className='slider-thumb right'
|
||||
style={{ left: `${((currentValue[1] - range[0]) / (range[1] - range[0])) * 100}%` }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<Text className='slider-label'>4.0及以上</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// 单选组件
|
||||
const renderRadioGroup = () => (
|
||||
<View className='radio-group-container'>
|
||||
{options?.map((option) => (
|
||||
<View
|
||||
key={option.value}
|
||||
className={`radio-btn ${value === option.value ? 'selected' : ''}`}
|
||||
onClick={() => onChange(option.value)}
|
||||
>
|
||||
<Text>{option.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
|
||||
// 复选框组件
|
||||
const renderCheckbox = () => (
|
||||
<View className='checkbox-container'>
|
||||
<View
|
||||
className={`checkbox ${value ? 'checked' : ''}`}
|
||||
onClick={() => onChange(!value)}
|
||||
>
|
||||
{value && <Text className='checkmark'>✓</Text>}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
// 根据类型渲染不同组件
|
||||
const renderField = () => {
|
||||
switch (type) {
|
||||
case 'image-upload':
|
||||
return renderImageUpload()
|
||||
case 'text-input':
|
||||
return renderTextInput()
|
||||
case 'number-input':
|
||||
return renderNumberInput()
|
||||
case 'time-display':
|
||||
return renderTimeDisplay()
|
||||
case 'venue-input':
|
||||
return renderVenueInput()
|
||||
case 'multi-select':
|
||||
return renderMultiSelect()
|
||||
case 'counter':
|
||||
return renderCounter()
|
||||
case 'slider':
|
||||
return renderSlider()
|
||||
case 'radio-group':
|
||||
return renderRadioGroup()
|
||||
case 'checkbox':
|
||||
return renderCheckbox()
|
||||
default:
|
||||
return <Text>未知字段类型: {type}</Text>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='field-renderer'>
|
||||
<View className='field-header'>
|
||||
<Text className='field-title'>{title}</Text>
|
||||
{hint && <Text className='field-hint'>{hint}</Text>}
|
||||
</View>
|
||||
<View className='field-content'>
|
||||
{renderField()}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default FieldRenderer
|
||||
9
src/components/DynamicForm/index.ts
Normal file
9
src/components/DynamicForm/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
// DynamicForm组件统一导出
|
||||
export { default as DynamicForm } from './DynamicForm'
|
||||
export { default as FieldRenderer } from './FieldRenderer'
|
||||
|
||||
// 导出类型
|
||||
export type { FormConfig, FormFieldConfig, FieldType } from '../../config/formSchema/bulishBallFormSchema'
|
||||
|
||||
// 默认导出DynamicForm组件
|
||||
export { default } from './DynamicForm'
|
||||
173
src/config/formSchema/bulishBallFormSchema.ts
Normal file
173
src/config/formSchema/bulishBallFormSchema.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
// 表单字段类型定义
|
||||
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: '点击确定发布按钮，即表示已阅读并同意《约球规则》'
|
||||
}
|
||||
}
|
||||
3
src/pages/publishBall/index.config.ts
Normal file
3
src/pages/publishBall/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '发布个人约球'
|
||||
})
|
||||
402
src/pages/publishBall/index.scss
Normal file
402
src/pages/publishBall/index.scss
Normal file
@@ -0,0 +1,402 @@
|
||||
.publish-ball-page {
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.reminder {
|
||||
background: #fff8dc;
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.match-form {
|
||||
background: #fff;
|
||||
margin: 16px;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #ff4757;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// 封面上传
|
||||
.cover-upload {
|
||||
.upload-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.upload-btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fafafa;
|
||||
|
||||
.plus-icon {
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.image-item {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #ff4757;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 主题输入
|
||||
.theme-input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// 时间显示
|
||||
.time-display {
|
||||
background: #f8f8f8;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
|
||||
.time-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.time-label {
|
||||
width: 40px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-left: 16px;
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 场地输入
|
||||
.venue-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding-right: 16px;
|
||||
|
||||
.venue-input {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// 价格输入
|
||||
.price-input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// 玩法选择
|
||||
.play-style-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
.play-style-btn {
|
||||
padding: 8px 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
&.selected {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 人数控制
|
||||
.player-count-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.count-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.count-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.count-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.count-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.count-number {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
// NTRP滑动条
|
||||
.ntrp-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.ntrp-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.slider-track {
|
||||
height: 4px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
|
||||
.slider-fill {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #333;
|
||||
border-radius: 2px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.slider-thumb {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #333;
|
||||
border-radius: 50%;
|
||||
top: -8px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 性别选择
|
||||
.requirements-hint {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.gender-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.gender-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
&.selected {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自动候补
|
||||
.standby-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
|
||||
&.checked {
|
||||
background: #000;
|
||||
border-color: #000;
|
||||
|
||||
.checkmark {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部操作区
|
||||
.bottom-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 20px 16px 30px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
|
||||
.add-match-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 44px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.plus-icon {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.complete-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
62
src/pages/publishBall/index.tsx
Normal file
62
src/pages/publishBall/index.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import React from 'react'
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import DynamicForm from '../../components/DynamicForm/DynamicForm'
|
||||
import { publishBallFormConfig } from '../../config/formSchema/bulishBallFormSchema'
|
||||
import './index.scss'
|
||||
|
||||
const PublishBallPage: React.FC = () => {
|
||||
// 提交成功回调
|
||||
const handleSubmitSuccess = (response: any) => {
|
||||
console.log('发布成功:', response)
|
||||
|
||||
Taro.showModal({
|
||||
title: '发布成功',
|
||||
content: response.data.length > 1 ?
|
||||
`成功发布${response.data.length}场约球活动！` :
|
||||
'约球活动发布成功！',
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
// 可以跳转到活动列表页面
|
||||
// Taro.navigateTo({ url: '/pages/matchList/matchList' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 提交失败回调
|
||||
const handleSubmitError = (error: any) => {
|
||||
console.error('发布失败:', error)
|
||||
|
||||
Taro.showModal({
|
||||
title: '发布失败',
|
||||
content: error.message || '网络错误，请稍后重试',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
|
||||
// 添加表单
|
||||
const handleAddForm = () => {
|
||||
console.log('添加新表单')
|
||||
}
|
||||
|
||||
// 删除表单
|
||||
const handleDeleteForm = (index: number) => {
|
||||
console.log('删除表单:', index)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='publish-ball-page'>
|
||||
<DynamicForm
|
||||
config={publishBallFormConfig}
|
||||
formType='publishBall'
|
||||
enableApiSubmit={true}
|
||||
onSubmitSuccess={handleSubmitSuccess}
|
||||
onSubmitError={handleSubmitError}
|
||||
onAddForm={handleAddForm}
|
||||
onDeleteForm={handleDeleteForm}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default PublishBallPage
|
||||
Reference in New Issue
Block a user