参与

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
+  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 })
   }
   
-    onChange([newMin, newMax])
-  }
   
   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>
   )
 }

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: '',
@@ -258,13 +262,15 @@ const PublishBall: React.FC = () => {
         return
       }
       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 }
       }
     }

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 // 备注