鸿蒙原生应用 ArkUI 实战：保修信息卡 + 售后电话列表 —— 保修页的时间与渠道双查询架构
鸿蒙原生应用 ArkUI 实战：保修信息卡 + 售后电话列表 —— 保修页的时间与渠道双查询架构
App 53「保修期管理」保修页（Func2Tab），主题色
#00A862生态绿，4 个 Tab 分别为首页（🔧）、商品（📦）、保修（⏰）、我的（👤）。本篇基于53-warranty-mgr/entry/src/main/ets/pages/Func2Tab.ets（共 100 行）逐段拆解，附 4 张实机截图。
一、整体结构：三区"Header + 保修卡 + 售后列表"布局
保修页是"商品保修 + 售后联系"的组合布局——3 个 @Builder 块：
build() {
Column() {
this.Header()
Scroll() {
Column({ space: 14 }) {
this.WarrantyCard()
this.SectionTitle('售后服务')
this.ServiceList()
}
.width('100%')
.padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad + this.safeBottom + 20 })
}
.layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
}
.width('100%').height('100%').backgroundColor(C.bg)
}
3 块结构：WarrantyCard（保修信息卡）→ SectionTitle（售后服务）→ ServiceList（4 条售后电话）。保修页是"信息查询页"——先看当前商品（iPhone 15 Pro）的保修状态（还有 45 天），再看售后渠道（4 个服务电话）。"保修还剩多久" + "坏了找谁" 是本页回答的两个核心问题，保修卡管"时间"、售后列表管"渠道"。
二、Header：单行标题
Header() {
Row() { Text('保修信息').fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) }
.width('100%').height(this.safeTop + 56).padding({ top: this.safeTop, left: D.pad, right: D.pad })
.backgroundColor(C.card).alignItems(VerticalAlign.Bottom)
}
20 号加粗（首页 22 号、功能页 20 号——字号差体现页面层级）、safeTop + 56 固定高、文字贴底。"保修信息"是名词型标题（信息展示页），与商品页"添加商品"（动作型标题）形成对比——动作页用动词、信息页用名词。
三、WarrantyCard：保修信息卡
WarrantyCard() {
Column({ space: 12 }) {
Row({ space: 12 }) {
Text('📱').fontSize(36)
Column({ space: 4 }) {
Text('iPhone 15 Pro').fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text)
Text('型号: A2896').fontSize(12).fontColor(C.textDim)
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
}.width('100%')
Divider().color(C.stroke).strokeWidth(0.5)
Row() {
Column({ space: 4 }) {
Text('购买日期').fontSize(11).fontColor(C.textDim)
Text('2025-09-30').fontSize(13).fontColor(C.text)
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Column({ space: 4 }) {
Text('到期日期').fontSize(11).fontColor(C.textDim)
Text('2026-09-30').fontSize(13).fontColor(C.text)
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Column({ space: 4 }) {
Text('剩余').fontSize(11).fontColor(C.textDim)
Text('45 天').fontSize(13).fontWeight(FontWeight.Bold).fontColor(C.warn)
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
}.width('100%')
}
.width('100%').padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke })
}
逐点拆解：
- 上区：商品标识——36 号 📱 大图标 + 16 号 Bold 商品名（iPhone 15 Pro）+ 12 号淡灰"型号: A2896"，标识"这张保修卡属于谁"。
- 0.5 细 Divider 分区：
Divider().color(C.stroke).strokeWidth(0.5)——上区（商品标识）与下区（时间信息）用细线分隔，比留白分隔更正式。 - 下区：三列时间信息：购买日期 2025-09-30 / 到期日期 2026-09-30 / 剩余 45 天——三列
layoutWeight(1)均分，11 号淡灰标签 + 13 号值；"剩余"列是唯一强调项（Bold + 橙色 warn），其余两列为中性灰。 - 时间线自洽：购买 2025-09-30 → 到期 2026-09-30 = 整整一年保修（与商品页"1年"期限选项对应），当前视角剩余 45 天（与首页 iPhone 45 天完全一致）。
- 橙色警示：剩余天数用
C.warn（#FF9F1C橙）而非 ok 绿——45 天虽然 > 30 天阈值（在保），但接近临界，用橙色提示"快了"。
四、Service 数据模型 + SectionTitle
interface Service {
id: number;
emoji: string;
title: string;
phone: string;
}
private services: Service[] = [
{ id: 1, emoji: '🍎', title: 'Apple 官方售后', phone: '400-666-8800' },
{ id: 2, emoji: '📱', title: '小米之家服务', phone: '400-100-5678' },
{ id: 3, emoji: '💻', title: '华为客户服务', phone: '400-830-8300' },
{ id: 4, emoji: '🔧', title: '第三方维修点', phone: '021-1234567' }
];
Service 四字段：emoji（品牌图标）、title（服务名）、phone（电话）。4 条售后覆盖 Apple/小米/华为三大厂商 + 第三方维修点——"官方 + 第三方"两类维修渠道（官方贵但保真、第三方便宜但需甄别）。
SectionTitle(title: string) {
Row() { Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text) }.width('100%')
}
与首页 SectionTitle 不同——保修页的 SectionTitle 没有"全部 >"入口（纯标题），因为售后列表是固定的全局服务，不需要"查看全部"。
五、ServiceList：售后电话列表
ServiceList() {
Column({ space: 10 }) {
ForEach(this.services, (s: Service) => {
Row({ space: 12 }) {
Text(s.emoji).fontSize(24)
Column({ space: 3 }) {
Text(s.title).fontSize(14).fontColor(C.text)
Text(s.phone).fontSize(12).fontColor(C.textDim)
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('📞').fontSize(18).onClick(() => { promptAction.showToast({ message: '呼叫 ' + s.phone }); })
}
.width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
}, (s: Service) => s.id.toString())
}.width('100%')
}
逐点拆解：
- 左 emoji + 中信息 + 右呼叫：24 号 emoji（🍎📱💻🔧）+ 14 号服务名 + 12 号淡灰电话（
layoutWeight(1)撑开）+ 右侧 18 号 📞——一行三要素（品牌标识/服务信息/呼叫动作）。 - 📞 呼叫交互：仅右侧 📞 可点击（
onClick在 Text 上）——整卡不响应点击、只有电话图标可点，避免误触（与首页整卡可点的设计不同），"电话"动作被精确限定在图标上。 - 呼叫 Toast：点击弹"呼叫 400-666-8800"——产品化后调
call.makeCall(phone)直接拨号。 - 列表结构：4 条卡片
space(10)垂直排列，每条padding(14)+ 白底描边——与首页商品列表同款卡片范式。
六、跨页数据自洽：保修信息的全局闭环
Text('45 天').fontSize(13).fontWeight(FontWeight.Bold).fontColor(C.warn)
{ id: 1, emoji: '📱', name: 'iPhone 15 Pro', daysLeft: 45, expired: false },
保修卡"iPhone 15 Pro / 剩余 45 天"与首页列表第一条"📱 iPhone 15 Pro 45 天"完全一致——同一件商品、同一个剩余天数。保修卡"购买 2025-09-30 / 到期 2026-09-30"对应商品页"购买日期 + 1年期限"——录入参数 → 保修卡展示的时间线闭环。
七、系列横向对比：信息查询页的两种形态
| 查询页 | 代表 App | 信息对象 | 核心动作 | 主题色 |
|---|---|---|---|---|
| 保修 + 售后 | App 53 保修 | 时间 + 渠道 | 📞 呼叫 | #00A862 生态绿 |
| 通讯录 | App 46 通讯录 | 联系人 + 状态 | 呼叫/发消息 | #0984E3 亮蓝 |
| 票据分类 | App 52 分类 | 类别 + 金额 | 查看明细 | #0066CC 科技蓝 |
差异点：App 53 与 46 都含"呼叫"动作，但信息对象不同——46 联系的是人（同学），53 联系的是服务（售后点）。53 的差异化在于**"保修卡 + 售后"的上下组合**——先看"还有多久保修"（时间维度），再看"坏了找谁"（渠道维度），两个问题一屏内连续给出。
八、开发者视角：调试与验证技巧
- 剩余天数动态计算：当前"45 天"是写死的——产品化必须
到期日 - 今日实时计算，且每天变化（过一天少一天）；同时颜色也要随天数变化（>30 天绿、≤30 天橙、≤0 红），与首页三态逻辑统一。 - 电话格式统一：官方客服是 400 开头 10 位、第三方是区号 + 7 位——产品化应统一电话校验格式，并支持
call.makeCall真机拨号（需要 ohos.permission 权限处理）。 - Divider 分区 vs 留白分区：保修卡用细 Divider 区分上下区——Divider 适合"信息相关但需分隔"的场景（同卡分区），若信息完全无关则用独立卡片更清晰。
- 点击热区：📞 图标
onClick只覆盖图标区域（约 18×18）——真机上手点面积偏小，产品化建议用 44×44 的最小可点区域包裹（点击热区放大），符合无障碍点击规范。
九、演进方向
| 方向 | 当前状态 | 产品化演进 |
|---|---|---|
| 商品切换 | 固定 iPhone | 从首页列表点击进入，保修卡跟随选中商品 |
| 天数实时 | 硬编码 45 天 | 到期日 - 今日 动态计算，颜色随天数变化 |
| 真机拨号 | Toast"呼叫" | call.makeCall(phone) + 电话权限申请 |
| 在线查询 | 本地数据 | 接入厂商官方接口，序列号查询保修期 |
| 维修预约 | 仅电话 | 在线预约（选门店/时间/维修类型） |
十、一句话总结
保修页以"保修信息卡 + 售后电话列表"完成了保修信息的双查询。Divider 细线分区保修卡上下两区（商品标识 + 三列时间信息）、C.warn 橙色强调剩余天数、📞 图标精确点击（整卡不响应、仅图标可点）、4 条售后覆盖"官方 + 第三方"两类渠道——100 行代码，一个"看剩余天数 → 找售后电话 → 一键呼叫"的保修查询页，也是"时间 + 渠道"双信息页的标准范式。
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
0
0- 0
已为社区贡献388条内容
所有评论(0)