修改提交

2025-08-20 23:08:42 +08:00
parent 3a45212737
commit c32c86051c
12 changed files with 197 additions and 28 deletions
--- a/src/components/CommonPopup/CommonPopup.tsx
+++ b/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 
--- a/src/components/CommonPopup/index.module.scss
+++ b/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 样式 */
+  }
+} 
--- a/src/components/CommonPopup/index.ts
+++ b/src/components/CommonPopup/index.ts
@@ -0,0 +1,3 @@
+import CommonPopup from './CommonPopup'
+export default CommonPopup
+export * from './CommonPopup' 
--- a/src/components/FormSwitch/index.scss
+++ b/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);
+        }
      }
    }
    
--- a/src/components/SelectStadium/SelectStadium.tsx
+++ b/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>
  )
 }

--- a/src/components/index.ts
+++ b/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
 }

--- a/src/config/formSchema/publishBallFormSchema.ts
+++ b/src/config/formSchema/publishBallFormSchema.ts
@@ -132,6 +132,7 @@ export const publishBallFormSchema: FormFieldConfig[] = [
    defaultValue: 1,
    props: {
      showSummary: true,
+      summary: '最少1人，最多4人',
    },
    rules: [
      { min: 1, message: '最少参与人数不能为0' },
--- a/src/static/publishBall/icon-arror-small.svg
+++ b/src/static/publishBall/icon-arror-small.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.95825 2.5L6.45825 5L3.95825 7.5" stroke="black" stroke-opacity="0.8" stroke-width="0.833333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/static/publishBall/icon-map-search.svg
+++ b/src/static/publishBall/icon-map-search.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3007_13945)">
+<path d="M9.99391 4.36594C7.99954 4.36594 6.38279 5.92916 6.38279 7.85748C6.38279 9.78581 7.99954 11.349 9.99391 11.349C11.9883 11.349 13.605 9.78581 13.605 7.85748C13.605 5.92916 11.9883 4.36594 9.99391 4.36594ZM8.04946 7.85748C8.04946 6.81916 8.92002 5.97742 9.99391 5.97742C11.0678 5.97742 11.9384 6.81916 11.9384 7.85748C11.9384 8.89581 11.0678 9.73755 9.99391 9.73755C8.92002 9.73755 8.04946 8.89581 8.04946 7.85748Z" fill="#161823"/>
+<path d="M9.99391 0.12085C5.61983 0.12085 1.99391 3.37487 1.99391 7.48174C1.99391 10.0248 3.30858 12.6482 4.75325 14.7855C6.2139 16.9463 7.89112 18.7306 8.7782 19.6186C9.44723 20.2883 10.5406 20.2883 11.2096 19.6186C12.0967 18.7306 13.7739 16.9463 15.2346 14.7855C16.6792 12.6482 17.9939 10.0248 17.9939 7.48174C17.9939 3.37487 14.368 0.12085 9.99391 0.12085ZM3.66059 7.48174C3.66059 4.34799 6.45192 1.73233 9.99391 1.73233C13.5359 1.73233 16.3272 4.34799 16.3272 7.48174C16.3272 9.54311 15.2355 11.8385 13.8394 13.9038C12.4593 15.9456 10.8614 17.6476 10.0108 18.499C9.99861 18.5113 9.98864 18.5107 9.97698 18.499C9.12646 17.6476 7.52851 15.9456 6.14838 13.9038C4.75229 11.8385 3.66059 9.54311 3.66059 7.48174Z" fill="#161823"/>
+</g>
+<defs>
+<clipPath id="clip0_3007_13945">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/static/publishBall/icon-map.svg
+++ b/src/static/publishBall/icon-map.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.0241089 6.74081C0.0241089 3.03705 3.18584 0.102417 6.99996 0.102417C10.8141 0.102417 13.9758 3.03705 13.9758 6.74081C13.9758 9.03423 12.8294 11.4002 11.5697 13.3276C10.2961 15.2764 8.83356 16.8855 8.06004 17.6864C7.47665 18.2904 6.52326 18.2904 5.93988 17.6864C5.16636 16.8855 3.70385 15.2764 2.4302 13.3276C1.17047 11.4002 0.0241089 9.03423 0.0241089 6.74081ZM4.0058 7.08005C4.0058 8.7369 5.34894 10.08 7.0058 10.08C8.66265 10.08 10.0058 8.7369 10.0058 7.08005C10.0058 5.42319 8.66265 4.08005 7.0058 4.08005C5.34894 4.08005 4.0058 5.42319 4.0058 7.08005Z" fill="#161823"/>
+</svg>
--- a/src/static/publishBall/icon-search.svg
+++ b/src/static/publishBall/icon-search.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.75002 15.8334C12.662 15.8334 15.8334 12.662 15.8334 8.75002C15.8334 4.83802 12.662 1.66669 8.75002 1.66669C4.83802 1.66669 1.66669 4.83802 1.66669 8.75002C1.66669 12.662 4.83802 15.8334 8.75002 15.8334Z" stroke="black" stroke-width="1.66667" stroke-linejoin="round"/>
+<path d="M11.1071 5.97629C10.5039 5.37308 9.67057 5 8.75007 5C7.82961 5 6.99627 5.37308 6.39307 5.97629" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.8423 13.8423L17.3779 17.3779" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/static/publishBall/icon-stadium.svg
+++ b/src/static/publishBall/icon-stadium.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08335 5L1.66669 2.5V15L7.08335 17.5L12.9167 15L18.3334 17.5V5L12.9167 2.5L7.08335 5Z" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.9167 2.5V15" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.08331 5V17.5" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.375 3.75L7.08333 5L12.9167 2.5L15.625 3.75" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.375 16.25L7.08333 17.5L12.9167 15L15.625 16.25" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>