解决按钮问题与键盘弹出问题

src/components/CustomPopup/CustomPopup.tsx

@@ -1,7 +1,8 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import type { CSSProperties, ReactNode } from 'react'
 import { View, Text } from '@tarojs/components'
 import { Button } from '@nutui/nutui-react-taro'
+import { useKeyboardHeight } from '@/store/keyboardStore'
 import styles from './index.module.scss'
 
 export interface CustomPopupProps {
@@ -46,6 +47,24 @@ const CustomPopup: React.FC<CustomPopupProps> = ({
   const [isDragging, setIsDragging] = useState(false)
   const touchStartY = useRef(0)
 
+  // 使用全局键盘状态
+  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+
+  // 使用全局键盘状态监听
+  useEffect(() => {
+    // 初始化全局键盘监听器
+    initializeKeyboardListener()
+    
+    // 添加本地监听器
+    const removeListener = addListener((height, visible) => {
+      console.log('CustomPopup 收到键盘变化:', height, visible)
+    })
+
+    return () => {
+      removeListener()
+    }
+  }, [initializeKeyboardListener, addListener])
+
   if (!visible) {
     return null
   }
@@ -99,6 +118,13 @@ const CustomPopup: React.FC<CustomPopupProps> = ({
     onClose()
   }
 
+  // 阻止弹窗内的触摸事件冒泡
+  const handleTouchMoveInPopup = (e: any) => {
+    if (!isKeyboardVisible) {
+      e.stopPropagation()
+    }
+  }
+
 
   return (
     <View
@@ -106,11 +132,12 @@ const CustomPopup: React.FC<CustomPopupProps> = ({
       style={{ zIndex: zIndex ?? undefined, alignItems: overlayAlignItems }}
       onClick={handleOverlayClick}
     >
-        <View className={styles['custom-popup-move']} catchMove></View>
+      <View className={styles['custom-popup-move']} onTouchMove={handleTouchMoveInPopup} catchMove></View>
       <View
         className={`${styles['custom-popup']} ${className ? className : ''}`}
         style={{
           ...style,
+          paddingBottom: isKeyboardVisible ? `${keyboardHeight}px` : undefined,
         }}
         onClick={(e) => {
           e.stopPropagation()
@@ -152,7 +179,7 @@ const CustomPopup: React.FC<CustomPopupProps> = ({
 
         <View className={styles['custom-popup__body']}>{children}</View>
 
-        {!hideFooter && (
+        {!hideFooter && !isKeyboardVisible && (
           <View className={styles['custom-popup__footer']}>
             <Button
               className={`${styles['custom-popup__btn']} ${styles['custom-popup__btn-cancel']}`}

src/components/CustomPopup/index.module.scss

@@ -7,7 +7,7 @@
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
+  z-index: 999;
   display: flex;
   align-items: flex-end;
   justify-content: center;
@@ -18,20 +18,20 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 9998;
+  z-index: 998;
 }
 .custom-popup {
   position: relative;
-  z-index: 9999;
+  z-index: 999;
   width: 100%;
   padding: 0;
   box-sizing: border-box;
-  max-height: 80vh;
   display: flex;
   flex-direction: column;
   background-color: theme.$page-background-color;
   border-radius: 20px 20px 0 0;
   overflow: hidden;
+  transition: padding-bottom 0.3s ease;
   .custom-popup__drag-handle-container {
     position: relative;
     height: 0;
@@ -109,6 +109,8 @@
 
   .custom-popup__body {
     flex: 1 1 auto;
+    max-height: 80vh;
+    overflow-y: auto;
   }
 
   .custom-popup__footer {

src/components/TextareaTag/TextareaTag.tsx

@@ -79,6 +79,7 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
             autoHeight={true}
             onFocus={onFocus}
             onBlur={onBlur}
+            adjustPosition={false}
           />
           <View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
             {value.description.length}/{maxLength}