购物车

滑动删除

  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
153
154
155
156
157
158
159
160
  1import { EmptyView } from "../components/EmptyView"
  2import { CardModel } from "../viewModel/CardModel"
  3import { GoodItem } from "./GoodItem"
  4
  5@Component
  6export struct Good {
  7  @State selectAll: boolean = false
  8  @State sumPrice: number = 0
  9  @State cards: CardModel[] = []
 10  computedTotalPrice = () => {
 11    const result = this.cards.reduce((sum: number, item: CardModel) => {
 12      if (item.good_checked) {
 13        sum += Number(item.good_price) * Number(item.good_count)
 14      }
 15      return sum
 16    }, 0)
 17    // 计算总价
 18    this.sumPrice = result
 19
 20    const status = this.cards.every((item: CardModel) => item.good_checked)
 21    this.selectAll = status
 22  }
 23  checkAll = () => {
 24    this.cards.forEach((item: CardModel) => {
 25      item.good_checked = this.selectAll ? 1 : 0
 26    })
 27    this.computedTotalPrice()
 28  }
 29
 30  aboutToAppear(): void {
 31    const card01 = new CardModel()
 32    card01.id = 1
 33    card01.good_id = '11'
 34    card01.good_name = '华为手机Pro'
 35    card01.good_big_logo = 'app.media.bird'
 36    card01.good_code = '1211'
 37    card01.good_count = 1
 38    card01.good_price = 5000
 39    card01.good_checked = 0
 40
 41    const card02 = new CardModel()
 42    card02.id = 2
 43    card02.good_id = '22'
 44    card02.good_name = '创维平板电视，高清无码，非常值得推荐，液晶平板电视，超级电视'
 45    card02.good_big_logo = 'app.media.animal'
 46    card02.good_code = '2222'
 47    card02.good_count = 1
 48    card02.good_price = 8800
 49    card02.good_checked = 0
 50
 51    this.cards.push(card01)
 52    this.cards.push(card02)
 53
 54    this.computedTotalPrice()
 55  }
 56
 57  @Builder
 58  bottomMenu() {
 59    Row() {
 60      Row() {
 61        Checkbox({
 62          name: 'checkbox',
 63          group: 'checkboxGroup'
 64        })
 65          .selectedColor('#ed6f21')
 66          .select(this.selectAll)
 67          .onClick(() => {
 68            this.selectAll = !this.selectAll
 69            this.checkAll()
 70          })
 71
 72        Text('全选')
 73          .fontSize(14)
 74          .fontColor(Color.Gray)
 75      }
 76
 77      Row({ space: 10 }) {
 78        Text('总价')
 79          .fontSize(16)
 80          .fontWeight(FontWeight.Bold)
 81
 82        Text(`￥${this.sumPrice}`)
 83          .fontSize(16)
 84          .fontColor(Color.Brown)
 85
 86        Button('结算', {
 87          type: ButtonType.Capsule,
 88          stateEffect: true
 89        })
 90          .backgroundColor('#e92f4f')
 91          .fontSize(12)
 92          .height(40)
 93          .width(100)
 94          .onClick((event: ClickEvent) => {
 95
 96          })
 97      }
 98    }
 99    .width('100%')
100    .height(70)
101    .backgroundColor(Color.White)
102    .justifyContent(FlexAlign.SpaceBetween)
103  }
104
105  @Builder
106  endButton(index: number) {
107    Button('删除')
108      .onClick((event: ClickEvent) => {
109        this.cards.splice(index, 1)
110      })
111  }
112
113  build() {
114    Flex({ direction: FlexDirection.Column }) {
115      Text('购物车')
116        .fontSize(24)
117        .height(86)
118        .width('100%')
119        .textAlign(TextAlign.Center)
120        .padding({ left: 24 })
121
122      // 存放购物车产品
123      Scroll() {
124        Column() {
125          List({ space: 10 }) {
126            if (this.cards.length > 0) {
127              ForEach(this.cards, (item: CardModel, index: number) => {
128                ListItem() {
129                  GoodItem({
130                    item: item,
131                    computedTotalPrice: this.computedTotalPrice
132                  })
133                }
134                .swipeAction({
135                  end: {
136                    builder: () => {
137                      this.endButton(index)
138                    }
139                  }
140                })
141              }, (item: CardModel) => item.good_id)
142            } else {
143              EmptyView({ defaultHeight: '50%' })
144            }
145          }
146        }
147        .width('100%')
148        .height('100%')
149      }
150      .scrollBar(BarState.Off)
151      .margin({ left: 12, right: 12 })
152      .flexGrow(1)
153
154      // 底部导航
155      this.bottomMenu()
156    }
157    .width('100%')
158    .height('100%')
159  }
160}

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12