阅读时长：约 18 分钟　|　难度：★★★★☆　|　篇章：第 10 篇 · 用户中心与会员体系
对应源码：entry/src/main/ets/pages/profile/MembershipPage.ets

前言

会员页是玄象项目的商业化入口。页面展示"月付/年付/终身"三种会员方案，以及免费版与高级版的功能对比表格。本篇将深入剖析玄象项目会员页的实现：从 Plan 方案数据结构、selectedPlan 选中切换、Grid 方案卡片布局，到功能对比表格与支付按钮。掌握这套会员页实现方法论，您就能为任何 HarmonyOS 应用构建标准化的会员订阅页面。

提示：玄象项目会员提供月付 ¥30、年付 ¥198、终身 ¥598 三种方案，年付标有"推荐"标签。

一、会员方案

1.1 方案数据

interface Plan {
  name: string;         // 方案名
  price: number;        // 价格
  originalPrice: number; // 原价
  unit: string;         // 单位
  tag?: string;         // 推荐标签
}

@State selectedPlan: number = 1;
@State plans: Plan[] = [
  { name: '月付', price: 30, originalPrice: 30, unit: '元/月' },
  { name: '年付', price: 198, originalPrice: 360, unit: '元/年', tag: '推荐' },
  { name: '终身', price: 598, originalPrice: 598, unit: '元' }
];

二、方案卡片

2.1 卡片布局

Grid() {
  ForEach(this.plans, (plan: Plan, index: number) => {
    GridItem() {
      Column({ space: 8 }) {
        if (plan.tag) {
          Text(plan.tag).fontSize(10).fontColor(Colors.BG_DARK)
            .backgroundColor(Colors.PRIMARY_GOLD).padding({ left: 8, right: 8, top: 2, bottom: 2 }).borderRadius(8)
        }
        Text(plan.name).fontSize(16).fontColor(Colors.PRIMARY_GOLD)
        Text(`¥${plan.price}`).fontSize(28).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD)
        Text(plan.unit).fontSize(12).fontColor(Colors.TEXT_DIM)
      }
      .padding(16)
      .backgroundColor(index === this.selectedPlan ? '#2A2030' : Colors.BG_CARD)
      .borderRadius(16)
      .border({ width: 1, color: index === this.selectedPlan ? Colors.PRIMARY_GOLD : Colors.BG_CARD_BORDER })
      .onClick(() => { this.selectedPlan = index; })
    }
  })
}
.columnsTemplate('1fr 1fr 1fr')

三、会员页设计总结

3.1 页面结构

总结

本篇以玄象项目会员页为蓝本，深入剖析了 ArkUI 会员订阅页的实现：从 Plan 方案数据结构、selectedPlan 选中切换、Grid 方案卡片布局，到功能对比表格与支付按钮。掌握这套会员页实现方法论，您就能为任何 HarmonyOS 应用构建标准化的会员订阅页面。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net