HarmonyOS Next应用开发实战——服务页面功能实现（part2）

3. 扫码功能实现

当用户点击“扫码充电”选项时，调用scanBarcode进行扫码，并处理扫码结果。

Row() {
  ForEach(this.mapShopList, (item: shopInfo, index: number) => {
    Row() {
      ShopItem({ itemData: item })
    }.onClick(() => {
      if (item.title === '扫码充电') {
        // 定义扫码参数options
        let options: scanBarcode.ScanOptions = {
          scanTypes: [scanCore.ScanType.ALL], // 设置扫码类型，默认扫码ALL（全部码类型）
          enableMultiMode: true, // 是否开启多码识别，默认false。
          enableAlbum: true // 是否开启相册，默认true,  此参数只控制默认界面扫码能力中的相册扫码且只支持单码识别。
        };
        try {
          scanBarcode.startScanForResult(getContext(this), options).then((result: scanBarcode.ScanResult) => {
            // 收到扫码结果后返回
            Logger.info('Promise scan result: %{public}s', JSON.stringify(result));
            // 处理扫码结果
            this.showScanResult(result);
          }).catch((error: BusinessError) => {
            Logger.error('Promise error: %{public}s', JSON.stringify(error));
          });
        } catch (error) {
          Logger.error('failReason: %{public}s', JSON.stringify(error));
        }
      }
      if (item.title === '最优站点') {
        this.pageInfos.pushPath({ name: 'OptimalStation' });
      } else if (item.title === '我的充电') {
        this.pageInfos.pushPath({ name: 'MyCharge' });
      }
    })

    if (index !== this.mapShopList.length - 1) {
      Line().LineStyle();
    }
  })
}

4. 处理扫码结果

使用promptAction.showToast显示扫码结果。

async showScanResult(result: scanBarcode.ScanResult) {
  if (result) {
    // 使用toast显示出扫码结果
    try {
      promptAction.showToast({
        message: JSON.stringify(result),
        duration: 5000
      });
    } catch (error) {
      Logger.error('showToast error: %{public}s ', JSON.stringify(error));
    }
  }
}

5. 页面布局搭建

使用Scroll和Column组件搭建页面布局，包含标题、网格菜单、地图组件和服务选项列表。

build() {
  Scroll() {
    Column({ space: CommonConstants.PUBLIC_SPACE  }) {
      Row() {
        Text('服务')
          .fontSize(CommonConstants.MAX_FONT_SIZE)
          .fontWeight(FontWeight.Bold)
          .margin({
            top: CommonConstants.MAIN_MARGIN * 3 / 2,
            left: CommonConstants.M_MAIN_MARGIN * 2
          })
      }
      .width(CommonConstants.COLUMN_WIDTH)
      .height('35%')
      .alignItems(VerticalAlign.Top)

      GridRow({
        columns: 3,
        gutter: 12
      }) {
        GridCol() {
          Row({ space: CommonConstants.S_PUBLIC_SPACE }) {
            Image($r('app.media.grid1'))
              .width(CommonConstants.PIC_WIDTH)
              .height(CommonConstants.PIC_HEIGHT)
            Text('电表申请').fontSize(CommonConstants.S_FONT_SIZE)
          }
          .RowStyle()
        }

        GridCol() {
          Row({ space: CommonConstants.S_PUBLIC_SPACE }) {
            Image($r('app.media.grid2'))
              .width(CommonConstants.PIC_WIDTH)
              .height(CommonConstants.PIC_HEIGHT)
            Text('备件查询').fontSize(CommonConstants.S_FONT_SIZE)
          }
          .RowStyle()
        }

        GridCol() {
          Row({ space: CommonConstants.S_PUBLIC_SPACE }) {
            Image($r('app.media.grid3'))
              .width(CommonConstants.PIC_WIDTH)
              .height(CommonConstants.PIC_HEIGHT)
            Text('金融计算器').fontSize(CommonConstants.S_FONT_SIZE)
          }
          .RowStyle()
        }
      }
      .margin({
        left:CommonConstants.MAIN_MARGIN * 2,
        right:CommonConstants.MAIN_MARGIN * 2
      })

      Flex({
        direction: FlexDirection.Column,
        justifyContent: FlexAlign.SpaceEvenly,
        alignItems: ItemAlign.Auto
      }) {
        Row() {
          Text('充电服务').fontSize(CommonConstants.M_FONT_SIZE)
            .fontWeight(CommonConstants.REGULAR_TEXT_WEIGHT)
        }.margin({ bottom: CommonConstants.MAIN_PADDING,left:15 })

        // 添加地图组件
        Stack() {
          // 调用MapComponent组件初始化地图
          MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback })
            .width(CommonConstants.COLUMN_WIDTH)
            .height(CommonConstants.COLUMN_WIDTH);
        }.height('250vp').margin({ bottom: CommonConstants.MAIN_PADDING })

        Row() {
          ForEach(this.mapShopList, (item: shopInfo, index: number) => {
            Row() {
              ShopItem({ itemData: item })
            }.onClick(() => {
              // 处理点击事件
            })

            if (index !== this.mapShopList.length - 1) {
              Line().LineStyle();
            }
          })
        }
        .width(CommonConstants.COLUMN_WIDTH)
        .justifyContent(FlexAlign.SpaceEvenly)
      }
      .layoutWeight(1)
    }
    .height(CommonConstants.COLUMN_HEIGHT)
  }
  .height(CommonConstants.COLUMN_HEIGHT)
  .scrollBar(BarState.Off)
  .edgeEffect(EdgeEffect.Fade)
  .backgroundImage($r('app.media.service_bg'))
  .backgroundImageSize(ImageSize.Cover)
  .padding({
    top: CommonConstants.MAIN_PADDING + this.topHeight,
    bottom: CommonConstants.MAIN_PADDING,
  })
}

通过以上核心功能的实现，开发者可以在HarmonyOS Next应用中创建一个功能丰富的服务页面。