【综合案例】使用DevEco Studio编写美团购物车案例

效果展示

效果说明

商品卡片中的➕和➖是能够进行点击的，每点击一次➕商品的数量就+1，合计处的商品的总价钱和总折扣就会重新进行计算，每点击一次➖商品的数量就-1，合计处的商品的总价和总折扣就会重新计算，当数量为1的时候点击➖的时候就会弹出一个对话框提示用户“至少要选择一件”。

知识点

点击交互事件onClick

状态变量@State 变量名

代码展示

@Entry
@Component
struct Index {
  @State price: number = 20.2;
  @State oldPrice: number = 40.4
  @State num: number = 1

  build() {
    Column() {
      Column() {
        // 商品部分
        Row({ space: 10 }) {
          // 商品图片
          Image($r("app.media.product1"))
            .width(100)
            .borderRadius(10)
          // 商品信息
          Column({ space: 10 }) {
            Text("冲销量1000ml缤纷八果水果捞")
              .fontSize(14)
              .lineHeight(20)
            Text("含1份折扣商品")
              .fontSize(12)
              .lineHeight(20)
              .fontColor("#828282")
            // 商品价格和数量
            Row({ space: 5 }) {
              Text() {
                Span("￥")
                Span(this.price.toString())
              }
              .fontColor("#D64C24")

              Text(`￥${this.oldPrice}`)
                .fontSize(14)
              Row() {
                Text("-")
                  .width(22)
                  .height(22)
                  .textAlign(TextAlign.Center)
                  .fontWeight(700)
                  .fontColor("#373940")
                  .border({
                    width: 1,
                    color: "#e9e9e9"
                  })
                  .borderRadius({ topLeft: 5, bottomLeft: 5 })
                  .onClick(() => {
                    if (this.num > 1) {
                      this.num--
                    } else {
                      AlertDialog.show({
                        message: "至少要选择一件"
                      })
                    }
                  })
                Text(this.num.toString())
                  .padding({ left: 10, right: 10 })
                  .height(22)
                  .fontSize(14)
                  .border({
                    width: { top: 1, bottom: 1 },
                    color: "#e9e9e9"
                  })
                Text("+")
                  .width(22)
                  .height(22)
                  .textAlign(TextAlign.Center)
                  .fontWeight(700)
                  .fontColor("#373940")
                  .border({
                    width: 1,
                    color: "#e9e9e9"
                  })
                  .borderRadius({ topRight: 5, bottomRight: 5 })
                  .onClick(() => {
                    this.num++
                  })
              }
              .layoutWeight(1)
              .justifyContent(FlexAlign.End)

            }
          }
          .alignItems(HorizontalAlign.Start)
          .layoutWeight(1)
        }
        .padding(20)
        .layoutWeight(1)
        .alignItems(VerticalAlign.Top)

        // 结算区域
        Row({ space: 10 }) {
          Column({ space: 10 }) {
            Text() {
              Span(`已选${this.num}件，`)
                .fontColor("#828282")
              Span("合计：")
              Span(`￥${(this.price * this.num).toFixed(2)}`)
                .fontColor("#FFD64C24")
            }

            Text(`共减￥${(this.num * Number((this.oldPrice - this.price).toFixed(2))).toFixed(2)}`)
              .fontColor("#FFD64C24")
          }
          .alignItems(HorizontalAlign.End)

          Button("结算外卖")
            .fontColor("#373940")
            .backgroundColor("#FED70D")

        }
        .width("100%")
        .padding(10)
        .justifyContent(FlexAlign.End)
        .backgroundColor("#fff")
      }
      .width("100%")
    }
    .padding({ top: 10 })
    .height("100%")
    .width("100%")
    .backgroundColor("#f3f3f3")
    .borderRadius('0.00vp')
  }
}