参与

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<NumberIntervalProps> = ({
   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 (
     <View className='participants-control-section'>
       <View className='participant-control'>
-        <Text className='control-label'>最少</Text>
+        <Text className='control-label'>最小成局数</Text>
         <View className='control-buttons'>
           <InputNumber
             className="format-width"
             defaultValue={minParticipants}
             min={min}
             max={maxParticipants}
-            onChange={(value) => handleChange([value, maxParticipants])}
+            onChange={(value) => handleChange({ min: value, max: maxParticipants, is_participate: is_participate })}
             formatter={(value) => `${value}人`}
           />
         </View>
       </View>
       <View className='participant-control'>
-        <Text className='control-label'>最多</Text>
+        <Text className='control-label'>球局总人数</Text>
         <View className='control-buttons'>
           <InputNumber
             className="format-width"
             defaultValue={maxParticipants}
-            onChange={(value) => handleChange([minParticipants, value])}
+            onChange={(value) => handleChange({ min: minParticipants, max: value, is_participate: is_participate })}
             min={minParticipants}
             max={max}
             formatter={(value) => `${value}人`}
           />
         </View>
       </View>
+      <View className='participant-control'>
+        <Checkbox 
+            className=''
+            checked={is_participate}
+            onChange={(checked) => handleChange({ min: minParticipants, max: maxParticipants, is_participate: checked })}
+        />
+        我也参与此球局
+      </View>
     </View>
   )
 }