企业官网建设流程全解析

鸿蒙原生应用 ArkTS 严格模式实战：积分商城我的页签到加积分与徽章墙组合技

App 16「校园积分商城」我的 Tab（ProfileTab），是个人中心页。整页用渐变用户卡片（王积分 + 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 对比：

"个人中心模板"第 3 次完整复用（App 13/14/15/16 四连），等级递进 Lv.4→5→6→7——系列用户的"成长"贯穿 4 个 App（同一套模板下，等级越来越高）。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、UserCard：Lv.7 经验条 + 签到 +20

UserCard 与 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/5000（57%）——等级越高、升级越难（Lv.7 要 5000 经验 vs Lv.5 的 2000）——"升级曲线递增"是游戏化的标准（每级所需经验更多，保持挑战性）。

三、StatRow：4 栏统计（含收藏）

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 列 Grid（4 解锁 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）——"收支双视图"是积分经济模型的完整呈现。

六、MenuList：6 项菜单 + 数字/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 "2"（2 条待发货，呼应兑换页"待发货 2" ✓）
• 🎁 积分任务 — badge "NEW"（新功能引导）

"兑换记录 2"与兑换页统计"待发货 2"呼应——"有 2 个订单等着发货"的待办信号。

菜单语义与商城：地址管理（📍 收货地址）、积分任务（🎁 做任务赚积分——"赚积分入口"）、消息通知（发货提醒）——每个菜单项都服务积分经济闭环。

数字徽标（2）与 NEW 徽标的两种形态（圆形/胶囊）与前几代同构（constraintSize({ minWidth: 18 })正圆三件套）。

七、AboutInfo + @State

AboutInfo 与 App 14/15 同构（"校园积分商城 v1.0.0" + 技术栈 + 版权）。

@State 只有 1 个（checked签到）——"展示页 1 个 @State"模板延续。

4 个 Tab 的 @State 分布：

商品页 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 的游戏化链路（商城版）：

1. 签到 +20 积分（每日激励，全系列最高）→checked翻转
2. 经验条 2860/5000（57%）（长期目标，升级最慢）→ Lv.7 还差 2140
3. 成就墙 4/6（行为勋章）→ 初次兑换/积分达人/抽奖幸运/秒杀高手
4. Lv.7 徽章（顶级身份）→ 系列最高等级

对比系列游戏化：

"签到积分最高 + 等级最高 + 行为勋章"——App 16 是系列游戏化的"完全体"。

十、跨页数据一致性：本系列最完整

App 16 是本系列跨页数据一致性最完整的 App，值得逐一核对：

6 组数据 4 页闭环，全部一致——对比 App 15 的"68% vs 47 次"口径问题，App 16 几乎完美。

"数据一致性"的实现建议（真实项目）：

1. 用户积分：全局 AppStorage（userPoints），各页@StorageProp订阅——首页/我的页同源
2. 商品目录：全局常量表（PRODUCTS），首页/商品页共享
3. 订单状态：后端 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 成为系列的"电商标杆"。