## 技术栈

Appgallery connect

## **开发准备**

上一节我们实现了商品流标的创建，数据的填充和展示，并且在商品信息表中添加了许多我们后去需要使用到的参数。让我们的首页功能更加的丰富，截至目前首页板块可以说是完成了百分之五十了，跟展示有关的基本都已完成，接下来就是我们对业务逻辑的完善，当然了我们的首页内容还缺少很多，这一节我们来把顶部toolbar的地址选择，会员码展示实现一下。

## **功能分析**

1.地址选择

地址选择我们需要实现的是省市区街道的选择，当我们点击街道信息后，根据区域的不同，我们可能会调整首页相应的活动板块修改，以及不同模块的展示，比如我们的新人领券活动，我们仅在A区域开展活动，当我们切换的B区域就会关闭相应的功能展示。同时我们下次登陆需要加载上一次选中的地址，要实现这个功能我们还需要把地址信息存储到本地。

2.会员码

会员码这个就比较的简单，我们只需要把条形码跟二维码结合用户的id生成，（因为暂时没有登陆功能，所以我们要模拟一下）在进入页面的时候把条形码加载到页面上即可。

**代码实现**

地址选择

因为鸿蒙中是自带这个组建的，所以我们直接在点击事件中去调用即可

 let districtSelectOptions: sceneMap.DistrictSelectOptions= {

          countryCode: "CN",

          subWindowEnabled: false

        };

        sceneMap.selectDistrict(getContext(this), districtSelectOptions).then((data) => {

          if (data.districts.length>5){

            this.locationName=data.districts[5].name!

          }else {

            this.locationName=data.districts[4].name!

          }

          console.info("SelectDistrict", "Succeeded in selecting district."+data);

        }).catch((err: BusinessError) => {

  });

 然后我们执行一下代码拉起地区选择的页面

然后我们实现会员码页面，这个页面就是一个一维码跟二维码的展示

因为系统不支持直接生成一维码，所以我们用到scankit ，二维码用原生

import { scanCore, generateBarcode } from '@kit.ScanKit';

import { BusinessError } from '@kit.BasicServicesKit';

import { image } from '@kit.ImageKit';

@Entry

@Component

struct QRCodePage {

  @State content: string = '1122334455';

  @State pixelMap: image.PixelMap | undefined = undefined

  aboutToAppear(): void {

    this.pixelMap = undefined;

    let options: generateBarcode.CreateOptions = {

      scanType: scanCore.ScanType.CODE39_CODE,

      height:200,

      width: 400

    }

    try {

      generateBarcode.createBarcode(this.content, options).then((pixelMap: image.PixelMap) => {

        this.pixelMap = pixelMap;

      }).catch((error: BusinessError) => {

      })

    } catch (error) {

    }

  }

  build() {

    Column() {

      Column(){

        if (this.pixelMap) {

          Image(this.pixelMap).width('90%').height(70).objectFit(ImageFit.Fill)

          QRCode(this.content).color(Color.Black).width('90%').height(140)

            .margin({top:20})

        }

      }

      .width('80%')

      .backgroundColor("#ffffff")

      .borderRadius(10)

      .padding(10)

      .alignItems(HorizontalAlign.Center)

      .justifyContent(FlexAlign.Center)

    }

    .backgroundColor("#ffeceaea")

    .width('100%')

    .height('100%')

}

}

这样就实现了对应的内容了