Harmonyos5应用开发实战——VIP会员购买页面实现（part1）

Harmonyos5应用开发实战——VIP会员购买页面实现

文章概要

本文聚焦于HarmonyOS Next平台上VIP会员购买页面的开发实践。详细介绍了该页面的整体布局搭建、交互效果实现以及支付功能的集成，为开发者在HarmonyOS Next环境下构建类似的会员购买页面提供了详细的参考。

核心功能及代码实现

1. 页面布局与交互效果

页面采用了分层布局，包含广告背景、会员套餐列表、协议勾选和订阅按钮等元素。同时，实现了点击关闭按钮时的过渡动画效果。以下是部分关键代码：

@Styles
clickEffectStyle() {
  .transition(TransitionEffect.OPACITY.animation({ duration: 300, curve: Curve.Friction }))
  .onClick(() => {
    animateTo({
      duration: 300,
      curve: Curve.Friction,
      onFinish: () => {
        this.pageRouter.pop();
      }
    }, () => {
      this.heightSize = '0%';
    })
  })
}

build() {
  NavDestination() {
    RelativeContainer() {
      Column({ space: 16 }) {
        Stack({ alignContent: Alignment.Bottom }) {
          Stack({ alignContent: Alignment.TopEnd }) {
            Image($r('app.media.ad_bg'))
              .width('100%')
              .height(240)
              .borderRadius({ topLeft: 24, topRight: 24 })
            Image($r('app.media.ic_cancel'))
              .width(32)
              .height(32)
              .margin({ top: 24, right: 24 })
              .clickEffectStyle()
          }
          // 其他布局元素...
        }
      }
      // 其他布局元素...
    }
  }
  // 其他配置...
}

在上述代码中，clickEffectStyle 定义了点击关闭按钮时的过渡效果，通过 animateTo 函数实现了页面高度的动态变化，并在动画结束后进行页面返回操作。

2. 会员套餐展示与选择

使用 ForEach 组件遍历会员套餐数据，展示不同套餐的标题、折扣价格和原价。用户点击套餐时，会更新当前选中的套餐标题。代码如下：

@Builder
paidPackage(data: PaidPackageItem) {
  Column({ space: 4 }) {
    Text(data.title)
      .fontSize(14)
      .margin({ bottom: 12 })
    Text() {
      Span('￥')
      Span(data.discount)
        .fontSize(24)
    }
    .fontWeight(FontWeight.Bold)

    Text() {
      Span('￥')
        .fontSize(12)
      Span(data.price)
        .fontSize(16)
    }
    .decoration({
      type: TextDecorationType.LineThrough,
      color: Color.Gray
    })
    .fontColor(this.currentTitle === data.title ? '#0a59f7' : Color.Gray)
    .visibility(data.isHidePrice ? Visibility.Hidden : Visibility.Visible)
  }
  .margin(8)
  .width(100)
  .height(120)
  .borderRadius(8)
  .justifyContent(FlexAlign.Center)
  .backgroundColor(this.currentTitle === data.title ? '#f3f7ff' : Color.White)
  .borderWidth(this.currentTitle === data.title ? 2 : 1)
  .borderColor(this.currentTitle === data.title ? '#0a59f7' : '#ffd0d0d0')
}

List() {
  ForEach(this.paidPackageData, (item: PaidPackageItem) => {
    ListItem() {
      this.paidPackage(item)
    }
    .onClick(() => {
      this.currentTitle = item.title;
    })
  })
}

此代码段展示了会员套餐的展示和选择逻辑，根据当前选中的套餐标题动态改变套餐的样式。