修改弹窗遮挡

2025-10-14 23:13:50 +08:00
parent f95353750a
commit d2e051f93a
6 changed files with 60 additions and 31 deletions
--- a/src/components/CommonPopup/index.module.scss
+++ b/src/components/CommonPopup/index.module.scss
@@ -41,8 +41,6 @@
  }

  .common-popup__body {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }

--- a/src/components/UploadCover/index.tsx
+++ b/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>
--- a/src/publish_pages/publishBall/components/SelectStadium/SelectStadium.tsx
+++ b/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'>
-                    <Text 
-                      className='stadium-distance'
-                      onClick={(e) => { 
-                        e.stopPropagation() 
-                        handleItemLocation(stadium) 
-                      }}
-                    >
-                      {calculateDistance(stadium)} · 
-                    </Text>
-                    <Text 
-                      className='stadium-address-text'
-                      onClick={(e) => { 
-                        e.stopPropagation() 
-                        handleItemLocation(stadium) 
-                      }}
-                    >
-                      {stadium.address}
-                    </Text>
-                    <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
+                    <View className='stadium-address'>
+                      <Text 
+                        className='stadium-distance'
+                        onClick={(e) => { 
+                          e.stopPropagation() 
+                          handleItemLocation(stadium) 
+                        }}
+                      >
+                        {calculateDistance(stadium)} · 
+                      </Text>
+                      <Text 
+                        className='stadium-address-text'
+                        onClick={(e) => { 
+                          e.stopPropagation() 
+                          handleItemLocation(stadium) 
+                        }}
+                      >
+                        {stadium.address}
+                      </Text>
+                      <Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
                  </View>
                  </View>
                  
--- a/src/publish_pages/publishBall/components/SelectStadium/StadiumDetail.scss
+++ b/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;
--- a/src/publish_pages/publishBall/components/SelectStadium/StadiumDetail.tsx
+++ b/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)
--- a/src/publish_pages/publishBall/index.module.scss
+++ b/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 {