8.1 开发前准备

8.1.1 项目展示

点餐系统效果图展示：

8.1.2 项目分析

订餐系统任务需求：

• 底部标签导航切换。
• 在“首页” 单击“开启点餐之旅”，跳转到菜单列表界面。
• 在菜单列表页面中，单击“+”把所选商品加入购物车。
• 如果购物车中商品数量为0时，单击购物车图标不会展开购物车列表，如果不为0时，单击购物车，可以操作购物车。
• 在“订单列表”界面，查看订单状态，显示是否取餐。
• “消费记录”界面显示历史订单消费记录信息。

8.1.3 项目初始化

8.1.4 封装网络请求

为什么要封装网络请求？

• 本项目采用的网络请求的方式来获取数据。
• 小程序官方文档提供了网络请求API，传递参数，对不同请求做不同处理。
• 请求接口中有部分请求参数以及响应结果处理都很类似。

8.2 【任务1】商家首页

8.2.1 任务分析

首页内容任务分析：

• 顶部商品的滑块容器区域。
• 中间部分新品推送区域。
• 底部商品列表展示区域。
• 当进入到首页时开始请求接口，此时会出现弹窗，提示努力加载中；请求成功后，关闭弹窗，获取数据渲染首页。

8.2.2 焦点图切换

在首页顶部区域，设置了焦点图切换的效果，图片资源通过请求接口获取数据。焦点图区域的布局：

8.2.3 中间区域单击跳转到菜单列表

首页中间部分展示了手机点餐的推广banner图，单击“开启订餐之旅”跳转到菜单列表，引导顾客进行点餐，中间区域的布局：

8.2.4 底部商品展示

底部区域的布局：

8.3 【任务2】菜单列表

8.3.1 任务分析

菜单列表任务分析：

• 顶部折扣信息区域。
• 左侧菜单栏区域。
• 右侧单品列表区域。
• 菜单栏和单品间实现单击联动效果。

8.3.2 折扣信息区

展示商家的折扣活动信息或店铺优惠信息，折扣信息区页面结构布局：

8.3.3 设计菜单列表布局

pages/list/list.wxml文件，左侧菜单列表页面结构布局：

pages/list/list.wxml文件，右侧菜单列表页面结构布局：

8.3.4 请求数据

8.3.5 实现菜单栏联动单品列表功能

8.4 【任务3】购物车

8.4.1 任务分析

购物车任务分析：

• 当购物车里商品数量为0时，购物车图标为灰色，处于不可单击状态。
• 当商品数量不为0时，在购物车图标的右上角显示商品数量，图标变为可单击状态。
• 单击购物车可以展开里面的商品，此时可以添加或者减少商品数量，动态计算总金额。
• 单击清空购物车，商品数量和商品总价都变为0，购物车图标切换到灰色，此时不可单击

8.4.2 设计底部购物车区域

菜单列表页面数据请求成功后，loading值设为true，显示底部购物车区域。当购物车里商品数量为0时，购物车图标为灰色，处于不可单击状态

8.4.3 添加商品到购物车

单击图标“+”，把商品添加到购物车。

8.4.4 购物车界面

8.4.5 增加商品数量

8.4.6 减少商品数量

8.4.7 清空购物车

8.4.8 满减优惠

总价等于0，并且loading为真，显示“满25立减3元(手机点餐专享)”。总价小于25元，并且总价不等于0，且loading为真，显示 “满25立减3元,还差{{25-总计}}元,去凑单。

8.4.9 跳转到订单确认页面

8.5 【任务4】订单确认

8.5.1 任务分析

订单确认页面任务分析：

• 请求商品订单接口。
• 获取到接口数据，渲染页面。

8.5.2 订单信息

8.5.3 备注功能实现

8.5.4 支付功能

8.5.5 支付成功返回订单列表

8.6 【任务5】订单详情

8.6.1 任务分析

订单详情页面任务分析：

• 支付成功之后跳转到订单详情页面pages/order/detail/detail.wxml。
• 发起网络请求，获取订单信息。
• 信息包括取餐号、订单信息、订单号码、订单时间等。

8.6.2 取餐部分信息展示

8.6.3 订单详情部分

8.6.4 订单信息部分

8.7 【任务6】订单列表

8.7.1 任务分析

订单列表页面任务分析：

• pages/order/list/list.wxml文件为tabBar页面，两种打开方式。
• 直接切换底部标签导航进入订单页面，此时不执行页面刷新。
• 在订单支付成功之后，单击左上角返回也可以回到订单列表页面，此时需要执行页面刷新。

8.7.2 订单列表设计

8.7.3 封装数据请求

8.7.4 初始化页面

8.7.5 下拉刷新功能

8.7.6 上拉触底功能

8.8 【任务7】消费记录

8.8.1 任务分析

消费记录页面任务分析：

• pages/record/record.wxml文件为tabBar页面
• 发起网络请求，获取消费记录信息。
• 展示用户的个人历史订单信息。
• 包括用户的下单时间、商品总价钱。

8.8.2 设计消费记录列表

总结

点餐系统小程序主要完成底部标签导航的设计、幻灯片轮播效果设计、菜单列表的效果显示、购物车功能实现、订单详情页面设计、订单列表设计、消费记录页面的设计。通过对本章的学习，读者需要重点掌握如何设计一个完整的小程序项目，熟悉项目的开发流程，学会如何在开发中运用所学技术解决实际问题。