3. 页面索引变化处理
当页面索引发生变化时,调用 chooseRefresh
函数,确保必要信息的选择提示正常显示。
typescript
currentIndexChange() {
if (this.currentIndex === TabBarType.HOMEPAGE) {
this.chooseRefresh()
}
}
4. 页面构建与组件使用
在页面构建过程中,使用了多个自定义组件,如 TitleComp
、ContainerComp
等,并根据条件显示购物车、优惠活动等组件。
typescript
build() {
NavDestination() {
Stack() {
Column() {
TitleComp()
ContainerComp().layoutWeight(1)
}
.height(Constants.FULL_SIZE)
.width(Constants.FULL_SIZE)
.bindSheet($$this.tableSheetShow,
CustomSelectSheetBuilder($r('app.string.pick_table'), this.tableList.map((item) => {
return item.name ?? '';
}), (select: ResourceStr) => {
this.confirmTable(select);
}), {
height: 408,
blurStyle: BlurStyle.Thick,
showClose: false,
});
MyCarListComp({
close: () => {
this.showCarList = false
},
}).visibility(this.showCarList ? Visibility.Visible : Visibility.Hidden)
// 购物车
MyCarComp({ showCarList: this.showCarList })
.visibility(this.myCar.res?.length ? Visibility.Visible : Visibility.Hidden)
// 优惠活动
ShopDiscountComp().visibility(this.showShopDiscount ? Visibility.Visible : Visibility.Hidden)
}.alignContent(Alignment.Bottom)
.bindSheet($$this.dinerSheetShow,
CustomSelectSheetBuilder($r('app.string.pick_dinner_num'), $r('app.strarray.diner_num'),
(select: ResourceStr) => {
this.confirmDiner(select);
}), {
height: 408,
blurStyle: BlurStyle.Thick,
showClose: false,
});
}
.hideTitleBar(true)
}
5. 选择桌号和用餐人数的确认处理
当用户选择桌号或用餐人数后,进行相应的信息更新和处理。
typescript
confirmTable(select: ResourceStr) {
if (select) {
let table = this.tableList.find(item => item.name === select)
this.tableId = table?.id ?? '';
getTableInfoUtil(this.tableId).then((res) => {
this.tableInfo = res;
});
}
this.tableSheetShow = false
if (!this.dinerNum) {
this.dinerSheetShow = true
}
}
confirmDiner(select: ResourceStr) {
if (select) {
this.dinerNum = select;
} else {
this.dinerNum = this.dinerNum || $r('app.string.diner_num_default');
}
this.dinerSheetShow = false
}
通过以上核心功能的实现,在HarmonyOS 5应用中成功开发了订单页面,为用户提供了便捷的商品选择和订单处理体验。