鸿蒙购物车布局完成后的点击事件（不怎么普通易懂） ...

1. import router from '@ohos.router';
2. import { ShopCarEntity } from '../../entity/ShopCarEntity';
3. import LocDataModel from '../../viewmodel/LocDataModel';
4. import data from '@ohos.telephony.data';
6. @Entry
7. @Component
8. export default struct CarPage {
9.   @State carList:ShopCarEntity[]=LocDataModel.DEFAULT_SHOP_CART_LIST
10.   @State totalPrice :number =0
11.   @State totalCount:number =0
13.   //计算总价和数量
14.   countTotalNumber(){
15.     let tempTotalPrice=0
16.     let temTotalCount=0
18.     this.carList.forEach((item:ShopCarEntity)=>{
19.       if (item.isSelected) {
20.         tempTotalPrice+=item.goods_default_price*item.count
21.         temTotalCount+=item.count
22.       }
23.     })
24.     this.totalPrice=tempTotalPrice
25.     this.totalCount=temTotalCount
26.   }
28.   //处理商品单选操作
29.   carItemSelectChanged(state:boolean,index:number){
30.     let newCarlist:ShopCarEntity[]=[]
31.     this.carList.forEach((item:ShopCarEntity,itemIndex:number)=>{
32.       if (itemIndex===index) {
33.         item.isSelected=state
34.         item.itemkey=`${Math.random()*10}-${Math.random()}`
35.       }
36.       newCarlist.push(item)
37.     })
38.     this.carList=newCarlist
39.   }
40.   build() {
41.      Flex({direction:FlexDirection.Column}){
42.         //标题部分
43.         this.TitleBarComponent()
44.        //商品列表
45.        this.CarListCompoent()
46.        //底部
47.        this.BottomOptionsCompoent()
48.      }
49.     .width('100%')
50.     .height('100%')
51.     .backgroundColor($r('app.color.page_background'))
52.   }
54.   /**
55.    * 标题
56.    */
57.   @Builder TitleBarComponent(){
58.     Stack({alignContent:Alignment.End}){
59.       Text('购物车')
60.         .width('100%')
61.         .textAlign(TextAlign.Center)
62.         .fontColor(Color.White)
63.         .fontSize(16)
64.         .fontWeight(FontWeight.Bold)
66.       Text('删除已选')
67.         .borderWidth(1).
68.       borderColor(Color.White).
69.       borderRadius(12).
70.       fontColor(Color.White).
71.       fontSize(12).
72.       fontWeight(FontWeight.Bold)
73.         .padding({
74.           top:5,
75.           right:8,
76.           bottom:5,
77.           left:8
78.         })
79.         .textAlign(TextAlign.Center)
80.         .lineHeight(12)
81.         .margin({
82.           right:15
83.         })
85.     }.width('100%')
86.     .height('56vp')
87.     .backgroundColor('#ff0000')
88.   }
89.   /**
90.    * 添加商品数量
91.    *
92.    */
93.   addGoodsCount(index:number){
94.     let newCarList:ShopCarEntity[]=[]
95.     this.carList.forEach((item:ShopCarEntity,itemIndex:number)=>{
96.       if (itemIndex===index) {
97.         item.count++
98.         item.itemkey=`${Math.random()*10}-${item.id}-${Math.random()}}`
99.       }
100.       newCarList.push(item)
101.     })
102.     //重新赋值
103.     this.carList=newCarList
104.   }
105.   /**
106.    * 减少商品数量
107.    */
108.   reduceGoodsCount(index:number){
109.     let newCarList:ShopCarEntity[]=[]
110.     this.carList.forEach((item:ShopCarEntity,itemIndex:number)=>{
111.       if (itemIndex===index) {
112.         item.count--
113.         item.itemkey=`${Math.random()*10}-${item.id}-${Math.random()}`
114.       }
115.       newCarList.push(item)
116.     })
117.     //重新赋值
118.     this.carList=newCarList
119.   }
120.   /**
121.    * 给itemView生成唯一的key
122.    *
123.    */
124.   generatorItemViewKey(data:ShopCarEntity):string{
125.     if (data.itemkey) {
126.       return data.itemkey
127.     }
128.     return `${Math.random()*10}*${data.id}--${Math.random()}]`
129.   }
131.   /**
132.    * 商品列表
133.    */
134.   @Builder CarListCompoent(){
135.     Scroll(){
136.       Column(){
137.         if (this.carList.length>0){
138.            List({space:2}){
139.              ForEach(this.carList,(item:ShopCarEntity,index:number)=>{
140.                ListItem(){
141.                  this.CarItemComponent(item,index)
142.                }
144.              },(item:ShopCarEntity) => this.generatorItemViewKey(item))
145.            }
146.         }else {
147.           this.EmptyComponent()
148.         }
150.       }.width('100%').height('100%')
151.     }.width('100%')
152.     .flexGrow(1)
154.   }
155.   @Builder
156.   CarItemComponent(data:ShopCarEntity,index:number){
157.     Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){
158.       //复选框
159.       Checkbox().width(20).height(20).select(true).selectedColor($r('app.color.focus_color'))
160.         .onChange((value:boolean)=>{
161.             this.carItemSelectChanged(value,index)
163.         })
165.       Image(data.goods_default_icon)
166.         .margin({left:10,right:10})
167.         .width(100).height(100).objectFit(ImageFit.Contain).key(data.goods_id.toString())
169.       //商品描述和价格
170.       Column(){
171.         Text(data.goods_desc).fontSize(14).fontColor(Color.Gray).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})
172.         //商品价格
173.         Text(){
174.           Span('价格：').fontSize(12).fontColor(Color.Black)
175.           Span(`${data.goods_default_price}`).fontColor($r('app.color.focus_color')).fontSize(12)
176.         }.margin({top:5,bottom:5})
177.         //数量加减
178.         Row(){
179.           Text('数量:').fontSize(12).fontColor(Color.Black)
180.           Counter(){
181.             Text(`${data.count}`).fontSize(12)
182.           }.width(100).height(20)
183.           .onInc(()=>{
184.             if (data.count<50) {
185.               this.addGoodsCount(index)
186.             }
187.           })
188.           .onDec(()=>{
189.             if (data.count>1) {
190.               this.reduceGoodsCount(index)
191.             }
192.           })
193.           //空白组件
194.           Blank().layoutWeight(1)
195.           //当前商品选中时候,才显示
196.           if (data.isSelected){
197.              Image($r('app.media.news_selected')).width(15)
198.                .objectFit(ImageFit.Contain).onClick(()=>{
200.              })
201.           }
202.         }.alignItems(VerticalAlign.Center)
203.       }.alignItems(HorizontalAlign.Start)
204.       .margin({right:5})
205.     }.padding({left:5,right:5})
206.     .backgroundColor(Color.White)
207.   }
208. @Builder EmptyComponent(){
209.   Column(){
210.     Column(){
212.       Image($r('app.media.caca')).width(70).objectFit(ImageFit.Contain)
213.       Text('欢迎添加购物车!!!').fontColor(Color.Gray).fontSize(14).margin({
214.         top:5
215.       })
217.     }.justifyContent(FlexAlign.Center)
218.     .alignItems(HorizontalAlign.Center)
219.   }.width('100%')
220.   .height('100%')
221.   .justifyContent(FlexAlign.Center)
222. }
223.   /**
224.    * 底部操作
225.    *
226.    */
227.   @Builder BottomOptionsCompoent(){
228.      Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
229.        //全选和总价
230.        Row(){
231.          Checkbox()
232.            .width(15)
233.            .height(15)
234.            .select(true).selectedColor($r('app.color.select_color'))
235.            .onChange((value:boolean)=>{
237.            })
239.          Text('全选').fontColor(Color.Gray).fontSize(12)
240.      //总价
241.          Text(){
242.            Span('总价: ').fontColor(Color.Black).fontSize(12).fontWeight(FontWeight.Bold)
244.            Span('qwqqeqeqeq').fontColor($r('app.color.focus_color')).fontSize(12)
246.            Span('元').fontColor(Color.Black).fontSize(12).fontWeight(FontWeight.Bold)
248.            Span('12节').fontColor(Color.Black).fontSize(12).fontWeight(FontWeight.Bold)
249.          }.margin({left:20})
250.          .textAlign(TextAlign.Start)
251.        }
252.        .margin({left:10})
253.        .height('100%')
257.        //立即结算
258.        Button('立即结算').margin({right:10}).width(80).height(35).fontSize(12).backgroundColor($r('app.color.focus_color')).onClick(()=>{
260.        })
261.      }.width('100%')
262.     .height('50vp')
263.     .backgroundColor(Color.White)
264.   }
265. }
266. 购物车的代码，以及所有的代码点击加减事件结算

复制代码

这是整体的代码，数量加减和多选删除以及结算
欢迎各人一起讨论，修改和增补代码中的不敷之处

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。