《仿盒马》app 开发技术分享 -- 首页商品流（7）

2025-06-30
浙江
本文字数：2988 字
阅读完需：约 10 分钟

技术栈

Appgallery connect

开发准备

上一节我们实现了首页 banner 模块的功能，现在我们的首页还需要添加商品列表，作为一个购物类应用，商品列表是非常重要的一个模块，所以我们尽量把它设计的足够完善，参数能更好的支持我们后期复杂的逻辑，它需要有图片的展示，适配的优惠券列表，限购，立减，划线价等，但他实际的参数还要更多，因为我们的列表是比较紧凑的，更多的数据需要从点击后的商品详情页展示出来。

代码实现创建商品表{"objectTypeName": "home_product_list","fields": [{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},{"fieldName": "goods_list_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},{"fieldName": "url", "fieldType": "String"},{"fieldName": "name", "fieldType": "Text"},{"fieldName": "price", "fieldType": "Double"},{"fieldName": "original_price", "fieldType": "Double"},{"fieldName": "amount", "fieldType": "Integer"},{"fieldName": "text_message", "fieldType": "String"},{"fieldName": "parameter", "fieldType": "String"},{"fieldName": "delivery_time", "fieldType": "String"},{"fieldName": "endTime", "fieldType": "String"},{"fieldName": "sales_volume", "fieldType": "Integer"},{"fieldName": "space_id", "fieldType": "Integer"},{"fieldName": "max_loop_amount", "fieldType": "Integer"},{"fieldName": "promotion_spread_price", "fieldType": "Double"},{"fieldName": "coupon_id", "fieldType": "Integer"}],"indexes": [{"indexName": "field1IndexId", "indexList": [{"fieldName":"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_product_list","objects": [{"id": 10,"goods_list_id": 1,"url": "在线图片链接","name": "红颜草莓","price": 10.5,"original_price": 18.5,"amount": 10,"text_message": "特价","parameter": "冷藏","delivery_time": "付款后 24 小时内发货","endTime": "直降｜结束时间 2025 年 5 月 18 日 10:00","sales_volume": 9812,"space_id": 10,"max_loop_amount": 10,"promotion_spread_price": 5,"coupon_id": 10},{"id": 20,"goods_list_id": 1,"url": "在线图片链接","name": "麒麟瓜","price": 2.8,"original_price": 5.9,"amount": 1,"text_message": "当季新品","parameter": "冷藏","delivery_time": "付款后 24 小时内发货","endTime": "直降｜结束时间 2025 年 5 月 18 日 10:00","sales_volume": 9812,"space_id": 11,"max_loop_amount": 10,"promotion_spread_price": 0,"coupon_id": 10}]}

我们接下来进行数据的查询 @State homeProduct:HomeProductList[]=[]//商品流数据

  let databaseZone = cloudDatabase.zone('default');  let home_product=new cloudDatabase.DatabaseQuery(home_product_list);  let list7 = await databaseZone.query(home_product);  let json7 = JSON.stringify(list7)  let data7:HomeProductList[]= JSON.parse(json7)  this.homeProduct=data7

复制代码

数据查出完成后，完善商品流的页面

import { HomeProductList } from "../entity/home_product_list"

@Component@Previewexport struct WaterFlowGoods {@Link goodsList: Array<HomeProductList>

@State columns: number = 2

build() {WaterFlow() {ForEach(this.goodsList, (item:HomeProductList, index) => {FlowItem() {Column() {Image(item.url).width('100%').aspectRatio(1).objectFit(ImageFit.Cover).borderRadius({topLeft:10,topRight:10})

        Column() {          Text(item.name)            .fontSize(16)            .fontColor('#333')            .margin({ bottom: 4 })
          Text(item.text_message)            .fontSize(12)            .fontColor('#666')            .margin({ bottom: 8 })

          Text("最高立减"+item.promotion_spread_price)            .fontSize(12)            .fontColor('#ffffff')            .visibility(item.promotion_spread_price>0?Visibility.Visible:Visibility.None)            .margin({ bottom: 8 })            .padding({left:5,right:5,top:2,bottom:2})            .linearGradient({              angle:90,              colors: [[0xff0000, 0], [0xff6666, 0.2], [0xff6666, 1]]            })
          Row(){            Text("限购")              .width(40)              .fontSize(12)              .borderRadius(20)              .backgroundColor("#FB424C")              .padding(3)              .textAlign(TextAlign.Center)              Text("每人限购"+item.max_loop_amount+"件")                .margin({left:5})                .fontSize(12)                .fontColor("#FB424C")          }          .borderRadius(20)          .padding({top:2,bottom:2,right:10})          .backgroundColor("#FEE3E3")          .visibility(item.amount>0?Visibility.Visible:Visibility.None)
          Row() {            Text(){              Span("¥")                .fontColor(Color.Red)                .fontSize(14)
              Span(String(item.price))                .fontSize(16)                .fontColor(Color.Red)            }            Text(String(item.original_price))              .fontSize(12)              .fontColor('#999')              .decoration({                type: TextDecorationType.LineThrough,                color: Color.Gray              })              .margin({left:10})

             Blank()            Column() {              Image($r('app.media.cart'))                .width(20)                .height(20)            }            .justifyContent(FlexAlign.Center)            .width(36)            .height(36)            .backgroundColor("#ff2bd2fa")            .borderRadius(18)            }            .margin({top:10})            .width('100%')            .justifyContent(FlexAlign.SpaceBetween)


        }        .alignItems(HorizontalAlign.Start)        .padding(12)      }      .backgroundColor(Color.White)      .borderRadius(12)      .onClick(() => {      })    }    .margin({ bottom: 12 })  })}.padding(10).columnsTemplate('1fr 1fr').columnsGap(12).onAreaChange((oldVal, newVal) => {  this.columns = newVal.width > 600 ? 2 : 1})

复制代码

}}然后在首页调用，传入参数 WaterFlowGoods({goodsList:this.homeProduct})到这里我们就实现了首页商品列表的内容

发布于: 刚刚阅读数: 4

鸿蒙小林

关注

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

还未添加个人简介

发布

暂无评论

创作场景

《仿盒马》app 开发技术分享 -- 首页商品流（7）

技术栈

开发准备

鸿蒙小林

评论