HarmonyOS Next 商品详情页与订单确认功能开发（二）

3. 商品图片轮播

展示商品的多张图片，支持手动切换，并显示当前图片的索引。

@Builder CustomSwiper(payload: string[]) {
  Stack({ alignContent: Alignment.BottomEnd }) {
    Swiper() {
      ForEach(payload, (item: string, index: number) => {
        Flex({ justifyContent: FlexAlign.Center }) {
          Image($rawfile(item))
            .height(StyleConstants.FULL_HEIGHT)
            .aspectRatio(1)
            .objectFit(ImageFit.Cover)
        }
        .margin({
          left: $r('app.float.swiper_image_margin'),
          right: $r('app.float.swiper_image_margin'),
          top: $r('app.float.vp_twenty'),
          bottom: $r('app.float.vp_twenty')
        })
      }, (item: string) => JSON.stringify(item))
    }
    .onChange((index: number) => this.swiperIndex = index)
    .indicator(false)
    .width(StyleConstants.FULL_WIDTH)
    .height(StyleConstants.FULL_HEIGHT)

    Text(`${this.swiperIndex + 1}/${payload.length}`)
      .fontSize($r('app.float.smaller_font_size'))
      .fontColor(Color.White)
      .textAlign(TextAlign.Center)
      .width($r('app.float.swiper_indicator_text_width'))
      .height($r('app.float.vp_eighteen'))
      .backgroundColor($r('app.color.forty_alpha_black'))
      .borderRadius($r('app.float.swiper_indicator_text_radius'))
      .margin({
        right: $r('app.float.vp_sixteen'),
        bottom: $r('app.float.vp_sixteen')
      })
  }
  .width(StyleConstants.FULL_WIDTH)
  .backgroundColor(Color.White)
  .height($r('app.float.swiper_height'))
}

4. 底部菜单功能

底部菜单包含首页、购物车、加入购物车和立即购买按钮，点击相应按钮执行对应操作。

@Builder BottomMenu() {
  Flex({ alignItems: ItemAlign.Center }) {
    Row() {
      Flex({
        direction: FlexDirection.Column,
        justifyContent: FlexAlign.Center,
        alignItems: ItemAlign.Center }) {
        Image($r('app.media.ic_home'))
          .height($r('app.float.button_image_size'))
          .width($r('app.float.button_image_size'))
        Text($r('app.string.index'))
          .fontSize($r('app.float.micro_font_size'))
          .fontColor($r('app.color.sixty_alpha_black'))
          .margin({ top: $r('app.float.vp_four') })
      }
      .onClick(() => {
        AppStorage.set('IndexPage', CommodityConstants.INDEX_HOME);
        this.pageInfos.pop();
      })
      .height(StyleConstants.FULL_HEIGHT)
      .width($r('app.float.button_flex_width'))

      Flex({
        direction: FlexDirection.Column,
        justifyContent: FlexAlign.Center,
        alignItems: ItemAlign.Center
      }) {
        Image($r('app.media.ic_shopping_cart'))
          .height($r('app.float.button_image_size'))
          .width($r('app.float.button_image_size'))
        Text($r('app.string.cart'))
          .fontSize($r('app.float.micro_font_size'))
          .fontColor($r('app.color.sixty_alpha_black'))
          .margin({ top: $r('app.float.vp_four') })
      }.onClick(() => {
        AppStorage.set('IndexPage', CommodityConstants.INDEX_SHOPPING_CART);
        this.pageInfos.pop();
      })
      .height(StyleConstants.FULL_HEIGHT)
      .width($r('app.float.button_flex_width'))
    }
    .height(StyleConstants.FULL_HEIGHT)
    .margin({ right: $r('app.float.vp_eight') })

    CapsuleGroupButton({
      configs: [{
        text: $r('app.string.insert_cart'),
        onClick: ():void => this.bottomBtnClick(FinishType.JOIN_SHOPPING_CART)
      }, {
        text: $r('app.string.buy_now'),
        onClick: ():void => this.bottomBtnClick(FinishType.BUY_NOW)
      }]
    })
  }
  .height($r('app.float.vp_fifty_six'))
  .width(StyleConstants.FULL_WIDTH)
  .padding({ right: $r('app.float.vp_sixteen') })
  .backgroundColor($r('app.color.page_background'))
}

总结

1. 1. 1. 通过上述代码实现，我们在 HarmonyOS Next 中完成了一个完整的商品详情页及订单确认跳转功能。该页面涵盖了商品信息展示、规格选择、用户评价显示、加入购物车和立即购买等功能，同时支持响应式布局，适配不同屏幕尺寸。开发者可以根据实际需求对代码进行扩展和优化，以满足不同应用场景的需求。