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

举报
yd_215151764 发表于 2025/06/30 10:18:58 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了首页banner模块的功能,现在我们的首页还需要添加商品列表,作为一个购物类应用,商品列表是非常重要的一个模块,所以我们尽量把它设计的足够完善,参数能更好的支持我们后期复杂的逻辑,它需要有图片的展示,适配的优惠券列表,限购,立减,划线价等,但他实际的参数还要更多,因为我们的列表是比较紧凑的,更多的数据需要从点击后的...


## 技术栈

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
@Preview
export 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})
到这里我们就实现了首页商品列表的内容

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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