写点什么

​《仿盒马》app 开发技术分享 -- 新人专享券(2)

作者:鸿蒙小林
  • 2025-06-30
    浙江
  • 本文字数:3260 字

    阅读完需:约 11 分钟

​《仿盒马》app开发技术分享-- 新人专享券(2)

技术栈

Appgallery connect


开发准备


上一篇文章中我们实现了项目端云一体化的升级,我们的数据后期就要从云侧的数据库去获取了,现在我们从头开始对项目进行端云一体化的改造。我们在首页已经把新人专享券抽离为公共组件


现在我们继续进行功能开发,把这个组建的本地数据展示修改为端侧获取。


功能分析


我们把之前实现的首页功能拿出改造一下。​我们在首页实现了新用户领券中心,数据结构就是 模块的标题、说明、优惠券列表,列表包含优惠券的金额、类型,同时我们还要给券添加一些其他参数,比如领取时间,领取用户等,这时候就又延伸出一个功能,当我们用户没有登录的时候,我们点击立即领取,是需要跳转到用户登录页面的。


因为云数据库不支持外键,所以我们通过多插入 id 字段来进行数据查询。


代码实现


首先我们进行表的创建。


home_new_people_coupon 这是首页活动模块的表{"objectTypeName": "home_new_people_coupon","fields": [{"fieldName": "activity_id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},{"fieldName": "title", "fieldType": "String", "notNull": true, "defaultValue": 0},{"fieldName": "msg", "fieldType": "String"},{"fieldName": "home_coupon_activity_id", "fieldType": "Integer"},{"fieldName": "router", "fieldType": "String"},{"fieldName": "activity_time", "fieldType": "String"}],"indexes": [{"indexName": "home_coupon_activity_id_index", "indexList": [{"fieldName":"home_coupon_activity_id","sortType":"ASC"}]}],"permissions": [{"role": "World", "rights": ["Read"]},{"role": "Authenticated", "rights": ["Read", "Upsert"]},{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}]}然后我们创建对应的活动 id 下的优惠券列表表


coupon_info{"objectTypeName": "coupon_info","fields": [{"fieldName": "coupon_id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},{"fieldName": "home_coupon_activity_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},{"fieldName": "price", "fieldType": "String"},{"fieldName": "type", "fieldType": "String"},{"fieldName": "get_time", "fieldType": "String"},{"fieldName": "limit_amount", "fieldType": "Integer"},{"fieldName": "txt", "fieldType": "String"},{"fieldName": "activity_id", "fieldType": "Integer"}],"indexes": [{"indexName": "couponIdIndex", "indexList": [{"fieldName":"coupon_id","sortType":"ASC"}]}],"permissions": [{"role": "World", "rights": ["Read"]},{"role": "Authenticated", "rights": ["Read", "Upsert"]},{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}]}完成之后我们插入数据


{"cloudDBZoneName": "default","objectTypeName": "home_new_people_coupon","objects": [{"activity_id": 10,"title": "新人活动","msg": "前三单免运费","home_coupon_activity_id": 10,"router": "路由","activity_time": "2025-4-3"}]}{"cloudDBZoneName": "default","objectTypeName": "coupon_info","objects": [{"coupon_id": 10,"home_coupon_activity_id": 10,"price": "10","type": "新人专享","get_time": "2025-3-18","limit_amount": 30,"txt": "string1","activity_id": 1},{"coupon_id": 20,"home_coupon_activity_id": 10,"price": "string2","type": "string2","get_time": "string2","limit_amount": 20,"txt": "string2","activity_id": 1},{"coupon_id": 30,"home_coupon_activity_id": 10,"price": "string1","type": "string1","get_time": "string1","limit_amount": 10,"txt": "string1","activity_id": 1},{"coupon_id": 40,"home_coupon_activity_id": 10,"price": "string2","type": "string2","get_time": "string2","limit_amount": 20,"txt": "string2","activity_id": 1}]}数据都插入完之后,我们把内容同步到云端数据库,然后 client model 、server model 创建对应的类


都执行完之后我们就可以直接在 index 页面进行数据的查询了


首先创建接收数据的对象


@State home_new_people_coupon:homeNewPeopleCoupon|null=null@State couponList:couponInfo[]=[]然后进行查询


let databaseZone = cloudDatabase.zone('default');let condition = new cloudDatabase.DatabaseQuery(home_new_people_coupon);let condition1 = new cloudDatabase.DatabaseQuery(coupon_info);let listData = await databaseZone.query(condition);let json = JSON.stringify(listData)let data:homeNewPeopleCoupon= JSON.parse(json)this.home_new_people_coupon=data;let listData1 = await databaseZone.query(condition1);condition1.equalTo("home_coupon_activity_id",data.home_coupon_activity_id)


let json1 = JSON.stringify(listData1)let data1:couponInfo[]= JSON.parse(json1)this.couponList=data1 可以看到我们的云端数据已经查出来了



我们把数据修改一下提交到云端


{"cloudDBZoneName": "default","objectTypeName": "coupon_info","objects": [{"coupon_id": 10,"home_coupon_activity_id": 10,"price": "10","type": "新人专享","get_time": "2025-3-18","limit_amount": 30,"txt": "string1","activity_id": 1},{"coupon_id": 20,"home_coupon_activity_id": 10,"price": "15","type": "新人专享","get_time": "string2","limit_amount": 20,"txt": "string2","activity_id": 1},{"coupon_id": 30,"home_coupon_activity_id": 10,"price": "20","type": "新人专享","get_time": "string1","limit_amount": 10,"txt": "string1","activity_id": 1},{"coupon_id": 40,"home_coupon_activity_id": 10,"price": "30","type": "新人专享","get_time": "string2","limit_amount": 20,"txt": "string2","activity_id": 1}]}然后修改我们之间创建的新人活动的组件


import { couponInfo } from "../entity/couponInfo"import { homeNewPeopleCoupon } from "../entity/homeNewPeopleCoupon"


@Component@Previewexport struct CouponComponent {@Link home_activity:homeNewPeopleCoupon|null@Link couponList:couponInfo[]


build() {Column() {Row() {Text(this.home_activity?.title).fontSize(20).fontColor('#FF0000')


    Text(this.home_activity?.msg)      .fontSize(14)      .fontColor('#888888')      .margin({left:10})  }  .width('100%')  .padding(16)
List({ space: 10 }) { ForEach(this.couponList, (item:couponInfo) => { ListItem() { Column() { Text(item.price) .fontSize(22) .fontColor('#FF4444') .margin({ bottom: 8 })
Text(item.type) .fontSize(12) .fontColor('#FF4444') } .padding(10) .backgroundColor("#ffffff") .borderRadius(8) } }) } .margin({left:50}) .listDirection(Axis.Horizontal) .width('100%') .height(80)
Button('立即领取', { type: ButtonType.Normal }) .width(240) .height(40) .backgroundColor('#FF0000') .fontColor(Color.White) .borderRadius(20) .margin({ bottom: 16 }) .onClick(()=>{ console.log(`"router"`) })}.backgroundColor("#fffce2be").width('95%').margin({top:20}).borderRadius(20)
复制代码


}}首页调用组件进行参数的传入


CouponComponent({home_activity:this.home_new_people_coupon,couponList:this.couponList})到这里我们的新人活动就完成了​

用户头像

鸿蒙小林

关注

还未添加个人签名 2025-06-20 加入

还未添加个人简介

评论

发布
暂无评论
​《仿盒马》app开发技术分享-- 新人专享券(2)_HarmonyOS NEXT_鸿蒙小林_InfoQ写作社区