diff --git a/src/components/NumberInterval/NumberInterval.scss b/src/components/NumberInterval/NumberInterval.scss index 8aeddad..25f922d 100644 --- a/src/components/NumberInterval/NumberInterval.scss +++ b/src/components/NumberInterval/NumberInterval.scss @@ -6,27 +6,13 @@ width: 100%; padding: 9px 12px; display: flex; - justify-content: space-between; - height: 48px; + flex-direction: column; box-sizing: border-box; .participant-control { display: flex; align-items: center; position: relative; - &:first-child{ - width: 50%; - &::after{ - content: ''; - display: block; - width: 1px; - height: 16px; - background: #E5E5E5; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - } - } + justify-content: space-between; .control-label { font-size: 13px; color: theme.$primary-color; diff --git a/src/components/NumberInterval/NumberInterval.tsx b/src/components/NumberInterval/NumberInterval.tsx index d3b8ed6..e5bec97 100644 --- a/src/components/NumberInterval/NumberInterval.tsx +++ b/src/components/NumberInterval/NumberInterval.tsx @@ -1,11 +1,12 @@ import React from 'react' -import { View, Text, Button } from '@tarojs/components' -import './NumberInterval.scss' +import { View, Text } from '@tarojs/components' import { InputNumber } from '@nutui/nutui-react-taro' +import { Checkbox } from '@nutui/nutui-react-taro' +import './NumberInterval.scss' interface NumberIntervalProps { - value: [number, number] - onChange: (value: [number, number]) => void + value: { min: number, max: number, is_participate: boolean } + onChange: (value: { min: number, max: number, is_participate: boolean }) => void min: number max: number } @@ -16,48 +17,50 @@ const NumberInterval: React.FC = ({ min, max }) => { - const [minParticipants, maxParticipants] = value || [1, 1] - - const handleChange = (value: [number | string, number | string]) => { - const newMin = Number(value[0]) - const newMax = Number(value[1]) - - // 确保最少人数不能大于最多人数 - if (newMin > newMax) { - return - } - - onChange([newMin, newMax]) + const { min:minParticipants, max:maxParticipants, is_participate } = value || { min: 1, max: 1, is_participate: true } + const handleChange = (value: { min: number | string, max: number | string, is_participate: boolean }) => { + const toNumber = (v: number | string): number => typeof v === 'string' ? Number(v) : v + const { min, max, is_participate } = value; + onChange({ min: toNumber(min), max: toNumber(max), is_participate }) } + return ( - 最少 + 最小成局数 handleChange([value, maxParticipants])} + onChange={(value) => handleChange({ min: value, max: maxParticipants, is_participate: is_participate })} formatter={(value) => `${value}人`} /> - 最多 + 球局总人数 handleChange([minParticipants, value])} + onChange={(value) => handleChange({ min: minParticipants, max: value, is_participate: is_participate })} min={minParticipants} max={max} formatter={(value) => `${value}人`} /> + + handleChange({ min: minParticipants, max: maxParticipants, is_participate: checked })} + /> + 我也参与此球局 + ) } diff --git a/src/publish_pages/publishBall/index.tsx b/src/publish_pages/publishBall/index.tsx index 42da6b9..f3a53aa 100644 --- a/src/publish_pages/publishBall/index.tsx +++ b/src/publish_pages/publishBall/index.tsx @@ -39,7 +39,11 @@ const defaultFormData: PublishBallFormData = { venue_description: '', venue_image_list: [], }, - players: [1, 1], + players: { + min: 1, + max: 1, + is_participate: true + }, skill_level: [1.0, 5.0], descriptionInfo: { description: '', @@ -257,14 +261,16 @@ const PublishBall: React.FC = () => { if (!isValid) { return } - const { activityInfo, descriptionInfo, timeRange, players, skill_level,image_list,wechat, ...rest } = formData[0]; + const { activityInfo, descriptionInfo, timeRange, players, skill_level, image_list, wechat, ...rest } = formData[0]; + const { min, max, is_participate } = players; const options = { ...rest, ...activityInfo, ...descriptionInfo, ...timeRange, - max_players: players[1], - min_players: players[0], + max_players: max, + min_players: min, + is_participate: is_participate, skill_level_min: skill_level[0], skill_level_max: skill_level[1], image_list: image_list.map(item => item.url), @@ -305,13 +311,15 @@ const PublishBall: React.FC = () => { } const options = formData.map((item) => { const { activityInfo, descriptionInfo, timeRange, players, skill_level, ...rest } = item; + const { min, max, is_participate } = players; return { ...rest, ...activityInfo, ...descriptionInfo, ...timeRange, - max_players: players[1], - min_players: players[0], + max_players: max, + min_players: min, + is_participate: is_participate, skill_level_min: skill_level[0], skill_level_max: skill_level[1], image_list: item.image_list.map(img => img.url) @@ -382,7 +390,7 @@ const PublishBall: React.FC = () => { ...(description_tag ? { description_tag } : {}), }, ...(skill_level_max && skill_level_min ? { skill_level: [skill_level_min, skill_level_max] } : {}), - ...(max_players && min_players ? { players: [min_players, max_players] } : {}), + ...(max_players && min_players ? { players: { min: min_players, max: max_players, is_participate: true } } : {}), wechat: { ...defaultFormData.wechat, default_wechat_contact: userPhone } } } diff --git a/types/publishBall.ts b/types/publishBall.ts index d13bf92..7f27402 100644 --- a/types/publishBall.ts +++ b/types/publishBall.ts @@ -20,7 +20,11 @@ export interface PublishBallFormData { venue_description?: string // 场地描述 venue_image_list?: string[] // 场地图片 } - players: [number, number] // 人数要求 + players: { + min: number, + max: number, + is_participate: boolean + } // 人数要求 skill_level: [number, number] // 水平要求(NTRP) descriptionInfo: { description: string // 备注