美团外卖-封装加菜和减菜按钮组件

image.png

• 加菜和减菜按钮组件

// 加菜和减菜按钮组件
@Component
struct MTAddCut {
  build() {
    Row({space:8}) {
      Row() {
        Image($r('app.media.ic_screenshot_line'))
          .width(10)
          .aspectRatio(1)
      }
      .width(16)
      .aspectRatio(1)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#fff')
      .borderRadius(4)
      .border({
        width:0.5,
        color:'#f8c74e'
      })

      Text('0')
        .fontSize(14)
      Row() {
        Image($r('app.media.ic_public_add_filled'))
          .width(10)
          .aspectRatio(1)
      }
      .width(16)
      .aspectRatio(1)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#f8c74e')
      .borderRadius(4)
    }
  }
}

• FoodItem组件中添加加菜和减菜按钮组件

  
  image.png

 Row() {
          Text() {
            Span('¥ ')
              .fontColor('#ff8000')
              .fontSize(10)
            Span(this.item.price.toFixed(2))
              .fontColor('#ff8000')
              .fontWeight(FontWeight.Bold)
          }
          MTAddCut()
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)