美团外卖-购物车

image.png

• 购物车中菜品item

// 购物车中菜品item
@Component
struct MTCardItem {
  build() {
    Row() {
      Image('https://zqran.gitee.io/images/waimai/7384994864.jpg')
        .width(60)
        .aspectRatio(1)
        .borderRadius(8)
        .margin({right:10})
      Column() {
        Text('酸菜鱼泡面+红烧牛肉面')
          .fontSize(14)
          .textOverflow({overflow:TextOverflow.Ellipsis}) // 设置文字超出部分显示省略号
          .maxLines(2)
        Row() {
          Text() {
            Span('$')
              .fontSize(12)
              .fontColor('#ff8000')
            Span('36.66')
              .fontSize(18)
              .fontColor('#ff8000')
              .fontWeight(FontWeight.Bold)
          }
          // 加减菜按钮 todo
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
      }
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Start)
      .height(60)
    }
    .padding({
      left:20
    })
  }
}

• 购物车组件

// 购物车组件
@Component
struct MTCart {
  build() {
    Column() {
      // 顶部标题
      Row() {
        Text('购物车')
          .fontSize(12)
        Text('清空购物车')
          .fontSize(12)
          .fontColor('#999')
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .height(40)
      .padding({
        left:15,
        right:15
      })
      .border({
        color:'#f5f5f5',
        width: {
          bottom:0.5
        }
      })
      // 封装N个购物车的内容
      List({space:30}) {
        ListItem() {
          MTCardItem()
        }
        ListItem() {
          MTCardItem()
        }
        ListItem() {
          MTCardItem()
        }
      }
    }
    .height('50%')
    .width('100%')
    .backgroundColor(Color.White)
  }
}