修改发布

src/pages/publishBall/components/FormBasicInfo/FormBasicInfo.scss

@@ -0,0 +1,92 @@
+@use '~@/scss/images.scss' as img;
+@use '~@/scss/themeColor.scss' as theme;
+// FormBasicInfo 组件样式
+.form-basic-info{
+  background: white;
+  border-radius: 16px;
+  width: 100%;
+
+  
+    // 费用项目
+    .form-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 44px;
+      padding-left: 12px;
+      &:last-child{
+        .form-wrapper{
+          border-bottom: none;
+        }
+      }
+      .form-label {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        padding-right: 14px;
+        .lable-icon {
+          width: 16px;
+          height: 16px;
+        }
+        text {
+          font-size: 16px;
+          color: #333;
+          font-weight: 500;
+        }
+      }
+      .form-wrapper{
+        display: flex;
+        justify-content: space-between;
+        flex: 1;
+        border-bottom: 1px solid  rgba(0, 0, 0, 0.06);
+        align-items: center;
+        .form-item-label{
+          display: flex;
+        }
+        .form-right-wrapper{
+          display: flex;
+          padding-right: 12px;
+          height: 44px;
+          line-height: 44px;
+          align-items: center;
+          .title-placeholder{
+            font-size: 14px;
+            color: theme.$textarea-placeholder-color;
+            font-weight: 400;
+          }
+          .h5-input{
+            font-size: 14px;
+            color: #333;
+            font-weight: 500;
+            width: 50px;
+            text-align: right;
+            margin-right: 8px;
+          }
+          .unit{
+            font-size: 14px;
+            color: theme.$primary-color;
+          }
+          .right-text{
+            color: theme.$textarea-placeholder-color;
+            font-size: 14px;
+            padding-right: 8px;
+            width: 200px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            text-align: right;
+            &.selected{
+              color: #000;
+            }
+          }
+          .arrow{
+            width: 16px;
+            height: 16px;
+            margin-left: 4px;
+            
+          }
+        }
+      }
+    }
+  
+}

src/pages/publishBall/components/FormBasicInfo/FormBasicInfo.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react'
+import { View, Text, Input, Image, Picker } from '@tarojs/components'
+import PopupGameplay from '../PopupGameplay'
+import img from '@/config/images';
+import './FormBasicInfo.scss'
+import { FormFieldConfig } from '@/config/formSchema/publishBallFormSchema';
+
+interface FormBasicInfoProps {
+  value: any
+  onChange: (value: any) => void
+  children: FormFieldConfig[]
+}
+
+const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
+  value,
+  onChange,
+  children
+}) => {
+  const [gameplayVisible, setGameplayVisible] = useState(false)
+  
+  const handleGameplaySelect = () => {
+    setGameplayVisible(true)
+  }
+
+  const handleGameplayConfirm = (selectedGameplay: string) => {
+    onGameplayChange(selectedGameplay)
+    setGameplayVisible(false)
+  }
+
+  const handleGameplayClose = () => {
+    setGameplayVisible(false)
+  }
+
+  const renderChildren = () => {
+    return children.map((child: any, index: number) => {
+      return <View className='form-item'>
+      <View className='form-label'>
+        <Image className='lable-icon' src={img[child.iconType]} />
+      </View>
+      {
+        index === 0 && (<View className='form-wrapper'>
+          <Text className='form-item-label'>{child.label}</Text>
+          <View className='form-right-wrapper'>
+            <Input
+              className='fee-input'
+              placeholder='请输入'
+              placeholderClass='title-placeholder'
+              type='digit'
+              value={value[child.key]}
+              onInput={(e) => onChange(child.key, e.detail.value)}
+            />
+            <Text className='unit'>元/每人</Text>
+          </View>
+      </View>)
+      }
+      {
+        index === 1 && (<View className='form-wrapper'>
+          <Text className='form-item-label'>{child.label}</Text>
+          <View className='form-right-wrapper' onClick={() => {}}>
+            <Text className={`right-text ${value[child.key] ? 'selected' : ''}`}>
+              {value[child.key] ? value[child.key] : '请选择'}
+            </Text>
+            <Image src={img.ICON_ARROW_RIGHT}  className='arrow'/>
+          </View>
+        </View>)
+      }
+      {
+        index === 2 && ( <View className='form-wrapper'>
+          <Text className='form-item-label'>{child.label}</Text>
+          <View className='form-right-wrapper' onClick={handleGameplaySelect}>
+            <Text className={`right-text ${value[child.key] ? 'selected' : ''}`}>
+              {value[child.key] ? value[child.key] : '请选择'}
+            </Text>
+            <Image src={img.ICON_ARROW_RIGHT}  className='arrow'/>
+          </View>
+        </View>)
+      }
+    </View>
+    })
+  }
+  return (
+    <View className='form-basic-info'>
+      {/* 费用 */}
+      {/* {renderChildren()} */}
+      
+      {/* 玩法选择弹窗 */}
+      {/* <PopupGameplay 
+        visible={gameplayVisible}
+        onClose={handleGameplayClose}
+        onConfirm={handleGameplayConfirm}
+        selectedGameplay={value[children[2].key]}
+      /> */}
+    </View>
+  )
+}
+
+export default FormBasicInfo 

src/pages/publishBall/components/FormBasicInfo/index.ts

@@ -0,0 +1 @@
+export { default } from './FormBasicInfo'