参与

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;

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>
   )
 }