1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

@Entry
@Component
struct MeiTuanCartPage {
  @State oldPrice: number = 40.4
  @State newPrice: number = 20
  @State buyCount: number = 1

  build() {
    Column() {
      Row() {
        Image($r('app.media.mt_product1'))
          .width(100)
          .borderRadius(10)

        Column({ space: 10 }) {
          Column({ space: 6 }) {
            Text('冲销量1000ml缤纷八果水果捞')
              .maxLines(2)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .fontWeight(FontWeight.Bold)
            Text('含一份折扣商品')
          }
          .alignItems(HorizontalAlign.Start)

          Row() {
            Row({ space: 10 }) {
              Text('￥' + this.newPrice)
                .fontColor(Color.Red)
                .fontWeight(FontWeight.Bolder)
                .fontSize(20)
              Text('￥' + this.oldPrice)
                .fontColor('#666')
                .decoration({
                  type: TextDecorationType.LineThrough
                })
            }

            Row() {
              Text('-')
                .width(20)
                .textAlign(TextAlign.Center)
                .fontWeight(FontWeight.Bold)
                .border({
                  width: 1,
                  color: '#666',
                  radius: {
                    topLeft: 5,
                    bottomLeft: 5
                  }
                })
                .onClick(() => {
                  if (this.buyCount > 1) {
                    this.buyCount--
                  }
                })
              Text(this.buyCount.toString())
                .width(30)
                .textAlign(TextAlign.Center)
                .border({
                  width: 1,
                  color: '#666'
                })
              Text('+')
                .width(20)
                .textAlign(TextAlign.Center)
                .fontWeight(FontWeight.Bold)
                .border({
                  width: 1,
                  color: '#666',
                  radius: {
                    topRight: 5,
                    bottomRight: 5
                  }
                })
                .onClick(() => {
                  if (this.buyCount < 100) {
                    this.buyCount++
                  }
                })
            }.padding({
              right: 20
            })
          }
          .justifyContent(FlexAlign.SpaceBetween)
          .width('100%')
          .height(30)
        }
        .alignItems(HorizontalAlign.Start)
        .padding({
          left: 10
        })
        .layoutWeight(1)
      }
      .width('100%')

      Row() {
        Blank()
        Column({ space: 10 }) {
          Text() {
            Span(`已选${this.buyCount}件，合计`)
            Span(`￥${(this.buyCount * this.newPrice).toFixed(2)}`)
              .fontColor(Color.Red)
          }

          Text('共减￥' + ((this.oldPrice - this.newPrice) * this.buyCount).toFixed(2))
            .fontColor(Color.Red)
        }
        .alignItems(HorizontalAlign.End)

        Button('结算')
          .backgroundColor('#f5da46')
          .fontColor(Color.Black)
          .fontSize(20)
          .padding(10)
          .width(120)
          .margin({
            left: 15
          })
      }
      .padding(15)
      .width('100%')
    }
    .padding(10)
    .width('100%')
    .height('100%')
  }

  @Builder NumberInput() {
    Row() {
      Text('-')
        .border({
          width: 1,
          color: '#666',
          radius: {
            topLeft: 5,
            bottomLeft: 5
          }
        })
        .onClick(() => {
          this.buyCount--
        })
      Text(this.buyCount.toString())
      Text('+')
        .onClick(() => {
          this.buyCount++
        })
    }
    .layoutWeight(1)
    .justifyContent(FlexAlign.SpaceBetween)
    .margin({ right: 5 })
  }
}