鸿蒙 ArkTS 实战：Store Display Check 从业务记录到移动工作台完整解析

鸿蒙 ArkTS 实战Store Display Check 从业务记录到移动工作台完整解析前言Store Display Check 是一个面向门店陈列巡检的鸿蒙 ArkTS 单页应用。它的实现并不追求复杂后台而是把一线业务里最常见的记录、数量统计、备注和完成状态放到一个移动工作台中。项目适用于 零售督导检查门店货架、促销台、陈列照片和整改问题。对于门店督导、区域经理、陈列专员来说核心目标是减少临时纸条、聊天转发和表格补录把当天任务沉淀成可追踪的列表。业务痛点巡店时需要拍照、对比标准陈列并记录整改时限纸质表格很难支持快速回看。图示说明本文围绕 Store Display Check 的页面状态、业务记录、统计卡片和交互闭环展开。一、业务定位与页面目标1.1 解决什么问题巡检工具把区域、检查项数量和整改备注放在同一列表督导可以按完成状态推进复查。 这类小工具的关键不是功能数量而是把一个高频动作做短、做稳、做清楚。1.2 页面能力概览当前页面主要由四部分组成顶部标题确认工具所属业务场景。统计卡片展示Checks与 Done 完成度。业务标签概括页面覆盖的关键环节。表单和列表完成新增、展示、勾选和反馈。页面区域代码元素业务作用标题区Text标识门店陈列巡检场景统计区totalAmount / doneCount统计巡检项与完成度标签区四个能力标签提示业务范围列表区ForEach承载记录闭环二、工程结构与入口文件2.1 目录结构项目采用标准 Stage 工程页面逻辑集中在entry/src/main/ets/pages/Index.ets。这对于工具型应用很合适定位问题时路径短阅读代码时上下文集中。entry/ src/ main/ ets/ entryability/ EntryAbility.ets pages/ Index.ets module.json52.2 入口配置理解页面虽然是业务主体但应用加载依赖模块配置和 Ability 入口。理解这个关系可以避免只看页面代码却找不到运行入口的问题。{module:{name:entry,type:entry,abilities:[{name:EntryAbility,srcEntry:./ets/entryability/EntryAbility.ets,exported:true}]},topic:门店陈列巡检}三、数据模型四个字段完成闭环3.1 记录结构项目使用ToolRecord描述一条业务记录。title表示任务主体amount表示数量口径note保存上下文done表示是否完成。interfaceToolRecord{title:string;amount:number;note:string;done:boolean;}Staterecords:ToolRecord[][{title:Front shelf,amount:4,note:Photo compare done,done:false},{title:Promo table,amount:2,note:Fix issue by Friday,done:false}];3.2 默认记录分析默认记录用于表达项目的真实业务方向同时也能在首次运行时验证统计和列表渲染是否正常。默认标题数量备注完成状态Front shelf4Photo compare donefalsePromo table2Fix issue by Fridayfalse这些默认数据分别触达陈列清单、照片对比、问题整改和巡店报告不是空泛占位。四、状态管理设计4.1 页面状态字段页面把 records、输入框草稿、提醒开关和状态文案都放在State中。它们变化后会驱动 UI 重新渲染适合轻量页面直接管理。StatetitleText:string;StateamountText:string;StatenoteText:string;StatenotifyOn:booleantrue;Statestatus:stringTool workflow ready;4.2 草稿和正式记录分离三个输入框先写入草稿状态只有点击新增并通过校验后才进入 records。这样可以避免用户输入一半时影响正式列表。关键点移动端工具越简单越要保证数据进入列表前经过明确动作和基础校验。五、统计逻辑总量与完成度5.1 总量统计totalAmount()遍历 records把 amount 累加为Checks。它是顶部左侧卡片的数据来源。5.2 完成统计doneCount()统计 done 为 true 的记录数量并与总记录数拼接显示。这个指标能快速反映任务推进情况。privatetotalAmount():number{lettotal0;this.records.forEach((item:ToolRecord){totalitem.amount;});returntotal;}privatedoneCount():number{letcount0;this.records.forEach((item:ToolRecord){if(item.done){count;}});returncount;}函数统计来源页面表现业务意义totalAmountamountChecks掌握巡检项doneCountdoneDone掌握完成进度toggleDoneindex背景变化形成闭环六、新增记录流程6.1 输入校验新增时先把数量转换为数字再判断标题是否为空、数量是否有效。无效输入不会进入正式列表。6.2 顶部插入新增记录通过数组展开放到列表最前面新任务优先展示符合现场处理习惯。privateaddRecord():void{constamountNumber(this.amountText);if(this.titleText.trim().length0||!Number.isFinite(amount)){this.statusEnter title and valid number;return;}this.records[{title:this.titleText,amount:Math.round(amount),note:this.noteText.length0?this.noteText:No note yet,done:false},...this.records];this.titleText;this.amountText;this.noteText;this.statusRecord added;}七、完成状态与刷新机制7.1 勾选完成列表项通过 checkbox 触发完成状态切换。代码修改对应记录后重新展开数组生成新引用从而稳定触发刷新。privatetoggleDone(index:number):void{this.records[index].done!this.records[index].done;this.records[...this.records];}7.2 视觉反馈完成后的记录使用浅绿色背景未完成记录保持白色。对于现场工具来说颜色反馈比长文本提示更高效。记录状态颜色含义未完成#FFFFFF仍需处理已完成#DCFCE7已形成闭环输入异常状态文案需要修正输入八、统计卡片与业务标签8.1 顶部统计卡片统计卡片采用左右布局左侧表示业务总量右侧表示完成比例。这个布局适合快速扫描。Row({space:10}){Column({space:4}){Text(Checks).fontSize(13).fontColor(#475569)Text(String(this.totalAmount())).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.layoutWeight(1).padding(14).backgroundColor(#DBEAFE).borderRadius(8)Column({space:4}){Text(Done).fontSize(13).fontColor(#475569)Text(this.doneCount()/this.records.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#047857)}.layoutWeight(1).padding(14).backgroundColor(#D1FAE5).borderRadius(8)}8.2 业务标签解读四个标签分别是Display list、Photo compare、Fix issue、Visit report。它们帮助用户快速理解工具覆盖的业务范围。陈列清单确认记录对象。照片对比明确执行计划。问题整改处理异常或提醒。巡店报告保留交接依据。九、表单与列表渲染9.1 表单区域表单由标题、数字、备注三个输入框组成配合一个新增按钮完成最短路径录入。Column({space:10}){TextInput({placeholder:Title,text:this.titleText}).onChange((value:string)this.titleTextvalue)TextInput({placeholder:Number,text:this.amountText}).type(InputType.Number).onChange((value:string)this.amountTextvalue)TextInput({placeholder:Note,text:this.noteText}).onChange((value:string)this.noteTextvalue)Button(Add record).height(42).width(100%).onClick(()this.addRecord())}9.2 列表区域列表中每条记录都包含勾选框、标题、备注和数量。信息密度较高但每个字段都有明确位置。ForEach(this.records,(item:ToolRecord,index:number){Row(){Toggle({type:ToggleType.Checkbox,isOn:item.done}).onChange(()this.toggleDone(index))Column({space:6}){Text(item.title).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#111827)Text(item.note).fontSize(14).fontColor(#475569)}.layoutWeight(1).margin({left:8})Text(String(item.amount)).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.padding(14).backgroundColor(item.done?#DCFCE7:#FFFFFF).borderRadius(8).width(100%)})十、业务流程复盘10.1 标准路径Store Display Check 的业务闭环可以拆成四步录入检查区域。填写检查项数量。备注照片和整改要求。复核后勾选完成。10.2 异常路径异常路径主要发生在新增动作前。标题为空或数量非法时列表不写入新数据而是更新状态文案。constamountNumber(this.amountText);constinvalidthis.titleText.trim().length0||!Number.isFinite(amount);if(invalid){this.statusEnter title and valid number;}十一、可扩展设计11.1 模型拆分当业务继续增长时可以把记录模型拆到独立文件并增加 id、时间戳和来源字段。interfacePersistedRecord{id:string;title:string;amount:number;note:string;done:boolean;updatedAt:number;}11.2 行业扩展后续可以接入照片上传、门店评分和整改截止日期提醒。扩展顺序可以保持为增加本地持久化保证数据不因关闭应用丢失。增加行业字段让记录更贴近真实业务。增加导出、提醒或同步能力支撑团队协作。十二、调试与验证12.1 核心验证点验证时重点观察新增记录、统计变化、完成勾选和异常输入四类路径。12.2 运行检查可以在 DevEco Studio 中启动预览或真机运行按业务流程逐项验证交互是否符合预期。# 常规验证动作# 1. 输入标题、数量和备注# 2. 点击 Add record# 3. 检查新记录是否位于顶部# 4. 勾选记录并观察 Done 统计验证项预期结果业务意义有效新增列表顶部新增记录快速追加现场任务空标题显示错误状态拦截无效数据勾选完成统计和背景同步变化完成闭环明确空备注自动写入默认备注记录保持完整十三、可复用的工具应用模式13.1 通用公式这个项目可以抽象为一个通用模式业务对象、数量口径、备注上下文、完成状态。很多线下管理工具都能从这个公式起步。业务对象 数量口径 备注上下文 完成状态 可落地的移动工作台13.2 复用时要注意什么复用时不能只替换标题还要同步调整默认数据、统计文案、功能标签和业务备注否则页面会失去行业可信度。总结Store Display Check 通过简洁的 ArkTS 代码把门店陈列巡检中的高频记录动作整理成移动端工作台。它的核心价值在于让记录可新增、数量可统计、备注可追溯、状态可闭环。对 门店督导、区域经理、陈列专员 来说这种应用能够降低现场沟通成本并把当天任务形成清晰列表。随着持久化、提醒和行业字段补齐它可以继续扩展成更完整的业务工具。如果这篇文章对你有帮助可以点赞、收藏并关注后续会继续拆解更多鸿蒙 ArkTS 实战项目。相关资源HarmonyOS 应用开发ArkTS 语言基础ArkUI 声明式开发DevEco StudioStage 模型应用结构Ability Kit