Harmonyos5应用开发实战——商家详情页组件开发（part2）

3. 商家基本信息展示

展示商家的logo、名称、地址和营业时间等基本信息，并提供拨打电话和查看地图的交互功能。

Row() {
  Row() {
    Image(`${CommonUrl.CLOUD_STORAGE_URL}${this.storeInfo?.logo}`).width(40).height(40).borderRadius(8)
    Column() {
      Text(this.storeInfo?.name)
        .fontSize($r('sys.float.Body_L'))
        .fontWeight(FontWeight.Medium)
        .fontColor($r('sys.color.font_primary'))
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
      Text(this.storeInfo?.address)
        .fontSize($r('sys.float.Body_S'))
        .fontColor($r('sys.color.font_secondary'))
        .constraintSize({ maxWidth: 190 })
        .margin({ top: 2 })
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }.margin({ left: 8 }).alignItems(HorizontalAlign.Start).layoutWeight(1)
  }.layoutWeight(1)

  Row() {
    Image($r('app.media.ic_tel')).width(24)
      .onClick(() => {
        this.callTelSheet = true
      })
      .bindSheet($$this.callTelSheet, CallTelDialogBuilder(this.storeInfo?.tel || '', () => {
        this.callTelSheet = false
      }), {
        height: 309,
        blurStyle: BlurStyle.Thick,
        showClose: false,
      });
    Image($r('app.media.ic_map')).width(24).margin({ left: 12 })
      .onClick(() => {
        let coordinates = this.storeInfo?.coordinates?.split(',')
        if (coordinates?.length === 2) {
          let latitude: number = Number(coordinates[0])
          let longitude: number = Number(coordinates[1])
          this.pageStack.pushPath({
            name: 'HwMap',
            param: { latitude, longitude, storeInfo: this.storeInfo } as HwMapModel,
          })
        } else {
          promptAction.showToast({ message: $r('app.string.store_address_error') })
        }
      })
  }.width(80).justifyContent(FlexAlign.End)
}

4. 商家资质展示

展示商家的营业执照和食品经营许可证图片。

Column() {
  Column() {
    Text($r('app.string.merchant_qualifications'))
      .fontSize($r('sys.float.Body_M'))
      .fontWeight(FontWeight.Medium)
      .fontColor($r('sys.color.font_primary'))
    Grid() {
      GridItem() {
        Image(`${CommonUrl.CLOUD_STORAGE_URL}${this.storeInfo?.dpyyzz}`)
          .width(100)
          .height(70)
          .draggable(false)
          .borderRadius(8)
      }

      GridItem() {
        Image(`${CommonUrl.CLOUD_STORAGE_URL}${this.storeInfo?.spjyxkz}`)
          .width(100)
          .height(70)
          .draggable(false)
          .borderRadius(8)
      }
    }.rowsGap(5).columnsGap(5).maxCount(3).margin({ top: 12 })
  }
  .width(Constants.FULL_SIZE)
  .alignItems(HorizontalAlign.Start)
}.cardStyle()

5. 商家环境展示

如果商家有环境图片，会以网格形式展示，并支持点击图片进行预览。

if (this.storeInfo?.environment) {
  Column() {
    Column() {
      Text($r('app.string.merchant_env'))
        .fontSize($r('sys.float.Body_M'))
        .fontWeight(FontWeight.Medium)
        .fontColor($r('sys.color.font_primary'))
      Grid() {
        ForEach(this.storeInfo?.environment, (item: string) => {
          GridItem() {
            Image(`${CommonUrl.CLOUD_STORAGE_URL}${item}`)
              .width(100)
              .height(70)
              .draggable(false)
              .borderRadius(8)
              .onClick(() => {
                this.pageStack.pushPath({
                  name: 'PreviewImagePage',
                  param: { imageSrc: `${item}` } as ImageRouter,
                })
              })
          }
        }, (item: string) => item)
      }.rowsGap(4).columnsGap(4).maxCount(3).margin({ top: 12 })
    }
    .width(Constants.FULL_SIZE)
    .alignItems(HorizontalAlign.Start)
  }.cardStyle()
}

6. 商家承诺和公告展示

分别展示商家的承诺和公告信息。

// 商家承诺
Column() {
  Text($r('app.string.merchant_commitment'))
    .fontSize($r('sys.float.Body_M'))
    .fontWeight(FontWeight.Medium)
    .fontColor($r('sys.color.font_primary'))
  Row() {
    Text($r('app.string.food_safe'))
      .fontSize($r('sys.float.Body_S'))
      .fontWeight(FontWeight.Medium)
      .fontColor($r('sys.color.font_secondary'))
    Row() {
      Image($r('app.media.ic_store_security')).width(16)
      Text($r('app.string.licensed'))
        .fontSize($r('sys.float.Body_S'))
        .fontColor($r('sys.color.font_secondary'))
        .margin({ left: 4 })
    }.margin({ left: 24 })

    Row() {
      Image($r('app.media.ic_store_security')).width(16)
      Text($r('app.string.worry_free'))
        .fontSize($r('sys.float.Body_S'))
        .fontColor($r('sys.color.font_secondary'))
        .margin({ left: 4 })
    }.margin({ left: 16 })
  }.margin({ top: 12 })

  Row() {
    Text($r('app.string.basic_service'))
      .fontSize($r('sys.float.Body_S'))
      .fontWeight(FontWeight.Medium)
      .fontColor($r('sys.color.font_secondary'))
    Row() {
      Image($r('app.media.ic_store_wifi')).width(16)
      Text($r('app.string.free_wifi'))
        .fontSize($r('sys.float.Body_S'))
        .fontColor($r('sys.color.font_secondary'))
        .margin({ left: 4 })
    }.margin({ left: 24 })

    Row() {
      Image($r('app.media.ic_store_car')).width(16)
      Text($r('app.string.free_parking'))
        .fontSize($r('sys.float.Body_S'))
        .fontColor($r('sys.color.font_secondary'))
        .margin({ left: 4 })
    }.margin({ left: 16 })
  }.margin({ top: 8 })
}.cardStyle().width(Constants.FULL_SIZE).padding(12).alignItems(HorizontalAlign.Start)

// 商家公告
Column() {
  Column() {
    Text($r('app.string.store_announce'))
      .fontSize($r('sys.float.Body_M'))
      .fontWeight(FontWeight.Medium)
      .fontColor($r('sys.color.font_primary'))
    Row() {
      Image($r('app.media.news')).width(16)
      Text(this.storeInfo?.announcement)
        .fontSize($r('sys.float.Body_S'))
        .fontColor($r('sys.color.font_secondary'))
        .layoutWeight(1)
        .margin({ left: 4 })
    }.margin({ top: 12 }).alignItems(VerticalAlign.Top)
  }
  .width(Constants.FULL_SIZE)
  .alignItems(HorizontalAlign.Start)
}.cardStyle()

通过以上步骤，在HarmonyOS 5应用中成功开发了商家详情页组件，实现了商家信息的展示和交互功能。