鸿蒙购物体系——首页、分类、购物车、我的

本次期末计划的购物软件是使用ArkTS语言所写的。
该软件主要是由四个部门组成，分别是

---

首页：

首页界面是将数据库中的全部内容举行展示，列表中的每一条数据都可举行点击事件并将该条数据的具体内容举行展示（顶部的搜索框临时只可以或许举行页面的跳转功能，无法举行对商品的搜索，还在优化中）。

分类：

在此页面中是将数据库中的内容举行分类展示

购物车：

在商品具体界面可以将商品加入到购物车中。在购物车界面中可以将页面中的商品一键清空。（临时因为能力有限尚未实现合计以及付出功能，在未来会进一步的完善此功能）

我的：

在这个界面中，昵称可以根据差异用户登录的账号举行改变。在中心的列表中仅仅只有修改密码，观看视频和退出登录、商铺列表是可以举行点击事件，其他图标只是做了静态页面。

---

以下是具体使用到的一些代码：
框架：

1. struct Index {
2.   @State currentIndex: number = 0;   //表示索引页
3.   private tabsController: TabsController = new TabsController();
5.   @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
6.     Column() {...}
7.     .width('100%')
8.     .height(50)
9.     .justifyContent(FlexAlign.Center)
10.     .onClick(() => {...})
11.   }
13.   build() {
14.     Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
15.       TabContent() {
16.         Page1()
17.       }
18.       .tabBar(this.TabBuilder('首页', 0, $r('app.media.shouyedianji'), $r('app.media.shouye')))
20.       TabContent(){
21.         Column(){...}
22.           .barMode(BarMode.Scrollable)
23.         }
24.         .width('100%')
25.       }
26.       .tabBar(this.TabBuilder('分类', 1, $r('app.media.fenleidianji'), $r('app.media.fenlei')))
28.       TabContent() {
29.         Gouwuche()
30.       }
31.       .tabBar(this.TabBuilder('购物车', 2, $r('app.media.gouwuchedianji'), $r('app.media.gouwuche')))
33.       TabContent() {
34.         wode()
35.       }
36.       .tabBar(this.TabBuilder('我的', 3, $r('app.media.mydianji'), $r('app.media.my')))
38.     }
39.     .scrollable(false)
40.     .barWidth('100%')
41.     .barHeight(50)
42.     .onChange((index: number) => {
43.       this.currentIndex = index;
44.     })
45.   }
46.   // 转场动画使用系统提供的多种默认效果(平移、缩放、透明度等)
47.   pageTransition() {...}
48.   }

复制代码

我的：

1. struct wode{
2.   @State message: Users = router.getParams()?.['data']
3.   @Builder OrderItem(icon: Resource, name: string) {
4.     Column() {
5.       Image(icon).width(30).height(30)
6.       Text(name).margin({ top: 3 }).fontSize(11)
7.     }.layoutWeight(1)
8.   }
10.   @Builder MyItem(icon: Resource, name: string, isShowLine = true) {
11.     Column() {
12.       Row() {
13.         Image(icon).width(20).height(20)
14.         Text(name).fontSize(14).margin({ left: 10 })
15.         Blank()
16.         Image($r('app.media.arrow')).width(12).height(18)
17.       }.width('100%').padding(15)
19.       if (isShowLine) {
20.         Divider().color('#e3e2e2').margin({ left: 15, right: 15 })
21.       }
22.     }
23.   }
25.   @Builder MyItem1(icon: Resource, name: string, isShowLine = true) {
26.     Column() {
27.       Row() {
28.         Image(icon).width(20).height(20)
29.         Text(name).fontSize(14).margin({ left: 10 })
30.         Blank()
31.         Image($r('app.media.arrow')).width(12).height(18)
32.       }
33.       .width('100%')
34.       .padding(15)
36.       if (isShowLine) {
37.         Divider().color('#e3e2e2').margin({ left: 15, right: 15 })
38.       }
39.     }
40.     .onClick(() => {
41.       router.pushUrl({
42.         url: 'pages/XiugaiXinxi',
43.       })
44.     })
45.   }
47.   @Builder MyItem2(icon: Resource, name: string, isShowLine = true) {
48.     Column() {
49.       Row() {
50.         Image(icon).width(20).height(20)
51.         Text(name).fontSize(14).margin({ left: 10 })
52.         Blank()
53.         Image($r('app.media.arrow')).width(12).height(18)
54.       }
55.       .width('100%')
56.       .padding(15)
58.       if (isShowLine) {
59.         Divider().color('#e3e2e2').margin({ left: 15, right: 15 })
60.       }
61.     }
62.     .onClick(() => {
63.       router.pushUrl({
64.         url: 'pages/login',
65.       })
66.     })
67.   }
69.   @Builder MyItem3(icon: Resource, name: string, isShowLine = true) {
70.     Column() {
71.       Row() {
72.         Image(icon).width(20).height(20)
73.         Text(name).fontSize(14).margin({ left: 10 })
74.         Blank()
75.         Image($r('app.media.arrow')).width(12).height(18)
76.       }
77.       .width('100%')
78.       .padding(15)
80.       if (isShowLine) {
81.         Divider().color('#e3e2e2').margin({ left: 15, right: 15 })
82.       }
83.     }
84.     .onClick(() => {
85.       router.pushUrl({
86.         url: 'pages/dianpulist',
87.       })
88.     })
89.   }
91.   @Builder MyItem4(icon: Resource, name: string, isShowLine = true) {
92.     Column() {
93.       Row() {
94.         Image(icon).width(20).height(20)
95.         Text(name).fontSize(14).margin({ left: 10 })
96.         Blank()
97.         Image($r('app.media.arrow')).width(12).height(18)
98.       }
99.       .width('100%')
100.       .padding(15)
102.       if (isShowLine) {
103.         Divider().color('#e3e2e2').margin({ left: 15, right: 15 })
104.       }
105.     }
106.     .onClick(() => {
107.       router.pushUrl({
108.         url: 'pages/view',
109.       })
110.     })
111.   }
113.   build(){
114.     //   标题部分
115.     Column(){
116.       Row(){
117.         Row({space:10}) {
118.           Image($r('app.media.xiamuAPP'))
119.             .width(80)
120.             .height(80)
121.             .borderRadius(50) // 添加圆弧效果
122.             .borderWidth(1)
123.             .margin({right:5})
124.           Blank()
125.           Column() {
126.             Text('昵称：' + globalThis.name)
127.               .margin({ left: 20 })
128.               .fontColor('#ff4e4949')
129.               .fontSize(30)
130.             Row() {
131.               Image($r('app.media.vip')).width(20).height(15)
132.               Text('会员VIII级').fontSize(20).fontColor('#fff4c42c')
133.             }
134.           }.margin({top:3})
135.           Blank()
136.           Image($r('app.media.arrow')).width(25).height(25)
137.           Blank()
138.         }
139.         .margin({top:30,left:50})
140.       }
141.       .width('100%')
142.       .height(200)
143.       .justifyContent(FlexAlign.Center)
144.       .backgroundImage('image/beijing.jpg')
145.       .backgroundImageSize(ImageSize.Cover)
147.       Column() {
148.         Row() {
149.           this.OrderItem($r('app.media.dfk'), '待付款')
150.           this.OrderItem($r('app.media.dfh'), '待发货')
151.           this.OrderItem($r('app.media.dsh'), '待收货')
152.           this.OrderItem($r('app.media.dpj'), '待评价')
153.           this.OrderItem($r('app.media.tksh'), '退款/售后')
154.         }.width('100%').backgroundColor(Color.White)
155.         .borderRadius(10).padding({ top: 20, bottom: 20 })
157.         Column() {
158.           this.MyItem($r('app.media.qbdd'), '全部订单')
159.           this.MyItem($r('app.media.dzgl'), '收货地址');
160.           this.MyItem($r('app.media.wdsc'), '收藏管理');
161.           this.MyItem3($r('app.media.spgl'), '商铺列表');
162.           this.MyItem($r('app.media.yjfk'), '意见反馈');
163.           this.MyItem4($r('app.media.video'), '精选视频');
164.           this.MyItem1($r('app.media.xiugaixinxi'), '修改密码');
165.           this.MyItem2($r('app.media.tuichudenglu'), '退出登录', false);
166.         }
167.         .width('100%')
168.         .backgroundColor(Color.White)
169.         .borderRadius(10)
170.         .margin({ top: 10 })
171.         .padding({ top: 20, bottom: 20 })
172.       }.width('100%').padding(10)
173.     }
174.     .alignItems(HorizontalAlign.Start)
175.     .width('100%')
176.     .height('100%')
177.   }
178. }

复制代码

具体代码如下连接:
https://gitee.com/diligence---pass-every-exam/harmony-os.git
欢迎各人一起讨论，修改和增补代码中的不敷之处↖(^ω^)↗

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