86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import React from 'react'
|
|
import { View, Text, Input, Image, Picker } from '@tarojs/components'
|
|
import { Stadium } from '../SelectStadium'
|
|
import img from '@/config/images';
|
|
import './FormBasicInfo.scss'
|
|
import { FormFieldConfig } from '@/config/formSchema/publishBallFormSchema';
|
|
|
|
interface FormBasicInfoProps {
|
|
fee: string
|
|
location: string
|
|
gameplay: string
|
|
selectedStadium: Stadium | null
|
|
onFeeChange: (value: string) => void
|
|
onLocationChange: (value: string) => void
|
|
onGameplayChange: (value: string) => void
|
|
onStadiumSelect: () => void
|
|
children: FormFieldConfig[]
|
|
}
|
|
|
|
const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
|
|
fee,
|
|
location,
|
|
gameplay,
|
|
selectedStadium,
|
|
onFeeChange,
|
|
onLocationChange,
|
|
onGameplayChange,
|
|
onStadiumSelect,
|
|
children
|
|
}) => {
|
|
const renderChildren = () => {
|
|
return children.map((child: any, index: number) => {
|
|
return <View className='form-item'>
|
|
<View className='form-label'>
|
|
<Image className='lable-icon' src={img[child.iconType]} />
|
|
</View>
|
|
{
|
|
index === 0 && (<View className='form-wrapper'>
|
|
<Text className='form-item-label'>{child.label}</Text>
|
|
<View className='form-right-wrapper'>
|
|
<Input
|
|
className='fee-input'
|
|
placeholder='请输入'
|
|
placeholderClass='title-placeholder'
|
|
type='digit'
|
|
value={fee}
|
|
onInput={(e) => onFeeChange(e.detail.value)}
|
|
/>
|
|
<Text className='unit'>元/每人</Text>
|
|
</View>
|
|
</View>)
|
|
}
|
|
{
|
|
index === 1 && (<View className='form-wrapper'>
|
|
<Text className='form-item-label'>{child.label}</Text>
|
|
<View className='form-right-wrapper' onClick={onStadiumSelect}>
|
|
<Text className={`right-text ${selectedStadium ? 'selected' : ''}`}>
|
|
{selectedStadium ? selectedStadium.name : '请选择'}
|
|
</Text>
|
|
<Image src={img.ICON_ARROW_RIGHT} className='arrow'/>
|
|
</View>
|
|
</View>)
|
|
}
|
|
{
|
|
index === 2 && ( <View className='form-wrapper'>
|
|
<Text className='form-item-label'>{child.label}</Text>
|
|
<View className='form-right-wrapper'>
|
|
<Text className={`right-text ${gameplay ? 'selected' : ''}`}>
|
|
{gameplay ? gameplay : '请选择'}
|
|
</Text>
|
|
<Image src={img.ICON_ARROW_RIGHT} className='arrow'/>
|
|
</View>
|
|
</View>)
|
|
}
|
|
</View>
|
|
})
|
|
}
|
|
return (
|
|
<View className='form-basic-info'>
|
|
{/* 费用 */}
|
|
{renderChildren()}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default FormBasicInfo
|