修改弹窗

src/components/TextareaTag/TextareaTag.scss

@@ -7,6 +7,9 @@
   box-sizing: border-box;
   .input-wrapper {
     margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
     .additional-input {
       width: 100%;
       min-height: 46px;
@@ -22,6 +25,15 @@
         color: theme.$textarea-placeholder-color;
       }
     }
+    .char-count {
+      color: #999;
+      font-size: 12px;
+      line-height: 18px;
+      text-align: right;
+      &.char-count--error {
+        color: #ff4d4f;
+      }
+    }
   }
 
   .options-wrapper {

src/components/TextareaTag/TextareaTag.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 import { View,  Textarea } from '@tarojs/components'
 
 import { Checkbox } from '@nutui/nutui-react-taro'
@@ -21,14 +21,15 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
   value, 
   onChange, 
   placeholder = '请输入',
-  maxLength = 1000,
+  maxLength = 200,
   options = [],
   onFocus,
   onBlur
 }) => {
   // 处理文本输入变化
-  const handleTextChange = useCallback((e: any) => {
+  const handleTextChange = useCallback((val: string) => {
-    onChange({...value, description: e.detail.value})
+    console.log(val,'e.detail.value')
+    onChange({...value, description: val})
   }, [onChange])
 
   // 处理标签选择变化
@@ -36,7 +37,8 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
     onChange({...value, description_tag: selectedTags})
   }, [onChange])
 
-  console.log(options, 'options')
+  const isOverflow = value.description.length > maxLength
+
   return (
     <View className='textarea-tag'>
         {/* 选择选项 */}
@@ -70,12 +72,15 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
             placeholder={placeholder}
             value={value.description}
             placeholderClass='textarea-placeholder'
-            onInput={handleTextChange}
+            onInput={(e) => handleTextChange(e.detail.value)}
-            maxlength={maxLength}
+            maxlength={-1}
             autoHeight={true}
             onFocus={onFocus}
             onBlur={onBlur}
           />
+          <View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
+            {value.description.length}/{maxLength}
+          </View>
         </View>
         
         

src/components/TitleTextarea/TitleTextarea.tsx

@@ -21,12 +21,13 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
   onFocus,
   onBlur
 }) => {
+  const isOverflow = value.length > maxLength
   const handleChange = useCallback((values) => {
-    if (values.length > maxLength ) {
+    // if (values.length > maxLength ) {
-      const newValues = values.slice(0, maxLength)
+    //   const newValues = values.slice(0, maxLength)
-      onChange(newValues)
+    //   onChange(newValues)
-      return;
+    //   return;
-    }
+    // }
    onChange(values)
   }, [])
   return (
@@ -42,7 +43,9 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
         onFocus={onFocus}
         onBlur={onBlur}
       />
-      <View className='char-count'>{value.length}/{maxLength}</View>
+      <View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
+        {value.length}/{maxLength}
+      </View>
     </View>
   )
 }

src/components/TitleTextarea/index.scss

@@ -41,5 +41,8 @@
     font-size: 14px;
     font-weight: 400;
     line-height: 24px;
+    &.char-count--error {
+      color: #ff4d4f;
+    }
   }
 } 

src/config/formSchema/publishBallFormSchema.ts

@@ -150,7 +150,7 @@ export const publishBallFormSchema: FormFieldConfig[] = [
     placeholder: '补充性别偏好、特殊要求和注意事项等信息',
     required: true,
     props: {
-      maxLength: 1000,
+      maxLength: 200,
     },
     options:[
       { label: '仅限男生', value: '仅限男生' },

src/publish_pages/publishBall/components/AiImportPopup/AiImportPopup.tsx

@@ -25,6 +25,7 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
   const [loading, setLoading] = useState(false)
   const [uploadLoading, setUploadLoading] = useState(false)
   const maxFailCount = 3
+  const isCharCountExceeded = text.length > 100
 
   // 获取 actions（在组件顶层调用 Hook）
   const { setPublishData } = usePublishBallActions()
@@ -56,6 +57,7 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
   }
   const handlePasteAndRecognize = async () => {
     if (text) {
+      if (text.length > 100) return;
       textIdentification(text)
     } else {
       getClipboardData()
@@ -71,6 +73,7 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
           duration: 2,
           wordBreak:'break-word'
         })
+        if (res.data.length > 100) return;
         textIdentification(res.data)
         // Taro.showToast({
         //   title: '已读取你的剪切板信息',
@@ -220,7 +223,7 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
             onFocus={() => {}}
             onBlur={() => {}}
             placeholder="在此「粘贴识别」或输入文本，智能拆分球局时间、费用、地点和其他信息，并帮你智能生成球局标题"
-            maxlength={100}
+            maxlength={-1}
             showConfirmBar={false}
             placeholderClass={styles.textArea_placeholder}
             autoHeight
@@ -228,7 +231,9 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
             adjustPosition={false}
           />
           <View className={styles.charCount}>
-            <Text className={styles.charCountText}>{text.length}/100</Text>
+            <Text className={`${styles.charCountText} ${isCharCountExceeded ? styles.charCountTextExceeded : ''}`}>
+              {text.length}/100
+            </Text>
           </View>
         </View>
 

src/publish_pages/publishBall/components/AiImportPopup/index.module.scss

@@ -85,6 +85,9 @@
         font-size: 12px;
         color: #8a8a8a;
       }
+      .charCountTextExceeded {
+        color: #ff4d4f;
+      }
     }
   }
 

src/publish_pages/publishBall/components/SelectStadium/SelectStadium.tsx

@@ -118,6 +118,14 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
       const formData = stadiumDetailRef.current.getFormData()
       console.log('获取球馆表单数据:', formData)
       const { description, ...rest } = formData
+      const { description: descriptionInfo} = description;
+      if (descriptionInfo.length > 200 ) {
+        Taro.showToast({
+          title: `场地信息补充最多可输入200个字`,
+          icon: "none",
+        });
+        return;
+      };
       onConfirm({ ...rest, ...description })
       setSelectedStadium(null)
       setSearchValue('')

src/publish_pages/publishBall/index.tsx

@@ -206,8 +206,10 @@ const PublishBall: React.FC = () => {
       image_list,
       players,
       current_players,
+      descriptionInfo
     } = formData;
     const { play_type, price, location_name } = activityInfo;
+    const { description } = descriptionInfo;
 
     const { max } = players;
     if (!image_list?.length && activityType === "group") {
@@ -241,6 +243,16 @@ const PublishBall: React.FC = () => {
       }
       return false;
     }
+    if (title.length > 20) {
+      if (!isOnSubmit) {
+        Taro.showToast({
+          title: `标题最多可输入20个字`,
+          icon: "none",
+        });
+      }
+      return false;
+    }
+    
     if (
       !price ||
       (typeof price === "number" && price <= 0) ||
@@ -324,6 +336,16 @@ const PublishBall: React.FC = () => {
       return false;
     }
 
+    if (description?.length > 200) {
+      if (!isOnSubmit) {
+        Taro.showToast({
+          title: `补充要求最多可输入200个字`,
+          icon: "none",
+        });
+      }
+      return false;
+    }
+
     return true;
   };
   const validateOnSubmit = () => {
@@ -865,7 +887,7 @@ const PublishBall: React.FC = () => {
               </Text>
             </Text>
           )}
-          {activityType === "group" && (
+          {/* {activityType === "group" && (
             <View className={styles["submit-tip"]}>
               <Checkbox
                 className={styles["submit-checkbox"]}
@@ -874,7 +896,7 @@ const PublishBall: React.FC = () => {
               />
               已认证 徐汇爱打球官方球场，请严格遵守签约协议
             </View>
-          )}
+          )} */}
         </View>
       </View>
     </View>