利用鸿蒙HarmonyOs NEXT 开发 快速开发 简朴的购物车页面 ...

目次

资源准备：需要准备三张照片：商品图、向下图标、款项图标
1.表现效果：
2.源码：

---

资源准备：需要准备三张照片：商品图、向下图标、款项图标

1.表现效果：

定义了一个购物车页面的结构，包括以下几个部分：
1. 每个商品都有一个复选框来表现选择状态，一个图片来展示商品，以及商品形貌、规格、标签和价格。
2. 用户可以通过点击减号或加号来调解商品数量。
3. 表现已选商品数量和总金额，以及一个结算按钮。
在每个商品行中，当用户点击复选框时，会更新商品的选择状态、总金额和总选中商品数量。当用户调解商品数量时，也会相应地更新总金额。
在结算行中，表现了用户已选择的商品数量和总金额。
请留意，这个代码示例是一个简化的版本，实际应用中可能需要更多的逻辑来处理全选功能、商品数量的限定、价格盘算等。此外，您可能还需要与后端服务交互来更新购物车的状态。
2.源码：

1. @Entry
2. @Component
3. struct Index {
4.   @State pantValue:number = 69.98 // 商品单价
5.   @State amount:number = 0 // 总金额
6.   @State count:number = 1 // 商品数量
7.   @State selectPant:boolean = false // 商品是否选中
8.   @State totalCount:number = 0 // 总选中商品数量
10.   build() {
11.     // 整个页面的垂直布局
12.     Column(){
13.       // 商品行的布局
14.       Row({space:5}){
15.         // 商品选择复选框
16.         Checkbox()
17.           .width(15)
18.           .onClick(()=>{
19.             // 当复选框点击时，更新金额和选中状态
20.             if(!this.selectPant){
21.               this.amount += this.count * this.pantValue
22.               this.selectPant = true
23.               this.totalCount +=1
24.             }else{
25.               this.amount -= this.count * this.pantValue
26.               this.selectPant = false
27.               this.totalCount -=1
28.             }
29.           })
31.         // 商品图片的布局
32.         Column(){
33.           Image($r('app.media.shop_pant'))
34.             .width(80)
35.             .borderRadius(10)
36.             .backgroundColor(Color.Brown)
37.         }.height('100%')
39.         // 商品描述的布局
40.         Column(){
41.           // 商品名称
42.           Row(){
43.             Text(){
44.               Span('开学季 ')
45.                 .fontColor(Color.Red)
46.                 .fontSize(20)
47.               Span('三条杠运动卫裤男春秋百搭宽松裤')
48.             }
49.             .textOverflow({overflow:TextOverflow.Clip})
50.             .maxLines(1)
51.           }
53.           // 商品规格
54.           Text('S668黑色,XL[码(对应32-33)]')
55.             .textOverflow({overflow:TextOverflow.Clip})
56.             .maxLines(1)
58.           // 商品标签
59.           Flex({
60.             direction:FlexDirection.Row,
61.             wrap:FlexWrap.Wrap
62.           }){
63.             Text('每200减20')
64.               .margin({right:5})
65.               .fontColor('#fff16706')
66.             Text('假一赔四')
67.               .fontColor('#fff16706')
68.             Text('极速退款')
69.               .fontColor('#fff16706')
70.           }
71.           .padding(3)
72.           .width('100%')
74.           // 商品价格
75.           Row({space:5}){
76.             Image($r('app.media.money'))
77.               .width(16)
78.               .fillColor('#e6f51905')
79.             Text(){
80.               Span(this.pantValue.toFixed(2).split('.')[0].toString())
81.                 .fontSize(24)
82.               Span('.')
83.                 .fontSize(24)
84.               Span(this.pantValue.toFixed(2).split('.')[1].toString())
85.                 .fontSize(18)
86.             }
87.             .fontColor('#e6f51905')
89.           }.width('100%')
93.         }.layoutWeight(1)
94.         .height('100%')
96.         // 商品数量调整的布局
97.         Column(){
98.           Row({space:5}){
99.             // 减少商品数量的按钮
100.             Text('-')
101.               .fontSize(25)
102.               .border({
103.                 width:{top:1,left:1,bottom:1},
104.                 style:BorderStyle.Dotted
105.               })
106.               .borderRadius({
107.                 topLeft:10,
108.                 bottomLeft:10
109.               }).padding({left:3,right:3})
110.               .onClick(()=>{
111.                 // 减少商品数量，并更新金额
112.                 if(this.count >1){
113.                   this.count -= 1
114.                   if (this.selectPant) {
115.                     this.amount -= this.pantValue
116.                   }
118.                 }else{
119.                   AlertDialog.show({message:'商品数量至少为1哦！'})
120.                 }
122.               })
124.             // 显示商品数量的文本
125.             Text(this.count.toString())
126.               .fontSize(25)
127.               .border({
128.                 width:1,
129.                 style:BorderStyle.Dotted
130.               }).padding({left:3,right:3})
132.             // 增加商品数量的按钮
133.             Text('+')
134.               .fontSize(25)
135.               .border({
136.                 width:{top:1,right:1,bottom:1},
137.                 style:BorderStyle.Dotted
138.               })
139.               .borderRadius({
140.                 topRight:10,
141.                 bottomRight:10
142.               })
143.               .padding({left:3,right:3})
144.               .onClick(()=>{
145.                 // 增加商品数量，并更新金额
146.                 this.count += 1
147.                 if (this.selectPant) {
148.                   this.amount += this.pantValue
149.                 }
151.               })
153.           }
155.           // 下拉箭头图标
156.           Image($r('app.media.ic_public_arrow_down_0'))
157.             .width(20)
158.         }
159.         .height('100%')
160.         .alignItems(HorizontalAlign.Start)
162.       }
163.       .height(130)
164.       .padding(5)
165.       .width('100%')
166.       .backgroundColor(Color.White)
168.       // 占位符，用于在布局中创建空间
169.       Blank()
171.       // 结算行的布局
172.       Row(){
173.         // 全选复选框和文本
174.         Row({space:5}){
175.           Checkbox()
176.             .width(14)
177.           Text('全选')
178.             .fontSize(16)
179.         }
181.         // 占位符，用于在布局中创建空间
182.         Blank()
184.         // 结算信息布局
185.         Row(){
186.           // 显示已选商品数量和总金额
187.           Text('已选'+this.totalCount+'件 ')
188.             .fontColor(Color.Gray)
189.             .fontSize(14)
190.           Text('合计: ')
191.             .fontSize(14)
192.           Image($r('app.media.money'))
193.             .width(12)
194.             .fillColor('#e6f51905')
195.           Text(){
196.             Span(this.amount.toFixed(2).split('.')[0].toString())
197.               .fontSize(26)
198.             Span('.')
199.               .fontSize(26)
200.             Span(this.amount.toFixed(2).split('.')[1].toString())
201.               .fontSize(18)
202.           }
203.           .fontColor('#e6f51905')
205.         }.margin({left:10})
207.         // 结算按钮
208.         Button('结算')
209.           .width(100)
210.           .height(50)
211.           .backgroundColor('#ffff4801')
212.           .margin({left:10})
214.       }
215.       .padding(10)
216.       .height(100)
217.       .width('100%')
218.       .backgroundColor(Color.White)
219.       .borderRadius({
220.         topLeft:25,
221.         topRight:25
222.       })
224.     }
225.     .height('100%')
226.     .width('100%')
227.     .backgroundColor('#fff3f1f1')
228.   }
229. }

复制代码

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