发布页开发
This commit is contained in:
筱野
@@ -1,62 +1,151 @@
|
||||
import React from 'react'
|
||||
import { View } from '@tarojs/components'
|
||||
import React, { useState } from 'react'
|
||||
import { View, Text, Input, Button, Image, ScrollView, Picker } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import DynamicForm from '../../components/DynamicForm/DynamicForm'
|
||||
import { publishBallFormConfig } from '../../config/formSchema/bulishBallFormSchema'
|
||||
import ActivityTypeSwitch, { type ActivityType } from '../../components/ActivityTypeSwitch'
|
||||
import PublishForm from './publishForm'
|
||||
import { publishBallFormSchema } from '../../config/formSchema/publishBallFormSchema';
|
||||
import './index.scss'
|
||||
|
||||
const PublishBallPage: React.FC = () => {
|
||||
// 提交成功回调
|
||||
const handleSubmitSuccess = (response: any) => {
|
||||
console.log('发布成功:', response)
|
||||
interface FormData {
|
||||
activityType: ActivityType
|
||||
title: string
|
||||
timeRange: TimeRange
|
||||
fee: string
|
||||
location: string
|
||||
gameplay: string
|
||||
minParticipants: number
|
||||
maxParticipants: number
|
||||
ntpLevel: NTRPRange
|
||||
additionalRequirements: string
|
||||
autoDegrade: boolean
|
||||
}
|
||||
|
||||
const PublishBall: React.FC = () => {
|
||||
const [coverImages, setCoverImages] = useState<CoverImage[]>([])
|
||||
const [showStadiumSelector, setShowStadiumSelector] = useState(false)
|
||||
const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null)
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
activityType: 'individual', // 默认值
|
||||
title: '',
|
||||
timeRange: {
|
||||
startDate: '2025-11-23',
|
||||
startTime: '08:00',
|
||||
endTime: '10:00'
|
||||
},
|
||||
fee: '',
|
||||
location: '',
|
||||
gameplay: '',
|
||||
minParticipants: 1,
|
||||
maxParticipants: 4,
|
||||
ntpLevel: { min: 2.0, max: 4.0 },
|
||||
additionalRequirements: '',
|
||||
autoDegrade: false
|
||||
})
|
||||
|
||||
// 处理封面图片变化
|
||||
const handleCoverImagesChange = (images: CoverImage[]) => {
|
||||
setCoverImages(images)
|
||||
}
|
||||
|
||||
// 更新表单数据
|
||||
const updateFormData = (key: keyof FormData, value: any) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[key]: value
|
||||
}))
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取人数要求显示文本
|
||||
const getParticipantsText = () => {
|
||||
return `最少${formData.minParticipants}人，最多${formData.maxParticipants}人`
|
||||
}
|
||||
|
||||
// 处理NTRP范围变化
|
||||
const handleNTRPChange = (range: NTRPRange) => {
|
||||
updateFormData('ntpLevel', range)
|
||||
}
|
||||
|
||||
// 处理时间范围变化
|
||||
const handleTimeRangeChange = (timeRange: TimeRange) => {
|
||||
updateFormData('timeRange', timeRange)
|
||||
}
|
||||
|
||||
// 处理补充要求变化
|
||||
const handleAdditionalRequirementsChange = (value: string) => {
|
||||
updateFormData('additionalRequirements', value)
|
||||
}
|
||||
|
||||
// 处理场馆选择
|
||||
const handleStadiumSelect = (stadium: Stadium | null) => {
|
||||
setSelectedStadium(stadium)
|
||||
if (stadium) {
|
||||
updateFormData('location', stadium.name)
|
||||
}
|
||||
setShowStadiumSelector(false)
|
||||
}
|
||||
|
||||
// 处理活动类型变化
|
||||
const handleActivityTypeChange = (type: ActivityType) => {
|
||||
updateFormData('activityType', type)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
// 基础验证
|
||||
if (!formData.title.trim()) {
|
||||
Taro.showToast({
|
||||
title: '请输入活动标题',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (coverImages.length === 0) {
|
||||
Taro.showToast({
|
||||
title: '请至少上传一张活动封面',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: 实现提交逻辑
|
||||
console.log('提交数据:', { coverImages, formData })
|
||||
|
||||
Taro.showModal({
|
||||
Taro.showToast({
|
||||
title: '发布成功',
|
||||
content: response.data.length > 1 ?
|
||||
`成功发布${response.data.length}场约球活动！` :
|
||||
'约球活动发布成功！',
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
// 可以跳转到活动列表页面
|
||||
// Taro.navigateTo({ url: '/pages/matchList/matchList' })
|
||||
}
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
// 提交失败回调
|
||||
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 className='publish-ball'>
|
||||
{/* 活动类型切换 */}
|
||||
<ActivityTypeSwitch
|
||||
value={formData.activityType}
|
||||
onChange={handleActivityTypeChange}
|
||||
/>
|
||||
<ScrollView className='publish-ball__scroll' scrollY>
|
||||
<PublishForm formData={formData} onChange={updateFormData} optionsConfig={publishBallFormSchema} />
|
||||
</ScrollView>
|
||||
|
||||
|
||||
{/* 完成按钮 */}
|
||||
<View className='submit-section'>
|
||||
<Button className='submit-btn' onClick={handleSubmit}>
|
||||
完成
|
||||
</Button>
|
||||
<Text className='submit-tip'>
|
||||
点击确定发布约球，即表示已经同意条款
|
||||
<Text className='link'>《约球规则》</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default PublishBallPage
|
||||
export default PublishBall
|
||||
|
||||
Reference in New Issue
Block a user