修改提交

2025-08-19 23:57:04 +08:00
parent 3c91ee0e88
commit 3a45212737
7 changed files with 139 additions and 79 deletions
--- a/src/components/FormSwitch/FormSwitch.tsx
+++ b/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'>
-        <View className='auto-degrade-content'>
-          <Text className='auto-degrade-text'>{subTitle}</Text>
-          {
-            showToast && <Popover
-            visible={dark}
-            list={[{
-              key: 'key1',
-              name: description || '',
-            }]}
-            theme="dark"
-            location="bottom-start"
-            style={{ marginInlineEnd: '30px' }}
-            onClick={() => {
-              dark ? setDark(false) : setDark(true)
-            }}
-          >
-            <View className='info-icon'><Image src={images.ICON_TIPS || infoIcon} className='info-img' /></View>
-          </Popover>
-          }
+    <>
+      {showTip && <View className='info-popover-mask' onClick={() => setShowTip(false)} />}
+      <View className='auto-degrade-section'>
+        <View className='auto-degrade-item'>
+          <View className='auto-degrade-content'>
+            <Text className='auto-degrade-text'>{subTitle}</Text>
+            {
+              showToast && (
+                <View className='info-icon' onClick={toggleTip}>
+                  <Image src={infoIcon || images.ICON_TIPS} className='info-img' />
+                  {
+                    showTip && (
+                      <View className='info-popover'>
+                        <Text>{description || ''}</Text>
+                      </View>
+                    )
+                  }
+                </View>
+              )
+            }
+          </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>
+    </>
  )
 }

--- a/src/components/FormSwitch/index.scss
+++ b/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);
+        }
      }
    }
    
@@ -40,4 +57,14 @@
      }
    }
  }
+}
+
+.info-popover-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 1000;
 } 
--- a/src/components/Range/index.tsx
+++ b/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
--- a/src/config/formSchema/publishBallFormSchema.ts
+++ b/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,
--- a/src/pages/publishBall/index.module.scss
+++ b/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{
-        border: none!important;
-      }
+        :global(.rangeContent){
+            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%;
-      height: 48px;
-      background: #333;
-      color: white;
-      border-radius: 24px;
-      font-size: 16px;
-      font-weight: 600;
-      margin-bottom: 8px;
-      border: none;
+        width: 100%;
+        color: white;
+        font-size: 16px;
+        font-weight: 600;
+        height: 52px;
+        line-height: 52px;
+        padding: 2px 6px;
+        border-radius: 16px;
+        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;
      }
@@ -160,4 +172,4 @@
  100% {
    transform: rotate(360deg);
  }
-}
+} 
--- a/src/pages/publishBall/index.tsx
+++ b/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 
-        value={formData.activityType}
-        onChange={handleActivityTypeChange}
-      />
-      <ScrollView className='publish-ball__scroll' scrollY>
+      <View className={styles['activity-type-switch']}>
+        <ActivityTypeSwitch 
+          value={formData.activityType}
+          onChange={handleActivityTypeChange}
+        />
+      </View>
+      
+      <View className={styles['publish-ball__scroll']}>
        <PublishForm formData={formData} onChange={updateFormData} optionsConfig={publishBallFormSchema} />
-      </ScrollView>
+      </View>


      {/* 完成按钮 */}
-      <View className='submit-section'>
-        <Button className='submit-btn' onClick={handleSubmit}>
-          完成
+      <View className={styles['submit-section']}>
+        <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>
--- a/src/pages/publishBall/publishForm.tsx
+++ b/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='publish-ball__content'>
+    <View className={styles['publish-form']}>
+      <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'>
-                        <Text className='description-text'>
+                    <View className={styles['activity-description']}>
+                        <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' >
-                            <Text className='section-title'>{item.label}</Text>
-                            <Text className='section-summary'>最少1人，最多4人</Text>
+                            item.label &&  <View className={styles['section-title-wrapper']} >
+                            <Text className={styles['section-title']}>{item.label}</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} 
                            />