2 days ago

《仿盒马》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

@Preview

export 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_activitythis.couponList})

到这里我们的新人活动就完成了

5 views