RefundPopup 退款弹窗组件
组件概述
RefundPopup 是一个用于处理订单退款相关操作的弹窗组件，支持多种退款场景和状态展示。
功能需求分析
界面设计规范
-
弹窗容器
- 使用圆角矩形容器，背景色为白色
- 弹窗宽度适中，居中显示
- 支持遮罩层，点击遮罩可关闭弹窗
-
头部区域
- 显示可爱的花朵卡通形象作为视觉元素
- 卡通形象位于弹窗顶部中央位置
-
内容区域
- 主标题：根据不同场景显示相应提示文字
- 副标题：显示详细的退款规则和说明
- 金额显示：突出显示可退金额（橙色字体）
- 退款政策：详细列出各种退款条件和规则
-
按钮区域
- 双按钮布局：左侧为次要操作，右侧为主要操作
- 按钮样式：圆角矩形，左侧蓝色，右侧橙色
- 按钮文字：根据场景显示不同的操作文字
交互功能
-
弹窗显示/隐藏
- 支持通过方法调用显示弹窗
- 支持点击遮罩层关闭弹窗
- 支持点击按钮后关闭弹窗
-
退款场景处理
- 不予退款场景：显示"不予退款：12小时以内取消或未入住，不予退款"
- 免费取消场景：显示"免费取消：提前48小时以上，全额退还房费"
- 部分退款场景：显示退款政策详情和可退金额
- 商品限制场景：显示"该商品未使用随时可退"
-
按钮交互
- 左侧按钮："退订政策"或"退订政策"（查看详情）
- 右侧按钮："我知道了"或"点击退款"（确认操作）
- 支持按钮点击事件回调
-
数据展示
- 动态显示可退金额
- 展示详细的退款规则列表
- 支持不同退款类型的文案切换
技术要求
-
组件架构
- 使用 Vue 3 Composition API
- 支持 TypeScript（可选）
- 使用 uni-popup 作为弹窗基础组件
-
样式处理
- 使用 SASS 预处理器
- 支持响应式设计
- 遵循设计规范的颜色和字体
-
性能优化
- 懒加载弹窗内容
- 合理使用计算属性
- 避免不必要的重渲染
-
代码规范
- 清晰的组件结构
- 详细的注释说明
- 统一的命名规范
样式规范
-
颜色规范
- 主色调：蓝色 #007AFF（左侧按钮）
- 强调色：橙色 #FF9500（右侧按钮、金额）
- 文字色：黑色 #000000（主要文字）
- 辅助色：灰色 #666666（辅助文字）
- 背景色：白色 #FFFFFF
-
字体规范
- 主标题：16px，加粗
- 副标题：14px，常规
- 金额：18px，加粗，橙色
- 按钮文字：16px，加粗
- 说明文字：12px，常规
-
间距规范
- 弹窗内边距：20px
- 元素间距：12px
- 按钮间距：12px
- 按钮高度：44px
组件接口
Props
interface RefundPopupProps {
// 弹窗显示状态
visible: boolean
// 退款类型：'no_refund' | 'free_cancel' | 'partial_refund' | 'anytime_refund'
refundType: string
// 可退金额
refundAmount?: number
// 退款规则列表
refundRules?: string[]
// 自定义标题
title?: string
// 自定义描述
description?: string
}
Events
interface RefundPopupEvents {
// 弹窗关闭事件
'update:visible': (visible: boolean) => void
// 查看政策按钮点击
'policy-click': () => void
// 确认按钮点击
'confirm-click': () => void
// 弹窗关闭事件
'close': () => void
}
Methods
interface RefundPopupMethods {
// 显示弹窗
show(): void
// 隐藏弹窗
hide(): void
}
使用场景
- 订单详情页面：用户查看退款政策
- 退款申请流程：确认退款操作
- 客服咨询场景：展示退款规则
- 订单管理后台：处理退款申请
文件结构
RefundPopup/
├── index.vue # 主组件文件
├── styles/
│ └── index.scss # 样式文件
├── demo.vue # 演示页面
└── README.md # 组件文档
开发注意事项
- 确保弹窗在不同屏幕尺寸下的适配
- 处理长文本的换行和显示
- 考虑无障碍访问支持
- 添加适当的动画效果
- 确保组件的可复用性和可扩展性