鸿蒙 ArkTS 实战：Product Cost Card 从商品成本卡到店铺经营工具完整解析

前言

Product Cost Card 是一个基于鸿蒙 ArkTS 与 ArkUI 声明式 UI 实现的店铺经营类单页应用，核心场景是 成本核算与建议售价。

它把 维护材料、包装、物流成本和目标利润率，并计算成本与建议售价 这类高频经营动作，拆成可编辑状态、可点击按钮、可视化卡片和即时结果反馈。

本文围绕项目真实的 Index.ets 源码展开，分析它如何使用 @State 管理页面数据，如何用 TextInput、Button、Row、Grid 和 Scroll 组织移动端界面，以及如何通过少量业务函数完成经营闭环。

图示说明：配图用于说明鸿蒙应用里状态、组件和事件反馈之间的关系，帮助理解本文的代码拆解。

阅读时可以结合 HarmonyOS 应用开发文档、ArkTS 语言基础、ArkUI 声明式开发范式、组件参考 等资料，快速定位 ArkTS、ArkUI 和组件开发相关知识。

店铺经营工具的质量，不只看页面是否好看，更要看一次经营动作能否被准确记录、即时反馈并方便继续追踪。

一、项目定位与经营场景

1.1 业务定位

商品成本卡 聚焦的场景是：维护材料、包装、物流成本和目标利润率，并计算成本与建议售价。

这类工具适合小店、摊位、私域运营、批发报价和预售管理等轻量经营场景。

用户打开页面时，需要立刻看到当前状态，并能用最少步骤完成更新。

1.2 技术定位

项目采用鸿蒙 ArkTS 单页写法，页面内直接声明状态和交互函数。

这种实现方式非常适合 MVP、教学案例和低成本原型验证。

1.3 用户操作闭环

页面的操作闭环可以概括为四步。

1. 查看当前经营数据。
2. 修改商品、客户、价格或计划等字段。
3. 点击按钮触发业务动作。
4. 在当前页面看到数量、状态或文案变化。

二、工程结构与入口页面

2.1 页面文件

项目核心逻辑集中在 Index.ets。

entry/
  src/
    main/
      ets/
        pages/
          Index.ets

这个入口页面同时承担状态声明、事件处理和 UI 渲染。

2.2 组件声明

@Entry
@Component
struct Index {
  build() {
    // 声明式页面结构
  }
}

这是鸿蒙 ArkUI 开发中最基础也最直观的页面结构。

2.3 单页边界

当前版本没有引入本地数据库、远程接口或多页面路由。

它先把单个经营动作做完整，再为后续扩展留下空间。

三、状态模型拆解

3.1 状态字段总览

状态字段	初始值	页面职责
material	18	材料成本
packing	4	包装成本
shipping	6	物流成本
targetRate	35	目标利润率
advice	Calculate product cost and margin.	定价建议

这些字段共同构成了 商品成本卡 的最小业务模型。

3.2 状态语义

material 通常代表页面的主业务对象，advice 则承载数量、结果、状态或反馈。

字段命名直观，是这类小项目可维护性的关键。

3.3 核心源码片段

@State material: string = '18';
@State packing: string = '4';
@State shipping: string = '6';
@State targetRate: string = '35';
@State advice: string = 'Calculate product cost and margin.';

cost(): number {
  return Number(this.material) + Number(this.packing) + Number(this.shipping);
}

price(): number {
  return Math.round(this.cost() * (1 + Number(this.targetRate) / 100));
}

这段代码展示了项目最核心的数据结构和动作函数。

状态变化后，页面中引用这些状态的组件会自动刷新。

四、交互逻辑分析

4.1 交互点总览

交互点	源码行为	业务价值
cost	material、packing、shipping 三项求和	让经营动作立即形成可见结果
price	按 cost 和 targetRate 计算建议售价	让经营动作立即形成可见结果
Price Advice	生成建议售价文案	让经营动作立即形成可见结果

每个交互点都对应一个真实经营动作。

4.2 输入框同步

TextInput 通过 onChange 将用户输入同步到状态。

TextInput({ text: this.material, placeholder: '材料成本' })
  .onChange((v: string) => this.material = v)

这种写法适合字段数量不多、反馈要求快速的页面。

4.3 按钮更新状态

按钮事件通常只做一个明确动作。

Button('Update')
  .width('100%')
  .onClick(() => {
    this.advice = this.material;
  })

动作短，反馈明确，用户就不容易迷路。

五、布局结构分析

5.1 页面布局概览

左侧棕色成本看板实时显示 cost 和 suggest price，右侧表单输入各项成本和利润率。

布局会优先展示核心经营数据，然后再提供编辑和操作入口。

5.2 关键 UI 代码

Column({ space: 8 }) {
  Text('Cost Card').fontSize(24).fontWeight(FontWeight.Bold)
  Text(this.cost().toString()).fontSize(56).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
  Text('suggest ' + this.price()).fontColor('#FEF3C7')
}.width('36%').height('100%').justifyContent(FlexAlign.Center).backgroundColor('#92400E')

这段代码体现了项目最有代表性的视觉结构。

5.3 Scroll 的必要性

经营工具经常包含多个输入字段。

Scroll() {
  Column({ space: 16 }) {
    // 输入区、卡片区、按钮区和结果区
  }
  .padding(20)
  .width('100%')
}

滚动容器能保证小屏设备上的完整可操作性。

六、视觉层级设计

6.1 背景与强调色

当前页面背景色是 #FFFFFF，强调色是 #92400E。

强调色用于突出经营指标、核心卡片或状态提醒。

6.2 信息分区

区域	视觉方式	作用
顶部看板	大字号或高对比背景	快速识别主状态
表单区	输入框	维护经营字段
指标区	Row 或 Grid	展示数量、金额和状态
反馈区	说明文本	复述操作结果

6.3 数字信息突出

库存、销售额、领取数、成本、报价、评分和人数都需要更强视觉权重。

Text(this.count.toString())
  .fontSize(54)
  .fontWeight(FontWeight.Bold)

这样用户可以在移动端快速扫读关键指标。

七、数据计算与边界控制

7.1 自增和扣减

经营工具常见自增字段包括完成数、发送数、导出数、领取数和预售人数。

this.count++;

库存和天数则需要扣减。

this.stock = Math.max(0, this.stock - 1);

7.2 条件判断

新品上架、价保申请和批发报价都依赖条件判断。

const ready = this.score >= 80 && Number(this.cost) < 10;

条件要直接表达业务规则，避免让页面逻辑变得晦涩。

7.3 金额计算

成本、报价和建议售价都需要数字转换。

const n = Number(this.priceText);
const safe = Number.isNaN(n) ? 0 : n;

真实业务中可以进一步处理小数、币种和空值。

八、输入体验优化

8.1 数字输入

价格、成本、退款、数量和定金适合使用数字输入。

TextInput({ text: this.amount, placeholder: 'Amount' })
  .type(InputType.Number)

数字键盘能降低输入错误。

8.2 文本输入

任务、模板、原因、物流、素材和批次适合普通文本输入。

这些字段更偏说明性质，格式不宜限制过死。

8.3 反馈文案

反馈文案应该包含关键字段。

const message = this.material + ' updated: ' + this.advice;

这样用户能确认操作对应的是哪条记录。

九、组件能力映射

9.1 常用组件表

组件	项目用途	特点
Text	展示标题、金额、状态	轻量直接
TextInput	维护业务字段	输入灵活
Button	触发经营动作	行为明确
Row	并列展示指标	适合看板
Grid	展示多个业务卡片	适合概览
Scroll	承载多字段表单	适合小屏

9.2 layoutWeight 使用

Row({ space: 10 }) {
  Text('Main').layoutWeight(2)
  Text('Count').layoutWeight(1)
}

通过权重可以让主信息占更多空间。

9.3 卡片样式

Text('Card')
  .padding(16)
  .backgroundColor('#92400E')
  .borderRadius(8)

卡片化让运营信息更容易被理解和比较。

十、可扩展数据模型

10.1 经营记录对象

interface BusinessRecord {
  id: string;
  title: string;
  status: string;
  count: number;
  updatedAt: number;
}

这个对象可以承载一次经营动作。

10.2 历史列表

@State records: BusinessRecord[] = [];

从单条状态扩展为数组后，页面就能支持历史记录。

10.3 追加记录

this.records = [
  ...this.records,
  {
    id: Date.now().toString(),
    title: this.material,
    status: String(this.advice),
    count: 1,
    updatedAt: Date.now()
  }
];

不可变追加方式有利于 UI 刷新。

十一、本地存储与同步

11.1 持久化必要性

店铺经营数据通常需要长期保存。

拍摄任务、退换记录、价保提醒、报价、收银、优惠券、成本和预售名单都不能只停留在内存中。

11.2 保存结构

interface SavedBusinessState {
  current: BusinessRecord;
  history: BusinessRecord[];
  version: number;
}

version 可以支持后续字段升级。

11.3 同步配置示例

{
  "module": "business",
  "sync": true,
  "retry": 3
}

后续接入后台时，可以基于这个思路扩展同步策略。

十二、调试与验证

12.1 验证状态变化

Button('Debug')
  .onClick(() => {
    console.info('current: ' + this.material);
  })

先确认状态变化，再检查页面展示。

12.2 验证边界条件

场景	风险	处理方式
库存扣减	低于 0	使用 Math.max
评分增加	过高	设置上限
成本计算	输入为空	使用安全数字转换
排期倒计时	低于 0	设置下限

12.3 验证小屏布局

小屏设备上要重点观察输入框、按钮和卡片是否拥挤。

长文本字段适合放入 Scroll 中，避免遮挡操作按钮。

十三、工程化拆分

13.1 抽离指标卡

@Builder
function MetricCard(label: string, value: string, color: string) {
  Column({ space: 6 }) {
    Text(label).fontSize(14).fontColor('#6B7280')
    Text(value).fontSize(20).fontWeight(FontWeight.Bold)
  }
  .padding(16)
  .backgroundColor(color)
  .borderRadius(8)
}

指标卡可以复用到数量、金额、库存、评分和状态展示。

13.2 抽离计算函数

export function toSafeNumber(value: string): number {
  const n = Number(value);
  return Number.isNaN(n) ? 0 : n;
}

报价、成本和退款计算都可以复用它。

13.3 抽离主题

const Theme = {
  pageBg: '#FFFFFF',
  accent: '#92400E',
  radius: 8,
  padding: 20
};

主题配置能让多个经营页面保持统一。

十四、业务扩展方向

14.1 商品素材中心

商品拍摄、修图和详情页素材可以扩展成素材中心。

14.2 订单服务中心

退换货、价保、优惠券和预售可以组成订单服务中心。

14.3 经营分析中心

收银、报价、成本和群发效果可以扩展为经营分析中心。

interface BusinessModule {
  name: string;
  enabled: boolean;
  count: number;
}

十五、发布级技术亮点

15.1 场景具体

商品成本卡 的字段和按钮都围绕 成本核算与建议售价 展开。

读者能从源码直接看到真实经营流程。

15.2 反馈及时

每次点击都会修改一个可见状态。

这让移动端操作更安心。

15.3 扩展自然

当前项目可以继续扩展历史记录、本地持久化、接口同步、数据统计和权限控制。

对店铺经营工具来说，先让一次操作可见、可控、可追踪，再扩展复杂系统，是更稳的工程路线。

十六、总结

Product Cost Card 展示了鸿蒙 ArkTS 在 成本核算与建议售价 场景中的单页工具实现方式。

它用 @State 保存经营数据，用 TextInput 接收输入，用 Button 触发业务动作，再通过卡片、数字和文本反馈结果。

从技术角度看，它覆盖了状态管理、输入绑定、按钮事件、条件判断、数字计算和移动端布局。

从产品角度看，商品成本卡 把 维护材料、包装、物流成本和目标利润率，并计算成本与建议售价 变成了一个可以直接使用的轻量经营工具。

---

相关资源：

• HarmonyOS 应用开发文档
• ArkTS 语言基础
• ArkUI 声明式开发范式