鸿蒙原生应用 ArkTS 严格模式实战积分商城我的页签到加积分与徽章墙组合技App 16「校园积分商城」我的 TabProfileTab是个人中心页。整页用渐变用户卡片王积分 Lv.7 2860/5000 经验条 可交互签到 20 积分 4 栏统计积分/兑换/收藏/等级 3 列商城成就墙6 徽章 4 解锁 本周积分获取条形图385 积分 6 项菜单兑换记录带数字 2/NEW 角标 AboutInfo 组成。本篇基于16-points-mall/entry/src/main/ets/pages/ProfileTab.ets约 312 行逐段拆解附 4 张实机截图。一、整体结构模板第 4 次复用ProfileTab 与 App 14/15 我的页完全同构6 个 Builder 块、同样布局差异在数据和文案build() { Column() { Scroll() { Column({ space: 14 }) { this.UserCard() this.StatRow() this.AchievementWall() this.WeeklyChart() this.MenuList() this.AboutInfo() } .width(100%) .padding({ left: D.pad, right: D.pad, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }与 App 14/15 对比维度App 14 运动App 15 环保App 16 商城主题色绿 #16A34A绿 #22C55E玫红 #F43F5E用户张运动 Lv.5李环保 Lv.6王积分 Lv.7经验1280/20001860/30002860/5000签到10 积分5 环保积分20 积分成就运动徽章环保徽章商城徽章个人中心模板第 3 次完整复用App 13/14/15/16 四连等级递进 Lv.4→5→6→7——系列用户的成长贯穿 4 个 App同一套模板下等级越来越高。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCardLv.7 经验条 签到 20UserCard 与 App 14/15 同构渐变用户卡 经验条 签到差异在数据Builder UserCard() { Column({ space: 12 }) { Row({ space: 14 }) { Row() { Text().fontSize(32) } .width(60).height(60) .backgroundColor(#FFFFFF).opacity(0.3).borderRadius(30) .justifyContent(FlexAlign.Center) Column({ space: 4 }) { Row({ space: 8 }) { Text(王积分).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Row() { Text(Lv.7).fontSize(10).fontColor(#FFFFFF) } .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .backgroundColor(#FFFFFF).opacity(0.25).borderRadius(8) } Text(积分达人 · 累计 5,120 积分).fontSize(12).fontColor(#FFFFFF).opacity(0.85) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text(编辑).fontSize(12).fontColor(#FFFFFF).opacity(0.85) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .border({ width: 1, color: #FFFFFF }).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 编辑资料 }); }) } .width(100%) Column({ space: 4 }) { Row() { Text(经验值).fontSize(11).fontColor(#FFFFFF).opacity(0.85) Blank() Text(2860 / 5000).fontSize(11).fontColor(#FFFFFF).opacity(0.85) } .width(100%) Progress({ value: 57, total: 100 }) .color(#FFFFFF).backgroundColor(#33FFFFFF) .height(6).borderRadius(3).width(100%) } .width(100%) Row() { Text(this.checked ? ✓ 今日已签到 : 每日签到 20 积分) .fontSize(13).fontColor(#FFFFFF) .layoutWeight(1) Text(this.checked ? 已签到 : 签到) .fontSize(13).fontColor(C.primary) .padding({ left: 16, right: 16, top: 6, bottom: 6 }) .backgroundColor(#FFFFFF).borderRadius(D.rSm) .onClick(() { if (!this.checked) { this.checked true; promptAction.showToast({ message: 签到成功 20 积分 }); } }) } .width(100%) .padding({ left: 12, right: 12, top: 10, bottom: 10 }) .backgroundColor(#33FFFFFF).borderRadius(D.rSm) } .width(100%) .padding(16) .borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }2.1 用户数据头像礼物盒——呼应商城姓名王积分——姓名带积分商城身份等级Lv.7系列最高经验 2860/5000 57%Slogan积分达人 · 累计 5,120 积分——累计积分进 Slogan商城身份 积分资产签到 20 积分App 14 10、App 15 5、App 16 20——签到积分值随产品价值递增商城积分价值最高签到给最多——积分值 产品经济模型参数。2.2 经验 2860/5000 的升级门槛2860/500057%——等级越高、升级越难Lv.7 要 5000 经验 vs Lv.5 的 2000——升级曲线递增是游戏化的标准每级所需经验更多保持挑战性。三、StatRow4 栏统计含收藏StatRow 与 App 14/15 同构负边距悬浮卡private stats: StatItem[] [ { value: 2,860, label: 积分 }, { value: 12, label: 兑换 }, { value: 8, label: 收藏 }, { value: Lv.7, label: 等级 } ];4 栏积分 2,860 / 兑换 12 / 收藏 8 / 等级 Lv.7——收藏 8是商城特有维度收藏的商品数App 14/15 没有。积分 2,860 首页可用积分 2,860✓、兑换 12 首页已兑换 12✓——跨页一致。四、AchievementWall商城成就墙AchievementWall 是 6 个商城徽章的 3 列 Grid4 解锁 2 未解锁private badges: Badge[] [ { id: 1, emoji: , name: 初次兑换, unlocked: true }, { id: 2, emoji: , name: 积分达人, unlocked: true }, { id: 3, emoji: , name: 抽奖幸运, unlocked: true }, { id: 4, emoji: ⚡, name: 秒杀高手, unlocked: true }, { id: 5, emoji: , name: 消费冠军, unlocked: false }, { id: 6, emoji: , name: 至尊会员, unlocked: false } ];6 个徽章覆盖商城全场景初次兑换 首单、积分达人 攒分、抽奖幸运 抽奖、秒杀高手⚡ 秒杀、消费冠军 消费、至尊会员 顶级身份——徽章 商城行为勋章每种商城玩法一个成就。与 App 15 环保徽章的对比App 15 是环保成长阶梯新手→达人→先锋→百科→王者→大使App 16 是商城行为勋章兑换/抽奖/秒杀——App 15 是等级叙事App 16 是行为叙事——成就体系的设计跟随产品行为环保成长商城玩法。解锁/未解锁三件套背景/透明度/文字4/6硬编码与 App 14/15 相同动态计算的建议不变。五、WeeklyChart本周积分获取WeeklyChart 与首页完全同构同一份 barData 385 积分private barData: BarItem[] [ { day: 一, value: 30 }, { day: 二, value: 55 }, { day: 三, value: 40 }, { day: 四, value: 70 }, { day: 五, value: 85 }, { day: 六, value: 60 }, { day: 日, value: 45 } ];本周积分获取 385 积分在首页和我的页完全一致同一份数据——本系列跨页一致性最彻底的 App对比 App 15 的68% vs 47 次口径问题App 16 首页/我的页完全统一。赚积分是商城的收入视图——与兑换页的消耗趋势支出视图呼应首页/我的页看收入385、兑换页看支出-3,700——收支双视图是积分经济模型的完整呈现。六、MenuList6 项菜单 数字/NEW 角标MenuList 与 App 14/15 同构6 项菜单 两种角标数据换成商城主题private menus: MenuItem[] [ { id: 1, emoji: , label: 兑换记录, desc: 查看所有兑换订单, badge: 2 }, { id: 2, emoji: , label: 地址管理, desc: 管理收货地址, badge: }, { id: 3, emoji: ⭐, label: 我的收藏, desc: 收藏的商品, badge: }, { id: 4, emoji: , label: 积分任务, desc: 做任务赚积分, badge: NEW }, { id: 5, emoji: ⚙️, label: 消息通知, desc: 发货提醒设置, badge: }, { id: 6, emoji: , label: 意见反馈, desc: 帮助与反馈, badge: } ];角标编排 兑换记录 — badge 22 条待发货呼应兑换页待发货 2 ✓ 积分任务 — badge NEW新功能引导兑换记录 2与兑换页统计待发货 2呼应——有 2 个订单等着发货的待办信号。菜单语义与商城地址管理 收货地址、积分任务 做任务赚积分——赚积分入口、消息通知发货提醒——每个菜单项都服务积分经济闭环。数字徽标2与 NEW 徽标的两种形态圆形/胶囊与前几代同构constraintSize({ minWidth: 18 })正圆三件套。七、AboutInfo StateAboutInfo 与 App 14/15 同构校园积分商城 v1.0.0 技术栈 版权。State 只有 1 个checked签到——展示页 1 个 State模板延续。4 个 Tab 的 State 分布页面State 数量类型首页1keyword展示搜索商品6productId/quantity/addrId/name/phone/note兑换流程兑换1activeTab筛选我的1checked展示签到商品页 6 个 State 连续两代最多App 15 识别页也是 6 个——流程页状态多、展示页状态少规律稳定。八、积分经济模型的完整呈现App 16 通过 4 个 Tab 完整呈现了积分经济模型【赚】签到 20 / 积分任务 / 抽奖 → 我的页本周 385 ↓ 【存】积分池 → 首页可用 2,860 / 累计 5,120 ↓ 【花】兑换商品 → 商品页单价×数量 消耗 ↓ 【记】订单记录 → 兑换页消耗趋势 -3,700 / 三态物流 ↓ 【再赚】再次兑换 / 签到 → 我的页复购 留存赚 → 存 → 花 → 记 → 再赚五环闭环每个 Tab 承担一环——这是本系列最完整的经济模型演示App 13 音乐是收藏型无经济、App 14 运动是预约型无积分、App 15 环保有积分但闭环较弱App 16 的积分闭环最完整。设计启示积分商城的本质是虚拟经济系统——比商品列表更重要的是赚/花/记的闭环设计。App 16 的 4 个 Tab 各司其职让用户能赚得到、花得出、记得住、再回来。九、游戏化闭环商城版App 16 的游戏化链路商城版签到 20 积分每日激励全系列最高→checked翻转经验条 2860/500057%长期目标升级最慢→ Lv.7 还差 2140成就墙 4/6行为勋章→ 初次兑换/积分达人/抽奖幸运/秒杀高手Lv.7 徽章顶级身份→ 系列最高等级对比系列游戏化App签到积分等级成就主题13 音乐伪签到Lv.4通用14 运动10Lv.5运动15 环保5Lv.6环保成长16 商城20Lv.7商城行为签到积分最高 等级最高 行为勋章——App 16 是系列游戏化的完全体。十、跨页数据一致性本系列最完整App 16 是本系列跨页数据一致性最完整的 App值得逐一核对数据首页商品页兑换页我的页可用积分 2,860✓ HeroCard——✓ 统计累计积分 5,120✓ HeroCard——✓ Slogan已兑换 12✓ HeroCard—✓ 总兑换✓ 统计385 积分✓ 趋势图——✓ 周图蓝牙耳机 800✓ 商品卡✓ 商品 Grid✓ 记录—待发货 2——✓ 统计✓ 菜单角标6 组数据 4 页闭环全部一致——对比 App 15 的68% vs 47 次口径问题App 16 几乎完美。数据一致性的实现建议真实项目用户积分全局 AppStorageuserPoints各页StorageProp订阅——首页/我的页同源商品目录全局常量表PRODUCTS首页/商品页共享订单状态后端 API兑换页实时拉取**数据源唯一 各页视图**是本系列反复强调的架构原则App 16 是执行最彻底的示范。十一、积分商城的防刷与风控积分商城有虚拟资产属性风控是真实产品的必修课1. 签到防刷checked 日期持久化每日一次服务端记录lastCheckInDate——跨天重置。2. 兑换防刷数量上限quantity ≤ 10——防止一次清空积分池频次限制如每天最多换 5 单同 IP/设备风控异常高频兑换触发人工审核3. 库存一致性并发兑换同一商品最后 1 件——数据库行锁/乐观锁UPDATE ... WHERE stock 0影响行数判断防止超卖淘宝双 11的经典问题。4. 积分来源审计每条积分变动记录来源签到/任务/抽奖支持对账——积分流水是风控的数据基础。虚拟资产 风控重点——demo 展示的是兑换流程真实项目要加防刷三层客户端限制 服务端校验 数据一致性。从 demo 到产品的差距一半在风控。十二、收藏与地址的资产沉淀我的页有 2 个统计项收藏 8和菜单项地址管理它们共同构成积分商城的用户资产沉淀收藏8 个商品——用户看中但没换的商品列表。收藏的价值① 积分不够时先收藏够了回来换延迟转化② 收藏数据可做推荐你收藏的蓝牙耳机降价了③ 收藏 兴趣信号推送相似商品。收藏是电商的转化蓄水池——真实项目的收藏应支持收藏 → 兑换一键跳转商品页带收藏状态标识。地址管理3 个地址——收货地址是电商的基础设施。地址的价值① 免输入下单直接选② 多地址覆盖场景宿舍/教学楼/自取③ 默认地址优先。真实项目的地址管理应支持增删改本页只有选择无管理页——地址管理菜单项跳转的应是完整的地址 CRUD 页面。收藏 地址 积分三类资产共同构成用户的商城资产包——我的页是这三类资产的管理入口。资产沉淀是商城区别于一次性消费的关键——用户攒了积分、收藏了商品、存了地址就不会轻易离开。十三、小结App 16「校园积分商城」我的页解析完毕。Lv.7 积分达人 积分经济五环闭环 收支双视图 商城成就墙让 App 16 成为系列的电商标杆。