修改弹窗遮挡

src/components/CommonPopup/index.module.scss

@@ -41,8 +41,6 @@
   }
 
   .common-popup__body {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
     flex: 1 1 auto;
   }
 

src/components/UploadCover/index.tsx

@@ -20,6 +20,7 @@ export type CoverImageValue = {
 
 export interface UploadCoverProps {
   value: CoverImageValue[]
+  changePicker?: (value: boolean) => void
   onChange: (value: CoverImageValue[] | ((prev: CoverImageValue[]) => CoverImageValue[])
 ) => void
   source?: source
@@ -56,6 +57,7 @@ export default function UploadCover(props: UploadCoverProps) {
     maxCount = 9,
     align = 'center',
     tag = 'cover',
+    changePicker
   } = props
 
   const [visible, setVisible] = useState(false)
@@ -82,11 +84,18 @@ export default function UploadCover(props: UploadCoverProps) {
     onChange(value.filter(item => item.id !== image.id))
   }
 
+  const openPicker = (value: boolean) => {
+    setVisible(value)
+    if (changePicker) {
+      changePicker(value)
+    }
+  }
+
   return (
     <>
       <CommonPopup
         visible={visible}
-        onClose={() => setVisible(false)}
+        onClose={() => openPicker(false)}
         round
         position="bottom"
         hideFooter
@@ -115,7 +124,7 @@ export default function UploadCover(props: UploadCoverProps) {
       <UploadSourcePopup tag={tag} ref={uploadSourcePopupRef} onAdd={onAdd} />
       <div className={`upload-cover-root ${value.length === 0 && align === 'center' ? 'upload-cover-act-center' : ''}`}>
         {value.length < maxCount && (
-          <div className="upload-cover-act" onClick={() => setVisible(true)}>
+          <div className="upload-cover-act" onClick={() => openPicker(true)}>
             <Image className='upload-cover-act-icon' src={img.ICON_ADD} />
             <div className="upload-cover-text">添加活动封面</div>
           </div>

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

@@ -36,6 +36,7 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
   const stadiumDetailRef = useRef<StadiumDetailRef>(null)
   const [stadiumList, setStadiumList] = useState<Stadium[]>([])
   const [loading, setLoading] = useState(false)
+  // const [keyboardVisible, setKeyboardVisible] = useState(false);
   const initData = async () => {
     setLoading(true)
     try {
@@ -162,6 +163,9 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
       `<span class="highlight-text">${searchValue}</span>`
     )
   }
+  // const handleAnyInput = (value) => {
+  //   setKeyboardVisible(value)
+  // }
 
   
  
@@ -178,11 +182,13 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
         onCancel={handleDetailCancel}
         onConfirm={handleConfirm}
         position="bottom"
+        //style={{ paddingBottom: keyboardVisible ? `20px` : undefined }}
         round
       >
         <StadiumDetail
           ref={stadiumDetailRef}
           stadium={selectedStadium}
+          //onAnyInput={handleAnyInput}
         />
       </CommonPopup>
     )
@@ -248,7 +254,11 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
               <Loading type="circular" className='loading-icon'>加载中</Loading>
             </View>
           ) : (
-            <ScrollView className='stadium-list' scrollY>
+            <ScrollView className='stadium-list'   
+              scrollWithAnimation
+              enhanced
+              showScrollbar={false}  
+              scrollY>
               {filteredStadiums.map((stadium) => (
                 <View
                   key={stadium.id}
@@ -260,26 +270,26 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
                   </View>
                   <View className='stadium-item-right'>
                     <View className='stadium-name' dangerouslySetInnerHTML={{ __html: markSearchText(stadium.name) }}></View>
-                                      <View className='stadium-address'>
+                    <View className='stadium-address'>
-                    <Text 
+                      <Text 
-                      className='stadium-distance'
+                        className='stadium-distance'
-                      onClick={(e) => { 
+                        onClick={(e) => { 
-                        e.stopPropagation() 
+                          e.stopPropagation() 
-                        handleItemLocation(stadium) 
+                          handleItemLocation(stadium) 
-                      }}
+                        }}
-                    >
+                      >
-                      {calculateDistance(stadium)} · 
+                        {calculateDistance(stadium)} · 
-                    </Text>
+                      </Text>
-                    <Text 
+                      <Text 
-                      className='stadium-address-text'
+                        className='stadium-address-text'
-                      onClick={(e) => { 
+                        onClick={(e) => { 
-                        e.stopPropagation() 
+                          e.stopPropagation() 
-                        handleItemLocation(stadium) 
+                          handleItemLocation(stadium) 
-                      }}
+                        }}
-                    >
+                      >
-                      {stadium.address}
+                        {stadium.address}
-                    </Text>
+                      </Text>
-                    <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
+                      <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
                   </View>
                   </View>
                   

src/publish_pages/publishBall/components/SelectStadium/StadiumDetail.scss

@@ -3,7 +3,6 @@
   background: white;
   display: flex;
   flex-direction: column;
-  overflow-y: scroll;
   padding-bottom: env(safe-area-inset-bottom);
   .stadium-detail-scroll{
     height:72vh;

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

@@ -1,4 +1,4 @@
-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'
@@ -6,6 +6,7 @@ import TextareaTag from '@/components/TextareaTag'
 // import CoverImageUpload, { type CoverImage } from '@/components/ImageUpload'
 import UploadCover, { type CoverImageValue } from '@/components/UploadCover'
 import { useDictionaryActions } from '@/store/dictionaryStore'
+
 import './StadiumDetail.scss'
 
 export interface Stadium {
@@ -25,6 +26,7 @@ export interface Stadium {
 
 interface StadiumDetailProps {
   stadium: Stadium
+  onAnyInput?: (value: boolean) => void
 }
 
 // 定义暴露给父组件的方法接口
@@ -65,7 +67,9 @@ const SectionContainer: React.FC<{ title: string; children: React.ReactNode, pro
 
 const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
   stadium,
+  onAnyInput
 }, ref) => {
+  const [openPicker, setOpenPicker] = useState(false);
   const { getDictionaryValue } = useDictionaryActions()
   const court_type = getDictionaryValue('court_type') || []
   const court_surface = getDictionaryValue('court_surface') || []
@@ -162,11 +166,16 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
   }, [formData.court_type, formData.court_surface])
 
 
+
+   const changePicker = (value) => {
+    setOpenPicker(value)
+   }
+
   console.log(stadium,'stadiumstadium');
   return (
     <View className='stadium-detail'>
-      <ScrollView className='stadium-detail-scroll' scrollY>
+      <ScrollView className='stadium-detail-scroll' scrollY={!openPicker}>
-      {/* 已选球场 */}
+        {/* 已选球场 */}
       <View
         className={`stadium-item`}
         onClick={() => handleMapLocation()}
@@ -209,6 +218,8 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
                 <TextareaTag
                   value={formData[item.prop]}
                   onChange={(value) => updateFormData(item.prop, value)}
+                  // onBlur={() => onAnyInput(false)}
+                  // onFocus={() => onAnyInput(true)}
                   placeholder='有其他场地信息可备注'
                   options={(item.options || []).map((o) => ({ label: o, value: o }))}
                 />
@@ -222,11 +233,10 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
             <SectionContainer key={item.label} title={item.label} prop={item.prop}>
               <UploadCover
                 value={formData[item.prop]}
+                changePicker={changePicker}
                 onChange={(value) => {
-                  console.log(value, 'value')
                   if (value instanceof Function) {
                     const newValue = value(formData[item.prop])
-                    console.log(newValue, 'newValue')
                     updateFormData(item.prop, newValue)
                   } else {
                     updateFormData(item.prop, value)

src/publish_pages/publishBall/index.module.scss

@@ -21,6 +21,9 @@
     overflow: auto;
     padding: 4px 16px 20px 16px;
     box-sizing: border-box;
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   &__content {