# RefundPopup 退款弹窗组件

## 组件概述
`RefundPopup` 是一个用于处理订单退款相关操作的弹窗组件，支持多种退款场景和状态展示。

## 功能需求分析

### 界面设计规范
1. **弹窗容器**
   - 使用圆角矩形容器，背景色为白色
   - 弹窗宽度适中，居中显示
   - 支持遮罩层，点击遮罩可关闭弹窗

2. **头部区域**
   - 显示可爱的花朵卡通形象作为视觉元素
   - 卡通形象位于弹窗顶部中央位置

3. **内容区域**
   - 主标题：根据不同场景显示相应提示文字
   - 副标题：显示详细的退款规则和说明
   - 金额显示：突出显示可退金额（橙色字体）
   - 退款政策：详细列出各种退款条件和规则

4. **按钮区域**
   - 双按钮布局：左侧为次要操作，右侧为主要操作
   - 按钮样式：圆角矩形，左侧蓝色，右侧橙色
   - 按钮文字：根据场景显示不同的操作文字

### 交互功能
1. **弹窗显示/隐藏**
   - 支持通过方法调用显示弹窗
   - 支持点击遮罩层关闭弹窗
   - 支持点击按钮后关闭弹窗

2. **退款场景处理**
   - **不予退款场景**：显示"不予退款：12小时以内取消或未入住，不予退款"
   - **免费取消场景**：显示"免费取消：提前48小时以上，全额退还房费"
   - **部分退款场景**：显示退款政策详情和可退金额
   - **商品限制场景**：显示"该商品未使用随时可退"

3. **按钮交互**
   - 左侧按钮："退订政策"或"退订政策"（查看详情）
   - 右侧按钮："我知道了"或"点击退款"（确认操作）
   - 支持按钮点击事件回调

4. **数据展示**
   - 动态显示可退金额
   - 展示详细的退款规则列表
   - 支持不同退款类型的文案切换

### 技术要求
1. **组件架构**
   - 使用 Vue 3 Composition API
   - 支持 TypeScript（可选）
   - 使用 uni-popup 作为弹窗基础组件

2. **样式处理**
   - 使用 SASS 预处理器
   - 支持响应式设计
   - 遵循设计规范的颜色和字体

3. **性能优化**
   - 懒加载弹窗内容
   - 合理使用计算属性
   - 避免不必要的重渲染

4. **代码规范**
   - 清晰的组件结构
   - 详细的注释说明
   - 统一的命名规范

### 样式规范
1. **颜色规范**
   - 主色调：蓝色 #007AFF（左侧按钮）
   - 强调色：橙色 #FF9500（右侧按钮、金额）
   - 文字色：黑色 #000000（主要文字）
   - 辅助色：灰色 #666666（辅助文字）
   - 背景色：白色 #FFFFFF

2. **字体规范**
   - 主标题：16px，加粗
   - 副标题：14px，常规
   - 金额：18px，加粗，橙色
   - 按钮文字：16px，加粗
   - 说明文字：12px，常规

3. **间距规范**
   - 弹窗内边距：20px
   - 元素间距：12px
   - 按钮间距：12px
   - 按钮高度：44px

### 组件接口

#### Props
```typescript
interface RefundPopupProps {
  // 弹窗显示状态
  visible: boolean
  // 退款类型：'no_refund' | 'free_cancel' | 'partial_refund' | 'anytime_refund'
  refundType: string
  // 可退金额
  refundAmount?: number
  // 退款规则列表
  refundRules?: string[]
  // 自定义标题
  title?: string
  // 自定义描述
  description?: string
}
```

#### Events
```typescript
interface RefundPopupEvents {
  // 弹窗关闭事件
  'update:visible': (visible: boolean) => void
  // 查看政策按钮点击
  'policy-click': () => void
  // 确认按钮点击
  'confirm-click': () => void
  // 弹窗关闭事件
  'close': () => void
}
```

#### Methods
```typescript
interface RefundPopupMethods {
  // 显示弹窗
  show(): void
  // 隐藏弹窗
  hide(): void
}
```

### 使用场景
1. **订单详情页面**：用户查看退款政策
2. **退款申请流程**：确认退款操作
3. **客服咨询场景**：展示退款规则
4. **订单管理后台**：处理退款申请

### 文件结构
```
RefundPopup/
├── index.vue          # 主组件文件
├── styles/
│   └── index.scss     # 样式文件
├── demo.vue           # 演示页面
└── README.md          # 组件文档
```

### 开发注意事项
1. 确保弹窗在不同屏幕尺寸下的适配
2. 处理长文本的换行和显示
3. 考虑无障碍访问支持
4. 添加适当的动画效果
5. 确保组件的可复用性和可扩展性