修改提交

src/components/CommonPopup/CommonPopup.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import { Popup, Button } from '@nutui/nutui-react-taro'
+import styles from './index.module.scss'
+
+export interface CommonPopupProps {
+  visible: boolean
+  onClose: () => void
+  title?: React.ReactNode
+  showHeader?: boolean
+  hideFooter?: boolean
+  cancelText?: string
+  confirmText?: string
+  onCancel?: () => void
+  onConfirm?: () => void
+  position?: 'center' | 'bottom' | 'top' | 'left' | 'right'
+  round?: boolean
+  zIndex?: number
+  children?: React.ReactNode
+  className?: string
+}
+
+const CommonPopup: React.FC<CommonPopupProps> = ({
+  visible,
+  onClose,
+  className,
+  title,
+  showHeader = true,
+  hideFooter = false,
+  cancelText = '返回',
+  confirmText = '完成',
+  onCancel,
+  onConfirm,
+  position = 'bottom',
+  round = true,
+  zIndex,
+  children
+}) => {
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel()
+    } else {
+      onClose()
+    }
+  }
+
+  return (
+    <Popup
+      visible={visible}
+      position={position}
+      round={round}
+      closeable={false}
+      onClose={onClose}
+      className={`${styles['common-popup']} ${className ? className : ''}`}
+      style={zIndex ? { zIndex } : undefined}
+    >
+      {showHeader && (
+        <View className={styles['common-popup__header']}>
+          {typeof title === 'string' ? <Text className={styles['common-popup__title']}>{title}</Text> : title}
+        </View>
+      )}
+
+      <View className={styles['common-popup__body']}>
+        {children}
+      </View>
+
+      {!hideFooter && (
+        <View className={styles['common-popup__footer']}>
+          <Button className={`${styles['common-popup__btn']} ${styles['common-popup__btn-cancel']}`} type='default' size='small' onClick={handleCancel}>
+            {cancelText}
+          </Button>
+          <Button className={`${styles['common-popup__btn']} ${styles['common-popup__btn-confirm']}`} type='primary' size='small' onClick={onConfirm}>
+            {confirmText}
+          </Button>
+        </View>
+      )}
+    </Popup>
+  )
+}
+
+export default CommonPopup 

src/components/CommonPopup/index.module.scss

@@ -0,0 +1,49 @@
+@use '~@/scss/themeColor.scss' as theme;
+
+.common-popup {
+  padding: 0;
+  box-sizing: border-box;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  background-color: theme.$page-background-color;
+  .common-popup__header {
+    padding: 12px 16px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2329;
+    border-bottom: 1px solid #f0f1f5;
+  }
+
+  .common-popup__title {
+    display: inline-block;
+  }
+
+  .common-popup__body {
+    padding: 16px;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    flex: 1 1 auto;
+  }
+
+  .common-popup__footer {
+    padding: 12px 16px;
+    display: flex;
+    gap: 12px;
+    border-top: 1px solid #f0f1f5;
+  }
+
+  .common-popup__btn {
+    flex: 1;
+  }
+
+  .common-popup__btn-cancel {
+    background: #f5f6f7;
+    color: #1f2329;
+    border: none;
+  }
+
+  .common-popup__btn-confirm {
+    /* 使用按钮组件的 primary 样式 */
+  }
+} 

src/components/CommonPopup/index.ts

@@ -0,0 +1,3 @@
+import CommonPopup from './CommonPopup'
+export default CommonPopup
+export * from './CommonPopup' 

src/components/FormSwitch/index.scss

@@ -32,13 +32,13 @@
         }
         .info-popover {
           position: absolute;
-          top: 22px;
-          left: 0;
-          width: 50%;
-          padding: 8px 10px;
-          background: rgba(0, 0, 0, 0.85);
+          bottom: 22px;
+          left: -65px;
+          width: 130px;
+          padding:12px;
+          background: rgba(57, 59, 68, 0.90);
           color: #fff;
-          border-radius: 6px;
+          border-radius: 8px;
           font-size: 12px;
           line-height: 1.6;
           z-index: 1001;
@@ -47,6 +47,17 @@
           overflow-wrap: break-word;
           box-shadow: 0 2px 8px rgba(0,0,0,0.15);
         }
+        .info-popover::before {
+          content: '';
+          position: absolute;
+          bottom: -6px;
+          left: 68px; /* 对齐图标（宽12px），可按需微调 */
+          width: 0;
+          height: 0;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top: 6px solid rgba(57, 59, 68, 0.90);
+        }
       }
     }
     

src/components/SelectStadium/SelectStadium.tsx

@@ -3,6 +3,7 @@ import { View, Text, Input, ScrollView } from '@tarojs/components'
 import { Popup } from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 import StadiumDetail from './StadiumDetail'
+import CommonPopup from '../CommonPopup'
 import './SelectStadium.scss'
 
 export interface Stadium {
@@ -133,14 +134,18 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
 
   // 显示球馆列表
   return (
-    <Popup
-      visible={visible}
-      position="bottom"
-      round
-      closeable={false}
-      onClose={handleCancel}
-      className="select-stadium-popup"
-    >
+      <CommonPopup
+        visible={visible}
+        onClose={handleCancel}
+        cancelText="返回"
+        confirmText="完成"
+        className="select-stadium-popup"
+        onCancel={handleCancel}
+        onConfirm={handleListConfirm}
+        position="bottom"
+        round
+      >
+       
       <View className='select-stadium'>
         {/* 搜索框 */}
         <View className='search-section'>
@@ -181,20 +186,8 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
             </View>
           ))}
         </ScrollView>
-
-        {/* 底部按钮 */}
-        <View className='bottom-actions'>
-          <View className='action-buttons'>
-            <View className='cancel-btn' onClick={handleCancel}>
-              <Text className='cancel-text'>取消</Text>
-            </View>
-            <View className='confirm-btn' onClick={handleListConfirm}>
-              <Text className='confirm-text'>完成</Text>
-            </View>
-          </View>
-        </View>
       </View>
-    </Popup>
+    </CommonPopup>
   )
 }
 

src/components/index.ts

@@ -8,6 +8,7 @@ import ParticipantsControl from './ParticipantsControl'
 import { SelectStadium, StadiumDetail } from './SelectStadium'
 import TimeSelector from './TimeSelector'
 import TitleInput from './TitleInput'
+import CommonPopup from './CommonPopup'
 
 export { 
     ActivityTypeSwitch, 
@@ -20,6 +21,7 @@ export {
     SelectStadium, 
     TimeSelector, 
     TitleInput,
-    StadiumDetail
+    StadiumDetail,
+    CommonPopup
 }