Premium 订阅页：金色渐变 Banner + 权益列表

前言海风日记的 Premium 订阅页面以金色渐变 Banner 展示品牌价值通过权益列表、订阅方案和功能对比表引导用户开通。本文将从PremiumPage.ets源码出发深入讲解订阅页的实现。一、金色渐变 BannerStack({alignContent:Alignment.TopStart}){Column({space:8}){Text().fontSize(44).margin({top:20})Text(海风日记 Premium).fontSize(22).fontColor(#FFFFFF).fontWeight(FontWeight.Bold)Text(解锁全部高级功能让记录更自由).fontSize(13).fontColor(rgba(255,255,255,0.85))}.width(100%).padding({top:44,bottom:28}).alignItems(HorizontalAlign.Center).linearGradient({angle:160,colors:[[#FF8C00,0.0],[COLOR_PRIMARY,0.5],[#FFD47A,1.0]]})Button(){SymbolGlyph($r(sys.symbol.xmark)).fontSize(14).fontColor([#FFFFFF])}.width(30).height(30).borderRadius(15).backgroundColor(rgba(255,255,255,0.25)).margin({top:50,left:16}).onClick(()router.back())}二、权益列表constBENEFITS:BenefitItem[][{icon:☁️,title:无限空间记录,desc:不限容量图文日记随心写,iconBg:#FFF3E0},{icon:,title:数据同步 · 加密保护,desc:多设备实时同步端对端加密,iconBg:#E8F4FF},{icon:,title:自定义日记主题,desc:20 精美主题皮肤,iconBg:#FFF0F8},]ForEach(BENEFITS,(item:BenefitItem,idx:number){Row({space:12}){Text(item.icon).fontSize(22).width(40).height(40).backgroundColor(item.iconBg).borderRadius(10)Column({space:3}){Text(item.title).fontSize(15).fontColor(COLOR_TEXT_MAIN)Text(item.desc).fontSize(12).fontColor(COLOR_TEXT_HINT)}Text(✓).fontSize(16).fontColor(COLOR_PRIMARY)}})三、订阅方案constPLANS:PlanData[][{period:月付,price:¥18,unit:/月,original:,save:,recommend:false},{period:年付,price:¥128,unit:/年,original:¥216/年,save:省 ¥88,recommend:true},]Row({space:10}){ForEach(PLANS,(plan:PlanData,idx:number){Column({space:6}){if(plan.recommend){Text(推荐).fontSize(11).fontColor(#FFFFFF).backgroundColor(COLOR_PRIMARY).padding({left:8,right:8,top:2,bottom:2}).borderRadius({topRight:8,bottomLeft:8}).position({x:100%,y:0}).translate({x:-8,y:-8})}Text(plan.period).fontSize(14)Row(){Text(plan.price).fontSize(26).fontColor(COLOR_PRIMARY).fontWeight(FontWeight.Bold)Text(plan.unit).fontSize(14).fontColor(COLOR_TEXT_HINT)}if(plan.original.length0){Text(plan.original).fontSize(11).fontColor(COLOR_TEXT_HINT).decoration({type:TextDecorationType.LineThrough})}}.border({width:2,color:this.selectedPlanidx?COLOR_PRIMARY:#F0F0F0}).onClick((){this.selectedPlanidx})})}四、功能对比表ForEach([无限日记,云端同步,AI 周报,自定义主题,数据导出],(feature,idx){Row(){Text(feature).fontSize(13).fontColor(COLOR_TEXT_MAIN).layoutWeight(1)Text(idx2?✓:—).fontSize(14).fontColor(idx2?COLOR_SUCCESS:COLOR_TEXT_HINT).width(50)Text(✓).fontSize(14).fontColor(COLOR_PRIMARY).width(70)}})五、总结本文通过海风日记的 Premium 订阅页深入讲解了订阅功能的实现金色渐变 Banner品牌展示权益列表功能亮点订阅方案月付/年付选择功能对比表免费 vs Premium至此第十系列个人中心与设置和第十一系列Premium 与数据管理全部完成下一篇文章开始进入第十二系列高级功能与特殊页面。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源LinearGradient 文档Button 组件文档TextDecorationType 文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区