🎯 目标
封装一个通用结果反馈组件 CommonResult
,适用于用户操作完成后的提示页面,例如:
-
操作成功(如“支付成功”、“提交成功”)
-
操作失败(如“审核失败”、“加载异常”)
-
空数据提示(如“暂无订单”、“无搜索结果”)
-
支持插入图标 / 图片 / 说明文字 / 按钮操作
-
样式风格统一,适配表单/流程/订单场景
🧱 交互样式示意
✅ 操作成功
恭喜你,数据已成功提交!
[ 返回首页 ] [ 查看详情 ]
🧰 组件实现:CommonResult.ets
@Component
export struct CommonResult {
@Prop status: 'success' | 'error' | 'empty' = 'success'
@Prop title: string = '操作成功'
@Prop description: string = ''
@Prop icon: string | null = null
@Prop buttons: Array<{ text: string, onClick: () => void }> = []
build() {
const iconMap = {
success: $r('app.media.icon_success'),
error: $r('app.media.icon_error'),
empty: $r('app.media.icon_empty')
}
Column({ space: 12 })
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center