发布球局

2025-08-23 15:14:37 +08:00
parent e5176f4f5f
commit fb150617c6
34 changed files with 679 additions and 602 deletions
--- a/src/pages/publishBall/index.module.scss
+++ b/src/pages/publishBall/index.module.scss
@@ -8,12 +8,28 @@
  &__scroll {
    height: calc(100vh - 120px);
    overflow: auto;
-    padding: 4px 16px 0 16px;
+    padding: 4px 16px 72px 16px;
    box-sizing: border-box;
  }

  &__content {
-    padding-bottom: 72px;
+  }
+  &__add{
+    margin-top: 2px;
+    border-radius: 12px;
+    border: 2px dashed rgba(22, 24, 35, 0.12);
+    display: flex;
+    width: 343px;
+    height: 60px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    color: rgba(60, 60, 67, 0.50);
+    
+    &-icon{
+      width: 16px;
+      height: 16px;
+    }
  }
  .activity-type-switch{
    padding: 4px 16px 0 16px;
@@ -22,6 +38,60 @@

  }

+  // 场次标题行
+  .session-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 22px 4px;
+
+    .session-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: theme.$primary-color;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+    .session-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      &-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .session-actions {
+      display: flex;
+      gap: 12px;
+    }
+
+    .session-action-btn {
+      border-radius: 8px;
+        border: 0.5px solid rgba(0, 0, 0, 0.16);
+        background: #000;
+        box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.10);
+        backdrop-filter: blur(16px);
+        display: flex;
+        padding: 5px 8px;
+        justify-content: center;
+        align-items: center;
+        gap: 12px;
+        color: white;
+        font-size: 12px;
+        font-weight: 600;
+
+      .action-icon {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+


  // 标题区域 - 独立白色块
@@ -162,6 +232,75 @@
      font-weight: 500;
    }
  }
+
+  // 删除确认弹窗
+  .delete-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+
+    &__content {
+      background: white;
+      border-radius: 16px;
+      padding: 24px;
+      margin: 0 32px;
+      max-width: 320px;
+      width: 100%;
+      text-align: center;
+    }
+
+    &__title {
+      display: block;
+      font-size: 18px;
+      font-weight: 600;
+      color: theme.$primary-color;
+      margin-bottom: 8px;
+    }
+
+    &__desc {
+      display: block;
+      font-size: 14px;
+      color: rgba(60, 60, 67, 0.6);
+      margin-bottom: 24px;
+    }
+
+    &__actions {
+      display: flex;
+      gap: 12px;
+
+      .delete-modal__btn {
+        flex: 1;
+        height: 44px;
+        border-radius: 12px;
+        font-size: 16px;
+        font-weight: 500;
+        border: none;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:first-child {
+          background: rgba(0, 0, 0, 0.04);
+          color: rgba(60, 60, 67, 0.8);
+        }
+
+        &:last-child {
+          background: #FF3B30;
+          color: white;
+        }
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
 }

 // 旋转动画
--- a/src/pages/publishBall/index.tsx
+++ b/src/pages/publishBall/index.tsx
@@ -1,64 +1,142 @@
 import React, { useState } from 'react'
-import { View, Text, Input, Button, Image, ScrollView, Picker } from '@tarojs/components'
+import { View, Text,  Button, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import ActivityTypeSwitch, { type ActivityType } from '../../components/ActivityTypeSwitch'
 import PublishForm from './publishForm'
 import { publishBallFormSchema } from '../../config/formSchema/publishBallFormSchema';
 import { PublishBallFormData } from '../../../types/publishBall';
+import PublishService from '@/services/publishService';
 import styles from './index.module.scss'
-
+import images from '@/config/images'

 const PublishBall: React.FC = () => {
-  const [formData, setFormData] = useState<PublishBallFormData>({
-    activityType: 'individual', // 默认值
-    title: '',
-    timeRange: {
-      startDate: '2025-11-23',
-      startTime: '08:00',
-      endTime: '10:00'
-    },
-    fee: '',
-    location: '',
-    gameplay: '',
-    minParticipants: 1,
-    maxParticipants: 4,
-    ntpLevel: [2.0, 4.0],
-    additionalRequirements: '',
-    autoDegrade: false
+  const [activityType, setActivityType] = useState<ActivityType>('individual')
+  const [formData, setFormData] = useState<PublishBallFormData[]>([
+    {
+      title: '',
+      timeRange: {
+        startDate: '2025-11-23',
+        startTime: '08:00',
+        endTime: '10:00'
+      },
+      fee: '',
+      location: '',
+      gameplay: '',
+      minParticipants: 1,
+      maxParticipants: 4,
+      ntpLevel: [2.0, 4.0],
+      additionalRequirements: '',
+      autoDegrade: false
+    }
+  ])
+  
+  // 删除确认弹窗状态
+  const [deleteConfirm, setDeleteConfirm] = useState<{
+    visible: boolean;
+    index: number;
+  }>({
+    visible: false,
+    index: -1
  })

-
-
  // 更新表单数据
-  const updateFormData = (key: keyof PublishBallFormData, value: any) => {
-    setFormData(prev => ({
-      ...prev,
-      [key]: value
-    }))
+  const updateFormData = (key: keyof PublishBallFormData, value: any, index: number) => {
+    setFormData(prev => {
+      const newData = [...prev]
+      newData[index] = { ...newData[index], [key]: value }
+      return newData
+    })
  }



  // 处理活动类型变化
  const handleActivityTypeChange = (type: ActivityType) => {
-    updateFormData('activityType', type)
+    setActivityType(type)
  }

+  const handleAdd = () => {
+    setFormData(prev => [...prev, {
+      title: '',
+      timeRange: {
+        startDate: '2025-11-23',
+        startTime: '08:00',
+        endTime: '10:00'
+      },
+      fee: '',
+      location: '',
+      gameplay: '',
+      minParticipants: 1,
+      maxParticipants: 4,
+      ntpLevel: [2.0, 4.0],
+      additionalRequirements: '',
+      autoDegrade: false
+    }])
+  }

+  // 复制上一场数据
+  const handleCopyPrevious = (index: number) => {
+    if (index > 0) {
+      setFormData(prev => {
+        const newData = [...prev]
+        newData[index] = { ...newData[index - 1] }
+        return newData
+      })
+      Taro.showToast({
+        title: '已复制上一场数据',
+        icon: 'success'
+      })
+    }
+  }
+
+  // 删除确认弹窗
+  const showDeleteConfirm = (index: number) => {
+    setDeleteConfirm({
+      visible: true,
+      index
+    })
+  }
+
+  // 关闭删除确认弹窗
+  const closeDeleteConfirm = () => {
+    setDeleteConfirm({
+      visible: false,
+      index: -1
+    })
+  }
+
+  // 确认删除
+  const confirmDelete = () => {
+    if (deleteConfirm.index >= 0) {
+      setFormData(prev => prev.filter((_, index) => index !== deleteConfirm.index))
+      closeDeleteConfirm()
+      Taro.showToast({
+        title: '已删除该场次',
+        icon: 'success'
+      })
+    }
+  }


  // 提交表单
  const handleSubmit = async () => {
    // 基础验证
-    if (!formData.title.trim()) {
-      Taro.showToast({
-        title: '请输入活动标题',
-        icon: 'none'
-      })
-      return
-    }
+
    // TODO: 实现提交逻辑
-    
+    const res = await PublishService.createPersonal({
+      "title": "周末网球约球",
+      "venue_id": 1,
+      "creator_id": 1,
+      "game_date": "2024-06-15",
+      "start_time": "14:00",
+      "end_time": "16:00",
+      "max_participants": 4,
+      "current_participants": 2,
+      "ntrp_level": "2.0-4.0",
+      "play_style": "单打",
+      "description": "周末约球，欢迎参加",
+    })
+    console.log(res);
    Taro.showToast({
      title: '发布成功',
      icon: 'success'
@@ -70,15 +148,82 @@ const PublishBall: React.FC = () => {
      {/* 活动类型切换 */}
      <View className={styles['activity-type-switch']}>
        <ActivityTypeSwitch 
-          value={formData.activityType}
+          value={activityType}
          onChange={handleActivityTypeChange}
        />
      </View>
      
      <View className={styles['publish-ball__scroll']}>
-        <PublishForm formData={formData} onChange={updateFormData} optionsConfig={publishBallFormSchema} />
+        {
+          formData.map((item, index) => (
+            <View key={index}>
+              {/* 场次标题行 */}
+              {activityType === 'group' && index > 0 && (
+                <View className={styles['session-header']}>
+                  <View className={styles['session-title']}>
+                  第{index + 1}场
+                  <View 
+                      className={styles['session-delete']} 
+                      onClick={() => showDeleteConfirm(index)}
+                    >
+                      <Image src={images.ICON_DELETE} className={styles['session-delete-icon']} />
+                      
+                    </View>
+                  </View>
+                  <View className={styles['session-actions']}>
+                    
+                    {index > 0 && (
+                      <View 
+                        className={styles['session-action-btn']} 
+                        onClick={() => handleCopyPrevious(index)}
+                      >
+                        复制上一场
+                      </View>
+                    )}
+                  </View>
+                </View>
+              )}
+              <PublishForm 
+                formData={item} 
+                onChange={(key, value) => updateFormData(key, value, index)} 
+                optionsConfig={publishBallFormSchema} 
+              />
+            </View>
+          ))
+        }
+        {
+          activityType === 'group' && (
+            <View className={styles['publish-ball__add']} onClick={handleAdd}>
+              <Image src={images.ICON_ADD} className={styles['publish-ball__add-icon']} />
+              再添加一场
+            </View>
+          )
+        }
      </View>

+      {/* 删除确认弹窗 */}
+      {deleteConfirm.visible && (
+        <View className={styles['delete-modal']}>
+          <View className={styles['delete-modal__content']}>
+            <Text className={styles['delete-modal__title']}>确认移除该场次？</Text>
+            <Text className={styles['delete-modal__desc']}>该操作不可恢复</Text>
+            <View className={styles['delete-modal__actions']}>
+              <Button 
+                className={styles['delete-modal__btn']} 
+                onClick={closeDeleteConfirm}
+              >
+                再想想
+              </Button>
+              <Button 
+                className={styles['delete-modal__btn']} 
+                onClick={confirmDelete}
+              >
+                确认移除
+              </Button>
+            </View>
+          </View>
+        </View>
+      )}

      {/* 完成按钮 */}
      <View className={styles['submit-section']}>
--- a/src/pages/publishBall/publishForm.tsx
+++ b/src/pages/publishBall/publishForm.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'

 import Taro from '@tarojs/taro'
-import { CoverImageUpload, Range, TimeSelector, TextareaTag, SelectStadium, ParticipantsControl, TitleInput, FormBasicInfo, FormSwitch } from '../../components'
+import { ImageUpload, Range, TimeSelector, TextareaTag, SelectStadium, NumberInterval, TitleInput, FormBasicInfo, FormSwitch } from '../../components'
 import { type Stadium, type CoverImage } from '../../components/index.types'
 import { FormFieldConfig, FieldType } from '../../config/formSchema/publishBallFormSchema'
 import { PublishBallFormData } from '../../../types/publishBall';
@@ -15,15 +15,15 @@ const componentMap = {
    [FieldType.TIMEINTERVAL]: TimeSelector,
    [FieldType.RANGE]: Range,
    [FieldType.TEXTAREATAG]: TextareaTag,
-    [FieldType.NUMBERINTERVAL]: ParticipantsControl,
-    [FieldType.UPLOADIMAGE]: CoverImageUpload,
+    [FieldType.NUMBERINTERVAL]: NumberInterval,
+    [FieldType.UPLOADIMAGE]: ImageUpload,
    [FieldType.ACTIVITYINFO]: FormBasicInfo,
    [FieldType.CHECKBOX]: FormSwitch,
 }

 const PublishForm: React.FC<{ 
    formData: PublishBallFormData, 
-    onChange: (key: keyof PublishBallFormData, value: any) => void, 
+    onChange: (key: keyof PublishBallFormData, value: any, index?: number) => void, 
    optionsConfig: FormFieldConfig[] }> = ({ formData, onChange, optionsConfig }) => {
  const [coverImages, setCoverImages] = useState<CoverImage[]>([])
  const [showStadiumSelector, setShowStadiumSelector] = useState(false)
@@ -102,7 +102,7 @@ const PublishForm: React.FC<{
                console.log(optionProps, item.label, formData[item.key]);
                if (item.type === FieldType.UPLOADIMAGE) {
                    /* 活动封面 */
-                    return  <CoverImageUpload 
+                    return  <ImageUpload 
                      images={coverImages}
                      onChange={handleCoverImagesChange}
                      {...item.props}