《仿盒马》app开发技术分享-- 首页地址选择&会员码(8)

举报
yd_215151764 发表于 2025/06/30 10:19:19 2025/06/30
【摘要】 ## 技术栈Appgallery connect## **开发准备**上一节我们实现了商品流标的创建,数据的填充和展示,并且在商品信息表中添加了许多我们后去需要使用到的参数。让我们的首页功能更加的丰富,截至目前首页板块可以说是完成了百分之五十了,跟展示有关的基本都已完成,接下来就是我们对业务逻辑的完善,当然了我们的首页内容还缺少很多,这一节我们来把顶部toolbar的地址选择,会员码展示实现...


## 技术栈

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%')

}
}


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

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。