效果演示

代码实现

@Entry
@Component
struct Index {
  @State goods_Count: number = 0 // 商品数量
  @State total_Price: number = 0 // 总价
  @State discount_Price: number = 0 // 折扣

  private add_Price() {
    this.total_Price = this.goods_Count * 20.2 // 总价
    this.discount_Price = this.total_Price / 2 // 折扣
  }

  // private sub_Price() {
  //   this.total_Price = this.goods_Count * 20.2 // 总价
  //   this.discount_Price = this.total_Price / 2 // 折扣
  // }

  build() {

    Column() {
      // 点单
      Row({ space: 10 }) {
        Image('/images/product1.jpg')
          .width(100)
          .borderRadius(10)
        Column() {
          Text('冲销量1000ml缤纷八果水果捞')
            .fontSize(14)

          Text('含1份折扣商品')
            .fontSize(12)
            .fontColor('#999')
            .margin({ top: 5, bottom: 10 })

          Row() {
            Text() {
              Span(`￥20.2 `)
                .fontSize(20)
                .fontColor('#E66538')
                .margin({ right: 5 })
              Span(`￥40.4`)
                .fontColor('#999')
            }

            Row() {
              Text('-')
                .border({
                  width: 1,
                  color: '#999',
                  style: BorderStyle.Solid,
                  radius: {
                    topLeft: 5,
                    bottomLeft: 5
                  }
                })
                .padding({
                  left: 10,
                  right: 10,
                  top: 5,
                  bottom: 5
                })
                .onClick(() => {
                  if (this.goods_Count > 0) {
                    this.goods_Count--
                    this.add_Price()
                  }
                })

              Text(this.goods_Count + '')
                .border({
                  width: 1,
                  color: '#999',
                  style: BorderStyle.Solid
                })
                .padding({
                  left: 10,
                  right: 10,
                  top: 5,
                  bottom: 5
                })

              Text('+')
                .border({
                  width: 1,
                  color: '#999',
                  style: BorderStyle.Solid,
                  radius: {
                    topRight: 5,
                    bottomRight: 5
                  }
                })
                .padding({
                  left: 10,
                  right: 10,
                  top: 5,
                  bottom: 5
                })
                .onClick(() => {
                  this.goods_Count++
                  this.add_Price()
                })
            }
          }
          .justifyContent(FlexAlign.SpaceBetween)
          .width('100%')
        }
        .alignItems(HorizontalAlign.Start)
        .layoutWeight(1)
      }
      .padding({ left: 15, right: 10 })
      .width('100%')
      .margin({ top: 10 })

      // 结算
      Row() {
        Column({ space: 5 }) {
          Text() {
            Span(`已选${this.goods_Count}件，`)
              .fontColor('#999')
            Span(`合计：`)
            Span(`￥ ${this.total_Price}`)
              .fontSize(20)
              .fontColor('#E66538')
          }

          Text(`共减 ￥ ${this.discount_Price}`)
            .fontColor('#E66538')
        }
        .alignItems(HorizontalAlign.End)

        Button('结算外卖')
          .fontColor('#000')
          .backgroundColor('#FED70D')
          .margin({ left: 15, right: 20 })
      }
      // .margin({bottom: 0})
      .justifyContent(FlexAlign.End)
      .backgroundColor('#fff')
      .width('100%')
      .height(80)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .height('100%')
    .width('100%')
    .backgroundColor('#F3F3F3')
  }
}