修改日期问题弹出问题

2026-02-07 22:15:14 +08:00
parent 6f73bb6d99
commit bfc6a149f0
12 changed files with 515 additions and 95 deletions
--- a/src/publish_pages/publishBall/components/AiImportPopup/AiImportPopup.tsx
+++ b/src/publish_pages/publishBall/components/AiImportPopup/AiImportPopup.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { View, Text, Textarea, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
-import { ConfigProvider, Loading, Popup, Toast } from '@nutui/nutui-react-taro'
+import { ConfigProvider, Loading, Toast } from '@nutui/nutui-react-taro'
 import styles from './index.module.scss'
 import uploadFiles from '@/services/uploadFiles'
 import publishService from '@/services/publishService'
@@ -109,7 +109,10 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
  }

  const handleTextChange = (e: any) => {
-    setText(e.detail.value)
+    const text = e.detail.value;
+    const maxAllowedLength = 120;
+    const truncatedVal = text.length > maxAllowedLength ? text.slice(0, maxAllowedLength) : text
+    setText(truncatedVal)
  }

  // 使用全局键盘状态监听
@@ -191,73 +194,90 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
  }

  const showManualButton = uploadFailCount >= maxFailCount
+  if (!visible) {
+    return null
+  }

+  // 阻止弹窗内的触摸事件冒泡
+  const handleTouchMoveInPopup = (e) => {
+    if (!isKeyboardVisible) {
+      e.stopPropagation()
+    }
+  }
+  
  return (
-    <Popup
-      visible={visible}
-      position="bottom"
-      round={true}
-      closeable={false}
-      onClose={closePopupBefore}
-      className={styles.aiImportPopup}
-      style={{ paddingBottom: isKeyboardVisible ? `${keyboardHeight}px` : undefined }}
-    >
-      <View className={styles.popupContent}>
-        {/* 头部 */}
-        <View className={styles.header}>
-          <View className={styles.titleContainer}>
-            <Image src={images.ICON_IMPORTANT_BLACK} className={styles.lightningIcon} />
-            <Text className={styles.title}>智能导入球局信息</Text>
-          </View>
-          <View className={styles.closeButton} onClick={closePopupBefore}>
-            <Image src={images.ICON_CLOSE} className={styles.lightningIcon} />
-          </View>
-        </View>
-
-        {/* 文本域 */}
-        <View className={styles.textAreaContainer}>
-          <Textarea
-            className={styles.textArea}
-            value={text}
-            onInput={handleTextChange}
-            onFocus={() => {}}
-            onBlur={() => {}}
-            placeholder="在此「粘贴识别」或输入文本，智能拆分球局时间、费用、地点和其他信息，并帮你智能生成球局标题"
-            maxlength={-1}
-            showConfirmBar={false}
-            placeholderClass={styles.textArea_placeholder}
-            autoHeight
-            // 关闭系统自动上推，改为手动根据键盘高度加内边距
-            adjustPosition={false}
-          />
-          <View className={styles.charCount}>
-            <Text className={`${styles.charCountText} ${isCharCountExceeded ? styles.charCountTextExceeded : ''}`}>
-              {text.length}/100
-            </Text>
-          </View>
-        </View>
-
-        {/* 图片识别按钮 */}
-        <View className={styles.imageRecognitionContainer}>
-          <View className={`${styles.imageRecognitionButton} ${uploadLoading ? styles.uploadLoadingContainer : ''}`} onClick={handleImageRecognition}>
-            {
-              uploadLoading ? (<Image src={images.ICON_UPLOAD_SUCCESS} className={styles.cameraIcon} />) : (<Image src={images.ICON_UPLOAD_IMG} className={styles.cameraIcon} />)
-            }
-            <Text className={styles.imageRecognitionText}>图片识别</Text>
-            <Text className={styles.imageRecognitionDesc}>{uploadLoading ? '已上传 1 张图片' : '支持订场截图/小红书笔记截图等图片'}</Text>
-          </View>
-        </View>
-
-        {/* 底部按钮 */}
-        <View className={styles.bottomButtons}>
-          {showManualButton && (
-            <View className={styles.manualButton} onClick={handleManualPublish}>
-              <Text className={styles.manualButtonText}>手动发布球局</Text>
+    <View 
+      className={styles.aiImportPopupOverlay}
+      >
+      <View className={styles.aiImportPopupWrapper} onTouchMove={handleTouchMoveInPopup} catchMove></View>
+      <View
+        className={styles.aiImportPopup}
+        style={{ paddingBottom: isKeyboardVisible ? `${keyboardHeight}px` : undefined }}
+      >
+        <View className={styles.popupContent}>
+          {/* 头部 */}
+          <View className={styles.header}>
+            <View className={styles.titleContainer}>
+              <Image src={images.ICON_IMPORTANT_BLACK} className={styles.lightningIcon} />
+              <Text className={styles.title}>智能导入球局信息</Text>
            </View>
-          )}
-          <View className={styles.pasteButton} onClick={handlePasteAndRecognize}>
-            {
-              loading ? (
+            <View className={styles.closeButton} onClick={closePopupBefore}>
+              <Image src={images.ICON_CLOSE} className={styles.lightningIcon} />
+            </View>
+          </View>
+
+          {/* 文本域 */}
+          <View className={styles.textAreaContainer}>
+            <Textarea
+              className={styles.textArea}
+              value={text}
+              onInput={handleTextChange}
+              onFocus={() => {}}
+              onBlur={() => {}}
+              placeholder="在此「粘贴识别」或输入文本，智能拆分球局时间、费用、地点和其他信息，并帮你智能生成球局标题"
+              maxlength={-1}
+              showConfirmBar={false}
+              placeholderClass={styles.textArea_placeholder}
+              autoHeight
+              // 关闭系统自动上推，改为手动根据键盘高度加内边距
+              adjustPosition={false}
+            />
+            <View className={styles.charCount}>
+              <Text className={`${styles.charCountText} ${isCharCountExceeded ? styles.charCountTextExceeded : ''}`}>
+                {text.length}/100
+              </Text>
+            </View>
+          </View>
+
+          {/* 图片识别按钮 */}
+          <View className={styles.imageRecognitionContainer}>
+            <View
+              className={`${styles.imageRecognitionButton} ${
+                uploadLoading ? styles.uploadLoadingContainer : ''
+              }`}
+              onClick={handleImageRecognition}
+            >
+              {uploadLoading ? (
+                <Image src={images.ICON_UPLOAD_SUCCESS} className={styles.cameraIcon} />
+              ) : (
+                <Image src={images.ICON_UPLOAD_IMG} className={styles.cameraIcon} />
+              )}
+              <Text className={styles.imageRecognitionText}>图片识别</Text>
+              <Text className={styles.imageRecognitionDesc}>
+                {uploadLoading ? '已上传 1 张图片' : '支持订场截图/小红书笔记截图等图片'}
+              </Text>
+            </View>
+          </View>
+
+          {/* 底部按钮 */}
+          <View className={styles.bottomButtons}>
+            {showManualButton && (
+              <View className={styles.manualButton} onClick={handleManualPublish}>
+                <Text className={styles.manualButtonText}>手动发布球局</Text>
+              </View>
+            )}
+            <View className={styles.pasteButton} onClick={handlePasteAndRecognize}>
+              {loading ? (
                <View className={styles.loadingContainer}>
                  <ConfigProvider theme={{ nutuiLoadingIconColor: '#fff', nutuiLoadingIconSize: '20px' }}>
                    <Loading type="circular" />
@@ -269,13 +289,13 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
                  <Image src={images.ICON_COPY} className={styles.clipboardIcon} />
                  <Text className={styles.pasteButtonText}>粘贴并识别</Text>
                </>
-              )
-            }
+              )}
+            </View>
          </View>
        </View>
+        <Toast id="toast" />
      </View>
-      <Toast id="toast" />
-    </Popup>
+    </View>
  )
 }

--- a/src/publish_pages/publishBall/components/AiImportPopup/index.module.scss
+++ b/src/publish_pages/publishBall/components/AiImportPopup/index.module.scss
@@ -1,14 +1,34 @@
@use '~@/scss/themeColor.scss' as theme;

+.aiImportPopupOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9998;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.aiImportPopupWrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9998;
+}
 .aiImportPopup {
-  background-color: #fff;
-  &:global(.nut-popup-bottom.nut-popup-round) {
-    border-radius: 20px 20px 0 0!important;
-  }
+  width: 100%;
+  background-color:#fafafa;
+  border-radius: 16px 16px 0 0;
+  position: relative;
+  z-index: 9999;
  .popupContent {
-    width: 100%;
-    background: #fff;
-    border-radius: 16px 16px 0 0;
+    width: 100%;   
    padding: 0;
    box-sizing: border-box;
    max-height: 80vh;
--- a/src/publish_pages/publishBall/components/SelectStadium/SelectStadium.tsx
+++ b/src/publish_pages/publishBall/components/SelectStadium/SelectStadium.tsx
@@ -3,7 +3,7 @@ import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { Loading } from '@nutui/nutui-react-taro'
 import StadiumDetail, { StadiumDetailRef } from './StadiumDetail'
-import { CommonPopup } from '../../../../components'
+import { CommonPopup, CustomPopup } from '../../../../components'
 import { getLocation } from '@/utils/locationUtils'
 import PublishService from '@/services/publishService'
 import images from '@/config/images'
@@ -188,24 +188,20 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
  // 如果显示详情页面
  if (showDetail && selectedStadium) {
    return (
-      <CommonPopup
+      <CustomPopup
        visible={visible}
        onClose={handleCancel}
        cancelText="返回"
        confirmText="确认"
-        className="select-stadium-popup"
        onCancel={handleDetailCancel}
        onConfirm={handleConfirm}
-        position="bottom"
-        //style={{ paddingBottom: keyboardVisible ? `20px` : undefined }}
-        round
      >
-        <StadiumDetail
-          ref={stadiumDetailRef}
-          stadium={selectedStadium}
-          //onAnyInput={handleAnyInput}
-        />
-      </CommonPopup>
+        {/* 内容区域 */}
+          <StadiumDetail
+            ref={stadiumDetailRef}
+            stadium={selectedStadium}
+          />
+      </CustomPopup>
    )
  }

--- a/src/publish_pages/publishBall/components/SelectStadium/StadiumDetail.scss
+++ b/src/publish_pages/publishBall/components/SelectStadium/StadiumDetail.scss
@@ -4,7 +4,7 @@
  display: flex;
  flex-direction: column;
  .stadium-detail-scroll{
-    height:60vh;
+    max-height:60vh;
  }
  // 已选球场
    // 场馆列表
--- a/src/publish_pages/publishBall/components/SelectStadium/StadiumDetail.tsx
+++ b/src/publish_pages/publishBall/components/SelectStadium/StadiumDetail.tsx
@@ -1,10 +1,11 @@
-import React, { useState, useCallback, forwardRef, useImperativeHandle } from 'react'
+import React, { useState, useCallback, forwardRef, useImperativeHandle, useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import { View, Text, Image, ScrollView } from '@tarojs/components'
 import images from '@/config/images'
 import TextareaTag from '@/components/TextareaTag'
 // import CoverImageUpload, { type CoverImage } from '@/components/ImageUpload'
 import UploadCover, { type CoverImageValue } from '@/components/UploadCover'
+import { useKeyboardHeight } from '@/store/keyboardStore'
 import { useDictionaryActions } from '@/store/dictionaryStore'

 import './StadiumDetail.scss'
@@ -75,6 +76,10 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
  const court_type = getDictionaryValue('court_type') || []
  const court_surface = getDictionaryValue('court_surface') || []
  const supplementary_information = getDictionaryValue('supplementary_information') || []
+
+  // 使用全局键盘状态
+  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+
  const  stadiumInfo = [
    {
      label: '场地类型',
@@ -171,14 +176,36 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({



-   const changeTextarea = (value) => {
+  // 使用全局键盘状态监听
+  useEffect(() => {
+    // 初始化全局键盘监听器
+    initializeKeyboardListener()
+    
+    // 添加本地监听器
+    const removeListener = addListener((height, visible) => {
+      console.log('AiImportPopup 收到键盘变化:', height, visible)
+    })
+
+    return () => {
+      removeListener()
+    }
+  }, [initializeKeyboardListener, addListener])
+
+   const changeTextarea = (value: boolean) => {
    if (value) {
      // 先滚动到底部
-      setScrollTop(scrollTop ? scrollTop + 1 : 9999);
+      setScrollTop(scrollTop ? scrollTop + 15 : 9999);
      // 使用 setTimeout 确保滚动后再更新 openPicker 
    }
   }

+   // 当键盘显示时触发 changeTextarea
+   useEffect(() => {
+     if (isKeyboardVisible) {
+       changeTextarea(true)
+     }
+   }, [isKeyboardVisible])
+
   const changePicker = (value) => {
    setOpenPicker(value);
   }
@@ -189,7 +216,7 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
      <ScrollView 
        className='stadium-detail-scroll'  
        refresherBackground="#FAFAFA"  
-        scrollY={!openPicker}
+        scrollY
        scrollTop={scrollTop}
      >
        {/* 已选球场 */}
@@ -239,7 +266,7 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
                    updateFormData(item.prop, value)
                  }}
                  // onBlur={() => changeTextarea(false)}
-                  onFocus={() => changeTextarea(true)}
+                  //onFocus={() => changeTextarea(true)}
                  placeholder='有其他场地信息可备注'
                  options={(item.options || []).map((o) => ({ label: o, value: o }))}
                />