Harmonyos5应用开发实战——商品详情页功能实现（part1）

Harmonyos5应用开发实战——商品详情页功能实现

文章内容概要

本文聚焦于HarmonyOS 5应用开发中商品详情页的功能实现。详细介绍了商品详情页如何展示商品信息、处理商品规格选择、计算商品总价以及实现加入购物车等核心功能，同时阐述了不同商品类型（如普通商品、有规格商品、套餐商品）的展示逻辑。

核心功能介绍

1. 页面初始化与参数获取

在页面即将显示时，调用aboutToAppear方法，首先获取路由参数中的商品信息，然后通过getGoodInfoUtil函数获取商品详细信息。若商品有规格，还会进一步获取规格信息并更新商品单价和总价。

aboutToAppear(): void {
  this.getParams();
  getGoodInfoUtil(this.goodInfo?.id).then((resp: Good) => {
    this.goodInfo = resp;
    if (resp.spec?.length && resp.spec?.length > 0) {
      this.goodSpecList = resp.spec ?? [];
      this.selectSpecArr = this.goodSpecList.map((item: GoodSpec) => {
        let goodSpec = item.specVal.find((spec: GoodSpecInfo) => item.specValId === spec.specValId);
        let result: PackageSpec = { specName: goodSpec?.specValName, specNum: Number(goodSpec?.specValNum ?? 1) };
        return result;
      });

      getGoodSpecUtil(this.goodInfo?.id, this.selectSpecArr).then((res) => {
        this.selectSpecInfo = res;
        this.goodSinglePrice = Number(res.money);
        this.sumPrice = `${this.goodSinglePrice * Number(this.goodNum)}`;
      });

    } else {
      this.goodSinglePrice = Number(resp.money);
      this.sumPrice = `${this.goodSinglePrice * Number(this.goodNum)}`;
    }

  });
  this.goodDetails =
    `<meta name="viewport" content="width=device-width, initial-scale=1.0">${this.goodInfo?.details ?? ''}`;
}

getParams() {
  let paramsArr: GoodRouter[] = this.pageStack.getParamByName('GoodDetailPage') as GoodRouter[];
  if (paramsArr.length) {
    let routerParam = paramsArr[paramsArr.length-1];
    this.goodInfo = routerParam?.goodInfo ?? undefined;
  }
}

2. 商品信息展示

根据商品类型（普通商品、有规格商品、套餐商品），采用不同的组件展示商品信息。对于有规格商品，提供规格选择功能；对于套餐商品，展示套餐详情和购买须知。

if (this.goodInfo?.specType === GoodSpecEnum.SPEC_TYPE) {
  this.goodSpecComp();
  this.goodDetailComp();
} else if (this.goodInfo?.specType === GoodSpecEnum.PACKAGE_TYPE) {
  this.goodPkgComp();
} else {
  this.goodDetailComp();
}