《仿盒马》app开发技术分享-- 地址管理页(24)

举报
yd_215151764 发表于 2025/06/30 10:27:21 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了个人信息页面的信息展示和页面修改,并且实现了数据的同步修改,这一节我们来实现电商应用里比较重要的模块,地址模块。首先我们来实现地址的展示。## 功能分析地址列表的展示相对来说是比较简单的,首先我们要新增对应的表,然后在云端先添加几条测试数据,然后在页面中实现当前用户对应的地址查询,在列表组件中进行展示## 代码实现...


## 技术栈

Appgallery connect
## 开发准备
上一节我们实现了个人信息页面的信息展示和页面修改,并且实现了数据的同步修改,这一节我们来实现电商应用里比较重要的模块,地址模块。首先我们来实现地址的展示。

## 功能分析
地址列表的展示相对来说是比较简单的,首先我们要新增对应的表,然后在云端先添加几条测试数据,然后在页面中实现当前用户对应的地址查询,在列表组件中进行展示

## 代码实现

首先我们创建对应的表
{
  "objectTypeName": "address_list",
  "fields": [
    {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
    {"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
    {"fieldName": "administrativeArea", "fieldType": "String"},
    {"fieldName": "locality", "fieldType": "String"},
    {"fieldName": "subLocality", "fieldType": "String"},
    {"fieldName": "placeName", "fieldType": "String"},
    {"fieldName": "latitude", "fieldType": "String"},
    {"fieldName": "longitude", "fieldType": "String"},
    {"fieldName": "nikeName", "fieldType": "String"},
    {"fieldName": "phone", "fieldType": "String"},
    {"fieldName": "address", "fieldType": "String"}
  ],
  "indexes": [
    {"indexName": "field1IndexId", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
  ],
  "permissions": [
    {"role": "World", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
  ]
}
然后我们生成对应的实体类,和db类

db
import { cloudDatabase } from '@kit.CloudFoundationKit';

class address_list extends cloudDatabase.DatabaseObject {
  public id: number;
  public user_id = 0;
  public administrativeArea: string;
  public locality: string;
  public subLocality: string;
  public placeName: string;
  public latitude: string;
  public longitude: string;
  public nikeName: string;
  public phone: string;
  public address: string;

  public naturalbase_ClassName(): string {
    return 'address_list';
  }
}

export { address_list };
实体类

class AddressList {
    id: number;
    user_id: number = 0;
    administrativeArea: string;
    locality: string;
    subLocality: string;
    placeName: string;
    latitude: string;
    longitude: string;
    nikeName: string;
    phone: string;
    address: string;

    constructor() {
    }

    
    setId(id: number): void {
        this.id = id;
    }

    getId(): number  {
        return this.id;
    }

    setUser_id(user_id: number): void {
        this.user_id = user_id;
    }

    getUser_id(): number  {
        return this.user_id;
    }

    setAdministrativeArea(administrativeArea: string): void {
        this.administrativeArea = administrativeArea;
    }

    getAdministrativeArea(): string  {
        return this.administrativeArea;
    }

    setLocality(locality: string): void {
        this.locality = locality;
    }

    getLocality(): string  {
        return this.locality;
    }

    setSubLocality(subLocality: string): void {
        this.subLocality = subLocality;
    }

    getSubLocality(): string  {
        return this.subLocality;
    }

    setPlaceName(placeName: string): void {
        this.placeName = placeName;
    }

    getPlaceName(): string  {
        return this.placeName;
    }

    setLatitude(latitude: string): void {
        this.latitude = latitude;
    }

    getLatitude(): string  {
        return this.latitude;
    }

    setLongitude(longitude: string): void {
        this.longitude = longitude;
    }

    getLongitude(): string  {
        return this.longitude;
    }

    setNikeName(nikeName: string): void {
        this.nikeName = nikeName;
    }

    getNikeName(): string  {
        return this.nikeName;
    }

    setPhone(phone: string): void {
        this.phone = phone;
    }

    getPhone(): string  {
        return this.phone;
    }

    setAddress(address: string): void {
        this.address = address;
    }

    getAddress(): string  {
        return this.address;
    }

    static parseFrom(inputObject: any): AddressList {
        let result = new AddressList();
        if (!inputObject) {
            return result;
        }
        if (inputObject.id) {
            result.id = inputObject.id;
        }
        if (inputObject.user_id) {
            result.user_id = inputObject.user_id;
        }
        if (inputObject.administrativeArea) {
            result.administrativeArea = inputObject.administrativeArea;
        }
        if (inputObject.locality) {
            result.locality = inputObject.locality;
        }
        if (inputObject.subLocality) {
            result.subLocality = inputObject.subLocality;
        }
        if (inputObject.placeName) {
            result.placeName = inputObject.placeName;
        }
        if (inputObject.latitude) {
            result.latitude = inputObject.latitude;
        }
        if (inputObject.longitude) {
            result.longitude = inputObject.longitude;
        }
        if (inputObject.nikeName) {
            result.nikeName = inputObject.nikeName;
        }
        if (inputObject.phone) {
            result.phone = inputObject.phone;
        }
        if (inputObject.address) {
            result.address = inputObject.address;
        }
        return result;
    }
}

export { AddressList };

都创建完成之后,接下来我们就可以创建对应的页面开始查询我们云数据库的数据了

@Entry
@Component
struct AddressListPage {
  @State user: User|null=null;
  @State addressList:AddressList[]=[]
  async aboutToAppear(): Promise<void> {
    const value = await StorageUtils.getAll('user');
    this.user=JSON.parse(value)
    let databaseZone = cloudDatabase.zone('default');
    let condition = new cloudDatabase.DatabaseQuery(address_list);
    condition.equalTo("user_id",this.user!.user_id)
    let listData = await databaseZone.query(condition);
    let json = JSON.stringify(listData)
    let data1:AddressList[]= JSON.parse(json)
    this.addressList=data1
    hilog.info(0x0000, 'testTag', `Succeeded in querying data, result: ${data1}`);
  }
  }
我们先添加对应的用户信息参数和对应的列表数据接收参数,然后在生命周期内进行数据查询
然后把数据展示到列表中

build() {
    Column() {
      CommonTopBar({ title: "地址列表", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
      Stack({alignContent:Alignment.Bottom}){
        Column(){
          List(){
            ForEach(this.addressList,(item:AddressList,index:number)=>{
              ListItem(){
                Column(){
                  Row(){
                    Column({space:10}){
                      Row(){
                        Text(item.nikeName)
                          .fontColor(Color.Black)
                          .fontSize(16)
                          .fontWeight(FontWeight.Bold)
                        Text(item.phone)
                          .fontColor(Color.Black)
                          .fontSize(16)
                          .fontWeight(FontWeight.Bold)
                          .margin({left:20})
                      }
                      Text(item.address)
                        .fontColor(Color.Black)
                        .fontSize(16)
                    }
                    .alignItems(HorizontalAlign.Start)
                    .justifyContent(FlexAlign.Center)

                    Image($r('app.media.address_edit'))
                      .width(20)
                      .height(20)
                      .onClick(()=>{
                        showToast("编辑")
                      })
                  }
                  .justifyContent(FlexAlign.SpaceBetween)
                  .width('100%')
                  .padding(10)
                  Divider().width('90%').height(0.8)
                    .color("#ffb1b0b0")
                }
              }
            })
          }
          .layoutWeight(1)
        }
        .height('90%')
        Text("新增地址")
          .width('70%')
          .height(45)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.White)
          .backgroundColor(0xff0000)
          .borderRadius(10)
          .textAlign(TextAlign.Center)
      }
      .backgroundColor(Color.White)
    }
    .backgroundColor(Color.White)
    .height('100%')
    .width('100%')
  }
 
到这里我们的地址展示就实现了

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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