HarmonyOS NEXT开发模板分享–餐饮行业模板一、整体演示二、功能介绍首页菜品推荐**：首页将个性化地展

一、整体演示

二、功能介绍

首页菜品推荐**：首页将个性化地展示最符合用户需求的菜品和推荐菜品活动

编辑

点餐功能：

一. 选择菜单

系统默认显示当天招牌菜品，用户也可点击左边侧边栏选择菜品类型查看菜品。

用户点击所需餐别后的“+”或“-”号来增加或减少订餐份数，支持多种类型餐品预定，选择规格等操作。选择完菜品后支持本地存储，加入购物车，下次进入点餐页面依旧可以看到之前点的菜品

二、确认订单

菜品选择完成后，点击底部导航栏最右边的【去结算】”按钮。

进入确认订餐界面后，核对订餐信息，如需取消某个菜品或全部菜品，可点击对应按钮操作。

3. 送餐功能

用户可选择是否勾选送餐功能，勾选后将按照填写的地址送餐。确认订单信息，在确认订餐界面，用户需再次核对订单信息，包括菜品、数量、送餐地址等。可以选择堂食自提或者配送到家，确认无误后，点击确认按钮提交订单

查看费用，结算页面显示订单总金额，用户可查看各菜品价格及数量。选择支付方式：提供多种支付方式供用户选择，如在线支付、货到付款等。用户可点击支付按钮，进入支付界面完成支付操作。

支付操作-点击【提交订单】用户在支付界面确认是否支付，完成支付。支付成功提示，支付成功后，系统将显示支付成功提示，并自动跳转至订单页面。

4. 订单

待支付订单：用户可在“待支付”页面查看所有未支付的订单，可以点击【继续支付】并进行支付操作,也可以【取消支付】。

已支付订单：订单支付成功后，将显示在“已支付”页面。用户可查看订单详情，包括订单编号、下单时间、配送地址等，自提则显示自提码

已取消订单：用户取消的订单将显示在“已取消”页面。用户可查看已取消订单的详细信息。

5. 售后服务（已完成的订单才有售后页面）

进入售后页面，用户可在“我的订单”页面-点击进入详情页面，点击对应订单后的【售后】按钮，进入售后页面。选择售后类型，在售后页面，用户需先选择售后类型，如申请退款、投诉等。填写售后内容，根据所选售后类型，填写具体的售后内容，如退款原因、投诉详情等。提交售后申请，填写完毕后，点击【提交申请】按钮，提交售后申请。等待客服处理，提交后，耐心等待客服人员处理，客服将在规定时间内回复用户。

我的页面

点击左上角头像可退出登录，点击【储值有礼】可进行金额充值，我的订单点击可跳转相应的页面，我的服务模块分别能跳转到指定的页面

编辑

三、行业关键技术方案

保存购物车的缓存处理：

目标：上次加入购物车的未计算菜品，第二次打开可以在购物车显示出来

使用到的相关技术：
preference 持久化存储

相关代码：


import preferences from '@ohos.data.preferences'
import common from '@ohos.app.ability.common'
import Logger from '../../viewModel/Logger'

private async saveCartData() {
    try {
      const context: common.Context = getContext(this) as common.Context;
      const prefs: preferences.Preferences = await preferences.getPreferences(context, 'cartStorage');

      // 将购物车数据转换为可存储的格式
      const cartData: GeneratedObjectLiteralInterface_1 = {
        cartItems: Array.from(this.cartItems.entries()),
        itemCount: Array.from(this.itemCount.entries()),
        categoryCount: Array.from(this.categoryCount.entries())
      }

      // 存储数据
      await prefs.put('cartData', JSON.stringify(cartData))
      await prefs.flush()
    } catch (error) {
      console.error('保存购物车数据失败:', error)
    }
  }
private async loadCartData() {
    try {
      const context: common.Context = getContext(this) as common.Context;
      const prefs: preferences.Preferences = await preferences.getPreferences(context, 'cartStorage');

      const cartDataStr: string | undefined = await prefs.get('cartData', '') as string;
      Logger.info(TAG, `从存储读取的数据: ${cartDataStr}`)

      if (cartDataStr) {
        const cartData: CartDataType = JSON.parse(cartDataStr);

        // 恢复购物车数据
        this.cartItems = new Map<string, CartItem>(cartData.cartItems);
        this.itemCount = new Map<string, number>(cartData.itemCount);
        this.categoryCount = new Map<string, number>(cartData.categoryCount);

        this.updateTotal();
        Logger.info(TAG, `数据恢复完成，购物车数: ${JSON.stringify(Array.from(this.cartItems.entries()))}`)
      }
    } catch (error) {
      Logger.error(TAG, `加载购物车数据失败: ${error}`);
    }
  }

aboutToAppear() {

    // 异步等待加载完成
    this.loadCartData().then(() => {
      Logger.info(TAG, `购物车数据加载完成: ${JSON.stringify(Array.from(this.cartItems.entries()))}`)
    })
  }