修改提交

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'