158 lines
4.3 KiB
Markdown
158 lines
4.3 KiB
Markdown
# 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. 确保组件的可复用性和可扩展性 |