feat: 新增订单详情退款弹窗

pages/order/components/RefundPopup/README.md

@@ -0,0 +1,158 @@
+# 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. 确保组件的可复用性和可扩展性