diff --git a/src/components/FormSwitch/FormSwitch.tsx b/src/components/FormSwitch/FormSwitch.tsx index d08470e..65953e6 100644 --- 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 = ({ value, onChange, subTitle, infoIcon, showToast = false, description}) => { - const [dark, setDark] = useState(false) + const [showTip, setShowTip] = useState(false) + + const toggleTip = () => { + setShowTip((prev) => !prev) + } + return ( - - - - {subTitle} - { - showToast && { - dark ? setDark(false) : setDark(true) - }} - > - - - } + <> + {showTip && setShowTip(false)} />} + + + + {subTitle} + { + showToast && ( + + + { + showTip && ( + + {description || ''} + + ) + } + + ) + } + + - - + ) } diff --git a/src/components/FormSwitch/index.scss b/src/components/FormSwitch/index.scss index 5fa7fb7..9c4c1c8 100644 --- 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; } \ No newline at end of file diff --git a/src/components/Range/index.tsx b/src/components/Range/index.tsx index 9347f96..a4a9ff2 100644 --- a/src/components/Range/index.tsx +++ b/src/components/Range/index.tsx @@ -66,7 +66,7 @@ const NtrpRange: React.FC = ({
-
+
{min.toFixed(1)} { @@ -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 ( - + {/* 活动类型切换 */} - - + + + + + - + {/* 完成按钮 */} - - - + 点击确定发布约球,即表示已经同意条款 - 《约球规则》 + 《约球规则》 diff --git a/src/pages/publishBall/publishForm.tsx b/src/pages/publishBall/publishForm.tsx index c3ed9c1..4ee2722 100644 --- 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 {item.props?.summary} + } + return null + } @@ -83,15 +88,17 @@ const PublishForm: React.FC<{ } return ( - - + + { 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 <> - - + + 活动开始前2小时未达到最低人数,活动自动取消;活动 结束后,报名者累计到达最低人数时,一旦到达期即有序。 {/* 费用地点玩法区域 - 合并白色块 */} - + } return ( - + { - item.label && - {item.label} - 最少1人,最多4人 + item.label && + {item.label} + { + item.props?.showSummary && {renderSummary(item)} + } } - + updateFormData(item.key as keyof FormData, value)} + onChange={(value) => updateFormData(item.key as keyof PublishBallFormData, value)} {...optionProps} placeholder={item.placeholder} />