HarmonyOS7购物车结算页实战：勾选逻辑与金额汇总

发布时间：2026/7/16 9:30:58

HarmonyOS7购物车结算页实战：勾选逻辑与金额汇总 文章目录前言CartItem 同时承担展示和结算信息金额和件数都从 checkedItems 派生全选的判断和动作是两件事单个商品操作都回到 cartItems结算弹窗复用当前合计结果这个示例最值得借的是结算口径完整代码最后总结前言购物车页面最容易出错的地方不是列表怎么画而是“哪些商品参与结算”。用户改数量、取消勾选、全选、删除商品底部合计都要立刻同步。如果金额和勾选状态不同步页面看起来再漂亮也没用。这个示例把购物车的核心闭环写得比较完整商品列表由cartItems驱动结算金额从选中商品派生数量最小值被限制在 1点击结算后弹出一个提交成功的遮罩。它不是完整电商流程但足够用来练购物车里最关键的状态联动。CartItem 同时承担展示和结算信息CartItem_r5tm里既有商品展示字段也有结算字段。name、spec、emoji、shopName负责展示price、qty、checked决定底部金额。interfaceCartItem_r5tm{id:numbername:stringspec:stringprice:numberqty:numberchecked:booleanemoji:stringshopName:string}这里的checked很关键。购物车不是简单把所有商品价格相加而是只统计被选中的商品。把这个状态放在每个商品项里比额外维护一个选中 ID 列表更直观尤其适合教学示例。如果是正式项目我会再补库存、失效状态、优惠信息和店铺维度分组。当前shopName只是展示字段还没有真正把同店铺商品归组。金额和件数都从 checkedItems 派生源码里先通过 getter 拿到选中商品再基于它计算总价和件数。getcheckedItems():CartItem_r5tm[]{returnthis.cartItems.filter(ii.checked)}gettotal():number{returnthis.checkedItems.reduce((s,i)si.price*i.qty,0)}getitemCount():number{returnthis.checkedItems.reduce((s,i)si.qty,0)}旧稿里如果把checkedItems写成普通函数就和源码不一致了。这里它是 getter所以底部直接读this.total、this.itemCount结算弹窗也复用同一套结果。这个结构的好处是数据口径统一列表里无论怎么勾选、改数量、删除商品底部合计和弹窗金额都从cartItems当前状态实时算出来不需要手动维护一个totalPrice状态。全选的判断和动作是两件事allChecked只负责判断当前是否全选toggleAll()才负责改状态。getallChecked():boolean{returnthis.cartItems.every(ii.checked)}toggleAll(){consttoCheck!this.allCheckedthis.cartItemsthis.cartItems.map(i{i.checkedtoCheck;returni})}toggleAll()先取反当前全选状态再把所有商品的checked改成同一个值。这样底部复选框和商品复选框能保持一致。有一个边界值得补充如果cartItems为空every()会返回true。当前示例没有空购物车状态所以看不出来真实项目里要单独处理空列表否则空购物车可能显示成“全选”。单个商品操作都回到 cartItems点击商品前面的勾选框会调用toggleCheck(id)它只翻转对应商品的checked。toggleCheck(id:number){this.cartItemsthis.cartItems.map(i{if(i.idid){i.checked!i.checked}returni})}数量加减走changeQty(id, delta)。这里用了Math.max(1, i.qty delta)保证数量不会减到 0 或负数。changeQty(id:number,delta:number){this.cartItemsthis.cartItems.map(i{if(i.idid){i.qtyMath.max(1,i.qtydelta)}returni})}removeItem(id)目前在源码里实现了但页面上没有绑定删除按钮。也就是说这个函数是扩展点不是当前 UI 已经提供的能力。removeItem(id:number){this.cartItemsthis.cartItems.filter(ii.id!id)}这类地方讲教程时要谨慎函数存在不等于用户已经能操作。当前顶部“编辑”也只是文本没有切换编辑模式。结算弹窗复用当前合计结果点击“去结算”只是把showCheckout改成true并没有真正生成订单或清空购物车。Button(去结算).onClick(()this.showCheckouttrue)弹窗里展示的件数和实付金额依然来自itemCount和total。if(this.showCheckout){Text(共${this.itemCount}件商品)Text(实付金额 ¥${this.total.toFixed(2)})}这意味着如果用户没有选中任何商品当前源码仍然可以弹出“共 0 件商品实付金额 ¥0.00”。正式项目里应该禁用结算按钮或者在点击时判断itemCount 0并给提示。这个示例最值得借的是结算口径我会把这页的核心理解成一句话购物车的主状态只有cartItems其它金额、件数、全选状态都从它推导出来。这个口径一旦稳定UI 怎么换都不容易乱。后续如果扩展成真实购物车优先补空状态、编辑删除、禁用无选中结算、店铺分组和优惠计算。优惠逻辑最好不要塞进total里硬改可以单独拆出商品小计、优惠金额和应付金额避免后面越来越难维护。完整代码下面保留案例完整代码方便你直接对照学习、复制和重构。import{router}fromkit.ArkUIinterfaceCartItem_r5tm{id:numbername:stringspec:stringprice:numberqty:numberchecked:booleanemoji:stringshopName:string}EntryComponentstruct ShoppingCartCheckout{StatecartItems:CartItem_r5tm[][{id:1,name:无线蓝牙耳机 Pro,spec:白色 / 标准版,price:299,qty:1,checked:true,emoji:,shopName:数码旗舰店},{id:2,name:运动水杯 800ml,spec:蓝色 / 不锈钢,price:89,qty:2,checked:true,emoji:,shopName:户外生活馆},{id:3,name:机械键盘 TKL,spec:茶轴 / RGB 背光,price:549,qty:1,checked:false,emoji:⌨️,shopName:外设专营店},{id:4,name:竹制笔记本 A5,spec:深棕色 / 200页,price:35,qty:3,checked:true,emoji:,shopName:文具精品屋},{id:5,name:USB-C 多口充电头,spec:65W / 黑色,price:129,qty:1,checked:true,emoji:,shopName:数码旗舰店},]StateshowCheckout:booleanfalsegetcheckedItems():CartItem_r5tm[]{returnthis.cartItems.filter(ii.checked)}gettotal():number{returnthis.checkedItems.reduce((s,i)si.price*i.qty,0)}getitemCount():number{returnthis.checkedItems.reduce((s,i)si.qty,0)}getallChecked():boolean{returnthis.cartItems.every(ii.checked)}toggleAll(){consttoCheck!this.allCheckedthis.cartItemsthis.cartItems.map(i{i.checkedtoCheck;returni})}changeQty(id:number,delta:number){this.cartItemsthis.cartItems.map(i{if(i.idid){i.qtyMath.max(1,i.qtydelta)}returni})}removeItem(id:number){this.cartItemsthis.cartItems.filter(ii.id!id)}toggleCheck(id:number){this.cartItemsthis.cartItems.map(i{if(i.idid){i.checked!i.checked}returni})}build(){Stack(){Column(){Row(){Image($r(app.media.ic_back)).width(24).height(24).onClick(()router.back())Text(购物车).fontSize(18).fontWeight(FontWeight.Bold).layoutWeight(1).textAlign(TextAlign.Center)Text(编辑).fontSize(14).fontColor(#007AFF)}.width(100%).padding({left:16,right:16,top:12,bottom:12})// Cart itemsList({space:10}){ForEach(this.cartItems,(item:CartItem_r5tm){ListItem(){Column(){// Shop headerRow(){Text().fontSize(14)Text(item.shopName).fontSize(13).fontColor(#555).margin({left:4}).layoutWeight(1)}.width(100%).margin({bottom:8})Row(){// CheckboxText(item.checked?☑:☐).fontSize(22).fontColor(item.checked?#007AFF:#CCC).margin({right:10}).onClick(()this.toggleCheck(item.id))// Item emojiText(item.emoji).fontSize(44).margin({right:12})// InfoColumn(){Text(item.name).fontSize(14).fontColor(#333).fontWeight(FontWeight.Medium)Text(item.spec).fontSize(12).fontColor(#888).margin({top:4})Text(\¥\${item.price}\).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FF4757).margin({top:6})}.layoutWeight(1).alignItems(HorizontalAlign.Start)// Qty controlRow(){Text(−).fontSize(18).width(32).height(32).backgroundColor(#F0F0F0).borderRadius(16).textAlign(TextAlign.Center).lineHeight(32).onClick(()this.changeQty(item.id,-1))Text(\\${item.qty}\).fontSize(14).fontWeight(FontWeight.Bold).width(32).textAlign(TextAlign.Center)Text().fontSize(18).width(32).height(32).backgroundColor(#F0F0F0).borderRadius(16).textAlign(TextAlign.Center).lineHeight(32).onClick(()this.changeQty(item.id,1))}}.width(100%)}.width(100%).backgroundColor(#FFF).borderRadius(14).padding(14).shadow({radius:4,color:#0000001A,offsetY:2})}})}.layoutWeight(1).padding({left:16,right:16,top:4})// Bottom barRow(){Row(){Text(this.allChecked?☑:☐).fontSize(22).fontColor(this.allChecked?#007AFF:#CCC).margin({right:6}).onClick(()this.toggleAll())Text(全选).fontSize(14).fontColor(#333)}Blank()Column(){Text(\合计:¥\${this.total.toFixed(2)}\).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FF4757)Text(\已选 \${this.itemCount}件\).fontSize(12).fontColor(#888)}.alignItems(HorizontalAlign.End).margin({right:12})Button(去结算).backgroundColor(#FF4757).fontColor(#FFF).borderRadius(24).padding({left:24,right:24,top:12,bottom:12}).onClick(()this.showCheckouttrue)}.width(100%).backgroundColor(#FFF).padding({left:16,right:16,top:12,bottom:12}).shadow({radius:8,color:#0000001A,offsetY:-4})}.width(100%).height(100%).backgroundColor(#F5F5F5)// Checkout dialogif(this.showCheckout){Column(){Column(){Text(✅ 订单提交成功).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#2ED573).margin({bottom:8})Text(\共 \${this.itemCount}件商品\).fontSize(14).fontColor(#666).margin({bottom:4})Text(\实付金额 ¥\${this.total.toFixed(2)}\).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FF4757).margin({bottom:20})Button(继续购物).width(160).backgroundColor(#007AFF).fontColor(#FFF).borderRadius(24).onClick(()this.showCheckoutfalse)}.backgroundColor(#FFF).borderRadius(20).padding(28).width(80%).alignItems(HorizontalAlign.Center)}.width(100%).height(100%).backgroundColor(#00000060).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}}}}最后总结购物车结算页 这个案例并不靠复杂技巧取胜它更像一个结构扎实、逻辑完整的业务页面样板。把这篇文章里的状态设计、函数组织和页面分层吃透之后你再去写同类型功能速度会明显快很多。

相关新闻

相关新闻

Hive实战：从汽车销售日志到多维业务洞察的数据仓库构建与分析

Hive实战：从汽车销售日志到多维业务洞察的数据仓库构建与分析

1. 汽车销售日志数据仓库实战背景 当你拿到一份原始的汽车销售日志CSV文件时，第一反应可能是"这堆数据能干嘛"。我刚开始接触汽车行业数据时也这么想，直到用Hive把这些杂乱的数据变成清晰的业务洞察。汽车销售日志通常包含省份、城市、车型、品…

2026/7/16 9:30:58
大模型架构演进年鉴：从Transformer到DeepSeek-V2的工程驱动逻辑

大模型架构演进年鉴：从Transformer到DeepSeek-V2的工程驱动逻辑

1. 这不是一张张“示意图”，而是一份大模型架构的进化年鉴你点开过多少次“大模型架构图”？是不是经常看到那种密密麻麻、堆满箭头和模块框的示意图，标题写着“LLaMA架构”或“GPT-4内部结构”，点进去却只有一张静态图&#xff0c…

2026/7/16 9:30:58
Windows下定制化编译OpenCV：MinGW+CMake进阶配置与疑难排解

Windows下定制化编译OpenCV：MinGW+CMake进阶配置与疑难排解

1. 环境准备与工具安装 在Windows下从源码编译OpenCV需要先搭建完整的工具链。我推荐使用MSYS2作为基础环境，它提供了pacman包管理器和MinGW-w64工具链，能避免很多环境配置的坑。实测MSYS2的MinGW-w64比直接安装的MinGW更稳定，特别是处理Open…

2026/7/16 9:30:58

最新新闻

Locale-Emulator：Windows系统多语言应用兼容性解决方案

Locale-Emulator：Windows系统多语言应用兼容性解决方案

Locale-Emulator：Windows系统多语言应用兼容性解决方案 【免费下载链接】Locale-Emulator Yet Another System Region and Language Simulator 项目地址: https://gitcode.com/gh_mirrors/lo/Locale-Emulator 当Windows用户运行非Unicode程序时，常…

2026/7/16 17:17:03
Ubuntu 22.04 安装 Docker CE 的深度排错与稳定部署指南

Ubuntu 22.04 安装 Docker CE 的深度排错与稳定部署指南

1. 项目概述：为什么在 Ubuntu 22.04 上装 Docker 不是“点几下就完事”的事Docker、ubuntu22、docker-ce——这三个词组合在一起，表面看只是个基础环境搭建任务，但实际踩过的坑远比想象中深。我从 2018 年开始在生产环境大规模部署容器化服务…

2026/7/16 17:17:03
【2026全球AI模型权威榜单】：基于37项基准测试、127家机构实测数据的TOP10硬核排名

【2026全球AI模型权威榜单】：基于37项基准测试、127家机构实测数据的TOP10硬核排名

更多请点击： https://kaifayun.com 第一章：2026全球AI模型权威榜单发布背景与核心方法论 随着大模型技术从“规模驱动”转向“能力-效率-可信”三维协同演进，传统以参数量或基准分数为单一维度的评估体系已难以反映模型在真实场景中的综合价…

2026/7/16 17:17:03
OpenGL缓冲区映射技术：08map_buffer.cpp高效数据传输终极教程

OpenGL缓冲区映射技术：08map_buffer.cpp高效数据传输终极教程

OpenGL缓冲区映射技术：08map_buffer.cpp高效数据传输终极教程 【免费下载链接】OpenGL-Examples A collection of simple single file OpenGL examples 项目地址: https://gitcode.com/gh_mirrors/op/OpenGL-Examples 想要在OpenGL中实现流畅的粒子系统渲染吗…

2026/7/16 17:17:03
AndroidFastScroll完全指南：从基础使用到高级自定义配置

AndroidFastScroll完全指南：从基础使用到高级自定义配置

AndroidFastScroll完全指南：从基础使用到高级自定义配置 【免费下载链接】AndroidFastScroll Fast scroll for Android RecyclerView and more 项目地址: https://gitcode.com/gh_mirrors/an/AndroidFastScroll AndroidFastScroll是一款专为Android应用开发打…

2026/7/16 17:17:03
XMRig NVIDIA编译与构建：从源码到可执行文件的终极指南

XMRig NVIDIA编译与构建：从源码到可执行文件的终极指南

XMRig NVIDIA编译与构建：从源码到可执行文件的终极指南 【免费下载链接】xmrig-nvidia Monero (XMR) NVIDIA miner 项目地址: https://gitcode.com/gh_mirrors/xm/xmrig-nvidia XMRig NVIDIA是一款高性能的Monero（XMR）NVIDIA显卡挖矿软…

2026/7/16 17:12:02

日新闻

遗传算法解5皇后问题：从Hello World到工业优化的进化实验室

遗传算法解5皇后问题：从Hello World到工业优化的进化实验室

1. 项目概述：为什么用遗传算法解5皇后问题，而不是直接回溯？我带过十几届算法课，也给不少初创团队做过AI架构咨询。每次讲到组合优化问题，学生和工程师的第一反应永远是“写个回溯试试”。这没错——55棋盘上找所有合法…

2026/7/16 0:00:10
5.1V稳压管输出为何只有4.7V？工作电流与负载影响分析

5.1V稳压管输出为何只有4.7V？工作电流与负载影响分析

前几天调试一个简单的电源模块，用到了5.1V稳压管。电路接好，上电测试，万用表一量——输出居然只有4.7V。第一反应是稳压管坏了，换了一个新的，结果还是4.7V。这让我想起很多初学者都会遇到的困惑：明明标称5.…

2026/7/16 0:00:10
LMK61E0M DCXO实战：从I2C配置到环路滤波，打造70.656MHz高精度时钟

LMK61E0M DCXO实战：从I2C配置到环路滤波，打造70.656MHz高精度时钟

1. 项目概述与核心价值 在高速数字系统、通信设备乃至精密测量仪器中，一个稳定、纯净且可精确调控的时钟信号，往往是整个系统稳定运行的“心跳”。无论是确保数据在光纤中无误传输，还是让ADC/DAC芯片精准采样，亦或是让多块FPGA板卡…

2026/7/16 0:00:10

周新闻

VSCode TypeScript 环境配置对比：全局安装 vs 项目本地安装的4个关键差异

VSCode TypeScript 环境配置对比：全局安装 vs 项目本地安装的4个关键差异

VSCode TypeScript 环境配置对比：全局安装 vs 项目本地安装的4个关键差异当你在VSCode中启动一个新的TypeScript项目时，第一个技术决策往往从安装方式开始。这个看似简单的选择——全局安装还是项目本地安装——实际上会深刻影响你的开发流程、团队协作和…

2026/7/16 8:27:49
智慧树刷课插件：5分钟实现自动化学习的智能助手

智慧树刷课插件：5分钟实现自动化学习的智能助手

智慧树刷课插件：5分钟实现自动化学习的智能助手 【免费下载链接】zhihuishu 智慧树刷课插件，自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 智慧树刷课插件是一款专为智慧树在线教育平台设计的Chrome浏…

2026/7/16 14:23:39
Steam创意工坊下载器WorkshopDL：跨平台游戏模组获取的终极解决方案

Steam创意工坊下载器WorkshopDL：跨平台游戏模组获取的终极解决方案

Steam创意工坊下载器WorkshopDL：跨平台游戏模组获取的终极解决方案 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 你是否在GOG或Epic Games Store购买了心仪的游戏…

2026/7/16 13:43:10

月新闻