鸿蒙开发入门：美团外卖购物车(含加减器)

开发美团外卖选购商品界面，用户可以自行添加或删除商品，对应的支付金额会随数量的多少而发生变化。

代码实现如下：

@Entry
@Component
struct FoodOrderPage {
  @State currentCategory: string = '一人套餐'
  @State cartCount: number = 1
  @State totalPrice: number = 34.23
  @State count:number=1
  @State oldprice:number=20.9
  @State newprice:number=10.9
  private categories: string[] = ['一人套餐', '特色烧烤', '杂粮主食']

  build() {
    Column() {
      // 顶部导航栏
      Row() {
        Text('点菜')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        Blank()

        Row() {
          Text('评价 1796')
            .fontSize(14)
            .fontColor('#666')
          Text('商家')
            .fontSize(14)
            .fontColor('#666')
            .margin({ left: 20 })
          Row() {
            Image($r('app.media.sousuo'))
              .width(16)
              .height(16)
              .margin({ left: 8 })

            TextInput()

              .layoutWeight(1)
              .fontSize(14)
              .fontColor('#666')
          }
          .width(160)
          .height(32)
          .backgroundColor('#f5f5f5')
          .borderRadius(16)
          .margin({ left: 20 })
        }
        .alignItems(VerticalAlign.Center)
      }
      .width('100%')
      .padding(12)
      .backgroundColor('#fff')

      // 主内容区
      Row() {
        // 左侧分类导航
        Column() {
          ForEach(this.categories, (item: string) => {
            Text(item)
              .fontSize(16)
              .fontColor(this.currentCategory === item ? '#333' : '#333')
              .backgroundColor(this.currentCategory === item ? '#E0E0E0' : 'transparent')


              .padding({
                top: 12,
                bottom: 12,
                left: 16,
                right: 16
              })
              .width('100%')
              .onClick(() => this.currentCategory = item)
          })
        }
        .width('30%')
        .height('100%')
        .backgroundColor('#808080')

        // 右侧商品详情
        Column() {
          Text('小份酸汤莜面鱼鱼+肉夹馍套餐')
            .fontSize(18)
            .fontWeight(FontWeight.Medium)
            .margin({ bottom: 8 })

          Text('酸汤莜面鱼鱼，主料：莜面、鱼片、特制酸汤')
            .fontSize(14)
            .fontColor('#666')
            .margin({ bottom: 12 })

          Row() {
            Text('点评网友推荐')
              .fontSize(12)
              .fontColor('#624F21')
              .padding({
                left: 8,
                right: 8,
                top: 4,
                bottom: 4
              })
              .backgroundColor('#BD922E')
              .borderRadius(4)
              .margin({ right: 12 })

            Column() {
              Text('月销售 40')
                .fontSize(12)
                .fontColor('#666')
              Text('好评度 100%')
                .fontSize(12)
                .fontColor('#666')
                .margin({ top: 4 })
            }
          }
          .width('100%')
          .margin({ bottom: 16 })

          Row() {
            Text('￥34.23')
              .fontSize(20)
              .fontColor('#8B2727')
              .fontWeight(FontWeight.Bold)
              .layoutWeight(1)
            Image($r('app.media.jia'))
              .width(16)
              .height(16)
              .margin({ left: 8 })

          }
        }
        .width('70%')
        .padding(16)
        .height('100%')
        .backgroundColor('#C0C0C0')
      }
      .flexGrow(1)
      .height('50%')
      .backgroundColor('#f5f5f5')

      Column() {
        // 标题栏
        Row() {
          Text('购物车')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
          Blank()
          Text('清空购物车')
            .fontSize(14)
            .fontColor('#666')
            .margin({ right: 20 })
        }
        .width('100%')
        .padding(8)
      }
      Column({space:20}){
        // 购物车商品列表
        Column({ space: 20 }) {
          Column({ space: 120 }) {
            // 商品信息行
            Row() {
              Image($r('app.media.pic1'))
                .width(90)
                .height(90)
                .margin({ left: 8 })


              Column() {
                Text('小份酸汤莜面鱼鱼+肉夹馍')
                  .fontSize(16)
                  .margin({ bottom: 50 })
                  .textAlign(TextAlign.Start)// 显式设置左对齐
                  .width('100%')

                // 价格和数量行
                // 在价格行中使用计数器组件
                Row() {
                  Row({ space: 5 }) {
                    Text() {
                      Span('￥')
                        .fontSize(13)
                        .fontColor(Color.Red)
                      Span(this.newprice.toFixed(2))
                        .fontColor(Color.Red)
                    }
                    .margin({ left: 10 })
                    .fontColor('#ff4000')

                    Text() {
                      Span('￥')
                        .fontSize(13)
                      Span(this.oldprice.toFixed(2))
                        .fontSize(13)
                    }
                    .fontColor('#999')
                    .decoration({ type: TextDecorationType.LineThrough, color: '#999' })
                  }
                  .margin({ bottom: 10 })

                  Row() {
                    Text('-')
                      .width(20)
                      .border({ width: 1, color: '#999', radius: { topLeft: 3, bottomLeft: 3 } })
                      .textAlign(TextAlign.Center)
                      .onClick(() => {
                        if (this.count > 1) {
                          this.count--
                        } else {
                          AlertDialog.show({
                            message: '最小值为1，不能再减了'
                          })
                        }
                      })
                    Text(this.count.toString())
                      .width(30)
                      .border({ width: { top: 1, bottom: 1 }, color: '#999' })
                      .textAlign(TextAlign.Center)
                    Text('+')
                      .width(20)
                      .border({ width: 1, color: '#999', radius: { bottomRight: 3, topRight: 3 } })
                      .textAlign(TextAlign.Center)
                      .onClick(() => {
                        this.count++
                      })
                  }
                  .margin({ bottom: 10 })
                }
                .justifyContent(FlexAlign.SpaceBetween)
                .width('100%')
              }
              .width('60%')
              .height('100%')

            }
            .width('100%')
            .height(100)
            //Blank()
            Column(){
              Row() {
                Image($r('app.media.waimaiyuan'))
                  .width(75)
                  .height(75)
                  .position({ x: 0 })
                //.margin({ left: 1})

                Column({ space: 5 }) {
                  Text() {
                    Span('已选两件,')
                      .fontColor('#a0a0a0')
                      .fontSize(16)
                    Span('合计:')
                      .fontColor('#F5F5F5')
                    Span('￥')
                      .fontColor('#F5F5F5')
                    Span((this.newprice * this.count).toFixed(2))
                      .fontColor('#F5F5F5')
                  }
                  .width('100%')
                  .textAlign(TextAlign.Start)

                  Text() {
                    Span('共减:￥')
                      .fontColor('#F5F5F5')
                    Span(((this.oldprice - this.newprice) * this.count).toFixed(2))
                      .fontColor('#F5F5F5')
                  }
                  .fontSize(14)
                  .width('100%')
                  .textAlign(TextAlign.Center)

                }
                .width('40%')
                .justifyContent(FlexAlign.End)

                Button('去结算')
                  .fontColor(Color.Black)
                  .margin({ left: 10, right: 10 })
                  .backgroundColor('#fdd744')

              }
              .width('100%')
              .height(80)
              .backgroundColor('#000000')
              .justifyContent(FlexAlign.End)
            }
          }
          .width('100%')
          .height('100%')

        }
      }
    }
  }
}