修改提交

src/components/FormSwitch/FormSwitch.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
-import { Checkbox, Popover } from '@nutui/nutui-react-taro'
+import { Checkbox } from '@nutui/nutui-react-taro'
 import { Image } from '@tarojs/components'
 import images from '@/config/images'
 import './index.scss'
@@ -15,37 +15,42 @@ interface FormSwitchProps {
 }
 
 const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, infoIcon, showToast = false, description}) => {
-  const [dark, setDark] = useState(false)
+  const [showTip, setShowTip] = useState(false)
+
+  const toggleTip = () => {
+    setShowTip((prev) => !prev)
+  }
+
   return (
-    <View className='auto-degrade-section'>
+    <>
-      <View className='auto-degrade-item'>
+      {showTip && <View className='info-popover-mask' onClick={() => setShowTip(false)} />}
-        <View className='auto-degrade-content'>
+      <View className='auto-degrade-section'>
-          <Text className='auto-degrade-text'>{subTitle}</Text>
+        <View className='auto-degrade-item'>
-          {
+          <View className='auto-degrade-content'>
-            showToast && <Popover
+            <Text className='auto-degrade-text'>{subTitle}</Text>
-            visible={dark}
+            {
-            list={[{
+              showToast && (
-              key: 'key1',
+                <View className='info-icon' onClick={toggleTip}>
-              name: description || '',
+                  <Image src={infoIcon || images.ICON_TIPS} className='info-img' />
-            }]}
+                  {
-            theme="dark"
+                    showTip && (
-            location="bottom-start"
+                      <View className='info-popover'>
-            style={{ marginInlineEnd: '30px' }}
+                        <Text>{description || ''}</Text>
-            onClick={() => {
+                      </View>
-              dark ? setDark(false) : setDark(true)
+                    )
-            }}
+                  }
-          >
+                </View>
-            <View className='info-icon'><Image src={images.ICON_TIPS || infoIcon} className='info-img' /></View>
+              )
-          </Popover>
+            }
-          }
+          </View>
+          <Checkbox 
+            className='auto-degrade-checkbox nut-checkbox-black'
+            checked={value}
+            onChange={onChange}
+          />
         </View>
-        <Checkbox 
-          className='auto-degrade-checkbox nut-checkbox-black'
-          checked={value}
-          onChange={onChange}
-        />
       </View>
-    </View>
+    </>
   )
 }
 

src/components/FormSwitch/index.scss

@@ -13,10 +13,9 @@
     .auto-degrade-content {
       display: flex;
       align-items: center;
-      gap: 8px;
       
       .auto-degrade-text {
-        font-size: 16px;
+        font-size: 14px;
         color: #333;
         font-weight: 500;
       }
@@ -26,10 +25,28 @@
         align-items: center;
         justify-content: center;
         padding-left: 4px;
+        position: relative;
         .info-img{
           width: 12px;
           height: 12px;
         }
+        .info-popover {
+          position: absolute;
+          top: 22px;
+          left: 0;
+          width: 50%;
+          padding: 8px 10px;
+          background: rgba(0, 0, 0, 0.85);
+          color: #fff;
+          border-radius: 6px;
+          font-size: 12px;
+          line-height: 1.6;
+          z-index: 1001;
+          white-space: normal;
+          word-break: normal;
+          overflow-wrap: break-word;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        }
       }
     }
     
@@ -41,3 +58,13 @@
     }
   }
 }
+
+.info-popover-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 1000;
+} 

src/components/Range/index.tsx

@@ -66,7 +66,7 @@ const NtrpRange: React.FC<RangeProps> = ({
       
 
       <div>
-        <div className={styles.rangeWrapper}>
+        <div className={`${styles.rangeWrapper} rangeContent`}>
           <span className={styles.rangeWrapperMin}>{min.toFixed(1)}</span>
           <Range
             range

src/config/formSchema/publishBallFormSchema.ts

@@ -130,6 +130,9 @@ export const publishBallFormSchema: FormFieldConfig[] = [
     type: FieldType.NUMBERINTERVAL,
     placeholder: '请输入最少参与人数',
     defaultValue: 1,
+    props: {
+      showSummary: true,
+    },
     rules: [
       { min: 1, message: '最少参与人数不能为0' },
       { max: 4, message: '最少参与人数不能超过100人' }
@@ -144,6 +147,7 @@ export const publishBallFormSchema: FormFieldConfig[] = [
     required: true,
     props: {
       showTitle: false,
+      showSummary: true,
       className: 'ntrp-range',
       step: 0.5,
       min: 1.0,

src/pages/publishBall/index.module.scss

@@ -3,14 +3,23 @@
 .publish-ball {
   min-height: 100vh;
   background: theme.$page-background-color;
-  padding: 4px 16px 0 16px;
+  
   position: relative;
   &__scroll {
     height: calc(100vh - 120px);
+    overflow: auto;
+    padding: 4px 16px 0 16px;
+    box-sizing: border-box;
   }
 
   &__content {
-    padding-bottom: 94px;
+    padding-bottom: 72px;
+  }
+  .activity-type-switch{
+    padding: 4px 16px 0 16px;
+  }
+  .publish-form{
+
   }
 
 
@@ -25,9 +34,9 @@
     box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
     display: flex;
     .ntrp-range{
-      .rangeWrapper{
+        :global(.rangeContent){
-        border: none!important;
+            border: none!important;
-      }
+        }
     }
   }
 
@@ -86,26 +95,27 @@
 
 
 
+
   // 提交区域
   .submit-section {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
-    background: white;
     padding: 16px;
-    border-top: 1px solid #e0e0e0;
 
     .submit-btn {
-      width: 100%;
+        width: 100%;
-      height: 48px;
+        color: white;
-      background: #333;
+        font-size: 16px;
-      color: white;
+        font-weight: 600;
-      border-radius: 24px;
+        height: 52px;
-      font-size: 16px;
+        line-height: 52px;
-      font-weight: 600;
+        padding: 2px 6px;
-      margin-bottom: 8px;
+        border-radius: 16px;
-      border: none;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        background: #000;
+        box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.10);
     }
 
     .submit-tip {
@@ -113,7 +123,9 @@
       font-size: 12px;
       color: #999;
       line-height: 1.4;
-
+      display: flex;
+    justify-content: center;
+    padding: 12px 0;
       .link {
         color: #007AFF;
       }

src/pages/publishBall/index.tsx

@@ -5,7 +5,7 @@ import ActivityTypeSwitch, { type ActivityType } from '../../components/Activity
 import PublishForm from './publishForm'
 import { publishBallFormSchema } from '../../config/formSchema/publishBallFormSchema';
 import { PublishBallFormData } from '../../../types/publishBall';
-import './index.scss'
+import styles from './index.module.scss'
 
 
 const PublishBall: React.FC = () => {
@@ -30,7 +30,7 @@ const PublishBall: React.FC = () => {
 
 
   // 更新表单数据
-  const updateFormData = (key: keyof FormData, value: any) => {
+  const updateFormData = (key: keyof PublishBallFormData, value: any) => {
     setFormData(prev => ({
       ...prev,
       [key]: value
@@ -66,25 +66,28 @@ const PublishBall: React.FC = () => {
   }
 
   return (
-    <View className='publish-ball'>
+    <View className={styles['publish-ball']}>
       {/* 活动类型切换 */}
-      <ActivityTypeSwitch 
+      <View className={styles['activity-type-switch']}>
-        value={formData.activityType}
+        <ActivityTypeSwitch 
-        onChange={handleActivityTypeChange}
+          value={formData.activityType}
-      />
+          onChange={handleActivityTypeChange}
-      <ScrollView className='publish-ball__scroll' scrollY>
+        />
+      </View>
+      
+      <View className={styles['publish-ball__scroll']}>
         <PublishForm formData={formData} onChange={updateFormData} optionsConfig={publishBallFormSchema} />
-      </ScrollView>
+      </View>
 
 
       {/* 完成按钮 */}
-      <View className='submit-section'>
+      <View className={styles['submit-section']}>
-        <Button className='submit-btn' onClick={handleSubmit}>
+        <Button className={styles['submit-btn']} onClick={handleSubmit}>
-          完成
+          发布
         </Button>
-        <Text className='submit-tip'>
+        <Text className={styles['submit-tip']}>
           点击确定发布约球，即表示已经同意条款
-          <Text className='link'>《约球规则》</Text>
+          <Text className={styles['link']}>《约球规则》</Text>
         </Text>
       </View>
     </View>

src/pages/publishBall/publishForm.tsx

@@ -7,7 +7,7 @@ import { type Stadium, type CoverImage } from '../../components/index.types'
 import { FormFieldConfig, FieldType } from '../../config/formSchema/publishBallFormSchema'
 import { PublishBallFormData } from '../../../types/publishBall';
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // 组件映射器
 const componentMap = {
@@ -35,7 +35,7 @@ const PublishForm: React.FC<{
   }
 
   // 更新表单数据
-  const updateFormData = (key: keyof FormData, value: any) => {
+  const updateFormData = (key: keyof PublishBallFormData, value: any) => {
     onChange(key, value)
   }
 
@@ -50,7 +50,12 @@ const PublishForm: React.FC<{
     setShowStadiumSelector(false)
   }
 
-
+  const renderSummary = (item: FormFieldConfig) => {
+    if (item.props?.showSummary) {
+      return <Text className={styles['section-summary']}>{item.props?.summary}</Text>
+    }
+    return null
+  }
 
 
 
@@ -83,15 +88,17 @@ const PublishForm: React.FC<{
   }
 
   return (
-    <View className='publish-form'>
+    <View className={styles['publish-form']}>
-      <View className='publish-ball__content'>
+      <View className={styles['publish-ball__content']}>
          {
             optionsConfig.map((item) => {
                 const Component = componentMap[item.type]
                 const optionProps = {
                     ...item.props,
-                    ...(item.key === 'additionalRequirements' ? { options: item.options } : {})
+                    ...(item.key === 'additionalRequirements' ? { options: item.options } : {}),
+                    ...(item.props?.className ? { className: styles[item.props.className] } : {})
                 }
+                console.log(item.props?.className)
                 console.log(optionProps, item.label, formData[item.key]);
                 if (item.type === FieldType.UPLOADIMAGE) {
                     /* 活动封面 */
@@ -103,15 +110,15 @@ const PublishForm: React.FC<{
                 }
                 if (item.type === FieldType.ACTIVITYINFO) {
                     return <>
-                    <View className='activity-description'>
+                    <View className={styles['activity-description']}>
-                        <Text className='description-text'>
+                        <Text className={styles['description-text']}>
                         活动开始前2小时未达到最低人数，活动自动取消；活动
                         结束后，报名者累计到达最低人数时，一旦到达期即有序。
                         </Text>
                     </View>
 
                     {/* 费用地点玩法区域 - 合并白色块 */}
-                    <View className='bg-section'>
+                    <View className={styles['bg-section']}>
                         <FormBasicInfo
                         fee={formData.fee}
                         location={formData.location}
@@ -127,18 +134,20 @@ const PublishForm: React.FC<{
                     </>
                 }
                 return (
-                    <View className='section-wrapper'>
+                    <View className={styles['section-wrapper']}>
                         {
-                            item.label &&  <View className='section-title-wrapper' >
+                            item.label &&  <View className={styles['section-title-wrapper']} >
-                            <Text className='section-title'>{item.label}</Text>
+                            <Text className={styles['section-title']}>{item.label}</Text>
-                            <Text className='section-summary'>最少1人，最多4人</Text>
+                            {
+                              item.props?.showSummary && <Text className={styles['section-summary']}>{renderSummary(item)}</Text>
+                            }
                         </View>
                         }
-                        <View className='bg-section'>
+                        <View className={styles['bg-section']}>
                             <Component
                                 label={item.label}
                                 value={formData[item.key]}
-                                onChange={(value) => updateFormData(item.key as keyof FormData, value)}
+                                onChange={(value) => updateFormData(item.key as keyof PublishBallFormData, value)}
                                 {...optionProps}
                                 placeholder={item.placeholder} 
                             />